A modern resume website built with Next.js 15 and TypeScript, featuring a retro 90s terminal/datasheet aesthetic. This project creates an interactive resume that looks like a classic Windows application.
- Retro 90s UI Design - Authentic Windows 95/98 terminal aesthetic
- Fully Responsive - Works on desktop, tablet, and mobile devices
- Type-Safe - Built with TypeScript for robust development
- Fast Performance - Next.js 15 with optimal loading and SEO
- Interactive Navigation - Tab-based navigation with smooth transitions
- JSON-Driven Content - Easy to update resume data via JSON files
- Modern Tech Stack - React 19, Next.js 15, Tailwind CSS 4
- Node.js 18+ or Bun
- Git
-
Clone the repository
git clone <your-repo-url> cd nextjs-resume
-
Install dependencies
# Using bun (recommended) bun install # Or using npm npm install
-
Start development server
# Using bun bun dev # Or using npm npm run dev
-
Open in browser Visit http://localhost:3000
nextjs-resume/
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── globals.css # Global styles with retro theme
│ │ ├── layout.tsx # Root layout component
│ │ └── page.tsx # Main page component
│ ├── components/
│ │ ├── layout/ # Layout components
│ │ │ └── DatasheetLayout.tsx
│ │ ├── sections/ # Resume section components
│ │ │ ├── ContactSection.tsx
│ │ │ ├── ExperienceSection.tsx
│ │ │ ├── HomeSection.tsx
│ │ │ ├── ProjectsSection.tsx
│ │ │ └── SkillsSection.tsx
│ │ └── ui/ # Reusable UI components
│ ├── data/ # JSON data files
│ │ ├── achievements.json
│ │ ├── education.json
│ │ ├── experience.json
│ │ ├── languages.json
│ │ ├── learning.json
│ │ ├── metadata.json
│ │ ├── personal.json
│ │ ├── projects.json
│ │ ├── skills.json
│ │ └── summary.json
│ └── types/
│ └── resume.ts # TypeScript type definitions
├── public/ # Static assets
├── docs/ # Documentation and screenshots
└── .github/ # GitHub Actions workflows
All resume content is stored in JSON files in the src/data/ directory. Simply edit these files to update your information:
personal.json- Name, title, contact informationsummary.json- Professional summaryexperience.json- Work experience and job historyskills.json- Technical skills organized by categoryprojects.json- Personal and professional projectseducation.json- Educational backgroundachievements.json- Awards and accomplishmentslanguages.json- Language proficienciesmetadata.json- Site metadata and versioning
The retro aesthetic is defined in src/app/globals.css. Key customization points:
- Color palette - Defined in CSS custom properties (
:root) - Typography - Uses JetBrains Mono for authentic terminal feel
- Window styling - Classic raised/lowered border effects
- Responsive breakpoints - Mobile-first design
- Create a new component in
src/components/sections/ - Add the section to the navigation in
DatasheetLayout.tsx - Create corresponding JSON data file in
src/data/ - Update TypeScript types in
src/types/resume.ts
- Modern Browsers - Chrome, Firefox, Safari, Edge (latest 2 versions)
- Mobile - iOS Safari, Chrome Mobile
- Fallbacks - Graceful degradation for older browsers
# Development
bun dev # Start development server
bun build # Build for production
bun start # Start production server
bun lint # Run ESLint
# Additional useful commands
bun check-types # Type checking only
bun preview # Preview production build locallyCreate a .env.local file for local development:
# Analytics (optional)
NEXT_PUBLIC_GA_ID=your-google-analytics-id
# Contact form (optional)
NEXT_PUBLIC_CONTACT_FORM_URL=your-contact-form-endpoint- Connect your repository to Vercel
- Configure build settings:
- Build Command:
bun run build - Output Directory:
.next - Install Command:
bun install
- Build Command:
- Deploy - Automatic deployments on push to main
- Build settings:
- Build command:
bun run build && bun run export - Publish directory:
out
- Build command:
- Add environment variables if needed
For static hosting:
# Update next.config.ts to enable static export
# Then build
bun run build- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design Inspiration - Windows 95/98 interface design
- Fonts - JetBrains Mono for authentic monospace feel
- Icons - Classic system icons and emojis
- Community - Next.js and React communities for excellent tooling
Live Demo: View Resume
Author: Mark Matthias Reuter
Contact: mmreuter@protonmail.com