A blazing-fast portfolio built with React 19 + React Compiler

View Live →  •  MovieWatcht  •  Daniel AI

_{↑ Click to visit the live site}

📖 Table of Contents

• Highlights
• Tech Stack
• Pages
• Getting Started
• Project Structure
• Scripts
• Performance
• Configuration
• Author

---

⚡ Highlights

🚀 Modern Stack React 19 with React Compiler TypeScript 5.9 for type safety Vite 7 for lightning builds React Router 7 with lazy loading	🎨 Design & UX Fluid responsive layouts Smooth page transitions WebGL effects with OGL Typewriter animations
⚙️ Developer Experience Hot Module Replacement Path aliases (@/, src/) SASS with BEM methodology ESLint + TypeScript strict	📊 Production Ready Vercel Analytics Optimized images Code splitting Edge-deployed on Vercel

---

🛠️ Tech Stack

React 19

TypeScript

Vite 7

SASS

Vercel

GitHub

Also using: React Router 7 · React Compiler · Lucide Icons · OGL (WebGL) · Styled Components · Typewriter Effect · Vercel Analytics

---

🎨 Pages

Route	Page	Description
/	Portfolio	Hero with typewriter, projects showcase, skills grid, contact form
/moviewatcht	MovieWatcht	Landing page for the MovieWatcht mobile app
/ai	Daniel AI	AI service page with features and capabilities
/ai/privacy-policy	Privacy Policy	AI service privacy documentation
/ai/terms-of-service	Terms	AI service terms of service
/privacy	Privacy	Main site privacy policy

---

🚀 Getting Started

Prerequisites

Node.js  ≥ 20.x
npm      ≥ 10.x

Installation

# Clone the repository
git clone https://github.com/danieldjupvik/portfolio.git

# Navigate to directory
cd portfolio

# Install dependencies
npm install

# Start development server
npm run dev

💡 Using fnm?

The repo includes .nvmrc — fnm reads it automatically:

fnm use

Or enable auto-switching in your shell config:

# ~/.zshrc or ~/.bashrc
eval "$(fnm env --use-on-cd)"

🌐 Development server: http://localhost:4500

---

📁 Project Structure

portfolio/
│
├── 📂 public/
│   ├── images/                 # Hero backgrounds, assets
│   └── *.png                   # Favicons, app icons
│
├── 📂 src/
│   ├── 📂 components/          # Reusable UI components
│   │   ├── Navigation/
│   │   ├── Hero/
│   │   ├── Projects/
│   │   └── ...
│   │
│   ├── 📂 pages/               # Route page components
│   │   ├── Home/
│   │   ├── MovieWatcht/
│   │   └── AI/
│   │
│   ├── 📂 hooks/               # Custom React hooks
│   ├── 📂 types/               # TypeScript definitions
│   │
│   ├── 📂 scss/
│   │   ├── partials/           # _variables, _mixins, _reset
│   │   └── *.scss              # Component styles
│   │
│   └── 📂 assets/              # Static imports (images, fonts)
│
├── 📂 api/                     # Vercel serverless functions
│
├── 📄 vite.config.ts           # Vite configuration
├── 📄 tsconfig.json            # TypeScript configuration
└── 📄 .nvmrc                   # Node version (works with fnm)

---

📜 Scripts

Command	Description
npm run dev	Start Vite dev server on port 4500
npm run dev:vercel	Dev with Vercel environment & serverless functions
npm run build	Create optimized production build
npm run preview	Preview production build locally
npm run deploy	Deploy to Vercel production

---

🎯 Performance

• React Compiler — Automatic memoization, zero manual useMemo/useCallback
• Code Splitting — Lazy-loaded routes via React.lazy() + Suspense
• Image Optimization — Responsive hero images (desktop/mobile variants)
• Tree Shaking — Dead code elimination via Vite/Rollup
• Edge Deployment — Global CDN distribution via Vercel

---

🔧 Configuration

Environment Variables

Create .env.local for local development:

VITE_API_URL=your_api_url

Path Aliases

Both src/ and @/ resolve to the source directory:

import { Button } from 'src/components/Button';
import { useTheme } from '@/hooks/useTheme';

Configured in vite.config.ts and tsconfig.json.

Theme Variables

Core design tokens in src/scss/_variables.scss:

$background: #1d1d1d;
$navbar: #181818;
$accent: #74f7d9;
$font-heading: 'Roboto Mono', monospace;
$font-body: 'Roboto', sans-serif;
$max-width: 768px;

---

👤 Author

Daniel Djupvik

---