Aryan Gupta 个人作品集网站：React + TypeScript 打造的软件工程作品集

Aryan Gupta | SWE

A high-performance, responsive software engineering portfolio and interactive design experience built with React, TypeScript, and modern web tools.

Crafted with precision, thoughtful typography, and smooth micro-interactions.

🔗 Live Demo: portfolio-website-p3d7.onrender.com

📖 Table of Contents

📸 Preview

A quick look at the website on desktop, tablet and mobile.

✨ About The Project

Welcome to my personal developer portfolio! This website is designed to be more than just a static resume—it is a fast, interactive digital home that showcases real-world software engineering work, hands-on artificial intelligence projects, and technical writing.

🎯 For Visitors & Recruiters

If you are a recruiter, hiring manager, or visitor browsing my work:

Hero & Story: Learn about my background, technical focus, and passion for building reliable software.
Featured Projects: Explore case studies with live demos, GitHub repositories, and breakdown of problem-solving decisions.
Education & Certifications: View verified credentials with inline modal previews and verification links.
Thoughts & Articles: Read technical blogs covering AI engineering, developer career paths, and software fundamentals—complete with reading tracking and click-to-expand image lightboxes.
Get in Touch: Send a direct message through the built-in contact form without leaving the page.

💻 For Developers

Under the hood, this application demonstrates clean frontend architecture and performance engineering:

Sticky Pinned Scroll Orchestration: A continuous 200vh pinned track in the Hero section featuring dynamic crossfade transitions between portrait states.
Kinetic Text Scrubbing: Word-by-word opacity transitions driven directly by viewport scroll progress.
Normalized Momentum Scrolling: Powered by Lenis with intelligent locks during modal presentation.
Accessible Interactions: ARIA-compliant modals, trapped keyboard navigation (Tab / Escape), and reduced-motion detection.

🚀 Key Features

📱 Fully Responsive Layout: Hand-tailored experiences across Mobile (390px), Tablet (810px), and Desktop (1280px).
🎬 200vh Pinned Hero Track: Sticky narrative introduction with layered content animation.
🖼️ Click-to-Expand Image Lightbox: Accessible, full-screen lightbox modal for article visuals with backdrop dismissal and scroll-locking.
⏱️ Read History Tracker: LocalStorage-backed reading state that informs visitors when they previously read an article.
📬 Live Contact Form: Client-side validation, rate-limiting (30s cooldown, max 2 messages per visitor), and bot-deterring honeypot fields powered by Web3Forms.
📜 Inline Certificate Previews: Modal PDF previewer for credentials with direct verification links.
🎨 Editorial Aesthetics: Subtle organic film-grain overlay, curated typography (Archivo & Clash Grotesk), and bespoke warm cream (#FAF7F3) theme palette.
🌓 Adaptive Favicons: Dynamic SVG favicon switcher responding to user operating system dark/light preferences.

🛠️ Tech Stack

Category	Technology	Purpose
Frontend Framework	React 18	Component-based UI architecture & state management
Type Safety	TypeScript	Strict typing across components, models, and data collections
Build Tooling	Vite 5	Lightning-fast HMR and optimized Rollup production bundling
Styling & Design System	Tailwind CSS 3	Utility-first responsive styling and typography tokens
Motion & Animation	Framer Motion	Spring-based physics, layout animations, and gesture interactions
Smooth Scrolling	Lenis	Momentum-based, buttery smooth scroll normalization
Routing	React Router v6	Client-side routing with scroll restoration and dynamic route params
Form Backend	Web3Forms	Serverless form submission delivery directly to email
Icons	Lucide React	Clean, consistent SVG iconography

📂 Project Structure

portfolio-website/
├── public/                       # Static public assets served at root
│   ├── website-img/              # README preview screenshot assets (2x4 grid)
│   ├── projects/                 # Case study high-res screenshot galleries
│   ├── logos/                    # Tech stack brand vector SVGs
│   ├── education/                # Academic crests and institution brand marks
│   ├── pdf/                      # Certificate PDF documents & credentials
│   ├── black.svg                 # Brand monogram logo & light-mode favicon
│   ├── white.svg                 # Brand monogram logo & dark-mode favicon
│   ├── avatar.png                # Circular profile portrait asset
│   ├── resume.pdf                # Downloadable curriculum vitae PDF
│   └── _redirects                # Static host rewrite rules (SPA routing)
├── src/
│   ├── assets/                   # Bundled graphics, textures, and illustrations
│   │   ├── blog/                 # Blog post hero graphics and SVG figures
│   │   ├── contribute/           # Coffee illustrations, steam SVGs & QR graphics
│   │   └── grain.png             # Film-grain noise overlay texture
│   ├── components/               # Reusable atomic UI components
│   │   ├── Navbar.tsx            # Floating navigation bar with mobile drawer
│   │   ├── Footer.tsx            # Typographic footer with social & repo links
│   │   ├── CoffeeSupportButton.jsx # Floating tip button with animated coffee & steam
│   │   ├── PaymentModal.tsx      # Modal dialog with UPI QR code donation options
│   │   ├── BackButton.tsx        # Micro-interactive return navigation button
│   │   ├── ScrollManager.tsx     # Window scroll position restoration on route change
│   │   ├── ImageLightboxModal.tsx # Accessible full-screen image lightbox modal
│   │   ├── ResumeModal.jsx       # Embedded PDF resume viewer modal
│   │   └── AnimatedArrowBox.tsx  # Directional action arrow with hover physics
│   ├── config/                   # Site configuration, spacing tokens & typography
│   ├── data/                     # Structured content datasets
│   │   ├── work.ts               # Case studies, project metadata & deliverables
│   │   ├── articles.js           # Technical blog posts, reading metrics & markdown
│   │   ├── techStackData.ts      # Categorized skills, tools, and proficiencies
│   │   ├── educationData.ts      # Academic credentials and certified coursework
│   │   ├── testimonials.ts       # Peer & client recommendations and feedback
│   │   └── services.ts           # Architectural services and engineering offerings
│   ├── hooks/                    # Custom React hooks (Favicon, Document Title)
│   ├── pages/                    # Route page components
│   │   ├── Home.tsx              # Landing page orchestrating hero, work & sections
│   │   ├── WorkArchive.tsx       # Comprehensive project gallery & case study catalog
│   │   ├── WorkDetail.tsx        # In-depth case study breakdown with media galleries
│   │   ├── BlogArchive.tsx       # Articles catalog with category filtering
│   │   ├── BlogArticle.jsx       # Dynamic reading layout with lightbox & history
│   │   ├── Contribute.tsx        # Support & tip page with interactive UPI QR donation
│   │   └── NotFound.tsx          # Custom 404 error page
│   ├── sections/                 # Modular landing page sections
│   │   ├── HeroBioSection.tsx    # Narrative bio, portrait & live status indicators
│   │   ├── ProjectsSection.tsx   # Curated featured projects showcase
│   │   ├── CertificationsSection.tsx # Verified credentials showcase with PDF modals
│   │   ├── TechStackSection.tsx  # Interactive technical skills & toolsets
│   │   ├── ServicesSection.tsx   # Software engineering & design service offerings
│   │   ├── TestimonialsSection.tsx # Peer recommendations & client endorsements
│   │   ├── BlogSection.tsx       # Recent articles and technical thoughts preview
│   │   └── ContactSection.tsx    # Live contact form with Web3Forms integration
│   ├── types/                    # Shared TypeScript interfaces (CMS, Project, Post)
│   ├── utils/                    # Utility helpers (read history, animation flags)
│   ├── App.tsx                   # App root, routing hierarchy & Lenis smooth scroll
│   ├── Hero.jsx                  # Pinned 200vh hero track with kinetic text scrubbing
│   ├── index.css                 # Global styles, font definitions & CSS variables
│   └── main.tsx                  # Application bootstrap entry point
├── .env.example                  # Environment variable reference template
├── .gitignore                    # Git exclusion rules for clean repository state
├── index.html                    # Single-page application HTML entrypoint
├── LICENSE                       # MIT License
├── package.json                  # Dependencies, build scripts, and metadata
├── tailwind.config.js            # Design tokens, custom breakpoints & theme colors
├── tsconfig.json                 # TypeScript compiler options
└── vite.config.ts                # Vite dev server and build configuration

🏁 Getting Started

Follow these steps to run the portfolio locally on your machine.

Prerequisites

Node.js (version 18.x or higher recommended)
npm (bundled with Node.js) or pnpm / yarn

Installation

Clone the repository and install dependencies:

git clone https://github.com/aryankumar-04/portfolio-website.git
cd portfolio-website
npm install

Environment Variables

Copy the example environment file:

cp .env.example .env

Open .env and set your Web3Forms access key (required for the contact form to work):

VITE_WEB3FORMS_ACCESS_KEY=your_web3forms_access_key_here

Get a free key at web3forms.com. When deploying to Render, add this variable under Environment → Environment Variables in the Render dashboard.

Development Server

Launch the Vite local development server:

npm run dev

Open your browser and navigate to http://localhost:3000.

Production Build

Compile TypeScript and build the optimized production assets:

npm run build

The compiled static files will be generated in the dist/ directory. You can preview the production bundle locally with:

npm run preview

📬 Contact Form Setup (Web3Forms)

The contact form uses Web3Forms for serverless email forwarding:

Visit Web3Forms and enter your email address to generate a free Access Key.
Set the key as VITE_WEB3FORMS_ACCESS_KEY in your .env file locally, and in Render's Environment → Environment Variables for production.
Security Recommendation: In your Web3Forms dashboard, restrict the key to your live domain to prevent spam submissions from third-party sites.

🌐 Deployment (Render)

This repository is optimized for one-click deployment on Render as a Static Site:

Fork or push this repository to your GitHub account.
Sign in to the Render Dashboard.
Click New + > Static Site.
Connect your portfolio-website repository.
Configure the build parameters:
- Name: portfolio-website
- Branch: main
- Build Command: npm run build
- Publish Directory: dist
Under Redirects/Rewrites, create an SPA catch-all rule:
- Type: Rewrite
- Source: /*
- Destination: /index.html
Click Create Static Site. Render will build and deploy your site automatically on every push!

(Note: The repository also includes a public/_redirects file that static hosts like Render and Cloudflare Pages automatically respect for client-side routing).

🤝 Contributing

Contributions, issues, and feature suggestions are welcome! Feel free to open an issue or submit a pull request if you notice anything that could be improved.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for full details.

Copyright (c) 2026 Aryan Kumar Gupta

📫 Contact & Connect

Aryan Kumar Gupta

Software Engineer & AI Enthusiast

Thank you for visiting my portfolio! Have a project in mind or want to collaborate? Feel free to reach out.