A high-fidelity, pixel-perfect portfolio application built with React 19 and TypeScript, leveraging Vite for the build process and Tailwind CSS v4 for modern, CSS-first utility styling.
My Portfolio is a data-driven portfolio designed for developers. It prioritizes a refined visual hierarchy, smooth micro-interactions, and ease of maintenance. The entire application's content—from my bio and skills to my project list—is managed through a single source of truth: src/data/portfolio.json.
- Data-Driven Architecture: Update your entire portfolio by simply editing a JSON file.
- Immersive Layers: Advanced Sound & Haptic feedback system for tactile and audio-responsive UI.
- Modern Tech Stack: Built with the latest React 19 features and Tailwind CSS v4.
- Micro-Interactions: Powered by Framer Motion, featuring scroll reveals, staggered lists, and an interactive navigation dock.
- Theme Support: Native light and dark mode with a sophisticated neutral Zinc-based palette.
- Dynamic Project Filtering: Advanced filtering system powered by Zustand that automatically cleans up stale tags.
- High-Quality Iconography: Integrated with Lucide React and Developer Icons for a professional look.
- Responsive Navigation: A floating, animated Dock with smooth-scroll integration and scroll-padding.
- Core: React 19, TypeScript, Vite
- Styling: Tailwind CSS v4, Framer Motion
- Immersive Layers: web-haptics, soundcn (UI Sound Registry)
- State Management: Zustand
- Icons: Lucide React, Developer Icons
- Utilities: clsx, tailwind-merge
Follow these steps to get the project running locally:
-
Clone the repository:
git clone https://github.com/sarfarazstark/portfolio.git cd portfolio -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser: Navigate to
http://localhost:5173to see the application in action.
To personalize the portfolio, modify the data in src/data/portfolio.json. This file controls:
- Profile Info: Name, role, location, and bio.
- Experience: Work history with logos and descriptions.
- Education: Degrees and certifications.
- Skills: Technical expertise with corresponding icons.
- Projects: Title, description, tech stack, links, and featured status.
The project uses Tailwind CSS v4. You can customize the theme and global styles in:
src/index.csssrc/App.css
This portfolio goes beyond visual aesthetics by incorporating a multi-sensory feedback layer:
- Tactile Feedback: Powered by web-haptics, providing native-feeling, pattern-based haptic feedback for mobile web users, enhancing the physical feel of the UI.
- Audio Feedback: Implements the soundcn philosophy—700+ curated UI sounds delivered as self-contained TypeScript modules with inline base64 data URIs. This ensures zero-dependency, high-performance audio with no external asset fetching.
Special thanks to the creators of the following tools and libraries that made this project possible:
- soundcn by kapishdima - For the innovative UI sound registry and zero-dependency audio architecture.
- web-haptics by lochie - For the seamless haptic feedback API for the mobile web.
- Framer Motion - For the fluid, complex animations.
- Lucide React & Developer Icons - For the comprehensive and high-quality iconography.
This project is licensed under the MIT License. See the LICENSE file for more details.
Built with ❤️ by Sarfaraz