Developer Portfolio Website

Developer Portfolio Website is an open-source, single-page portfolio template built with Next.js and React that converts a single data.json file into a fully static, SEO-optimized personal site.

What is Developer Portfolio Website?

Developer Portfolio Website is a production-ready, MIT-licensed portfolio template for developers, built with Next.js, React 19, and TypeScript. It takes all personal content from one public/data.json file — name, bio, skills, projects, experience — and generates a single-page landing site with smooth scrolling, an animated hero, and static HTML output via next export. The template is maintained by Misha (miksoft.pro) and hosted on GitHub.

Key Features

• Next.js static export — The build outputs pure HTML/CSS/JS to an out directory, so the site runs on Vercel, Netlify, GitHub Pages, or any CDN without a server.
• Single-page layout — Since version 2.0.0, all sections live on one page with anchor scrolling; a multi-page version remains available in release v1.2.2.
• GitHub Activity Calendar — A real-time contribution graph powered by react-github-calendar.
• Skills showcase — Animated 10-segment progress bars display technical proficiency visually.
• Project gallery — Rich cards with images, live links, and GitHub repository references.
• Framer Motion animations — Smooth entrance and page transitions enhance the browsing experience.
• Dark theme with golden accent — An elegant dark design with a customizable accent color for personal branding.
• One-file content management — Edit a single public/data.json to update your entire portfolio; no CMS or database required.

Who is Developer Portfolio Website for?

• Software developers — Showcase skills, projects, and experience to employers with an SEO-optimized portfolio that ranks in search results.
• Freelancers and contractors — Establish a professional online presence with a live GitHub contribution graph and project gallery to win clients.
• Open-source contributors — Fork the repository, customize the data file, and deploy a personal site with a built-in CI/CD pipeline via GitHub Actions.

What can you do with Developer Portfolio Website?

• Job seekers: build a recruiter-friendly portfolio with animated skill bars and live GitHub contributions to stand out from PDF resumes.
• Freelancers: deploy a static site to GitHub Pages or Netlify in minutes and keep all content under your control.
• Developers learning Next.js: study a clean, test-covered codebase that includes Jest tests, ESLint, Prettier, and SonarCloud quality gates.

How does Developer Portfolio Website work?

Clone the repository, install dependencies with yarn install, then replace the contents of public/data.json with your personal information. Run yarn dev to preview at localhost:3000, then yarn build to generate a static export in the out folder ready for deployment.