A personal portfolio built with Next.js 16 and React 19 that showcases professional experience, technical skills, certification credentials, technical writing, and SEO optimization.
This portfolio is a custom Next.js application rendered from index.jsx and structured with reusable React components located under the components/ directory. The visual theme uses premium glassmorphism patterns, custom typography, and accent gradients.
Key sections:
- Hero: Introduction with typing roles animation, availability tag, custom coding terminal card, and quick social links.
- Navbar: Responsive sticky bar featuring a client-side theme switcher dropdown (System, Light, Dark) and mobile drawer toggle.
- Skills: Glassmorphic columns with color-accent indicators.
- Experience: Responsive tabbed layout that highlights career roles, Citibank lead details, and solves contrast readability issues.
- Achievements: Grid showcasing metrics in gradient typography with hover scaling.
- Certifications: Gallery highlighting AWS/MongoDB vendor credentials and course certificates in clickable overlays.
- Background: Integrated three-column dashboard displaying education, interest tags, and high-level statistics.
- Blog Page: Detailed layout showing technical insights with direct Medium publication links and readability contrast configurations.
- Next.js 16 & React 19
- Tailwind CSS v4: Built with full utilities and theme variables configured in globals.css for Light and Dark modes.
- Dynamic SEO Utilities: Custom sitemap.ts and robots.ts dynamically generating crawler directories on build.
- JSON-LD Structured Data: Injected Person schemas inside root metadata layouts to optimize rich search snippet rankings.
- Modern Typography: Integrated Outfit (headings/display) and Plus Jakarta Sans (body text) fonts.
Install dependencies first:
npm installStart the development server:
npm run devOpen the site in your browser at:
http://localhost:3000
Build for production:
npm run buildStart the production server after building:
npm startindex.jsx— root client component managing page layout, global fonts, and theme loadersapp/page.tsx— Next.js index entry renderingAppapp/layout.tsx— Next.js layout setting up SEO metadata, JSON-LD schemas, and scriptsapp/sitemap.ts— dynamic XML sitemap generation rulesapp/robots.ts— search engine indexing rules and crawler policiesapp/globals.css— global design variables, glassmorphic panels, and hover animationscomponents/— reusable styling structures for sectionscomponents/data.js— central registry for skills, timeline, achievements, and certificate pathscomponents/utils.js— shared viewport hooks and scroll animatorspublic/certificates/— local images displaying credentials
To update profile details or achievements, edit the data structure inside components/data.js.
To append credentials, upload certificate files to public/certificates/ and register them inside COURSE_CERTS in components/data.js.
This portfolio project is licensed under the MIT License.