A modern, responsive portfolio website showcasing game development projects, professional experience, and technical expertise. Built with React, Vite, and Tailwind CSS, deployed on GitHub Pages.
- Responsive Design - Optimized for desktop, tablet, and mobile devices
- Project Showcase - Interactive project gallery with media carousels
- SEO Optimized - Meta tags, structured data (JSON-LD), and sitemap generation
- Performance - Optimized assets, lazy loading, and efficient caching strategies
- Dark Mode - Built-in dark mode support with system preference detection
- Dynamic Routing - Client-side routing with GitHub Pages compatibility
- Media Management - Support for images and videos with low-quality fallbacks
- Analytics Integration - Firebase Analytics integration ready
- Social Sharing - Open Graph and Twitter Card meta tags for rich previews
- Framework: React 18.3
- Build Tool: Vite 5.4
- Styling: Tailwind CSS 3.4
- Icons: Lucide React
- Hosting: GitHub Pages
- Analytics: Firebase
- Deployment: GitHub Actions
- Node.js 18+ and npm
- Git
# Clone the repository
git clone https://github.com/StevenNassef/steven-portfolio-ghpages.git
# Navigate to the project directory
cd steven-portfolio-ghpages
# Install dependencies
npm install# Start development server
npm run devThe development server will start at http://localhost:5173 (or the next available port).
# Build for production
npm run buildThe production build will be generated in the dist/ directory.
# Preview the production build locally
npm run previewThis project is configured for automatic deployment to GitHub Pages via GitHub Actions. The workflow:
- Builds the project on push to
mainbranch - Deploys the
dist/directory to GitHub Pages - Generates sitemap and copies necessary files (robots.txt, CNAME, etc.)
If you need to deploy manually:
- Build the project:
npm run build - Commit and push the
dist/directory to thegh-pagesbranch, or - Use GitHub Pages settings to point to the
dist/directory
steven-portfolio-ghpages/
├── public/ # Static assets (images, videos, etc.)
│ ├── projects/ # Project media assets
│ ├── profile/ # Profile images
│ ├── robots.txt # SEO robots file
│ └── sitemap.xml # SEO sitemap
├── src/
│ ├── components/ # React components
│ │ └── MediaCarousel.jsx
│ ├── utils/ # Utility functions
│ │ ├── metaTags.js # Meta tag management
│ │ └── structuredData.js # JSON-LD schema
│ ├── App.jsx # Main application component
│ ├── config.js # Configuration and environment variables
│ ├── projectsData.js # Project data and content
│ ├── firebase.js # Firebase configuration
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point
├── scripts/ # Build scripts
│ └── generate-sitemap.js
├── dist/ # Production build output
└── vite.config.js # Vite configuration
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run generate-pdf- Generate portfolio PDFnpm run generate-bimi- Generate BIMI SVG (optimized)npm run generate-bimi-basic- Generate BIMI SVG (basic)npm run generate-low-quality-videos- Generate low-quality video versionsnpm run generate-sitemap- Generate sitemap.xml
The project uses environment variables for configuration. Create a .env file in the root directory:
# Media assets base URL (required)
VITE_MEDIA_BASE_URL=https://your-cdn.com
# High-quality video base URL (optional, defaults to MEDIA_BASE_URL)
VITE_HIGH_QUALITY_VIDEO_BASE_URL=https://your-video-cdn.com
# CV/Resume URL (optional)
VITE_CV_URL=https://your-cv-url.com/resume.pdf
# Firebase configuration (JSON string)
VITE_FIREBASE_CONFIG={"apiKey":"...","authDomain":"...","projectId":"..."}See ENV_SETUP.md for detailed configuration instructions.
Media assets follow a naming convention:
- Main image:
{project_key}_main.jpeg - Gallery images:
{project_key}_1.jpeg,{project_key}_2.jpeg, etc. - Video:
{project_key}.mp4 - Low-quality video:
{project_key}_low.mp4
Place all media assets in public/projects/{project_key}/.
- Environment Setup - Configuration for environment variables
- CDN Setup - Guide for setting up CDN for media assets
- Domain Setup - Custom domain configuration
- Cache Control Setup - Browser caching configuration
- Git LFS Setup - Large file storage setup
- Image Optimization Guide - Image optimization best practices
- BIMI Setup - Brand Indicators for Message Identification setup
- Add project data to
src/projectsData.js - Add media assets to
public/projects/{project_key}/ - Follow the media naming convention (see Configuration section)
The project uses Tailwind CSS. Customize styles in:
src/index.css- Global styles and Tailwind directivestailwind.config.js- Tailwind configuration- Component-level classes in React components
- Meta tags are managed in
src/utils/metaTags.js - Structured data (JSON-LD) is handled in
src/utils/structuredData.js - Sitemap generation is automated via
scripts/generate-sitemap.js
- Ensure Node.js version is 18 or higher
- Clear
node_modulesand reinstall:rm -rf node_modules && npm install - Check that all environment variables are set correctly
- Verify GitHub Actions workflow is enabled
- Check that
dist/directory is being generated correctly - Ensure GitHub Pages is configured to use the correct branch/directory
- Verify
VITE_MEDIA_BASE_URLis set correctly - Check that media files exist in the correct paths
- Ensure CDN (if used) is accessible and CORS is configured
This project is private and proprietary.
Steven Nassef Henry
- Portfolio: stevennassef.com
- LinkedIn: steven-nassef
- GitHub: @StevenNassef
- Email: [email protected]
- Built with React
- Styled with Tailwind CSS
- Icons from Lucide
- Deployed on GitHub Pages
Note: This portfolio showcases projects with 20M+ downloads and demonstrates expertise in Unity game development, systems architecture, and live-ops infrastructure.