Orv Portfolio

A modern, performance-optimized portfolio website built with React and TypeScript. Features a clean terminal-inspired design with smooth animations and a fully responsive layout.

Overview

This portfolio showcases professional work, skills, and projects with an emphasis on performance and user experience. Built with modern web technologies and best practices.

Status: ✅ Production-ready with enterprise-level code quality, comprehensive testing, and full accessibility support.

Tech Stack

• Framework: React 19 with TypeScript
• Build Tool: Vite 7
• Styling: Tailwind CSS
• Animations: Framer Motion, GSAP with ScrollTrigger
• Smooth Scrolling: Lenis
• Icons: Lucide React
• Testing: Vitest, React Testing Library

Features

• ✅ Terminal-inspired UI with macOS-style window headers
• ✅ Smooth scroll animations and transitions (GSAP + Framer Motion)
• ✅ Fully responsive design (mobile, tablet, desktop)
• ✅ Performance optimized with lazy loading and code splitting
• ✅ Accessible components with ARIA labels and screen reader support
• ✅ SEO-friendly structure with sitemap and robots.txt
• ✅ Background music with controls
• ✅ Project showcase with detailed information
• ✅ Service Worker for offline support
• ✅ Comprehensive test coverage (70%+)
• ✅ Security headers and best practices

Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn package manager

Installation

# Clone the repository
git clone https://github.com/ItsOrv/Orv-Portfolio-Site.git
cd Orv-Portfolio-Site

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Build for Production

npm run build

The production build will be generated in the dist directory.

Project Structure

src/
├── components/          # React components
│   ├── AboutSection.tsx
│   ├── SkillsSection.tsx
│   ├── ProjectsSection.tsx
│   ├── ContactSection.tsx
│   ├── BackgroundMusic.tsx
│   ├── ErrorBoundary.tsx
│   ├── MobileMenu.tsx
│   ├── TerminalHeader.tsx      # Reusable terminal header
│   ├── SectionWrapper.tsx       # Section wrapper component
│   ├── LoadingSkeleton.tsx     # Loading states
│   ├── LazyImage.tsx           # Lazy-loaded images
│   ├── StructuredData.tsx      # SEO structured data
│   ├── A11yAnnouncer.tsx       # Accessibility announcements
│   ├── ErrorFallback.tsx       # Error UI component
│   └── __tests__/              # Component tests
├── hooks/               # Custom React hooks
│   ├── useLenisScroll.ts
│   ├── useGSAPAnimations.ts
│   ├── useMobileOverscroll.ts
│   ├── useFocusTrap.ts
│   └── __tests__/              # Hook tests
├── utils/               # Utility functions
│   ├── a11yAnnounce.ts
│   ├── errorHandler.ts
│   └── registerServiceWorker.ts
├── data/
│   └── projects/       # Project data files
├── types/              # TypeScript type definitions
├── test/               # Test setup and utilities
├── content.ts          # Centralized content configuration
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint
• npm test - Run tests in watch mode
• npm run test:run - Run tests once
• npm run test:coverage - Run tests with coverage report
• npm run deploy - Deploy to GitHub Pages

Customization

All content is managed through src/content.ts. Update the following:

• Profile information and bio
• Skills and expertise levels
• Project details and descriptions
• Contact information and social links
• Section headings and terminal commands

Project data is organized in src/data/projects/ with individual TypeScript files for each project.

Deployment

GitHub Pages

The project is configured for GitHub Pages deployment:

npm run deploy

This will build the project and deploy it to the gh-pages branch.

Other Platforms

The project can be deployed to any static hosting service:

1. Build the project: npm run build
2. Upload the dist directory to your hosting service
3. Configure your server to serve index.html for all routes (SPA routing)

Performance

• Code splitting with lazy-loaded components
• Optimized bundle size with tree shaking
• Efficient animations with GSAP
• Smooth scrolling with Lenis
• Mobile-optimized with reduced animations on low-end devices

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

Code Style

• TypeScript strict mode enabled
• ESLint for code quality
• Prettier for code formatting (via VS Code settings)

Testing

Tests are written using Vitest and React Testing Library. Run tests with:

npm test

Documentation

Additional documentation is available:

• TODO.md - Project roadmap and future enhancements
• OG_IMAGE_INSTRUCTIONS.md - Guide for creating Open Graph image

License

This project is private and proprietary.

Contact

• Email: poriya.saw@gmail.com
• GitHub: @ItsOrv
• LinkedIn: ItsOrv
• Telegram: @Pouria_Orv

---

Built with React, TypeScript, and modern web technologies.