Introduction to Portfolio V2

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• index.html
• src/components/3D-Hero/Hero3D.jsx
• src/styles/globals.css
• src/App.jsx
• vite.config.js
• MagneticButtom.jsx
• src/main.jsx

Portfolio V2 is a modern, high-performance web application designed to showcase a professional developer's work through immersive 3D experiences and fluid animations. The project leverages a sophisticated technology stack including React 18, Vite for build orchestration, and specialized libraries for motion and 3D rendering.

The system is structured as a Single Page Application (SPA) that emphasizes visual fidelity and user engagement. It incorporates advanced front-end techniques such as smooth scrolling via Lenis, interactive 3D scenes using Spline, and physics-based UI elements.

Sources: package.json:1-25, index.html:1-12, src/App.jsx:1-26

Core Architecture and Tech Stack

The application follows a modular React architecture, utilizing Vite as the build tool and development server. The project setup focuses on modern ECMAScript modules and optimized asset delivery.

Technical Specifications

Component	Technology	Purpose
Framework	React 18.2.0	Core UI library
Build Tool	Vite 4.4.5	Development server and bundling
3D Rendering	Spline (@splinetool/react-spline)	Interactive 3D scene integration
Animations	Framer Motion & GSAP	Declarative and programmatic animations
Scrolling	Lenis	Smooth inertia-based scrolling
Styling	Tailwind CSS	Utility-first CSS framework

Sources: package.json:11-20, vite.config.js:1-9

Component Hierarchy

The following diagram illustrates the primary component structure and the initialization flow from the entry point to the main layout.

The application initializes at main.jsx, which renders the App component within a React StrictMode wrapper and mounts it to the #root div defined in index.html.

Sources: src/main.jsx:1-12, src/App.jsx:20-25, index.html:10-11

Key Systems and Implementation

Smooth Scrolling and Global Styles

The application implements a global smooth-scrolling behavior using the Lenis library. This is initialized within a useEffect hook in the root App component to ensure consistent performance across the entire application.

The globals.css file complements this by setting up the foundational layout and Lenis-specific CSS rules to handle smooth scrolling transitions and prevent pointer events during active scrolling.

Sources: src/App.jsx:7-18, src/styles/globals.css:1-42

3D Hero Section

The Hero3D component is the centerpiece of the visual experience. It layers multiple technologies to create a depth-heavy interface:

1. Spline Scene: An absolute-positioned 3D environment loaded from a remote .splinecode source.
2. Particle Overlay: A ParticleBg component providing secondary visual movement.
3. Framer Motion Content: UI elements (text and buttons) that animate in with opacity and Y-axis translation.
4. Magnetic Interaction: Buttons that use a custom MagneticButton component for physics-based cursor attraction.

Sources: src/components/3D-Hero/Hero3D.jsx:7-58

Magnetic UI Interaction

The MagneticButton component leverages the react-magnetic hook to create a "sticky" cursor effect. It accepts href, className, and children as props, making it a reusable wrapper for navigation and call-to-action elements.

// Implementation snippet from MagneticButtom.jsx
import { useMagnetic } from 'react-magnetic'

export default function MagneticButton({ children, href, className }) {
  const bind = useMagnetic({ strength: 0.3 })

  return (
    <a {...bind()} href={href} className={`inline-block ${className}`}>
      {children}
    </a>
  )
}

Sources: MagneticButtom.jsx:1-14, src/components/3D-Hero/Hero3D.jsx:4-5

Project Configuration

The project uses a standard Vite configuration with the @vitejs/plugin-react plugin. The development server is configured to run on port 3000.

Config Option	Value	File
Plugin	@vitejs/plugin-react	vite.config.js
Port	3000	vite.config.js
Type	Module	package.json
Build Script	vite build	package.json

Sources: vite.config.js:1-9, package.json:5-9

Summary

Portfolio V2 represents a highly integrated React environment where traditional web layout (Tailwind/HTML) coexists with immersive 3D scenes (Spline) and advanced motion physics (Framer/Lenis/Magnetic). The architecture emphasizes smooth user transitions and interactive feedback, managed through a centralized App.jsx configuration and modular components.