Production portfolio for Dharantej Reddy, founder and sole builder/operator of Aphelion, product engineer and AI systems builder.
- React
- TypeScript
- Vite
- React Router
- Cinematic knockout hero with responsive editorial typography and codec-safe visual fallback
- CSS motion with reduced-motion fallbacks
- Vitest
- Vercel
The site is a static frontend. Core content is rendered from typed local data and does not depend on a CMS or backend.
//projects/projects/:projectId/about/experience/contact
Vercel rewrites direct route requests to the SPA entry point.
The authoritative project catalogue is src/data/projects.ts. It contains explicit status, visibility, stack, live/source links, evidence statements and priority ordering. Private repositories never expose source URLs.
Current priority order:
- RÆDIUS
- Airadise
- ARKHE
- Codebase OS
- SPOOL
- FAULTLINE
- LAYA
- DAISH
- GRELION
- Maleu Reel Studio
- Nexus
- Dot OS
Zachitan is represented separately as the research highlight.
The homepage features an original procedural Canvas 2D kinetic sculpture behind knockout typography. It has no third-party film, remote asset or video codec dependency. A visibility-aware renderer pauses offscreen and under reduced motion. The direction-sensitive header hides on downward scroll and returns on upward scroll, route changes, keyboard focus and when the mobile menu is open.
The catalogue is curated into six explicit, exhaustive categories with a feature project and supporting case-study links for each. Home sections connect through a sticky four-stage scroll narrative. About, Experience, Contact, and detailed case-study layouts use distinct structures while existing evidence, stack records and links remain accessible.
npm install
npm run devnpm run test
npm run typecheck
npm run build
npm run verify-buildverify-build is the Vercel build command, so a deployment cannot become READY unless unit tests, TypeScript and the production Vite build all succeed.
- Aphelion is presented as the company, not a repository/project.
- Anshap Services Pvt Ltd appears only under Experience as internship work.
- Project claims are intentionally bounded to what the portfolio data documents.
- No raw CDN global is required for production-critical motion.
See docs/superpowers/specs/2026-09-20-portfolio-react-vite-rebuild-design.md.
See docs/superpowers/plans/2026-09-20-portfolio-react-vite-rebuild.md.
src/data/media.ts holds the source-of-truth catalogue of Pexels photography and Mixkit Free License videos, with creator and source-page credits. EditorialImage and EditorialVideo lazy-load source media with reliable photographic fallback and reduced-motion/data-saver behavior. Actual live-project screenshots remain separate in ProjectPreview and are requested from public liveUrl pages. For private projects, photography is expressly marked as illustration and not as a screenshot or proof of functionality. Media credits appear on the About page.
The homepage now uses React + TypeScript, Framer Motion, Lucide React, Tailwind CSS 3 utilities, and the Kanit type family. The five editorial stages are Hero, live-project marquee, animated About, five-service light chapter, and sticky-stacked flagship work. The reference's fictional name, sample client work, portrait, and unrelated third-party motion-site GIFs are intentionally not shown as Dharantej's projects. The 32 real portfolio entries remain grouped on /projects, with their linked case studies and status/evidence data unchanged. The existing adaptive navigation is preserved on all non-home routes. Motion uses reduced-motion and lazy/paused video behavior.
The homepage uses four user-supplied, transparent-background 3D-rendered assets plus CC0 3dicons fallbacks; prior decorative stock photographs/videos are not used in the creator homepage. Cards for RÆDIUS, ARKHE and SPOOL contain three screenshot requests per card, each constructed from the same project's liveUrl, and can optionally load the actual site in an iframe when the visitor requests it (some sites disallow framing). Links to live sites remain available. Unpublished projects retain technical case studies and are clearly labeled as lacking a public website, never represented using stock photos or invented screenshots. The screenshot service is an external availability dependency; error states do not fabricate a preview. The user-supplied reference artwork's redistribution/commercial rights are not independently verified: replace it with cleared originals if rights are unavailable.
The homepage masthead displays HI, I'M / DHARAN TEJ / REDDY .P in high-contrast Kanit type, and the global homepage navigation links all five routed pages plus on-page Live Work and Services anchors. SVG wave ribbons animate and follow pointer parallax with springs. Each 3D object has independent pointer-responsive tilt, lift, glow and floating animation. Both image galleries use native accessible overflow-x scrolling, touch swipes, mouse dragging, Shift+wheel, arrows and keyboard. The gallery is never hidden behind a transform-only scrolling implementation. Reduced-motion preferences are honored.
The landing palette is black #090806, gold #C9A05A, champagne gold #F5D998 and beige #EEE2CC. Gold SVG ribbon bundles use CSS-keyframe translation plus animated traveling highlights; the wave and independent transparent 3D objects move autonomously without scrolling or hovering. Pointer parallax is a separate spring effect. A visible MOTION ON / ENABLE MOTION switch is provided, initially honoring operating-system reduced-motion preference and permitting manual opt-in. A standalone stylesheet src/gold-motion.css overrides the prior purple and cool-grey creator palette. Assets continue to come from the supplied reference sources, with CC0 fallbacks. Actual website preview screenshots are unchanged.