87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
# 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**
|