RugeFX Portfolio

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Features smooth animations, dark/light theme switching, and a clean design showcasing projects and work experience.

✨ Features

• Modern Tech Stack: React 19, TypeScript, Vite, Tailwind CSS 4
• Smooth Animations: Framer Motion powered animations and transitions
• Theme Support: Dark/light mode with system preference detection
• Responsive Design: Mobile-first approach with optimal viewing on all devices
• Timeline UI: Interactive work experience timeline with connecting lines
• Project Showcase: Dynamic project grid with technology tags
• Performance Focused: Optimized images and lazy loading

🛠️ Tech Stack

• Framework: React 19 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS 4 with CSS Variables
• UI Components: Radix UI primitives
• Animations: Framer Motion
• Icons: Lucide React & Simple Icons
• Package Manager: Bun

🚀 Quick Start

# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

# Lint code
bun run lint

📁 Project Structure

src/
├── components/
│   ├── layout/          # Layout components (header, footer, etc.)
│   ├── sections/        # Page sections (hero, about, projects, work experience)
│   ├── theme/           # Theme toggler component
│   └── ui/              # Reusable UI components
├── contexts/            # React contexts (theme provider)
├── hooks/               # Custom React hooks
├── lib/                 # Utilities and data
└── assets/              # Static assets (images, icons)

🎨 Design System

• Colors: CSS custom properties with dark/light mode support
• Typography: Custom font display with optimized loading
• Components: Consistent design patterns using Radix UI
• Animations: Smooth enter/exit animations with proper viewport detection
• Spacing: Systematic spacing scale using Tailwind CSS

📱 Sections

• Hero: Personal introduction with animated elements
• About: Journey and technology background
• Work Experience: Timeline-based professional history
• Projects: Featured work with live demos and source code

🔧 Development

The project uses strict TypeScript configuration and ESLint for code quality. All components follow React best practices with proper prop typing and error boundaries.

Key Dependencies

• UI: Radix UI components for accessibility
• Styling: Tailwind CSS with custom configuration
• Animation: Framer Motion for smooth interactions
• Icons: Lucide React for consistent iconography
• Build: Vite for fast development and optimized builds

📄 License

This project is personal portfolio code. Feel free to use as inspiration for your own portfolio!

---

Built with ❤️ by RugeFX