Obsidian Portfolio

Shaping Digital Realities — Immersive Portfolio for Creative Minds.

✨ Overview

Obsidian is a premium, immersive portfolio template designed specifically for UI/UX designers, creative directors, and creative technologists. It blends functional utility with digital art, utilizing custom WebGL elements, smooth page transitions, and sophisticated mouse interactions to leave an unforgettable impression. Built with performance, accessibility, and clean architecture at its core, this template provides a production-ready foundation for shipping a world-class personal brand site today.

🌟 What Makes It Unique

• Engaging Framer Motion Art: Geometric animation art that responds and creates visual interest using Framer Motion.
• Liquid Custom Cursor & Overlay: A custom mouse-lens cursor that dynamically backdrop-inverts colors and morphs over interactive elements, paired with a scroll-velocity-responsive noise filter overlay.
• GSAP-Powered Horizontal Canvas: An elegant, scroll-pinned horizontal work archive section with custom easing and smooth mouse-tilt parallax cards.

🎯 Perfect For

• UI/UX Designers & Product Designers looking for a premium aesthetic.
• Creative Directors, Studios, & Digital Agencies seeking an immersive landing page.
• Creative Technologists wishing to showcase high-end interactive portfolios.
• Web Developers looking for a solid baseline with Framer Motion and GSAP setups.

🛠 Tech Stack

📄 Pages Included

🧩 Sections & Components

• Layout:
  • Navbar: Main navigation header with auto-highlighting active paths.
  • Footer: Big-callout talking block and integrated social links.
  • CustomCursor: Backdrop invert lens tracking cursor.
  • NoiseOverlay: Turbulenced overlay responding to scroll speeds.
• Sections:
  • HeroSection: Typographic entry point with geometric animation art.
  • MarqueeSection: High-contrast spinning banner.
  • SelectedWork: Horizontal scroll container with GSAP mapping.
  • ExpertiseBento: Sleek spotlight-glow grid.
  • TestimonialSection: Responsive typography block quote.
• Motion & UI:
  • <SpotlightCard>, <TiltCard>, <MagneticButton>: Refactored hooks-backed micro-interactions.
  • <Button>, <Badge>, <Card>, <Input>, <Modal>, <Skeleton>: Complete standard design systems.

🎨 Design System

📁 Folder Structure

src/
  components/
    layout/          # Navbar, Footer, PageWrapper, NoiseOverlay, CustomCursor
    motion/          # SpotlightCard, TiltCard, MagneticButton, SplitText
    sections/        # HeroSection, MarqueeSection, SelectedWork, Bento, Testimonial
    ui/              # Button, Badge, Card, Input, Modal, Skeleton
  data/
    portfolio.ts     # Project & Experience content database
  hooks/
    useSEO.ts        # Search Engine Optimization title utility
    useMagnetic.ts   # Element pull spring hook
    useTilt.ts       # Perspective rotation hook
    useSpotlight.ts  # Glow card tracking hook
  lib/
    constants.ts     # Navigation items and global meta
    gsap.ts          # GSAP configuration and ScrollTrigger bindings
    utils.ts         # Tailwind merger helper
  styles/
    globals.css      # Core theme setup and resets
  types/
    index.ts         # Central TypeScript interfaces