GitHub - sa001gar/portfolio-website-next-js: A Hacker-inspired Developer Portfolio with terminal vibes and classic green-on-black aesthetics

❯ Sagar Kundu | Full Stack Developer & Cyber Expert

Built with the tools and technologies:

🔗 Table of Contents

📍 Overview
👾 Features
📁 Project Structure
- 📂 Project Index
🚀 Getting Started
📌 Project Roadmap
🔰 Contributing
🎗 License
🙌 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

└── 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:

Clone the portfolio-website-next-js repository:

❯ git clone https://github.com/sa001gar/portfolio-website-next-js

Navigate to the project directory:

❯ cd portfolio-website-next-js

Install the project dependencies:

Using npm

❯ npm install

🤖 Usage

Run portfolio-website-next-js using the following command: Using npm

❯ npm start

🧪 Testing

Run the test suite using the following command: Using npm

❯ npm test

📌 Project Roadmap

Task 1: ~~Contact form submission through Web3 forms.~~
Task 2: Blog Posting using Contentful Headless CMS.
Task 3: SEO optimization and Improve Page Speed.

🔰 Contributing

💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
🐛 Report Issues: Submit bugs found or log feature requests for the portfolio-website-next-js project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your github account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/sa001gar/portfolio-website-next-js
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to github: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
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. For more details, refer to the 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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

🔗 Table of Contents

📍 Overview

👾 Features

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation

🤖 Usage

🧪 Testing

📌 Project Roadmap

🔰 Contributing

🎗 License

🙌 Acknowledgments

About

Uh oh!

Releases

Packages

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 29 Commits
app		app
components		components
contexts		contexts
data		data
hooks		hooks
lib		lib
public		public
styles		styles
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
components.json		components.json
image.svg		image.svg
main.py		main.py
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
portfolio-banner.svg		portfolio-banner.svg
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

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`

data.ts	`❯ REPLACE-ME`
sitemap-utils.ts	`❯ REPLACE-ME`
projects.ts	`❯ REPLACE-ME`
utils.ts	`❯ REPLACE-ME`

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`

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`

use-intersection-observer.ts	`❯ REPLACE-ME`
use-toast.ts	`❯ REPLACE-ME`
use-mobile.tsx	`❯ REPLACE-ME`

favicon.avif	`❯ REPLACE-ME`
sagarkundu_square.avif	`❯ REPLACE-ME`
sagarkundu.avif	`❯ REPLACE-ME`
site.webmanifest	`❯ REPLACE-ME`
sw.js	`❯ REPLACE-ME`

main.avif	`❯ REPLACE-ME`
services.avif	`❯ REPLACE-ME`
contact.avif	`❯ REPLACE-ME`

layout.tsx	`❯ REPLACE-ME`
sitemap.ts	`❯ REPLACE-ME`
globals.css	`❯ REPLACE-ME`
page.tsx	`❯ REPLACE-ME`
loading.tsx	`❯ REPLACE-ME`
robots.ts	`❯ REPLACE-ME`

not-found.tsx	`❯ REPLACE-ME`
page.tsx	`❯ REPLACE-ME`
loading.tsx	`❯ REPLACE-ME`

License

sa001gar/portfolio-website-next-js

Folders and files

Latest commit

History

Repository files navigation

🔗 Table of Contents

📍 Overview

👾 Features

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation

🤖 Usage

🧪 Testing

📌 Project Roadmap

🔰 Contributing

🎗 License

🙌 Acknowledgments

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages