Skip to content

rajghosh06-dev/portfolio

BranchesTags

Repository files navigation

Rishit Ghosh Portfolio

A multi-page personal portfolio built with Next.js, React, TypeScript, Framer Motion, and a heavily customized CSS system. The project is designed to present Rishit Ghosh’s academic background, projects, skills, experience, and contact channels in a polished, recruiter-friendly format while keeping content easy to maintain through centralized JSON files.

This is not a generic starter anymore. The codebase has been refactored into a structured portfolio system with:

  • a custom floating navbar and SVG brand mark
  • light mode, dark mode, and a site-wide experimental Glass Mode
  • editable JSON content sources
  • reusable page/card/button components
  • motion and hover systems across major UI surfaces
  • a protected profile-image wrapper for casual download deterrence

Overview

The portfolio uses the Next.js Pages Router and a shared MainLayout to provide a consistent shell across all pages. The visual language blends:

  • soft grid-and-orb light backgrounds
  • darker neon-accented dark mode styling
  • glassmorphism as an optional enhancement layer
  • animated cards and polished CTA patterns

The overall goal of the project is twofold:

  1. present a strong personal brand with modern UI polish
  2. keep the content layer simple enough to edit without touching core source code

Core Pages

Home

The landing page is structured as a high-impact introduction plus supporting proof points. It includes:

  • a hero section with positioning statement and CTA buttons
  • a professional profile tile with a formal portrait
  • a current-education panel with academic status, expected graduation, and skill cloud
  • featured project previews
  • applied learning and experience highlights
  • certifications and workshop cards
  • a footer-top Glass Mode beta control

About

The About page is a structured narrative page that presents:

  • introduction and identity
  • academic and technical background
  • project and portfolio philosophy
  • leadership and community engagement
  • workflow principles
  • personal interests and long-term vision

Projects

The Projects page showcases the main build archive with:

  • a page-level introduction
  • project statistics
  • filter chips by project category
  • reusable project cards with images, notes, stack, summary, and highlights

Skills

The Skills page organizes the technical foundation through:

  • grouped skill cards
  • academic timeline content
  • certifications
  • workshop and learning history

Contact

The Contact page uses styled platform cards instead of bare hyperlinks. It presents:

  • email
  • GitHub
  • LinkedIn
  • Twitter

Each platform is framed as an intentional contact surface rather than a plain text link list.

Feature Highlights

1. Theme System

The site supports:

  • Light mode
  • Dark mode
  • Glass Mode beta overlay

The theme state is centralized in src/utils/ThemeContext.tsx. It stores user preferences in localStorage and applies global HTML-level state using:

  • the dark class for dark theme
  • data-glass-mode="true" for Glass Mode

This makes the styling system easy to scale because the CSS can respond to one global source of truth.

2. Glass Mode

Glass Mode is an experimental visual layer controlled from the footer-top beta tile. When enabled, it transforms major surfaces across the site into a frosted-glass aesthetic using:

  • semi-transparent layered backgrounds
  • backdrop-filter blur
  • brighter border edges
  • softened gradient illumination
  • hover states with richer highlights

Glass Mode works in both light and dark themes and has its own tuning for contrast and surface clarity.

3. Editable JSON Content Layer

One of the most important refactors in this portfolio is the move away from scattered hardcoded content. Most editable information lives under:

src/data/content/

This allows content updates without editing page logic or component code.

Current editable sources include:

  • academics.json
  • certificates.json
  • experience.json
  • home.json
  • projects.json
  • skills.json

TypeScript wrapper files inside src/data/ read those JSON files and provide typed exports to the rest of the app.

4. Reusable UI Components

The project uses a reusable component layer for consistency:

5. Motion and Interaction

Framer Motion is used for entry animations, while CSS handles:

  • hover lifts
  • border glow shifts
  • icon motion
  • media scaling
  • chip and badge reactions

The result is a portfolio that feels active without becoming noisy.

6. Profile Image Protection

The profile photo on the home page uses a wrapper in src/security/ProtectedImage.tsx to discourage casual image downloading by:

  • disabling right-click on the image area
  • disabling drag behavior
  • disabling standard pointer interaction on the underlying image
  • placing a transparent shield layer above the image

Important note: this is a deterrent, not absolute protection. Any browser-delivered image can still be captured by determined users.

Tech Stack

Framework

  • Next.js 16.2.1
  • Pages Router

Frontend

  • React 19.2.4
  • TypeScript 5
  • Framer Motion 12.38.0
  • Lucide React icons

Styling

  • Tailwind CSS installed in the project
  • custom global CSS as the primary styling system
  • Google Font imports through CSS

Tooling

  • ESLint
  • TypeScript type-checking during build
  • PostCSS / Autoprefixer

Architecture

Application Shell

The global shell is provided by:

Responsibilities:

  • attach global CSS
  • wrap the app in the theme provider
  • set the root HTML attributes
  • render the persistent navbar and footer
  • mount the custom light-mode background scene

Data Flow

The data system follows this pattern:

JSON content -> typed wrapper -> page/component consumption

Examples:

This keeps the main UI safer while still allowing fast edits.

Styling Strategy

Most visual behavior lives in src/styles/globals.css. The file contains:

  • theme variables
  • navbar styles
  • button styles
  • page-specific layouts
  • shared hover systems
  • dark-mode overrides
  • Glass Mode global overrides

This portfolio currently relies more on carefully authored CSS than on utility-only styling.

Folder Structure

src/
├── components/
│   ├── Button.tsx
│   ├── DarkModeToggle.tsx
│   ├── Footer.tsx
│   ├── GlassModeToggle.tsx
│   ├── Navbar.tsx
│   ├── ProjectCard.tsx
│   └── SkillCard.tsx
├── data/
│   ├── contact.ts
│   ├── home.ts
│   ├── profile.ts
│   ├── projects.ts
│   ├── skills.ts
│   └── content/
│       ├── academics.json
│       ├── certificates.json
│       ├── experience.json
│       ├── home.json
│       ├── projects.json
│       └── skills.json
├── layouts/
│   └── MainLayout.tsx
├── pages/
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── about.tsx
│   ├── contact.tsx
│   ├── index.tsx
│   ├── projects.tsx
│   └── skills.tsx
├── security/
│   └── ProtectedImage.tsx
├── styles/
│   ├── globals.css
│   └── tailwind.css
└── utils/
    ├── ThemeContext.tsx
    ├── animations.ts
    ├── darkTheme.ts
    ├── lightTheme.ts
    └── PRESET/

How To Update Content

Update academic information

Edit:

Update certifications or workshops

Edit:

Update experience highlights

Edit:

Update home-page education/profile labels

Edit:

Update project archive

Edit:

Update skill groups

Edit:

Local Development

Install dependencies

npm install

Start the dev server

npm run dev

Lint the project

npm run lint

Create a production build

npm run build

Start the production server

npm run start

Notes About Development

Smooth scrolling

The project uses:

  • scroll-behavior: smooth in global CSS
  • data-scroll-behavior="smooth" on the root HTML element

This prevents the Next.js development warning related to route-transition scrolling behavior.

Image handling

The home-page portrait is imported from private/ and rendered through a protective wrapper. Public images for project cards and other visual assets live under public/.

Current styling direction

The portfolio intentionally avoids a plain boilerplate look. It leans into:

  • expressive hero structure
  • hover-driven motion
  • gradient accents
  • frosted surfaces
  • glassmorphism as an optional premium layer

Why This Project Stands Out

This portfolio is not just a personal website. It is also a structured frontend system built around:

  • content modularity
  • repeatable editing workflow
  • visual experimentation
  • recruiter-facing presentation quality
  • incremental refinement without rewriting the entire app each time

That combination makes it useful both as a portfolio and as a case study in personal-site architecture.

Verification

The project is routinely verified with:

  • npm run lint
  • npm run build

If a build shows spawn EPERM in a restricted Windows sandbox, that is an environment restriction rather than a project code issue.

Contact

Built as a structured, evolving portfolio system for Rishit Ghosh.

About

Modular personal portfolio built with HTML, CSS, and JavaScript. Dynamically showcases skills, education, projects, certifications, workshops, and experience using JSON-driven content.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages