Skip to content

Repository files navigation

Sarthak Trivedi — Personal Dark Portfolio Landing Page

License React TypeScript Vite TailwindCSS GSAP

A high-performance, dark-themed personal portfolio landing page for Sarthak Trivedi — Data Analyst, AI/ML Developer, and Full Stack Engineer based in Kanpur, India.

Designed with a sleek aesthetic, smooth GSAP ScrollTrigger animations, Framer Motion transitions, live HLS streaming background, interactive project flashcards, and technical journal entry popups.


🌟 Key Features

  • Cinematic HLS Video Background: Full-page continuous video stream (hls.js) that remains fixed as you scroll smoothly through sections.
  • Hero & Animated Role Cycler: Dynamic phrase rotator detailing expertise across Data Analytics, AI/ML Development, Full Stack Engineering, and Problem Solving.
  • Interactive Bento Grid Showcase:
    • Train N Grain: Fitness Analytics Platform with live demo link.
    • CROPIFY: AI Crop Intelligence System with detailed interactive flashcard feature breakdown (Soil NPK analysis, ML yield prediction, climate sync, Scikit-learn pipeline).
    • Portfolio Flagship: Wide-aspect showcase with live streaming video.
  • Journal & Product Concepts:
    • Smart Coffee Café Concept: Interactive flashcard modal detailing a dual-station automated brewing lab, guided UX, and AI-powered recipe optimization.
    • Cropify ML & AI Chatbot Engineering: In-depth breakdown of ML model pipelines and conversational AI assistant development.
  • Visual Explorations Gallery: Parallax scroll-driven grid featuring data science pipelines and UI exploration cards.
  • Responsive & Accessible Layout: Glassmorphic UI components built with dark design principles, custom scrollbars, and high contrast typography.

🛠️ Tech Stack

  • Core Framework: React 18 + Vite 5 + TypeScript
  • Styling & Design System: Tailwind CSS + Custom HSL Design Tokens + Glassmorphism
  • Animations & Interactivity: GSAP (GreenSock) + ScrollTrigger + Framer Motion
  • Media Engine: HLS.js (HTTP Live Streaming)
  • Icons & Typography: Lucide React + Google Fonts (Inter & Instrument Serif)

🚀 Getting Started Locally

Prerequisites

  • Node.js (v18.x or later)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/TechTrivedi/dark-portfolio.git
    cd dark-portfolio
  2. Install dependencies:

    npm install
  3. Start the local dev server:

    npm run dev
  4. Build for production:

    npm run build

📬 Contact & Connect

About

A high-performance, dark-themed personal portfolio landing page for Sarthak Trivedi — Data Analyst, AI/ML Developer, and Full Stack Engineer based in Kanpur, India. Built using React, Vite, TypeScript, Tailwind CSS, GSAP ScrollTrigger, Framer Motion, and HLS.js video streaming.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages