Rayflix Portfolio - High-Performance Frontend Experience

A polished, production-ready portfolio built with Svelte and Tailwind CSS. The site features smooth transitions, glassmorphic UI elements, and performance-optimized 3D backgrounds.

🚀 Recent Updates & Features

We've implemented a series of high-end features to elevate the user experience:

• Command Palette (⌘+K): A pro-level navigation terminal that allows users to jump between sections using keyboard shortcuts, enhancing the "Rayflix.OS" experience.
• Dynamic Theming (System Accents): An interactive theme switcher that lets users customize the primary accent color of the entire OS (Cyan, Emerald, Purple, etc.).
• Performance-Optimized Smooth Scroll: Integrated @studio-freight/lenis with custom configurations for a fluid, high-refresh-rate scrolling experience (optimized for 90Hz+ displays).
• Glassmorphic Navbar: A fixed, responsive navigation bar that adapts its appearance on scroll and features a custom mobile "Terminal" menu.
• Smooth Anchor Links: Implemented custom scroll-to-section logic that accounts for fixed headers, providing a seamless landing experience for every nav item.
• High-Performance 3D Backgrounds: Optimized @react-three/fiber canvases with powerPreference: "high-performance" and managed Device Pixel Ratios to ensure smooth visuals across all devices.
• Polished Typography: Scaled-down display fonts for better hierarchy on mobile/tablet while maintaining the "bold" brand identity.
• Responsive Animations: Orchestrated motion (Framer Motion) staggered entrances and viewport-triggered animations.

🛠 Tech Stack

• Framework: Svelte
• Build Tool: SvelteKit
• Styling: Tailwind CSS 4.0
• Animations: Motion
• Icons: Lucide React
• 3D Graphics: Three.js / @react-three/fiber
• Scroll Engine: Lenis

💻 Local Setup Instructions

If you've already downloaded the project, follow these steps to get it running:

1. Prerequisite

Ensure you have Node.js installed on your machine. We recommend using pnpm as the package manager.

2. Installation

The user mentioned running pnpm install. If you haven't, run:

pnpm install

3. Environment Variables

Check .env.example for any required keys. If you use the Gemini AI features:

1. Create a .env file in the root directory.
2. Add your Gemini API Key:

   GEMINI_API_KEY=your_key_here
   

4. Run Development Server

Start the project locally to see your changes in real-time:

pnpm dev

The application will be available at http://localhost:3000.

5. Production Build

To create a optimized production build:

pnpm build

The output will be in the dist/ folder.

🏗 Project Structure

• src/components/: Reusable UI modules (Navbar, Hero, Projects, etc.).
• src/lib/: Utility functions and shared logic.
• src/index.css: Global styles and Tailwind configuration.
• src/App.tsx: Main application assembly.