A recruiter-focused portfolio presenting selected software projects, technical capabilities, and creative work with direct links to source code and live demos.
Live site: pralav-singh-portfolio.vercel.app
- Responsive, semantic interface design
- Accessible navigation, focus states, contrast, and reduced-motion support
- Evidence-led project presentation with verified public links
- Static generation for a fast, dependable Vercel deployment
- Complete social, search, and sharing metadata
| Project | Focus |
|---|---|
| ShiftWatch · Live demo | Reproducible ML evaluation, statistical data drift checks, a CSV CLI, and an interactive React dashboard |
| StructIQ | FastAPI, SQLite, infrastructure health scoring, and tests |
| Websites4U | Responsive product experience and accessible lead flow |
| FlowLock | Interactive API-security concept |
| Editing Portfolio | React, TypeScript, and visual storytelling |
| Dataset Gate | Versioned CSV contracts, validation history, CLI/API workflows, and GitHub Actions |
| Interleave · Live demo | Step-by-step concurrency experiments, state inspection, and replay schedules |
| CHROMA · Live demo | WebGL shader studio, editable palettes, local collections, and PNG export |
| Python Algorithm Lab | Documented algorithm implementations, runnable examples, and independent tests |
ShiftWatch's featured chart is copied from its reproducible experiment results (MIT license). The displayed shifts are synthetic stress tests on 54 held-out UCI Wine rows; results are not production-impact claims.
Dataset Gate and Interleave previews use their repositories' report and workbench screenshots. The CHROMA preview is captured from its live studio. Python Algorithm Lab uses an illustration of the binary-search example from its README.
Requires Node.js 22+ and pnpm.
pnpm install
pnpm devCreate the production build with:
pnpm buildProject cards are defined in the projects array in app/page.tsx.
Update the description, skills, source URL, and optional live URL together. Place
preview images in public/ and reference them with a leading /.
Keep the Featured projects table above aligned with the visible cards. The
floating hero cards are separate links in app/page.tsx; check those too when
renaming a project or changing its destination. Verify each source and demo link
in the browser before publishing an update.
Next.js, React, TypeScript, Tailwind CSS, Framer Motion, and Lucide icons. The site is statically generated, validated through GitHub Actions, and deployed through Vercel.
The project navigator in components/ui/scroll-morph-hero.tsx uses the same project
data as the detail cards. Its full-width section uses one circle-to-arc transition
with normal page scrolling. Each preview links to static project details below.
Phones and reduced-motion preferences receive a compact static navigator.
Released under the MIT License.
Selecting a gallery sample moves keyboard focus to its Close control. Closing returns focus to Play; Escape also closes a player when focus is on the page. Each sample includes a direct platform link in case third-party embeds fail. Players remain click-to-load and only one runs at a time.
Run pnpm typecheck, pnpm lint, and pnpm build before submitting changes.
The background reel has a visible play/pause control, pauses in hidden tabs, and starts paused for reduced-motion preferences. Selecting play is an explicit opt-in; embedded work samples keep their separate play controls.