A modern, interactive personal portfolio website built with Next.js 15, React 19, and Three.js. Features a sleek design with dark/light theme support, interactive 3D elements, and a functional terminal interface.
💡 Fun fact: This portfolio was coded during a few hours of waiting at Madrid Atocha T4 airport!
Live Demo: https://www.felixbernal.es | LinkedIn: Felix Bernal Sierra
- 🎨 Modern Design: Clean, responsive design with smooth animations
- 🌙 Dark/Light Theme: Toggle between dark and light modes
- 🖥️ Interactive Terminal: Functional terminal interface with custom commands
- 🎮 3D Elements: Three.js powered refracting 3D visual effect (inspired by Maxime Heckel's blog post)
- 📱 Mobile Responsive: Optimized for all device sizes
- ⚡ Performance: Built with Next.js 15 and Turbopack for optimal performance
- 🔍 SEO Optimized: Meta tags and structured data for better search visibility
- 📊 Analytics: Vercel Analytics and Speed Insights integration
- Next.js 15 - React framework with App Router
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- Three.js - 3D graphics library
- Tailwind CSS 4 - Utility-first CSS framework
- shadcn/ui - Beautiful and accessible component library built on Radix UI
- pnpm - Fast, disk space efficient package manager
- ESLint - Code linting
- Turbopack - Fast bundler for development
- Vercel - Deployment platform
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone https://github.com/KrakenWagen/portfolio.git cd portfolio -
Install dependencies
pnpm install # or npm install -
Run the development server
pnpm dev # or npm run dev -
Open your browser Navigate to http://localhost:3000 to see the portfolio.
portfolio/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main portfolio page
├── components/ # Reusable components
│ ├── ui/ # UI components (buttons, etc.)
│ ├── terminal.tsx # Interactive terminal
│ ├── ray-marching.jsx # 3D refractive effect
│ ├── map.tsx # 3D map component
│ └── theme-provider.tsx # Theme context
├── config/ # Configuration files
│ └── portfolio.tsx # Portfolio data and settings
├── sections/ # Portfolio sections
│ ├── Hero.tsx # Hero section
│ ├── About.tsx # About section
│ ├── Experience.tsx # Work experience
│ ├── Education.tsx # Education history
│ ├── Work.tsx # Projects showcase
│ └── Contact.tsx # Contact information
├── public/ # Static assets
│ ├── cob.png # Project images
│ ├── scattering.png
│ ├── vr.png
│ └── *.svg # Icons and graphics
└── lib/ # Utility functions
└── utils.ts # Helper functions
The portfolio features a fully functional terminal interface accessible via the "Terminal" button. It includes:
- Custom command system
- Portfolio information commands
- Navigation shortcuts
- Three.js Integration: Interactive 3D refracting elements using WebGL
- Sticky navigation with smooth scrolling
- Mobile-friendly hamburger menu
- Active section highlighting
- Theme toggle integration
pnpm run deploy
# or
npx vercel-
Build the project
pnpm build
-
Start production server
pnpm start
Edit config/portfolio.tsx to update:
- Personal details (name, title, location)
- Contact information
- Work experience
- Education history
- Project showcase
- Skills and technologies
Modify app/layout.tsx
- Title
- Opengraph meta tags
- Modify
app/globals.cssfor global styles - Setup Tailwind configuration in
tailwind.config.js(create file if not present)
- Adjust refraction parameters in
components/ray-marching.jsx - Modify Three.js scenes in
components/map.tsx - Update terminal commands in
components/terminal.tsx
This project is licensed under the MIT License - see the LICENSE file for details.
- Portfolio: Live Demo
- GitHub: @KrakenWagen
- LinkedIn: Felix Bernal Sierra
- Email: felixbernalsierra@gmail.com
⭐ Star this repository if you found it helpful!