https://github.com/sa001gar/portfolio-website-next-js
A Hacker-inspired Developer Portfolio with terminal vibes and classic green-on-black aesthetics
https://github.com/sa001gar/portfolio-website-next-js
blog contentful-cms developer nextjs15 portfolio portfolio-site portfolio-template portfolio-website software software-developer software-developer-portfolio
Last synced: 9 days ago
JSON representation
A Hacker-inspired Developer Portfolio with terminal vibes and classic green-on-black aesthetics
- Host: GitHub
- URL: https://github.com/sa001gar/portfolio-website-next-js
- Owner: sa001gar
- License: agpl-3.0
- Created: 2025-05-23T16:54:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-26T22:54:43.000Z (7 months ago)
- Last Synced: 2025-12-28T13:13:10.280Z (7 months ago)
- Topics: blog, contentful-cms, developer, nextjs15, portfolio, portfolio-site, portfolio-template, portfolio-website, software, software-developer, software-developer-portfolio
- Language: TypeScript
- Homepage: https://portfolio.sagarkundu.live
- Size: 7.72 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
❯ Sagar Kundu | Full Stack Developer & Cyber Expert
Built with the tools and technologies:
## 🔗 Table of Contents
- [📍 Overview](#-overview)
- [👾 Features](#-features)
- [📁 Project Structure](#-project-structure)
- [📂 Project Index](#-project-index)
- [🚀 Getting Started](#-getting-started)
- [☑️ Prerequisites](#-prerequisites)
- [⚙️ Installation](#-installation)
- [🤖 Usage](#🤖-usage)
- [🧪 Testing](#🧪-testing)
- [📌 Project Roadmap](#-project-roadmap)
- [🔰 Contributing](#-contributing)
- [🎗 License](#-license)
- [🙌 Acknowledgments](#-acknowledgments)
---
## 📍 Overview
This portfolio website is built using **Next.js**, a powerful React framework for server-side rendering and static site generation. It leverages **Contentful CMS** as the backend to manage and deliver content seamlessly. The combination of these technologies ensures a fast, scalable, and dynamic user experience, making it an ideal platform to showcase projects, skills, and professional achievements.
---
## 👾 Features
- **Dynamic Blog Section**: A fully dynamic blog section that fetches and displays articles from a CMS, allowing for seamless content updates without redeploying the site.
- **Projects Showcase**: A visually appealing and interactive projects section that highlights your work with detailed descriptions, images, and links to live demos or repositories.
- **Linux-Inspired UI**: A sleek, hacker-style interface inspired by Linux terminal aesthetics, featuring dark mode, terminal-like animations, and a focus on backend development tools.
- **Responsive Design**: Fully responsive layout ensuring a seamless experience across all devices, from desktops to mobile phones.
- **Contentful CMS Integration**: Backend powered by Contentful CMS for easy content management and scalability.
- **Fast and Secure**: Built with Next.js for server-side rendering and optimized performance, ensuring fast load times and enhanced security.
- **Customizable Themes**: Ability to switch between themes, including a hacker-style dark theme and a professional light theme.
- **SEO Optimized**: Fully optimized for search engines to improve visibility and reach.
- **Interactive Animations**: Subtle animations and transitions to enhance user engagement without compromising performance.
- **Developer-Friendly**: Clean, modular codebase with extensive documentation for easy customization and contribution.
---
## 📁 Project Structure
```sh
└── portfolio-website-next-js/
├── README.md
├── app
│ ├── about
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── blog
│ │ ├── [slug]
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── contact
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── experience
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── globals.css
│ ├── layout.tsx
│ ├── loading.tsx
│ ├── page.tsx
│ ├── project
│ │ ├── [slug]
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── robots.ts
│ └── sitemap.ts
├── bun.lock
├── components
│ ├── analytics.tsx
│ ├── animated-section.tsx
│ ├── animation-settings-panel.tsx
│ ├── command-line.tsx
│ ├── contact-form.tsx
│ ├── contact-section.tsx
│ ├── credentials-section.tsx
│ ├── enhanced-profile.tsx
│ ├── enhanced-scroll-indicator.tsx
│ ├── experience-card.tsx
│ ├── page-loader.tsx
│ ├── portfolio-header.tsx
│ ├── project-card.tsx
│ ├── pwa-install-prompt.tsx
│ ├── scroll-progress-indicator.tsx
│ ├── scroll-to-top-button.tsx
│ ├── scroll-to-top.tsx
│ ├── search-filter.tsx
│ ├── service-worker-registration.tsx
│ ├── sidebar.tsx
│ ├── skill-tag.tsx
│ ├── social-links.tsx
│ ├── terminal-command.tsx
│ ├── terminal-loader.tsx
│ ├── terminal-provider.tsx
│ ├── terminal-text.tsx
│ ├── terminal-window.tsx
│ ├── theme-provider.tsx
│ └── ui
│ ├── accordion.tsx
│ ├── alert-dialog.tsx
│ ├── alert.tsx
│ ├── aspect-ratio.tsx
│ ├── avatar.tsx
│ ├── badge.tsx
│ ├── breadcrumb.tsx
│ ├── button.tsx
│ ├── calendar.tsx
│ ├── card.tsx
│ ├── carousel.tsx
│ ├── chart.tsx
│ ├── checkbox.tsx
│ ├── collapsible.tsx
│ ├── command.tsx
│ ├── context-menu.tsx
│ ├── dialog.tsx
│ ├── drawer.tsx
│ ├── dropdown-menu.tsx
│ ├── form.tsx
│ ├── hover-card.tsx
│ ├── input-otp.tsx
│ ├── input.tsx
│ ├── label.tsx
│ ├── menubar.tsx
│ ├── navigation-menu.tsx
│ ├── pagination.tsx
│ ├── popover.tsx
│ ├── progress.tsx
│ ├── radio-group.tsx
│ ├── resizable.tsx
│ ├── scroll-area.tsx
│ ├── select.tsx
│ ├── separator.tsx
│ ├── sheet.tsx
│ ├── sidebar.tsx
│ ├── skeleton.tsx
│ ├── slider.tsx
│ ├── sonner.tsx
│ ├── switch.tsx
│ ├── table.tsx
│ ├── tabs.tsx
│ ├── textarea.tsx
│ ├── toast.tsx
│ ├── toaster.tsx
│ ├── toggle-group.tsx
│ ├── toggle.tsx
│ ├── tooltip.tsx
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── components.json
├── contexts
│ └── animation-context.tsx
├── data
│ └── portfolio-data.json
├── hooks
│ ├── use-intersection-observer.ts
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── lib
│ ├── data.ts
│ ├── projects.ts
│ ├── sitemap-utils.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│ ├── browserconfig.xml
│ ├── certs
│ │ └── ec-council.png
│ ├── favicon.avif
│ ├── placeholder-logo.png
│ ├── placeholder-logo.svg
│ ├── placeholder-user.jpg
│ ├── placeholder.jpg
│ ├── placeholder.svg
│ ├── projects
│ │ └── applied-physio
│ ├── sagarkundu.avif
│ ├── sagarkundu_square.avif
│ ├── site.webmanifest
│ └── sw.js
├── styles
│ └── globals.css
├── tailwind.config.js
└── tsconfig.json
```
### 📂 Project Index
PORTFOLIO-WEBSITE-NEXT-JS/
__root__
next.config.mjs
❯ REPLACE-ME
pnpm-lock.yaml
❯ REPLACE-ME
tsconfig.json
❯ REPLACE-ME
tailwind.config.js
❯ REPLACE-ME
postcss.config.mjs
❯ REPLACE-ME
package.json
❯ REPLACE-ME
components.json
❯ REPLACE-ME
contexts
animation-context.tsx
❯ REPLACE-ME
lib
data.ts
❯ REPLACE-ME
sitemap-utils.ts
❯ REPLACE-ME
projects.ts
❯ REPLACE-ME
utils.ts
❯ REPLACE-ME
styles
globals.css
❯ REPLACE-ME
components
portfolio-header.tsx
❯ REPLACE-ME
pwa-install-prompt.tsx
❯ REPLACE-ME
terminal-loader.tsx
❯ REPLACE-ME
contact-form.tsx
❯ REPLACE-ME
theme-provider.tsx
❯ REPLACE-ME
scroll-to-top.tsx
❯ REPLACE-ME
credentials-section.tsx
❯ REPLACE-ME
skill-tag.tsx
❯ REPLACE-ME
search-filter.tsx
❯ REPLACE-ME
scroll-progress-indicator.tsx
❯ REPLACE-ME
terminal-window.tsx
❯ REPLACE-ME
animation-settings-panel.tsx
❯ REPLACE-ME
sidebar.tsx
❯ REPLACE-ME
contact-section.tsx
❯ REPLACE-ME
scroll-to-top-button.tsx
❯ REPLACE-ME
analytics.tsx
❯ REPLACE-ME
animated-section.tsx
❯ REPLACE-ME
social-links.tsx
❯ REPLACE-ME
enhanced-scroll-indicator.tsx
❯ REPLACE-ME
terminal-provider.tsx
❯ REPLACE-ME
page-loader.tsx
❯ REPLACE-ME
experience-card.tsx
❯ REPLACE-ME
project-card.tsx
❯ REPLACE-ME
enhanced-profile.tsx
❯ REPLACE-ME
terminal-command.tsx
❯ REPLACE-ME
terminal-text.tsx
❯ REPLACE-ME
service-worker-registration.tsx
❯ REPLACE-ME
command-line.tsx
❯ REPLACE-ME
ui
context-menu.tsx
❯ REPLACE-ME
toaster.tsx
❯ REPLACE-ME
accordion.tsx
❯ REPLACE-ME
alert-dialog.tsx
❯ REPLACE-ME
radio-group.tsx
❯ REPLACE-ME
checkbox.tsx
❯ REPLACE-ME
input-otp.tsx
❯ REPLACE-ME
sheet.tsx
❯ REPLACE-ME
progress.tsx
❯ REPLACE-ME
badge.tsx
❯ REPLACE-ME
breadcrumb.tsx
❯ REPLACE-ME
sidebar.tsx
❯ REPLACE-ME
pagination.tsx
❯ REPLACE-ME
label.tsx
❯ REPLACE-ME
scroll-area.tsx
❯ REPLACE-ME
input.tsx
❯ REPLACE-ME
textarea.tsx
❯ REPLACE-ME
toast.tsx
❯ REPLACE-ME
separator.tsx
❯ REPLACE-ME
toggle-group.tsx
❯ REPLACE-ME
command.tsx
❯ REPLACE-ME
popover.tsx
❯ REPLACE-ME
slider.tsx
❯ REPLACE-ME
form.tsx
❯ REPLACE-ME
select.tsx
❯ REPLACE-ME
button.tsx
❯ REPLACE-ME
drawer.tsx
❯ REPLACE-ME
toggle.tsx
❯ REPLACE-ME
dialog.tsx
❯ REPLACE-ME
alert.tsx
❯ REPLACE-ME
carousel.tsx
❯ REPLACE-ME
navigation-menu.tsx
❯ REPLACE-ME
table.tsx
❯ REPLACE-ME
tabs.tsx
❯ REPLACE-ME
skeleton.tsx
❯ REPLACE-ME
use-toast.ts
❯ REPLACE-ME
switch.tsx
❯ REPLACE-ME
dropdown-menu.tsx
❯ REPLACE-ME
collapsible.tsx
❯ REPLACE-ME
menubar.tsx
❯ REPLACE-ME
resizable.tsx
❯ REPLACE-ME
chart.tsx
❯ REPLACE-ME
avatar.tsx
❯ REPLACE-ME
hover-card.tsx
❯ REPLACE-ME
aspect-ratio.tsx
❯ REPLACE-ME
calendar.tsx
❯ REPLACE-ME
tooltip.tsx
❯ REPLACE-ME
sonner.tsx
❯ REPLACE-ME
use-mobile.tsx
❯ REPLACE-ME
card.tsx
❯ REPLACE-ME
hooks
use-intersection-observer.ts
❯ REPLACE-ME
use-toast.ts
❯ REPLACE-ME
use-mobile.tsx
❯ REPLACE-ME
public
favicon.avif
❯ REPLACE-ME
sagarkundu_square.avif
❯ REPLACE-ME
sagarkundu.avif
❯ REPLACE-ME
site.webmanifest
❯ REPLACE-ME
sw.js
❯ REPLACE-ME
projects
applied-physio
main.avif
❯ REPLACE-ME
services.avif
❯ REPLACE-ME
contact.avif
❯ REPLACE-ME
app
layout.tsx
❯ REPLACE-ME
sitemap.ts
❯ REPLACE-ME
globals.css
❯ REPLACE-ME
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
robots.ts
❯ REPLACE-ME
about
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
contact
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
experience
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
project
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
[slug]
not-found.tsx
❯ REPLACE-ME
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
blog
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
[slug]
page.tsx
❯ REPLACE-ME
loading.tsx
❯ REPLACE-ME
---
## 🚀 Getting Started
### ☑️ Prerequisites
Before getting started with portfolio-website-next-js, ensure your runtime environment meets the following requirements:
- **Programming Language:** TypeScript
- **Package Manager:** Npm
### ⚙️ Installation
Install portfolio-website-next-js using one of the following methods:
**Build from source:**
1. Clone the portfolio-website-next-js repository:
```sh
❯ git clone https://github.com/sa001gar/portfolio-website-next-js
```
2. Navigate to the project directory:
```sh
❯ cd portfolio-website-next-js
```
3. Install the project dependencies:
**Using `npm`** [
](https://www.npmjs.com/)
```sh
❯ npm install
```
### 🤖 Usage
Run portfolio-website-next-js using the following command:
**Using `npm`** [](https://www.npmjs.com/)
```sh
❯ npm start
```
### 🧪 Testing
Run the test suite using the following command:
**Using `npm`** [](https://www.npmjs.com/)
```sh
❯ npm test
```
---
## 📌 Project Roadmap
- [X] **`Task 1`**: Contact form submission through Web3 forms.
- [X] **`Task 2`**: Blog Posting using Contentful Headless CMS.
- [ ] **`Task 3`**: SEO optimization and Improve Page Speed.
---
## 🔰 Contributing
- **💬 [Join the Discussions](https://github.com/sa001gar/portfolio-website-next-js/discussions)**: Share your insights, provide feedback, or ask questions.
- **🐛 [Report Issues](https://github.com/sa001gar/portfolio-website-next-js/issues)**: Submit bugs found or log feature requests for the `portfolio-website-next-js` project.
- **💡 [Submit Pull Requests](https://github.com/sa001gar/portfolio-website-next-js/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs.
Contributing Guidelines
1. **Fork the Repository**: Start by forking the project repository to your github account.
2. **Clone Locally**: Clone the forked repository to your local machine using a git client.
```sh
git clone https://github.com/sa001gar/portfolio-website-next-js
```
3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name.
```sh
git checkout -b new-feature-x
```
4. **Make Your Changes**: Develop and test your changes locally.
5. **Commit Your Changes**: Commit with a clear message describing your updates.
```sh
git commit -m 'Implemented new feature x.'
```
6. **Push to github**: Push the changes to your forked repository.
```sh
git push origin new-feature-x
```
7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. **Review**: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph
---
## 🎗 License
This project is protected under the [GNU Affero General Public License v3.0](LICENSE) License. For more details, refer to the [LICENSE](LICENSE) file.
---
## 🙌 Acknowledgments
- Props to my mom for unintentionally dropping the UI idea that sparked this terminal-style hacker aesthetic. Genius hides in plain sight.
---
