|
| 1 | +# Terminal Portfolio Template |
| 2 | + |
| 3 | +**Sprache:** [English](README.md) | [한국어](README.ko.md) | [Deutsch](README.de.md) | [中文](README.zh-CN.md) | [Türkçe](README.tr.md) |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +Dies ist eine kleine **Terminal-artige persönliche Homepage**. Sie besteht aus einer einfachen statischen Seite: nur HTML, CSS und JavaScript. |
| 8 | + |
| 9 | +Sie können dieses Repository als **Vorlage** für Ihre eigene Seite verwenden, indem Sie entweder einige Konfigurationswerte bearbeiten oder den eingebauten **Config Generator** nutzen. |
| 10 | + |
| 11 | +<img width="1036" height="850" alt="image" src="https://github.com/user-attachments/assets/9d5c85f8-6b2d-438e-ac22-3578dbbbefc2" /> |
| 12 | + |
| 13 | +Erstellt von [**PythonToGo**](https://github.com/PythonToGo). |
| 14 | + |
| 15 | +## Projektstruktur |
| 16 | + |
| 17 | +``` |
| 18 | +. |
| 19 | +├── index.html # Haupt-Terminalseite |
| 20 | +├── terminal-config.js # Benutzerkonfiguration (generiert, optional) |
| 21 | +├── js/ |
| 22 | +│ ├── main.js # Befehlsverarbeitung, UI-Logik |
| 23 | +│ ├── commands.js # Konfigurationswerte, Inhaltsarrays, Befehlsliste |
| 24 | +│ ├── ascii_banner.js # ASCII-Banner-Schriften und -Rendering |
| 25 | +│ ├── github.js # GitHub API – lädt Repos für Projekte |
| 26 | +│ └── caret.js # Tipp-Simulation, Cursor |
| 27 | +├── css/ |
| 28 | +│ ├── style_lila.css # Standard-Theme |
| 29 | +│ ├── style_midnight.css |
| 30 | +│ ├── style_chocolate.css |
| 31 | +│ ├── style_og.css # original |
| 32 | +│ ├── style_rainbow.css |
| 33 | +│ ├── style_orange.css |
| 34 | +│ ├── style_olive.css |
| 35 | +│ └── style_bluescreen.css |
| 36 | +└── generator/ |
| 37 | + ├── index.html # Config-Generator-Formular |
| 38 | + ├── main.js # Formularlogik, Config-Erstellung |
| 39 | + └── style.css # Generator-Styles |
| 40 | +``` |
| 41 | + |
| 42 | +## Schnellstart |
| 43 | + |
| 44 | +1. Repository klonen oder als GitHub-Vorlage verwenden. |
| 45 | +2. `index.html` im Browser öffnen, um das Terminal zu sehen. |
| 46 | +3. Anpassen auf eine von zwei Arten: |
| 47 | + - **Option A – `js/commands.js` direkt bearbeiten** ODER |
| 48 | + - **Option B – Generator verwenden, um `terminal-config.js` zu erstellen** (schnelle Einrichtung: [**Zum Config Generator**](https://pythontogo.github.io/terminal-portfolio-template/generator/) ). |
| 49 | + |
| 50 | +## Option A – manuelle Konfiguration |
| 51 | + |
| 52 | +`js/commands.js` öffnen und die Werte oben bearbeiten: |
| 53 | + |
| 54 | +- `GITHUB_USERNAME`, `EMAIL_ADDRESS` |
| 55 | +- `linkedin`, `github`, `blog` (leer = in Links ausgeblendet) |
| 56 | +- `linksOthers` – benutzerdefinierte Links `{ "twitter": { name: "Twitter", url: "..." } }` |
| 57 | +- `CLAUDE_OWNER_NAME` (aus `profile.name`) |
| 58 | +- `about`, `links`, `projects`, `help`, `welcomeMsg`, `banner` |
| 59 | +- `themes` – Theme-Name → CSS-Pfad |
| 60 | +- `allCommands` – Tab-Vervollständigungsliste |
| 61 | + |
| 62 | +> Dies ist der einfachste Modus und erfordert keinen Build-Schritt. |
| 63 | +
|
| 64 | +## Option B – Generator verwenden (empfohlen) |
| 65 | + |
| 66 | +`generator/index.html` im Browser öffnen (oder den gehosteten Generator). |
| 67 | + |
| 68 | +### Generator-Formularbereiche |
| 69 | + |
| 70 | +| Bereich | Felder | |
| 71 | +|---------|--------| |
| 72 | +| **Profile** | Vollständiger Name, E-Mail, GitHub-Benutzername, Blog-Titel, Intro/About-Text (optional) | |
| 73 | +| **Links** | GitHub-URL, LinkedIn-URL (optional), Blog-URL (optional), Andere (optional: `Name` und `URL` pro Zeile, getrennt durch `\|`) | |
| 74 | +| **Theme** | Standard-Theme | |
| 75 | +| **Banner** | Banner-Text, Banner-Schriftstil (block, dotted, light, minimal, shadow), Live-Vorschau | |
| 76 | + |
| 77 | +### Config-Ausgabe |
| 78 | + |
| 79 | +Der Generator erzeugt `window.TERMINAL_CONFIG` mit: |
| 80 | + |
| 81 | +```js |
| 82 | +{ |
| 83 | + profile: { name, email, githubUsername, blogTitle }, |
| 84 | + links: { github, linkedin?, blog?, others? }, |
| 85 | + theme: { defaultTheme, bannerText, bannerFont }, |
| 86 | + content: { aboutLines? } |
| 87 | +} |
| 88 | +``` |
| 89 | +
|
| 90 | +### Verwendung der Config |
| 91 | +
|
| 92 | +| Config-Pfad | Verwendung | |
| 93 | +|-------------|------------| |
| 94 | +| `profile.name` | Banner-Text (wenn `theme.bannerText` leer), Prompt, About-Fallback, `CLAUDE_OWNER_NAME` | |
| 95 | +| `profile.email` | `email`-Befehl | |
| 96 | +| `profile.githubUsername` | GitHub-Link, Projekte-Repo-Liste | |
| 97 | +| `links.github` | `links`-Tabelle, `github`-Befehl | |
| 98 | +| `links.linkedin` | `links`-Tabelle, `linkedin`-Befehl (optional – ausgeblendet wenn leer) | |
| 99 | +| `links.blog` | `links`-Tabelle (optional – ausgeblendet wenn leer) | |
| 100 | +| `links.others` | `links`-Tabelle + benutzerdefinierte Befehle (z.B. `Twitter` → `twitter` eingeben) | |
| 101 | +| `theme.defaultTheme` | Initiales Theme beim Laden | |
| 102 | +| `theme.bannerText` | ASCII-Banner-Text | |
| 103 | +| `theme.bannerFont` | Banner-Stil: block, dotted, light, minimal, shadow | |
| 104 | +| `content.aboutLines` | `about`-Befehl-Inhalt (optional – Fallback: "Hi there, I am {Full Name}") | |
| 105 | +
|
| 106 | +## Verfügbare Befehle |
| 107 | +
|
| 108 | +| Befehl | Beschreibung | |
| 109 | +|--------|---------------| |
| 110 | +| `help` | Befehlsliste | |
| 111 | +| `about` | Intro/About-Text | |
| 112 | +| `links` | GitHub, LinkedIn, Blog, benutzerdefinierte Links | |
| 113 | +| `projects` | GitHub-Repos (über API) | |
| 114 | +| `email` | Mailto öffnen | |
| 115 | +| `linkedin`, `github` | URLs öffnen (linkedin ausgeblendet wenn nicht konfiguriert) | |
| 116 | +| `theme ls` | Themes auflisten | |
| 117 | +| `theme set <name>` | Theme setzen | |
| 118 | +| `theme random` | Zufälliges Theme | |
| 119 | +| `banner` | ASCII-Banner anzeigen | |
| 120 | +| `clear` | Terminal leeren | |
| 121 | +| `history` | Befehlsverlauf | |
| 122 | +| `echo <text>` | Text ausgeben | |
| 123 | +| `ping <host>` | Fake-Ping | |
| 124 | +| `explain`, `run`, `edit` | Claude-artige Easter Eggs | |
| 125 | +| `ls`, `cd` | Fake-Dateiliste | |
| 126 | +| `vi`, `vim`, `nvim`, `emacs` | Editor-Witze | |
| 127 | +| `sudo` | Berechtigung verweigert + Easter Egg | |
| 128 | +
|
| 129 | +Benutzerdefinierte Links aus `links.others` werden zu Befehlen (z.B. `Twitter|https://...` → `twitter` eingeben). |
| 130 | + |
| 131 | +## Themes |
| 132 | + |
| 133 | +- `lila` (Standard), `midnight`, `chocolate`, `og` (original), `rainbow`, `orange`, `olive`, `bluescreen` |
| 134 | + |
| 135 | +## ASCII-Banner |
| 136 | + |
| 137 | +- **Schriftstile**: block, dotted, light, minimal, shadow |
| 138 | +- **Text**: Groß- und Kleinbuchstaben unterstützt |
| 139 | +- **Config**: `theme.bannerText` (oder `profile.name`), `theme.bannerFont` |
| 140 | + |
| 141 | +## Skript-Ladereihenfolge (`index.html`) |
| 142 | + |
| 143 | +1. `terminal-config.js` (optional) |
| 144 | +2. `js/github.js` |
| 145 | +3. `js/caret.js` |
| 146 | +4. `js/ascii_banner.js` |
| 147 | +5. `js/commands.js` |
| 148 | +6. `js/main.js` |
| 149 | + |
| 150 | +## Entwicklungshinweise |
| 151 | + |
| 152 | +- Keine Build-Tools; reines HTML/CSS/JS. |
| 153 | +- Lokal testen: `index.html` öffnen oder Ordner mit statischem Server bereitstellen. |
| 154 | +- GitHub Pages funktioniert sofort. |
| 155 | + |
| 156 | +### Beispiel-GitHub-Actions-Workflow (GitHub Pages) |
| 157 | + |
| 158 | +1. `.github/workflows/` erstellen |
| 159 | +2. `pages.yml` hinzufügen: |
| 160 | + |
| 161 | +```yaml |
| 162 | +name: Deploy to GitHub Pages |
| 163 | +
|
| 164 | +on: |
| 165 | + push: |
| 166 | + branches: [ main ] |
| 167 | + workflow_dispatch: |
| 168 | +
|
| 169 | +permissions: |
| 170 | + contents: read |
| 171 | + pages: write |
| 172 | + id-token: write |
| 173 | +
|
| 174 | +concurrency: |
| 175 | + group: "pages" |
| 176 | + cancel-in-progress: true |
| 177 | +
|
| 178 | +jobs: |
| 179 | + deploy: |
| 180 | + environment: |
| 181 | + name: github-pages |
| 182 | + url: ${{ steps.deployment.outputs.page_url }} |
| 183 | + runs-on: ubuntu-latest |
| 184 | + steps: |
| 185 | + - name: Checkout |
| 186 | + uses: actions/checkout@v4 |
| 187 | +
|
| 188 | + - name: Upload static files |
| 189 | + uses: actions/upload-pages-artifact@v3 |
| 190 | + with: |
| 191 | + path: . |
| 192 | +
|
| 193 | + - name: Deploy to GitHub Pages |
| 194 | + id: deployment |
| 195 | + uses: actions/deploy-pages@v4 |
| 196 | +``` |
| 197 | + |
| 198 | +3. **Pages** in den Repo-Einstellungen aktivieren, Quelle: **GitHub Actions**. |
| 199 | + |
| 200 | +## Mitwirken |
| 201 | + |
| 202 | +Pull Requests und Verbesserungen sind willkommen. |
| 203 | + |
| 204 | +## Credits |
| 205 | + |
| 206 | +- Originales Terminal-Portfolio und Vorlage von [**PythonToGo**](https://github.com/PythonToGo). |
0 commit comments