↗  Visit the site  ·  Read the about page  ·  Get in touch

_{— ◆ —}

“A handcrafted personal site — paper-and-ink palette, a typographic spine, and motion that supports the work rather than performing for it.”

THE BUILDER Hardik Saini Atlanta · CS @ GSU

THE CRAFT Editorial Portfolio Next.js 16 · React 19

THE NEXT CHAPTER Mercedes-Benz USA SAP & Innovation · Summer '26

---

✦  The Story

Think of this as a personal letterpress — a site composed like an editorial spread. A serif spine. A paper-and-ink palette. Generous whitespace. Motion that supports the content rather than performing for it.

Built by Hardik Saini — Computer Science junior at Georgia State University, member of the ARCTIC HPC team, and incoming Mercedes-Benz USA SAP & Innovation intern (Summer 2026).

🌐   Live at www.harry830.tech

---

✦  A Walk Through the Spread

	Section	What lives here
𝟏	Hero	Display-serif identity card with role-cycling and an ambient marquee.
𝟐	Mercedes Feature	Editorial spotlight on the incoming MBUSA internship.
𝟑	Selected Work	Horizontally scrolling case studies — Stockd, RoomieManager, TaskTrail, Speech Mate, Department Assistant.
𝟒	Experience	Roles, programs, and the timeline behind them.
𝟓	About	Long-form bio, programs, professional development, skills, education, and awards.
𝟔	Contact	EmailJS-backed form with reCAPTCHA, plus direct channels.

---

✦  Tech Stack  ·  The Field Kit

Foundation	Look & Feel	Comms & Plumbing
Next.js 16 · App Router React 19 Sass / SCSS next/font — Inter + Fraunces	Tailwind CSS v4 Framer Motion Lenis smooth scroll react-fast-marquee Lottie React	EmailJS (browser) Nodemailer react-google-recaptcha react-toastify Sharp · Axios

_{Telemetry: Vercel Analytics · Google Tag Manager}

---

✦  Design Highlights

┌─ paper & ink ────────────────────────────────────────────────┐
│                                                              │
│   ◆  Bold-classic visual system — Fraunces × Inter           │
│   ◆  Variable-axis serifs (SOFT, opsz) used with intent      │
│   ◆  Editorial layouts — horizontal scroller, quiet seams    │
│   ◆  Mobile-first — fluid grids, large tap targets           │
│   ◆  Considered motion — Lenis + Framer Motion, never noise  │
│   ◆  A11y — landmarks, reduced-motion, skip-link             │
│                                                              │
└──────────────────────────────────────────────────────────────┘

---

✦  Local Development

This repo ships with a pnpm-lock.yaml, so pnpm is recommended. A package-lock.json is also present, so npm works as a fallback.

# 1. install
pnpm install
# or
npm install

# 2. dev (webpack)
pnpm dev

# 2b. or dev with Turbopack
pnpm dev:turbo

# 3. production build
pnpm build           # webpack
pnpm build:turbo     # turbopack

# 4. start the production server
pnpm start

Open http://localhost:3000 once the dev server is running.

Note

A lint script (next lint) is defined in package.json, but the Next.js 16 lint command has migrated and is not currently wired up in this repo. Treat pnpm build as the source of truth for validation.

---

✦  Project Structure

portfolio/
├── app/
│   ├── about/                 # /about route
│   ├── components/
│   │   ├── effects/           # preloader, scroll-progress, marquee
│   │   ├── helper/
│   │   ├── homepage/          # hero, mercedes-feature, horizontal-work,
│   │   │                      # experience, about, programs, skills,
│   │   │                      # education, awards, contact, …
│   │   ├── providers/         # smooth-scroll (Lenis)
│   │   ├── navbar.jsx
│   │   └── footer.jsx
│   ├── css/                   # global SCSS
│   ├── layout.js              # fonts, analytics, providers
│   └── page.js                # homepage composition
├── utils/
│   ├── data/                  # personal, projects, experience, skills, …
│   ├── check-email.js
│   ├── skill-image.js
│   └── time-converter.js
├── public/
│   ├── image/projects/        # case-study artwork
│   ├── profile.jpg
│   └── Hardik Saini Resume.pdf
├── docs/
│   └── assets/                # README-only artwork (this hero, etc.)
├── next.config.js
├── tailwind.config.js
├── postcss.config.js
└── package.json

---

✦  Quality & Validation

Check	Command	Status
Production build	pnpm build	source of truth
Type / runtime	Next.js 16 + React 19	✓
Lint	pnpm lint	⚠︎ pending Next 16 lint command migration

---

✦  The Author

Hardik Saini — Builder. Atlanta, GA. A computer science junior who likes shipping things that feel as considered as they look. Currently working on AI, cloud, and enterprise systems — and reading anything with good kerning.

---

_◆

_{Designed and built by Hardik Saini.  ·  Crafted with care, shipped with momentum.}

_{If this README made you smile, the site will too — www.harry830.tech}