Single-page landing layout, with all sections on one page and smooth anchor scrolling between them
Next.jsReactPortfolio
developer-portfolio-website — Next.js Portfolio Template
By miksrv
A single-page developer portfolio template built on Next.js and React, with content driven by a single data.json and support for static export deployment.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Content centralized in a single public/data.json file, with no database or CMS required
Skills display uses 10 progress bars, and projects are presented as cards with images, live links, and GitHub repositories
Integrates react-github-calendar to display a GitHub contribution calendar
Uses Framer Motion for page transitions and entrance animations, with a dark theme and customizable accent colors
Static export outputs pure HTML/CSS/JS, deployable to any static hosting or CDN
Template Details
This is a personal portfolio template for developers, engineers, and freelancers, built with Next.js, React, and TypeScript. Starting from version 2.0.0, the template has changed to a single-page landing structure: all content is concentrated on one page, with smooth anchor scrolling between sections; the earlier multi-page version organized by skills, experience, and projects is retained in old releases, with the last multi-page version being v1.2.2.
The page sections include a hero with animation and age/experience counters, a skills display with 10 progress bar indicators, a complete work experience timeline, and a project card gallery containing images, live links, and GitHub repository references. The template also provides a GitHub contribution calendar powered by react-github-calendar and uses Framer Motion for page transitions and entrance animations. The overall theme is dark, with customizable accent colors.
Content maintenance is straightforward: all personal data is centralized in a single public/data.json file, with no database or CMS required. At build time, static export outputs pure HTML/CSS/JS, deployable to Vercel, Netlify, GitHub Pages, or any static hosting and CDN. The repository includes GitHub Actions check and deployment workflows, SonarCloud quality analysis, Jest tests and coverage reports, as well as ESLint and Prettier constraints.
Regarding usage limitations: the template is released under the MIT license, and the free scope refers only to the code of this version; third-party assets such as demo images, fonts, and icons require separate verification under their respective licenses; external services such as domains and hosting may incur additional charges. The performance and SEO results mentioned in the README are the project's own descriptions and have not been independently verified in this material.
Next.jsReactPortfolio
Is it right for your project?
Use Cases
- Developers, engineers, or freelancers building a personal online portfolio to showcase skills, work experience, and projects
- Users who want to maintain all personal information in a single JSON file and do not want to introduce a database or CMS
- Scenarios requiring the portfolio to be deployed as static files to Vercel, Netlify, GitHub Pages, or a self-hosted CDN
- Personal sites preferring a dark theme, single-page scrolling, and animated transitions
Suitable For
- Developers using the React and Next.js stack
- Individuals who need to quickly replace content and self-host their portfolio
- Presentation needs that accept a single-page structure and do not require multi-page routing
- Users who want to modify and distribute based on MIT-licensed code
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Node.js and Yarn must be installed in advance
- 2
After cloning the repository, run yarn install to install dependencies
- 3
Edit public/data.json to fill in name, bio, skills, projects, and experience
- 4
Run yarn dev to preview locally on port 3000, and run yarn build to generate static output in the /out directory
- 5
Third-party assets such as demo images, fonts, and icons require separate verification under their respective licenses and cannot be judged solely by the code's MIT license
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Starting from 2.0.0, the template uses a single-page landing structure with all content on one page; if a multi-page version organized by skills, experience, and projects is needed, an older release must be used, with the last multi-page version being v1.2.2, as the current version no longer provides multi-page routing.
- The GitHub contribution calendar relies on the react-github-calendar component and needs to fetch public contribution data from GitHub; if GitHub is inaccessible or the data is unavailable, this section will not display properly.
- Usage and building require Node.js and Yarn to be installed in advance, and yarn install to install dependencies; without this environment, the template cannot be run or built.
- Demo images, fonts, icons, and other third-party assets require verification under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
The previous implementation with separate pages for skills, experience, and projects is available in earlier releases. The last multi-page release was **[v1.2.2](https://github.com/miksrv/developer-portfolio-website/tree/release/v1.2.2)**.
Original README
GitHub Activity Calendar** - Real-time contribution graph powered by `react-github-calendar`.
Original README
https://github.com/miksrv/developer-portfolio-website/blob/main/LICENSEhttps://github.com/miksrv/developer-portfolio-website/blob/main/README.mdMake sure you have [Node.js](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/getting-started/install) installed.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 92 / 100
- Technologies
- Next.js · React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-27
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 77fcb65071ff92dc0df27435277f824d29fee0a72ee3783f0e2bdf5b7b68b92e
2026-10-02T19:58:12.138Z
Source file / repository<a id="top"></a>
<!-- PROJECT TITLE -->
<div align="center">
<h1>Developer Portfolio Website</h1>
<img src="./public/app.jpg" alt="Developer Portfolio Website - Next.js & React Template" />
<p>A production-ready, SEO-optimized portfolio template built with Next.js and React. Showcase your skills, projects, and experience with a clean, modern design that makes a lasting impression on employers and clients.</p>
<a href="CHANGELOG.md" target="_blank">Changelog</a>
·
<a href="https://miksoft.pro" target="_blank">Live Demo</a>
·
<a href="https://github.com/miksrv/developer-portfolio-website/issues/new?assignees=miksrv&labels=bug&projects=&template=1-bug.yml&title=%5BBug%5D%3A+">Report Bug</a>
·
<a href="https://github.com/miksrv/developer-portfolio-website/issues/new?assignees=miksrv&labels=enhancement&template=2-feature-request.yml&title=%5BFeature%5D%3A+">Request Feature</a>
·
<a href="#contact">Contact</a>
</div>
<br />
<!-- PROJECT BADGES -->
<div align="center">
[![Contributors][contributors-badge]][contributors-url]
[![Forks][forks-badge]][forks-url]
[![Stargazers][stars-badge]][stars-url]
[![Issues][issues-badge]][issues-url]
[![MIT License][license-badge]][license-url]
[](https://github.com/miksrv/developer-portfolio-website/actions/workflows/checks.yml)
[](https://github.com/miksrv/developer-portfolio-website/actions/workflows/deploy.yml)
[](https://sonarcloud.io/summary/new_code?id=miksrv_developer-portfolio-website)
[](https://sonarcloud.io/summary/new_code?id=miksrv_developer-portfolio-website)
</div>
---
> [!IMPORTANT]
>
> ### Version 2.x.x - Single-Page Landing
>
> Starting from version **2.0.0**, this portfolio has been redesigned as a **single-page landing** - all content is displayed on one page with smooth scrolling and a clean, modern layout.
>
> Looking for the **multi-page version**? The previous implementation with separate pages for skills, experience, and projects is available in earlier releases. The last multi-page release was **[v1.2.2](https://github.com/miksrv/developer-portfolio-website/tree/release/v1.2.2)**.
---
### Table of Contents
- [Key Features](#key-features)
- [Why Use This Portfolio Template?](#why-use-this-portfolio-template)
- [Built With](#built-with)
- [About the Project](#about-the-project)
- [How to Use](#how-to-use)
- [Contributing](#contributing)
- [Contact](#contact)
---
### Key Features
- **Next.js & React** - Blazing-fast static site generation with server-side rendering support and built-in SEO optimization.
- **Single-Page Layout** - All sections on one page with smooth anchor scrolling and a minimal, distraction-free layout.
- **Fully Responsive** - Pixel-perfect on every screen size, from wide desktop monitors to mobile phones.
- **Skills Showcase** - Animated progress bars with segment indicators to visualize your technical proficiency at a glance.
- **Project Gallery** - Rich project cards with images, live links, and GitHub repository references.
- **GitHub Activity Calendar** - Real-time contribution graph powered by `react-github-calendar`.
- **Smooth Animations** - Framer Motion-powered page transitions and entrance animations for a polished, modern feel.
- **Dark Theme** - Elegant dark design with a customizable golden accent color that highlights your personal brand.
- **Static Export** - Outputs pure HTML/CSS/JS via `next export` - deploy anywhere: Vercel, Netlify, GitHub Pages, or any CDN.
- **One-File Content** - All personal data lives in a single `public/data.json` file. No database, no CMS required.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### Why Use This Portfolio Template?
- **Make a Strong First Impression** - Your portfolio is your digital business card. This template presents your skills, projects, and experience in a polished, recruiter-friendly layout that communicates professionalism before they read a single line.
- **Rank Higher in Search Results** - Built with Next.js SEO best practices: semantic HTML, per-page meta tags, Open Graph support, and a perfect Lighthouse score. Your profile gets found by the right people - hiring managers, clients, and collaborators.
- **Go Beyond the Resume** - Static PDFs can't show animated skill bars, live GitHub contributions, or interactive project galleries. This portfolio tells your story dynamically, keeping visitors engaged longer and converting views into opportunities.
- **Own Your Data, Own Your Brand** - No third-party platforms, no algorithmic feeds. You control the layout, the content, and the hosting. Update your `data.json` and your entire portfolio reflects the change instantly.
- **Production-Ready from Day One** - CI/CD pipeline via GitHub Actions, SonarCloud code quality analysis, full Jest test suite with coverage reporting, and ESLint + Prettier enforcement. Fork it, personalize it, and ship it with confidence.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### Built With
| Technology | Role |
| ----------------------------------------------------------- | --------------------------------------------------- |
| [![JavaScript][js-badge]][js-url] | Core language for frontend logic |
| [![TypeScript][ts-badge]][ts-url] | Static typing for safer, more maintainable code |
| [![NextJS][nextjs-badge]][nextjs-url] | React framework with SSG, routing, and SEO features |
| [![NodeJS][nodejs-badge]][nodejs-url] | Runtime environment and package management |
| [![Sass][sass-badge]][sass-url] | Component-scoped styles with a global theme system |
| [![GitHub Actions][githubactions-badge]][githubactions-url] | Automated CI/CD pipeline for checks and deployment |
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### About the Project
This is a complete, production-ready developer portfolio built with **Next.js**, **React 19**, and **TypeScript**. It is designed to help developers, engineers, and freelancers establish a strong online presence with minimal setup - all content is driven by a single `public/data.json` file, so you can have a personalized portfolio running in minutes.
The template is architected for performance and maintainability. Sections include an animated hero with live age and experience counters, a visual skills breakdown with 10-segment progress bars, a full work experience timeline, and a project gallery - all within a smooth single-page experience powered by Framer Motion transitions.
The build outputs pure static HTML via `next export`, making deployment effortless. Host it on Vercel with one click, push it to GitHub Pages, or serve it from any static file host - no server required. The codebase is clean and well-tested, making it easy to extend with your own sections or integrations.
This project is open-source and free to use for any personal or commercial portfolio purpose. Contributions, suggestions, and feedback are always welcome.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### How to Use
1. **Install Prerequisites** - Make sure you have [Node.js](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/getting-started/install) installed.
2. **Clone the Repository**:
```bash
git clone https://github.com/miksrv/developer-portfolio-website.git
```
3. **Install Dependencies**:
```bash
cd developer-portfolio-website
yarn install
```
4. **Personalize Your Content** - Edit `public/data.json` with your name, bio, skills, projects, and experience.
5. **Start the Development Server**:
```bash
yarn dev
```
6. **Open in Browser** - Visit [http://localhost:3000](http://localhost:3000) to preview your portfolio.
7. **Build for Production**:
```bash
yarn build
```
The static output is exported to the `/out` directory, ready to deploy to any static hosting provider.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### Contributing
Open-source thrives on collaboration. Bug reports, feature suggestions, documentation improvements, and code contributions are all genuinely appreciated - no contribution is too small.
**To contribute code:**
1. **Fork** the repository.
2. **Clone** your fork locally:
```bash
git clone https://github.com/your-username/developer-portfolio-website.git
```
3. **Create a feature branch**:
```bash
git checkout -b feature/your-feature-name
```
4. **Make your changes** and ensure they pass linting and tests:
```bash
yarn eslint:check && yarn test
```
5. **Commit** with a descriptive message:
```bash
git commit -m "Add: description of your change"
```
6. **Push** to your fork:
```bash
git push origin feature/your-feature-name
```
7. **Open a Pull Request** against the `main` branch.
#### Creating a Release
Once a pull request is approved and merged:
1. **Sync with `main`**:
```bash
git checkout main && git pull origin main
```
2. **Update `CHANGELOG.md`** with a clear description of the changes using [Semantic Versioning](https://semver.org/) (e.g., `v2.1.0`).
3. **Tag the release**:
```bash
git tag -a vX.X.X -m "Release vX.X.X - summary of changes"
```
4. **Push the tag**:
```bash
git push origin vX.X.X
```
Pushing the tag automatically triggers the GitHub Actions workflow to create a new GitHub Release.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
### Contact
**Misha** - [miksoft.pro](https://miksoft.pro)
Have a question, found an issue, or want to discuss a feature? Feel free to open a [GitHub Issue](https://github.com/miksrv/developer-portfolio-website/issues) or reach out directly via the website.
<p align="right">
(<a href="#top">Back to top</a>)
</p>
<!-- MARKDOWN VARIABLES (LINKS, IMAGES) -->
[contributors-badge]: https://img.shields.io/github/contributors/miksrv/developer-portfolio-website.svg?style=for-the-badge
[contributors-url]: https://github.com/miksrv/developer-portfolio-website/graphs/contributors
[forks-badge]: https://img.shields.io/github/forks/miksrv/developer-portfolio-website.svg?style=for-the-badge
[forks-url]: https://github.com/miksrv/developer-portfolio-website/network/members
[stars-badge]: https://img.shields.io/github/stars/miksrv/developer-portfolio-website.svg?style=for-the-badge
[stars-url]: https://github.com/miksrv/developer-portfolio-website/stargazers
[issues-badge]: https://img.shields.io/github/issues/miksrv/developer-portfolio-website.svg?style=for-the-badge
[issues-url]: https://github.com/miksrv/developer-portfolio-website/issues
[license-badge]: https://img.shields.io/github/license/miksrv/developer-portfolio-website.svg?style=for-the-badge
[license-url]: https://github.com/miksrv/developer-portfolio-website/blob/main/LICENSE.txt
[js-badge]: https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000
[js-url]: https://www.javascript.com/
[ts-badge]: https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff
[ts-url]: https://www.typescriptlang.org/
[nextjs-badge]: https://img.shields.io/badge/Next.js-black?logo=next.js&logoColor=white
[nextjs-url]: https://nextjs.org/
[nodejs-badge]: https://img.shields.io/badge/Node.js-6DA55F?logo=node.js&logoColor=white
[nodejs-url]: https://nodejs.org/
[sass-badge]: https://img.shields.io/badge/Sass-C69?logo=sass&logoColor=fff
[sass-url]: https://sass-lang.com/
[githubactions-badge]: https://img.shields.io/badge/GitHub_Actions-2088FF?logo=github-actions&logoColor=white
[githubactions-url]: https://docs.github.com/en/actions
Explore similar templates
Compare previews and descriptions within the same stack and category.
react-resume-template
A personal resume website template for software developers, built with Next.js, React, and TypeScript and styled with Tailwind CSS. Site content is driven by a single data file at /src/data/data.tsx, with types in dataDef.ts and images in src/images/.
Next.js · Portfolio
nxt-lnk
nxt-lnk is a Next.js-based bio link page template that manages personal information and links via BioData.js and LinksData.js, positioned as a self-hosted alternative to Linktree. It groups links by type, supports enabling/disabling individual links, and offers hexagonal or oval avatars.
Next.js · Portfolio
sylph
Sylph is a minimal portfolio and blog template built on Next.js, supporting MDX/Markdown writing, light/dark themes, and automatic OG image generation. It includes sitemap, robots.txt, metadata, and syntax highlighting, with automatic blog timestamps.
Next.js · Portfolio
sleek-portfolio
A modern, responsive portfolio template built with Next.js 15, TypeScript, Tailwind CSS, and Shadcn UI. It includes an MDX blog, project showcase, work experience timeline, and a contact form that receives messages via Telegram Bot.
Next.js · Portfolio
research-website-template
A React + Next.js template for research personal websites, aimed at PhD students and researchers. It centralizes publications, projects, and other content in src/data as arrays of objects, with optional fields automatically generating UI components.
Next.js · Portfolio
shadcn-portfolio
A developer portfolio template built with Next.js 15, shadcn/ui, Tailwind CSS, and Framer Motion, featuring an MDX blog, light and dark modes, responsive design, and SEO meta tags.
Next.js · Portfolio