derks.dev Portfolio

Personal portfolio website for Philipp Derks, built with Next.js, React, TypeScript, and Tailwind CSS. The site highlights experience, projects, contact information, and legal pages with a retro terminal/arcade-inspired visual style.

Features

• Next.js App Router with ISR for GitHub project data
• Bilingual content in English and German
• Theme support via next-themes
• GitHub pinned repositories fetched through the GitHub GraphQL API
• Retro UI details including split-flap text, insert-coin gate, circuit background, and optional Aurebesh font mode
• Legal routes for imprint and privacy pages
• Dev Container support for a consistent Node.js development environment

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• Lucide React
• next-themes

Getting Started

Option 1: Dev Container (recommended)

This project includes a dev container configuration with Node.js 22 and the recommended VS Code extensions.

Prerequisites:

• Docker
• VS Code
• Dev Containers extension

Steps:

1. Open the repository in VS Code.
2. Run Dev Containers: Reopen in Container from the Command Palette, or click Reopen in Container when prompted.
3. Start the development server:

npm run dev

4. Open http://localhost:3000.

Option 2: Local Development

Prerequisite: Node.js 22 or later.

Install dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:3000.

Environment Variables

Copy the example environment file and fill in your GitHub token:

cp .env.example .env.local

GITHUB_TOKEN=your_github_token

GITHUB_TOKEN is used to fetch pinned repositories from the GitHub GraphQL API. A classic token with read:user scope is sufficient. Without the token, the projects section renders without pinned repository data.

For production deployments, add the same variable to your hosting provider's environment settings.

Available Scripts

• npm run dev — start the development server with webpack
• npm run build — build the app for production
• npm run start — run the production build
• npm run lint — lint the source code with ESLint

Project Structure

src/
  app/                  App Router pages, layout, global styles, legal routes
  components/           UI sections and shared components
  data/                 Experience and social link data
  hooks/                Client-side language and UI state hooks
  lib/                  i18n content and GitHub API integration
public/
  fonts/                Local Aurebesh font assets
.devcontainer/          VS Code Dev Container configuration

Deployment

The site is designed for deployment on Vercel or another Next.js-compatible host.

Before deploying:

1. Configure GITHUB_TOKEN in the deployment environment.
2. Run the production build locally:

npm run build

3. Deploy the repository through your hosting provider.

The homepage revalidates pinned GitHub repository data at most once per hour via ISR.