Thakuma.dev | Premium AI Agency Portfolio

Thakuma.dev is a high-fidelity, interactive agency portfolio designed specifically for the AI sector. It features a sophisticated, motion-driven user experience, leveraging advanced GSAP animations and a minimalist design aesthetic.

🚀 Key Features

1. Motion Architecture

• Dual-Path SVG Animations: Every project card features two independent, layered SVG stroke animations that trigger on hover, creating a complex, handcrafted feel.
• Dynamic Content Reveal: Project details (Logo, Value, Description, Tags) are hidden by default and reveal with a staggered GSAP timeline, synchronized with the SVG animations.
• Metric Counter Animation: Company valuations and metrics animate from 0 to their final values upon card interaction.
• Custom SplitText Engine: A custom, 100% free Alternative to GSAP's paid SplitText plugin, enabling word-by-word reveal animations across the site.

2. High-Fidelity Components

• Infinite Logo Marquee: A seamless, auto-scrolling marquee featuring minimalist SVG logos of AI industry leaders (OpenAI, Anthropic, DeepMind, etc.).
• Video Backgrounds: Integration of looping, autoplaying, and muted MP4 backgrounds within project cards for a cinematic portfolio experience.
• Complex Footer: A multi-section footer including a Philosophy block, Testimonial section (Arkyadeep Pal), and a sleek dark CTA area.
• Micro-Animations: Custom hover states for arrow icons (diagonal shift) and category tags (lift + color inversion).

3. Performance & Polish

• Smooth Scrolling: Powered by Lenis for a buttery-smooth desktop experience.
• Fully Responsive: Fluid layouts that adapt from ultra-wide monitors to mobile devices using clamp() and flexbox/grid.
• Branded Favicon: Minimalist SVG-based favicon integrated directly for crisp display.

🛠 Tech Stack

• Core: HTML5, CSS3 (Vanilla), JavaScript (ES6+)
• Animation: GSAP 3.12.5
• Smooth Scroll: Lenis 1.1.13
• Icons/Graphics: Custom SVG Paths

📂 Project Structure

├── assets/             # Images, Videos, and SVG Graphics
│   ├── img1.jpg        # Static project imagery
│   ├── vid1.mp4        # Background video for Card 3
│   └── ...             # Favicon and local SVG assets
├── font/               # Custom Typography (Google Sans)
├── index.html          # Main Application Entry
├── script.js           # GSAP Timelines & Custom Animation Logic
└── styles.css          # Design System, Layouts, and Hover States

⚙️ Setup & Customization

Local Setup

1. Clone the repository.
2. Open index.html in any modern web browser (VS Code Live Server recommended).
3. Ensure the assets/ and font/ directories are preserved for correct rendering.

Rebranding (For Arkyadeep Pal)

• Colors: Modify the --card-X-stroke variables in :root inside styles.css to change the accent colors of individual cards.
• Content: Update the .card-logo, .card-value, and .card-description text in index.html to reflect new case studies.
• Marquee: Add or remove <div class="marquee-item"> blocks in index.html to update the tech stack or partner list.

🤝 Acknowledgments

Inspired by high-end design agency aesthetics, this project was built to demonstrate that premium interactivity can be achieved with vanilla technologies and free, open-source libraries.

---

Built with 🖤 for Thakuma.dev by Arkyadeep Pal.