Initial commit

2026-04-14 21:39:50 +02:00 · 2026-04-14 21:39:50 +02:00 · dc66b66d94
commit dc66b66d94
22 changed files with 7556 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,87 @@
+# jp-visser.nl
+
+Persoonlijke website van Janpeter Visser — Software Engineer.
+
+## Lokaal draaien
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+## Deployen naar Vercel
+
+### 1. Push naar GitHub
+
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+git branch -M main
+git remote add origin https://github.com/JOUW_USERNAME/jp-visser.git
+git push -u origin main
+```
+
+### 2. Koppel aan Vercel
+
+1. Ga naar [vercel.com/new](https://vercel.com/new)
+2. Importeer je GitHub repository
+3. Klik op **Deploy** — Vercel detecteert Next.js automatisch
+
+### 3. Domein instellen
+
+1. Ga naar je project in Vercel → **Settings** → **Domains**
+2. Voeg `jp-visser.nl` toe
+3. Bij je domeinregistrar, stel in:
+   - **A-record**: `@` → `76.76.21.21`
+   - **CNAME**: `www` → `cname.vercel-dns.com`
+
+DNS-wijzigingen kunnen tot 48 uur duren, maar zijn meestal binnen een uur actief.
+
+## Apps toevoegen
+
+Om apps toe te voegen aan de portfolio:
+
+**Optie A — Als aparte Vercel projecten (subdomein):**
+- Deploy een app als apart project op Vercel
+- Voeg een subdomein toe: bijv. `app1.jp-visser.nl`
+
+**Optie B — Als routes binnen dit project:**
+- Maak een nieuwe pagina aan in `app/apps/naam/page.tsx`
+- De app is dan bereikbaar op `jp-visser.nl/apps/naam`
+
+Pas daarna `components/apps.tsx` aan om de links naar je apps te tonen.
+
+## Projectstructuur
+
+```
+jp-visser/
+├── app/
+│   ├── globals.css         # Global styles + Tailwind
+│   ├── layout.tsx          # Root layout met fonts & metadata
+│   └── page.tsx            # Homepage
+├── components/
+│   ├── nav.tsx             # Navigatie (sticky)
+│   ├── hero.tsx            # Hero sectie met portret
+│   ├── experience.tsx      # Werkervaring
+│   ├── skills.tsx          # Skills & tools
+│   ├── apps.tsx            # Apps portfolio
+│   ├── contact.tsx         # Contact info
+│   ├── footer.tsx          # Footer
+│   └── fade-in.tsx         # Scroll-animatie component
+├── lib/
+│   └── cv-data.ts          # Alle CV data
+├── public/
+│   └── images/
+│       └── portrait.jpg    # Portretfoto
+└── package.json
+```
+
+## Tech stack
+
+- **Next.js 15** (App Router)
+- **TypeScript**
+- **Tailwind CSS**
+- Hosted op **Vercel**