A modern, interactive personal portfolio website designed to look like a VS Code editor. This project showcases my work, experience, skills, and projects in a unique and engaging way.
- VS Code-Inspired Interface: Complete with icon sidebar, file explorer, editor tabs, and status bar
- Split Screen Layout: View "code" and live output/preview side-by-side with resizable panels
- Terminal AI Chat: Interactive AI assistant with portfolio-specific knowledge
- Dynamic Theme System: Choose from 8 professionally-designed color themes (Tokyo Night, Synthwave, Cyberpunk, Gruvbox, and more)
- Content Management: Powered by Sanity CMS for easy content updates
- Responsive Design: Fully functional on desktop and mobile devices
- Smooth Animations: Enhanced UX with Framer Motion
- Search Functionality: Quick navigation through portfolio sections
- Type-Safe: Built with TypeScript for reliability and better developer experience
- Framework: Next.js 14.2.28 with React 18.3.1
- Language: TypeScript 5
- Styling: Tailwind CSS 3.4.1
- Animations: Framer Motion 11.2.10
- State Management: Zustand 4.5.5
- CMS: Sanity 3.60.0
- Deployment: Vercel
- Analytics: Vercel Analytics & Speed Insights
- Node.js 20.x or higher
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/madshermansen/personal-website.git
cd personal-website- Navigate to the frontend directory:
cd frontend- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Set up environment variables:
cp .env.local.example .env.localEdit .env.local and add your Sanity CMS credentials (see Development Guide for details).
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Architecture Guide: Technical architecture, component structure, and design patterns
- Development Guide: Detailed setup instructions, development workflow, and contribution guidelines
- Project Memory: Project history, recent changes, and known issues
personal-website/
├── frontend/ # Next.js application
│ ├── src/
│ │ ├── app/ # Next.js app router pages
│ │ ├── components/ # React components
│ │ │ └── editor/ # VS Code-style UI components
│ │ ├── lib/ # Utilities and state management
│ │ ├── sanity/ # Sanity CMS configuration
│ │ └── utils/ # Helper functions
│ ├── public/ # Static assets
│ └── package.json # Dependencies and scripts
├── .github/ # GitHub workflows and configurations
├── README.md # This file
├── ARCHITECTURE.md # Technical architecture documentation
└── DEVELOPMENT.md # Development and contribution guide
From the frontend directory:
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run prettier- Format code with Prettier
The entire application mimics VS Code's interface with:
- Resizable icon sidebar with multiple views (Explorer, Search, Terminal, Projects)
- File explorer showing portfolio sections as "files"
- Editor tabs for managing multiple open files
- Split screen code/output view
- Status bar showing file information
Each portfolio section displays in split screen mode:
- Left Panel: Simulated source code (TypeScript, YAML, etc.)
- Right Panel: Rendered output/preview
This unique approach makes the portfolio feel like a real development environment while showcasing content in an engaging way.
An interactive chat interface accessible via the Terminal icon that can answer questions about:
- Skills and technologies
- Work experience
- Education background
- Projects and portfolio items
- Contact information
This project is configured for deployment on Vercel:
- Push your code to GitHub
- Connect your repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy!
For detailed deployment instructions, see the Development Guide.
MIT License - feel free to use this project as inspiration for your own portfolio!
Mads Hermansen
- Website: Live Site
- GitHub: @madshermansen
- Email: mdj.hermansen@gmail.com
Built with ❤️ using Next.js and modern web technologies