Personal Website v3

A modern, futuristic personal portfolio website built with Next.js, TypeScript, and Tailwind CSS. Features a sleek dark theme with sci-fi aesthetics, animated gradients, glassmorphism effects, and smooth scroll animations powered by Framer Motion.

🌟 Features

• Modern Tech Stack: Built with Next.js 16, React 19, and TypeScript
• Futuristic Design: Dark theme with neon accents, animated gradients, and glassmorphism effects
• Smooth Animations: Powered by Framer Motion for scroll reveals, hover effects, and transitions
• Featured Projects: Interactive project showcase with sticky scroll interface
• Work Experience: Detailed work history with company information and accomplishments
• Skills Display: Interactive skill icons with hover effects
• Responsive Design: Mobile-first approach with optimized layouts for all screen sizes
• Performance Optimized: Fast load times and smooth interactions
• Accessibility: Built with accessibility best practices in mind

🛠️ Tech Stack

Core Framework

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type-safe JavaScript

Styling & UI

• Tailwind CSS 4 - Utility-first CSS framework
• shadcn/ui - Re-usable component library (New York style)
• Lucide React - Icon library
• Framer Motion - Animation library

Development Tools

• Bun - Fast JavaScript runtime and package manager
• ESLint - Code linting
• Prettier - Code formatting

📁 Project Structure

personal-website-v3/
├── app/                    # Next.js app directory
│   ├── globals.css        # Global styles and Tailwind configuration
│   ├── layout.tsx         # Root layout with metadata and fonts
│   └── page.tsx           # Homepage component
├── components/            # React components
│   ├── FeaturedWorks.tsx  # Featured projects section with sticky scroll
│   ├── ProjectCard.tsx    # Individual project card component
│   ├── ProjectDetails.tsx # Detailed project view
│   └── WorkExperience.tsx # Work experience timeline component
├── lib/                   # Utility functions and type definitions
│   ├── project-types.ts   # Project type definitions and color schemes
│   ├── work-experience-types.ts # Work experience type definitions
│   └── utils.ts           # Utility functions (cn, etc.)
├── public/                # Static assets
│   ├── project-displays/  # Project screenshot images
│   ├── resume/            # Resume PDF
│   ├── skill-icons/       # Technology skill icons
│   └── work-experience/   # Company logos
└── package.json           # Dependencies and scripts

🚀 Getting Started

Prerequisites

• Bun (recommended) or Node.js 18+ and npm/yarn/pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/lucas-amberg/personal-website-v3.git
   cd personal-website-v3

2. Install dependencies

   bun install
   # or
   npm install

3. Run the development server

   bun dev
   # or
   npm run dev

4. Open your browser Navigate to http://localhost:3000 to see the site.

Available Scripts

• bun dev - Start development server
• bun build - Build for production
• bun start - Start production server
• bun lint - Run ESLint
• bun p:f - Format code with Prettier

🎨 Design System

This project follows a comprehensive futuristic sci-fi design system. Key design principles:

Color Palette

• Primary: Electric Blue (blue-400, blue-500) - Primary brand color
• Accents:
  • Neon Purple (purple-400) - Premium/holographic effects
  • Electric Green (emerald-400) - Success states
  • Neon Pink (pink-400) - Featured highlights
  • Red (red-400) - Technical notes/warnings
• Backgrounds: Black (bg-black) with dark neutrals (neutral-900, neutral-800)
• Text: White for headings, neutral-300 for body, neutral-400 for muted text

Visual Effects

• Glassmorphism: Frosted glass effects with backdrop blur
• Neon Glows: Glowing shadows and borders for interactive elements
• Animated Gradients: Multi-color gradients that shift over time
• Holographic Borders: Animated gradient borders on featured cards
• Grid Patterns: Subtle animated grid overlays for depth

Typography

• Fonts: Geist Sans (primary), Geist Mono (code), Instrument Serif (accent)
• Scale: Responsive typography from mobile to desktop
• Effects: Holographic gradients and neon glows on headings

For detailed design guidelines, see the workspace style guide (referenced in project rules).