146 lines
3.8 KiB
Markdown
146 lines
3.8 KiB
Markdown
# jamulix.de — Landing Page
|
|
|
|
Next.js 16 Landing Page für [jamulix.de](https://jamulix.de), statisch exportiert und unter `/landingpage/` deployed.
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
- **Next.js 16.2** mit `output: 'export'` (statischer Export, kein Node.js-Server nötig)
|
|
- **React 19**, **TypeScript**
|
|
- **Tailwind CSS v4** + shadcn/ui-Komponenten
|
|
- **Framer Motion** für Animationen
|
|
- **next-themes** für Dark/Light Mode
|
|
|
|
---
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
app/
|
|
layout.tsx # Root Layout, Fonts, Theme-Init-Script
|
|
page.tsx # Hauptseite (alle Sections zusammengesetzt)
|
|
globals.css # CSS-Variablen (OKLCH), Tailwind, Fly.io-Farbschema
|
|
impressum/ # Impressum-Seite
|
|
datenschutz/ # Datenschutzerklärung
|
|
components/
|
|
hero.tsx # Hero-Section mit Gradient-Überschrift
|
|
about-section.tsx
|
|
projects-section.tsx
|
|
focus-section.tsx
|
|
philosophy-section.tsx
|
|
footer.tsx # Footer mit E-Mail (obfuskiert) und Forgejo-Link
|
|
header.tsx # Navigation + Theme-Toggle
|
|
programmer-graphic.tsx # Foto (statischer Import wegen basePath)
|
|
theme-toggle.tsx
|
|
ui/ # shadcn/ui-Basiskomponenten
|
|
public/
|
|
Programmierer.png # Foto (statischer Import in programmer-graphic.tsx)
|
|
```
|
|
|
|
---
|
|
|
|
## Lokale Entwicklung
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Aufruf im Browser:
|
|
- Lokal: http://localhost:3000/landingpage
|
|
- Netzwerk: http://192.168.179.124:3000/landingpage (Handy im WLAN)
|
|
|
|
> Port 3000 muss in der Firewall offen sein: `sudo ufw allow 3000/tcp`
|
|
|
|
---
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Erzeugt `out/`, benennt es in `landingpage/` um. Dieses Verzeichnis wird deployed.
|
|
|
|
---
|
|
|
|
## Persönliche Daten (Impressum / Datenschutz)
|
|
|
|
Werden **nicht** im Repository gespeichert, sondern zur Build-Zeit aus `.env.local` gelesen.
|
|
|
|
```bash
|
|
cp .env.local.example .env.local
|
|
# .env.local mit echten Daten befüllen
|
|
```
|
|
|
|
Variablen: `OWNER_NAME`, `OWNER_STREET`, `OWNER_ZIP_CITY`, `OWNER_EMAIL`,
|
|
`HOSTER_NAME`, `HOSTER_STREET`, `HOSTER_ZIP`, `HOSTER_CITY`, `HOSTER_COUNTRY`
|
|
|
|
`.env.local` ist per `.gitignore` ausgeschlossen.
|
|
|
|
Die E-Mail im Footer (`footer.tsx`) wird als Prop von `app/page.tsx` übergeben:
|
|
```tsx
|
|
<Footer email={process.env.OWNER_EMAIL} />
|
|
```
|
|
|
|
---
|
|
|
|
## Deployment
|
|
|
|
### Production (jamulix.de)
|
|
|
|
```bash
|
|
./deploy_to_production.sh
|
|
```
|
|
|
|
- Baut die Seite (`npm run build`)
|
|
- Öffnet eine SSH-Master-Verbindung (Passwort nur einmal eingeben)
|
|
- rsync nach `jamulix.de:/var/www/jamulix.de/html/landingpage/`
|
|
- Setzt Symlink: `/var/www/jamulix.de/html/index.html` → `landingpage/index.html`
|
|
|
|
### Localhost (zum Testen)
|
|
|
|
```bash
|
|
./deploy_to_localhost.sh
|
|
```
|
|
|
|
- rsync nach `/var/www/html/landingpage/`
|
|
- Symlink: `/var/www/html/index.html` → `landingpage/index.html`
|
|
- `sudo chown -R www-data:www-data`
|
|
|
|
### Warum `/landingpage/` als Unterverzeichnis?
|
|
|
|
`basePath: '/landingpage'` in `next.config.mjs` erlaubt es, weitere Projekte
|
|
unter `jamulix.de/` zu betreiben ohne Konflikte. rsync mit `--delete` löscht
|
|
nur Dateien innerhalb von `landingpage/`, nicht andere Verzeichnisse im Webroot.
|
|
|
|
---
|
|
|
|
## Design
|
|
|
|
**Fly.io-inspiriertes Farbschema** (Variant A+B+C):
|
|
|
|
- Dark Mode: Tiefes Navy (`oklch(0.10 0.02 260)`) + Violet-Akzent (`oklch(0.65 0.22 280)`)
|
|
- Light Mode: Warme Papiertöne + Violet-Akzent
|
|
- Font: **Plus Jakarta Sans** (Headlines + Body), **JetBrains Mono** (Code)
|
|
- Hero-Überschrift: Cyan→Violet Gradient im Dark Mode
|
|
- Gradient Mesh im Hero-Hintergrund (nur Dark Mode)
|
|
|
|
Dark/Light Mode wird per `localStorage` gespeichert. Das Init-Script in
|
|
`app/layout.tsx` verhindert Flash beim Laden.
|
|
|
|
---
|
|
|
|
## Bilder
|
|
|
|
`public/Programmierer.png` muss als **statischer Import** eingebunden werden:
|
|
|
|
```tsx
|
|
import programmiererImg from '../public/Programmierer.png'
|
|
// ...
|
|
<Image src={programmiererImg} ... />
|
|
```
|
|
|
|
Grund: `next/image` mit `src="/Programmierer.png"` (String) berücksichtigt
|
|
`basePath` nicht korrekt bei statischem Export.
|