{"id":49571037,"url":"https://github.com/sagargupta16/portfolio-react","last_synced_at":"2026-05-03T14:03:00.145Z","repository":{"id":172140567,"uuid":"555687145","full_name":"Sagargupta16/portfolio-react","owner":"Sagargupta16","description":"Modern React developer portfolio with Vite, Tailwind CSS, Framer Motion animations, and data-driven architecture. Live at sagargupta.online","archived":false,"fork":false,"pushed_at":"2026-04-27T08:10:59.000Z","size":13049,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-27T10:12:53.789Z","etag":null,"topics":["developer-portfolio","emailjs","framer-motion","github-pages","personal-website","portfolio","portfolio-website","react","responsive-design","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://sagargupta.online/portfolio-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sagargupta16.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Sagargupta16"]}},"created_at":"2022-10-22T04:48:17.000Z","updated_at":"2026-04-27T08:11:03.000Z","dependencies_parsed_at":"2023-11-19T10:27:43.760Z","dependency_job_id":"992356a8-7253-40b2-a3f8-389f3d15fea3","html_url":"https://github.com/Sagargupta16/portfolio-react","commit_stats":null,"previous_names":["sagargupta16/mern-portfolio","sagargupta16/portfolio-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sagargupta16/portfolio-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sagargupta16%2Fportfolio-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sagargupta16%2Fportfolio-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sagargupta16%2Fportfolio-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sagargupta16%2Fportfolio-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sagargupta16","download_url":"https://codeload.github.com/Sagargupta16/portfolio-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sagargupta16%2Fportfolio-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32571456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-portfolio","emailjs","framer-motion","github-pages","personal-website","portfolio","portfolio-website","react","responsive-design","tailwindcss","typescript","vite"],"created_at":"2026-05-03T14:02:59.241Z","updated_at":"2026-05-03T14:03:00.131Z","avatar_url":"https://github.com/Sagargupta16.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Sagargupta16"],"categories":[],"sub_categories":[],"readme":"# Sagar Gupta - Portfolio\n\n![GitHub stars](https://img.shields.io/github/stars/Sagargupta16/portfolio-react?style=flat-square)\n![GitHub forks](https://img.shields.io/github/forks/Sagargupta16/portfolio-react?style=flat-square)\n![License](https://img.shields.io/github/license/Sagargupta16/portfolio-react?style=flat-square)\n![Last Commit](https://img.shields.io/github/last-commit/Sagargupta16/portfolio-react?style=flat-square)\n\n[![CI/CD Pipeline](https://github.com/Sagargupta16/portfolio-react/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/Sagargupta16/portfolio-react/actions/workflows/ci-cd.yml)\n\n![React Version](https://img.shields.io/badge/react-19-blue)\n![TypeScript](https://img.shields.io/badge/typescript-strict-3178c6)\n![Vite Version](https://img.shields.io/badge/vite-7-purple)\n![Tailwind CSS](https://img.shields.io/badge/tailwindcss-v4-06b6d4)\n![Tests](https://img.shields.io/badge/tests-4%20passing-22c55e)\n\n**Live:** [sagargupta.online/portfolio-react](https://sagargupta.online/portfolio-react/)\n\n---\n\n## About\n\nA modern, dark-themed personal portfolio with 3D WebGL hero scene, glassmorphism UI, aurora gradient backgrounds, and rich Motion animations. Built as a single-page scroll application with TypeScript strict mode. All content is data-driven through JSON files for easy maintenance.\n\n---\n\n## Tech Stack\n\n| Category          | Technologies                                  |\n| ----------------- | --------------------------------------------- |\n| **Core**          | React 19, TypeScript, Vite 7, Tailwind CSS v4 |\n| **3D Scene**      | Three.js, React Three Fiber, React Three Drei |\n| **Animations**    | Motion (Framer Motion), tsParticles           |\n| **Fonts**         | Inter Variable, JetBrains Mono (self-hosted)  |\n| **Smooth Scroll** | Lenis (ReactLenis)                            |\n| **Icons**         | Lucide React, React Icons                     |\n| **Contact**       | EmailJS                                       |\n| **GitHub**        | react-github-calendar                         |\n| **Testing**       | Vitest, React Testing Library                 |\n| **Code Quality**  | ESLint (typescript-eslint), Prettier          |\n| **Deployment**    | GitHub Actions, GitHub Pages                  |\n\n---\n\n## Sections\n\n| Section          | Features                                                                                     |\n| ---------------- | -------------------------------------------------------------------------------------------- |\n| **Hero**         | 3D wireframe scene, particle field, role cycling, adaptive performance monitor               |\n| **About**        | Character reveal animation, highlights, animated stat counters                               |\n| **Experience**   | Clickable timeline cards with modal (projects, internal contributions, achievements, skills) |\n| **Education**    | Academic timeline with CGPA counters and achievement highlights                              |\n| **Skills**       | Wave cascade tags, scroll-reveal text, categorized grid                                      |\n| **Projects**     | Filterable cards (Featured/Community/Collab/Others) + open source PR banner                  |\n| **Achievements** | Certifications (auto-synced from Credly), badges, competitions                               |\n| **Services**     | Bento grid layout with rotation entrance                                                     |\n| **GitHub**       | 3D browser mockup, contribution calendar, coding profile cards                               |\n| **Contact**      | Contact form with animated gradient border on focus                                          |\n\n---\n\n## Getting Started\n\n```bash\n# Clone the repository\ngit clone https://github.com/Sagargupta16/portfolio-react.git\ncd portfolio-react\n\n# Install dependencies (requires pnpm \u003e=10, Node \u003e=24.11)\npnpm install\n\n# Start dev server (port 3000)\npnpm dev\n\n# Run tests\npnpm test\n\n# Production build\npnpm build\n```\n\n## Scripts\n\n| Command           | Description                      |\n| ----------------- | -------------------------------- |\n| `pnpm dev`        | Start development server         |\n| `pnpm build`      | Production build to `/build`     |\n| `pnpm preview`    | Preview production build         |\n| `pnpm test`       | Run Vitest smoke tests           |\n| `pnpm lint`       | ESLint (strict, zero warnings)   |\n| `pnpm lint:fix`   | ESLint with auto-fix             |\n| `pnpm format`     | Prettier format all files        |\n| `pnpm type-check` | TypeScript type checking         |\n| `pnpm clean`      | Remove build artifacts and cache |\n\n---\n\n## Project Structure\n\n```\ndata/                                  # JSON content files (edit these to customize)\n├── personal.json\n├── experience.json\n├── education.json\n├── skills.json\n├── projects.json\n├── achievements.json\n├── services.json\n└── contact.json\nsrc/\n├── __tests__/                         # Vitest smoke tests + setup\n├── components/\n│   ├── 3d/                            # Three.js hero scene + geometries\n│   ├── common/                        # ErrorBoundary\n│   ├── layout/\n│   │   ├── Header/                    # Hero (split into sub-components)\n│   │   ├── Navigation/                # Nav + DesktopNav + MobileMenu\n│   │   ├── Footer/                    # Footer + sub-components\n│   │   └── PageSection.tsx            # Reusable section wrapper\n│   └── ui/\n│       ├── AuroraBlobs.tsx            # Fluid aurora gradient background\n│       ├── ShootingStars.tsx          # Animated light streaks\n│       ├── BrowserMockup.tsx          # 3D tilted browser window\n│       ├── TerminalCard.tsx           # Auto-typing terminal\n│       ├── CharacterReveal.tsx        # Spring char-by-char animation\n│       ├── ScrollRevealText.tsx       # Scroll-driven gradient text\n│       ├── GlassCard.tsx              # Hover tilt + cursor glow card\n│       ├── TechTag.tsx                # Reusable skill/tech tag\n│       └── ...\n├── constants/\n│   └── theme.ts                       # Centralized colors, fonts, spacing\n├── data/\n│   └── dataLoader.ts                  # Typed getter functions for JSON data\n├── hooks/                             # Custom interaction hooks\n├── pages/                             # 9 page sections (each split into sub-files)\n├── types/\n│   └── index.ts                       # All data interfaces (19 types)\n├── utils/\n│   ├── animations.ts                  # 16 Motion variant presets\n│   ├── useMediaQuery.ts               # Responsive breakpoint hook\n│   └── useReducedMotion.ts            # Accessibility motion hook\n├── App.tsx                            # Root layout with ReactLenis\n├── index.tsx                          # Entry point\n└── index.css                          # Tailwind theme + glassmorphism + keyframes\n```\n\n---\n\n## Data-Driven Content\n\nAll portfolio content lives in JSON files under `data/` at the project root:\n\n| File                | Content                                                          |\n| ------------------- | ---------------------------------------------------------------- |\n| `personal.json`     | Name, roles, bio, statistics, social profiles                    |\n| `education.json`    | Degrees, institutions, CGPA                                      |\n| `experience.json`   | Professional experience + positions of responsibility            |\n| `skills.json`       | Categorized skills (6 primary + 3 secondary categories)          |\n| `services.json`     | Service offerings                                                |\n| `projects.json`     | Featured, collaborative, community, other projects, open source PRs, and community discussions |\n| `achievements.json` | Certifications, badges, competitions, coding stats (auto-synced) |\n| `contact.json`      | Contact options + EmailJS config                                 |\n\nThe `dataLoader.ts` module provides 22 typed getter functions. To update content, edit the JSON files only.\n\nCertifications are automatically synced from Credly via a weekly GitHub Actions workflow (`sync-credly.yml`).\n\n---\n\n## Environment Variables\n\nCopy `.env.example` to `.env` and configure:\n\n- `VITE_EMAILJS_SERVICE_ID` - EmailJS service ID\n- `VITE_EMAILJS_TEMPLATE_ID` - EmailJS template ID\n- `VITE_EMAILJS_PUBLIC_KEY` - EmailJS public key\n\n---\n\n## Deployment\n\nAutomated via GitHub Actions CI/CD pipeline (all actions pinned to SHA hashes):\n\n1. Install dependencies (frozen lockfile)\n2. Lint (zero warnings enforced)\n3. Validate JSON data files\n4. Production build\n5. Security audit\n6. Deploy to GitHub Pages (only on push to `main`)\n\n---\n\n## More Projects\n\n| Project | Description |\n|---------|-------------|\n| [claude-cost-optimizer](https://github.com/Sagargupta16/claude-cost-optimizer) | Save 30-60% on Claude Code costs - proven strategies and benchmarks |\n| [Financial Dashboard](https://github.com/Sagargupta16/Financial-Dashboard) | Modern React financial dashboard with analytics and data visualization |\n| [InstagramLikesLeaderboard](https://github.com/Sagargupta16/InstagramLikesLeaderboard) | Browser tool showing who likes your Instagram posts the most |\n| [LeetCode Rating Predictor](https://github.com/Sagargupta16/LeetCode_Rating_Predictor) | Full-stack ML-powered LeetCode contest rating predictor |\n\n---\n\n## License\n\nGPL-3.0 -- see [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagargupta16%2Fportfolio-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagargupta16%2Fportfolio-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagargupta16%2Fportfolio-react/lists"}