A Visual Studio Code themed developer portfolio website built with Next.js and deployed on Vercel.
- Themes and customizations
- GitHub Dark (default)
- One Dark Pro
- Dracula
- Ayu Dark
- Ayu Mirage
- Nord
- Night Owl
- Interactive custom terminal
For other features and themes suggestions, please open an issue.
Copy .env.example to .env.local inside the project directory and fill in the values:
DEV_TO_API_KEY: your dev.to API key, used to fetch your articles.GITHUB_API_KEY: optional GitHub token. When set, GitHub API requests are authenticated, which raises the rate limit above 60 requests per hour.NEXT_PUBLIC_GITHUB_USERNAME: the GitHub username shown on the GitHub page.
bun install
bun run devOpen http://localhost:3000 with your browser to see the result.
Your personal details live in portfolio.config.ts at the project root. Edit it to change:
profile: your name, role, location, bio, site URL and SEO metadata.socials: the links shown on the Contact page and in the terminal'scontactcommand.experienceandwriting: sections of the About page.extensions: your skills, shown as installed extensions in the Extensions view (Ctrl+Shift+X), each with its own detail page. The About page's skills section and the terminal'sskillscommand are generated from this list.projects: the cards on the Projects page.routes: the pages of the site. Each route sets its icon and, optionally, where it sits in the activity bar, itsG <key>keyboard shortcut, and the file name and icon it shows in the explorer and tabs bar.
To add a page, create app/<route>/page.tsx and add an entry to routes. The explorer, tabs, activity bar, command palette and terminal pick it up automatically.
All VS Code related components can be found in the components folder.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.