jp-visser.nl

Persoonlijke website van Janpeter Visser — Software Engineer.

Lokaal draaien

npm install
npm run dev

Open http://localhost:3000.

Deployen naar Vercel

1. Push naar GitHub

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

Ga naar vercel.com/new
Importeer je GitHub repository
Klik op Deploy — Vercel detecteert Next.js automatisch

3. Domein instellen

Ga naar je project in Vercel → Settings → Domains
Voeg jp-visser.nl toe
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

2.3 KiB Raw Blame History