Darshit Maniar
Personal portfolio for a frontend engineer and UI/UX solution architect with 21 years in the industry, from ActionScript-era Flash work through Angular to modern React. Built with react-three-fiber for a particle-field hero and GSAP-pinned scroll storytelling.
Overview
The most technically involved of the personal portfolio commissions: a site for Darshit Maniar, a frontend engineer and UI/UX solution architect whose career spans 21 years, from ActionScript and Flash Media Server work in 2005 through an Angular/TypeScript/RxJS decade to React and Next.js today. The homepage centers on a WebGL particle field rendered with react-three-fiber and drei, loaded via next/dynamic with ssr:false so the three.js dependency never touches the initial route bundle, and an 'Era Arc' section that uses GSAP ScrollTrigger to pin and narrate three chapters of his career as the user scrolls.
Why it was built
Client project: a personal portfolio for a senior frontend engineer, needing a site that could carry 21 years of career narrative credibly while also functioning as a working demo of his own front-end craft, since visitors evaluating a UI/UX architect will judge the site itself as much as its content.
WebGL Particle Hero
A react-three-fiber Canvas renders a particle field, lazy-loaded client-only via next/dynamic so three.js and the R3F reconciler never enter the initial bundle, with the render loop paused when the canvas isn't visible.
GSAP-Pinned Era Arc
A three-act scroll story (Flash/2005, Angular/2015, React/2026) built on GSAP ScrollTrigger, pinned on desktop, rendered as a plain vertical stack on mobile and under reduced motion, all three modes sharing the exact same copy.
Content via Zod-Validated Data Files
All real content (profile, experience, projects, skills) lives in typed, Zod-validated files, so editing what the site says never touches component code, and a malformed edit fails the build immediately rather than shipping.
Tech Breakdown
Chosen for the hero particle field because it's the most ergonomic way to drive three.js from React state, and drei's helpers cut the WebGL boilerplate significantly.
Needed genuine scroll-pinning for the Era Arc storytelling section, something CSS scroll-snap and Framer Motion's useInView can't reproduce cleanly.
A single fast linter/formatter instead of separate ESLint and Prettier configs, paired with a custom lint rule that fails the build if any component bypasses the theme token system.
E2E, accessibility, and visual regression suites run via Playwright, with Lighthouse CI enforcing performance budgets, unusually rigorous test tooling for a single-person portfolio site.
- 1
Bridging Lenis's smooth-scroll with GSAP ScrollTrigger required a documented architecture decision, since both libraries want to own scroll position and naive integration causes jank or desynced pinning.
- 2
Keeping the WebGL hero from regressing Lighthouse performance scores meant gating the three.js dependency behind a client-only dynamic import and pausing its render loop whenever it's off-screen.
A couple of content gaps are explicitly flagged as pending in the data layer (an exact career-start date, one project's real details), with the schema enforcing that placeholders stay visibly marked until confirmed.
See it live
Check out the deployed site.