Riad Kilani - React Portfolio

A modern, high-performance portfolio website built with React 19, showcasing 12+ years of front-end development and UI/UX design expertise. Built with performance, accessibility, and maintainability as core principles.

🌐 Live Demo

https://riadkilani.com/

📊 Lighthouse Scores

Performance:      92/100
Accessibility:   100/100
Best Practices:  100/100
SEO:             100/100

⚡ Core Web Vitals

Metric	Score	Status	Description
LCP (Largest Contentful Paint)	1.2s	✅ Good	Main content loads in under 2.5s
FID (First Input Delay)	8ms	✅ Good	Interactive in under 100ms
CLS (Cumulative Layout Shift)	0.02	✅ Good	Minimal layout shift (< 0.1)
FCP (First Contentful Paint)	0.9s	✅ Good	First paint under 1.8s
TTI (Time to Interactive)	1.8s	✅ Good	Fully interactive under 3.8s
TBT (Total Blocking Time)	45ms	✅ Good	Minimal main thread blocking

Optimization Strategies

LCP Optimization: Critical CSS inlining, preconnect to fonts, WebP images
FID Optimization: Code splitting, lazy loading, minimal JavaScript execution
CLS Prevention: Fixed image dimensions, reserved space for dynamic content
Resource Hints: preload, preconnect, dns-prefetch for critical resources

✨ Key Features

Performance Optimizations

Critical CSS Inlining: Custom Vite plugin inlines critical above-the-fold CSS
Non-blocking Resource Loading: Preload + async loading for fonts and external stylesheets
Code Splitting: Vendor chunking separates React core from application code
Lazy Loading: React.lazy() for heavy components (modals, sections)
Image Optimization: WebP format with PNG fallbacks, lazy loading on all images
CSS Code Splitting: Per-route CSS chunks for optimal caching
Font Display Swap: All fonts configured with font-display: swap to prevent FOIT

Accessibility (WCAG 2.1 AA Compliant)

Semantic HTML5: Proper use of <header>, <nav>, <main>, <section>, <article>, <footer>
ARIA Implementation:
- aria-label and aria-labelledby on all interactive elements
- aria-hidden="true" on decorative icons
- aria-selected and aria-controls for tab navigation
- role="tablist", role="tab", role="listitem" for custom controls
Keyboard Navigation: Full tab-index support, focus management in modals
Screen Reader Support: Descriptive alt text, proper heading hierarchy
Color Contrast: WCAG AA compliant contrast ratios (4.5:1 minimum)
Focus Indicators: Visible focus states on all interactive elements

Modern Development Stack

React 19.1: Latest React with concurrent features
Vite 7: Lightning-fast HMR and optimized production builds
React Router 7: Client-side routing with dynamic title management
Framer Motion 12: Smooth scroll-triggered animations
Material-UI 7: Accessible modal components with proper focus management
SCSS Architecture: Modular, maintainable styles with BEM methodology

UI/UX Excellence

Dark Mode Support: System preference detection with manual toggle
Responsive Design: Mobile-first approach with breakpoints at 600px, 900px, 1050px
Smooth Animations: IntersectionObserver-based scroll animations
Modal System: MUI-powered modals with scroll locking and backdrop management
Reusable Components: Atomic design pattern with shared component library

📱 Mobile-First Responsive Strategy

Breakpoint System

// Mobile-first breakpoints
$bp-sm: 600px;   // Small tablets and large phones
$bp-md: 900px;   // Tablets
$bp-lg: 1050px;  // Small desktops

Development Philosophy

Base Styles: Design for mobile (320px+) first
Progressive Enhancement: Add complexity at larger breakpoints
Touch-Friendly: Minimum 44x44px tap targets on mobile
Fluid Typography: Responsive font scaling using rem units
Flexible Images: max-width: 100% with aspect-ratio preservation

Responsive Grid Examples

// Auto-fit grid - automatically responsive
@include grid-auto-fit(300px, $gap-lg);

// 3-column grid with breakpoints
@include grid-3;  // 3 cols → 2 cols → 1 col

// Custom responsive pattern
.grid {
  display: grid;
  grid-template-columns: 1fr;              // Mobile: 1 column
  
  @media (min-width: $bp-sm) {
    grid-template-columns: repeat(2, 1fr); // Tablet: 2 columns
  }
  
  @media (min-width: $bp-lg) {
    grid-template-columns: repeat(3, 1fr); // Desktop: 3 columns
  }
}

Mobile Optimizations

Touch Events: Swipe gestures for modals and galleries
Viewport Units: Careful use of vh to avoid mobile browser bar issues
Performance: Reduced animations on mobile for better performance
Navigation: Hamburger menu with full-screen overlay on mobile
Image Loading: Smaller images served to mobile devices

🚀 Getting Started

Prerequisites

Node.js v18.0.0 or higher
npm 9.0.0 or higher

Installation

# Clone the repository
git clone https://github.com/SyntaxSidekick/react-portfolio.git

# Navigate to project directory
cd react-portfolio

# Install dependencies
npm install

Development

# Start development server with hot reload
npm run dev

# Compile SCSS separately (auto-runs on build)
npm run styles

# Watch SCSS changes
gulp watch

Visit http://localhost:5173 to view the application.

Production Build

# Build for production (compiles SCSS + Vite build)
npm run build

# Build to staging directory
npm run build:staging

# Preview production build
npm run preview

Output will be in the dist/ folder (or staging/ for staging builds).

Code Quality

# Run ESLint
npm run lint

# Optimize images to WebP
npm run images:optimize

📁 Project Structure

riadkilani-react/
├── public/                      # Static assets
│   ├── images/                 # Optimized images (WebP + fallbacks)
│   ├── robots.txt              # SEO crawler instructions
│   └── sitemap.xml             # Site structure for search engines
├── src/
│   ├── assets/                 # Component-specific assets
│   │   ├── fonts/              # Local font files (DM Sans, Playfair, Trajan Pro)
│   │   ├── icons/              # SVG icons as React components
│   │   └── images/             # Component images
│   ├── components/             # React components
│   │   ├── common/             # Shared components
│   │   │   ├── AnimatedCard.jsx
│   │   │   ├── CTAButton.jsx
│   │   │   ├── Modal.jsx
│   │   │   ├── ProjectCard.jsx
│   │   │   ├── SectionHeader.jsx
│   │   │   └── index.js        # Component exports
│   │   ├── home/               # Home page feature
│   │   │   ├── Home.jsx
│   │   │   └── sections/       # Home sections
│   │   ├── bio/                # Bio page feature
│   │   │   ├── Bio.jsx
│   │   │   └── sections/       # Bio sections
│   │   ├── portfolio/          # Portfolio feature
│   │   │   ├── Portfolio.jsx
│   │   │   ├── PortfolioModal.jsx
│   │   │   ├── projects.js     # Project data
│   │   │   └── sections/       # Portfolio sections
│   │   ├── blog/               # Blog feature
│   │   │   ├── Blog.jsx
│   │   │   ├── BlogIndex.jsx
│   │   │   ├── BlogArchive.jsx
│   │   │   ├── BlogNav.jsx
│   │   │   └── Sidebar.jsx
│   │   ├── contact/            # Contact feature
│   │   │   └── Contact.jsx
│   │   ├── Header.jsx          # Global header
│   │   ├── Footer.jsx          # Global footer
│   │   ├── Loader.jsx          # Loading component
│   │   └── index.jsx           # Component barrel exports
│   ├── scss/                   # Modular SCSS architecture
│   │   ├── abstracts/          # Variables, mixins, functions
│   │   │   ├── _variables.scss # Color, typography, spacing tokens
│   │   │   ├── _mixins.scss    # Reusable mixins
│   │   │   └── _mixins-effects.scss
│   │   ├── base/               # Base styles
│   │   │   ├── _base.scss      # Global styles, section headers
│   │   │   ├── _normalize.scss # CSS reset
│   │   │   ├── _dark-mode.scss # Dark theme
│   │   │   ├── _header.scss
│   │   │   └── _footer.scss
│   │   ├── components/         # Component-specific styles
│   │   │   ├── home/
│   │   │   ├── bio/
│   │   │   ├── portfolio/
│   │   │   ├── blog/
│   │   │   ├── contact/
│   │   │   └── _*.scss         # Shared component styles
│   │   └── style.scss          # Main SCSS entry point
│   ├── css/                    # Compiled CSS output
│   │   ├── style.css           # Development CSS
│   │   └── style.min.css       # Production CSS
│   ├── utils/                  # Utility functions
│   ├── data/                   # Static data (stats, skills, etc.)
│   ├── App.jsx                 # Root component
│   ├── main.jsx                # Application entry point
│   └── DynamicTitle.jsx        # Dynamic page title component
├── docs/                       # Extended documentation
├── tools/                      # Build tools and utilities
│   ├── optimize-images.mjs     # Image optimization script
│   └── convert-images-to-webp.mjs
├── index.html                  # HTML entry point
├── vite.config.cjs             # Vite configuration
├── gulpfile.cjs                # Gulp SCSS compilation
├── eslint.config.js            # ESLint configuration
├── package.json
└── README.md

🛠 Tech Stack

Core Technologies

React 19.1.1: Component-based UI library with concurrent features
React Router DOM 7.8.2: Client-side routing
Vite 7.1.2: Build tool and development server
SCSS/Sass 1.92.1: CSS preprocessor

UI & Animation Libraries

Framer Motion 12.23.24: Animation library for scroll effects
Material-UI 7.3.5: Modal and component library
Bootstrap 5.3.8: CSS framework (grid, utilities)
React Bootstrap 2.10.10: Bootstrap React components
FontAwesome 7.0.1: Icon library

Build Tools & Optimization

Gulp 5.0.1: SCSS compilation pipeline
gulp-sass 6.0.1: SCSS compiler
gulp-clean-css 4.3.0: CSS minification
gulp-sourcemaps 3.0.0: Source map generation
vite-plugin-static-copy: Static file copying
vite-plugin-svgr 4.5.0: SVG as React components
Sharp 0.34.4: Image optimization

Code Quality

ESLint 9.33.0: Code linting
eslint-plugin-react-hooks 5.2.0: React Hooks linting
eslint-plugin-react-refresh 0.4.20: React Fast Refresh linting

Syntax Highlighting

Highlight.js 11.11.1: Code syntax highlighting for blog

🎨 SCSS Architecture

Modular Structure

The project uses a scalable SCSS architecture based on the 7-1 pattern:

// abstracts/ - Variables, mixins, functions
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'abstracts/mixins-effects';

// base/ - Reset, typography, global styles
@use 'base/normalize';
@use 'base/base';
@use 'base/dark-mode';
@use 'base/header';
@use 'base/footer';

// components/ - Component-specific styles
@use 'components/badges';
@use 'components/buttons';
@use 'components/cards';
@use 'components/home/home-hero';
@use 'components/portfolio/portfolio-modal';
// ... more components

Key Features

CSS Variables: Dark mode theming with CSS custom properties
BEM Methodology: Block-Element-Modifier naming convention
Mixins Library: Reusable card styles, responsive breakpoints, text effects
Design Tokens: Centralized spacing, colors, typography in _variables.scss

Card Mixin System

Reusable SCSS mixins for consistent card components across the site. See docs/CARD-MIXIN-GUIDE.md for full documentation.

// Base card variants
@include card('default');    // Standard card with border and light shadow
@include card('elevated');   // Card with prominent shadow, no border
@include card('flat');       // Minimal card with border only
@include card('outline');    // Transparent card with border
@include card('glass');      // Glassmorphism effect

// Interactive cards with hover effects
@include card-interactive(-4px);  // Lift on hover

// Card structure mixins
@include card-header;        // Consistent header styling
@include card-body;          // Content area with padding
@include card-footer;        // Footer with border-top
@include card-image(16/9);   // Responsive image with aspect ratio

Benefits:

Single source of truth for card styling
Reduces duplicate CSS across components
Ensures consistent hover states and shadows
Supports dark mode automatically

UI Kit Implementation

Professional UI component library built on design tokens. See docs/UI-KIT-IMPLEMENTATION.md.

Component Categories:

Buttons: Primary, secondary, outline, ghost variants with icon support
Cards: Project cards, blog cards, stat cards, process cards
Badges: Tech badges, category badges, status badges
Typography: Heading styles, body text, code blocks
Layouts: Grid systems, containers, section spacing

Design Token System:

// Color Tokens
$brand-primary: #0073aa;
$color-text-primary: #333333;
$color-bg-primary: #ffffff;

// Spacing Scale (4px base)
$space-xs: 4px;   $space-sm: 8px;    $space-md: 12px;
$space-lg: 16px;  $space-xl: 20px;   $space-xxl: 24px;

// Typography Scale
$font-size-xs: 0.75rem;   // 12px
$font-size-base: 1rem;     // 16px
$font-size-2xl: 2rem;      // 32px

// Shadow System
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 16px rgba(0, 115, 170, 0.12);
$shadow-lg: 0 8px 24px rgba(0, 115, 170, 0.15);

♿ Accessibility Implementation

Semantic HTML

All pages use proper semantic structure:

<header> for site header and navigation
<nav> for navigation menus with role="navigation"
<main> for primary content
<section> for content sections with aria-labelledby
<article> for blog posts
<footer> for site footer

ARIA Labels & Roles

// Tab navigation
<nav className="filter-tabs" role="tablist" aria-label="Filter projects by category">
  <button 
    role="tab"
    aria-selected={activeFilter === filter.key}
    aria-controls={`${filter.key}-panel`}
  >
    {filter.label}
  </button>
</nav>

// Decorative icons
<i className="fas fa-arrow-right" aria-hidden="true"></i>

// Interactive elements
<section className="hero" aria-labelledby="hero-title">
  <h1 id="hero-title">Front-end Developer</h1>
</section>

Keyboard Navigation

All interactive elements accessible via Tab key
Modal focus trapping (focus stays within modal when open)
Skip-to-content links for screen readers
Enter and Space key handlers on custom buttons

Screen Reader Support

Descriptive alt text on all images
aria-label on icon-only buttons
Proper heading hierarchy (h1 → h2 → h3)
Form labels associated with inputs

Testing

The site has been tested with:

Screen Readers: NVDA, JAWS, VoiceOver
Keyboard Only: Full navigation without mouse
Lighthouse Accessibility: 100/100 score
axe DevTools: Zero violations

🔍 SEO Implementation

On-Page SEO

Semantic HTML5 structure
Proper heading hierarchy (single h1 per page)
Meta descriptions on all pages
Open Graph tags for social sharing
Twitter Card metadata
Canonical URLs
robots.txt for crawler control
sitemap.xml for search engines

Performance SEO

Fast page load times (< 2s FCP)
Mobile-responsive design
WebP image formats
Optimized Core Web Vitals

Technical SEO

<!-- Meta tags in index.html -->
<meta name="description" content="Professional front-end developer..." />
<meta name="keywords" content="front-end developer, React, UI/UX..." />
<meta property="og:title" content="Riad Kilani - Front-end Developer" />
<meta property="og:image" content="https://riadkilani.com/preview.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="canonical" href="https://riadkilani.com/" />

🧪 Testing

Manual Testing

Cross-browser testing (Chrome, Firefox, Safari, Edge)
Mobile device testing (iOS Safari, Chrome Android)
Accessibility testing with screen readers
Performance profiling with Chrome DevTools

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Accessibility Testing Results

Automated Testing

✅ Lighthouse Accessibility: 100/100 score
✅ axe DevTools: Zero violations across all pages
✅ WAVE: No errors, 0 contrast errors
✅ Pa11y: All pages pass with zero errors

Manual Testing

Screen Reader Testing:

Tool	Version	OS	Status	Notes
NVDA	2024.1	Windows 11	✅ Pass	All landmarks, headings, and ARIA labels announced correctly
JAWS	2024	Windows 11	✅ Pass	Modal focus management works perfectly
VoiceOver	macOS 14	macOS	✅ Pass	Full keyboard navigation functional
TalkBack	Latest	Android 13	✅ Pass	Touch navigation and gestures working

Keyboard Navigation Testing:

✅ All interactive elements reachable via Tab
✅ Logical tab order maintained throughout site
✅ Modal focus trapping works (focus stays in modal)
✅ Escape key closes modals
✅ Enter/Space activates buttons
✅ Skip-to-content link available (hidden, revealed on focus)
✅ No keyboard traps detected

Color Contrast Testing:

Element Type	Ratio	WCAG Level	Status
Body text	12.6:1	AAA	✅ Pass
Headings	8.2:1	AAA	✅ Pass
Links	5.8:1	AA	✅ Pass
Buttons	7.4:1	AAA	✅ Pass
Muted text	4.8:1	AA	✅ Pass
Dark mode text	11.2:1	AAA	✅ Pass

Focus Indicators:

✅ Visible focus outline on all interactive elements
✅ 3px solid outline with sufficient contrast (3:1 minimum)
✅ Focus persists through interactions
✅ Custom focus styles for buttons and cards

ARIA Implementation Audit:

// Examples of ARIA usage across the site

// Landmarks
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<main role="main">
<footer role="contentinfo">

// Tab Navigation
<div role="tablist" aria-label="Filter projects by category">
  <button role="tab" aria-selected="true" aria-controls="all-panel">
    All Projects
  </button>
</div>

// Interactive Cards
<div 
  role="button" 
  tabIndex="0" 
  aria-label="View Project Name details"
  onKeyDown={handleKeyPress}
>

// Decorative Icons
<i className="fas fa-arrow-right" aria-hidden="true"></i>

// Images
<img src="..." alt="Descriptive text" loading="lazy" />

Form Accessibility:

✅ All inputs have associated <label> elements
✅ Required fields marked with aria-required="true"
✅ Error messages linked via aria-describedby
✅ Fieldsets with legends for grouped inputs

Mobile Accessibility:

✅ Minimum 44x44px touch targets
✅ Pinch-to-zoom enabled
✅ No horizontal scrolling required
✅ Orientation support (portrait and landscape)

Compliance

WCAG 2.1 Level AA: Fully compliant ✅
Section 508: Compliant ✅
ADA: Compliant ✅

No Automated Unit Tests

This project currently relies on manual testing and Lighthouse CI for quality assurance. Unit and integration tests are planned for future implementation.

🎨 Design System

Color System

Brand Colors:

Primary: #0073aa (Blue) - Links, CTAs, interactive elements
Accent: #8e24aa (Purple) - Highlights, secondary actions
Neutral Grays: 9-step scale from $gray-50 to $gray-900

Semantic Colors:

Text: Primary (#333), Secondary (#595959), Muted (#6c757d)
Backgrounds: Primary (#fff), Secondary (#f4f3f4), Tertiary (#f8f9fa)
Status: Success (#28a745), Warning (#ffc107), Error (#dc3545), Info (#17a2b8)

Dark Mode:

Background: #1a1a1a, Card: #252525
Text: #e0e0e0, Muted: #a0a0a0
Automatic theme switching via CSS custom properties

Typography Scale

Font Families:
- Headings (Primary): "trajan-pro-3" (serif)
- Headings (Secondary): "Playfair Display" (serif)
- Body: "Inter" (sans-serif)
- UI Elements: "DM Sans" (sans-serif)

Font Sizes (rem-based):
- xs: 0.75rem (12px)   - Small labels
- sm: 0.875rem (14px)  - Secondary text
- base: 1rem (16px)    - Body text
- md: 1.125rem (18px)  - Lead paragraphs
- lg: 1.25rem (20px)   - H4
- xl: 1.5rem (24px)    - H3
- 2xl: 2rem (32px)     - H2
- 3xl: 2.5rem (40px)   - H1
- 4xl: 3rem (48px)     - Hero titles

Spacing System

4px base unit with consistent scale:

$space-xs: 4px    $space-sm: 8px     $space-md: 12px
$space-lg: 16px   $space-xl: 20px    $space-xxl: 24px
$space-xxxl: 32px $space-huge: 40px  $space-massive: 60px

Shadow System

Layered elevation system for depth:

$shadow-sm: Subtle cards and inputs
$shadow-md: Default cards and dropdowns
$shadow-lg: Hover states and modals
$shadow-xl: Dialogs and overlays
$shadow-2xl: Hero elements

Technology Brand Colors

60+ technology brand colors for tech badges:

$tech-react: #61DAFB;      $tech-javascript: #F7DF1E;
$tech-typescript: #3178C6; $tech-sass: #CC6699;
$tech-figma: #F24E1E;      $tech-aws: #FF9900;
// ... see _variables.scss for full list

🎭 Animation & Interaction System

Animation Principles

Purpose-Driven: Animations guide attention and provide feedback
Performance-First: CSS transforms over position/size changes
Accessibility: Respects prefers-reduced-motion media query
Consistency: Unified timing and easing functions

Scroll Animations (Framer Motion)

// SectionHeader component - Fade in on scroll
<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>

Used in:

Section headers (fade + slide up)
Project cards (stagger animation)
Skill badges (scale + fade)
Hero elements (sequential reveal)

Card Hover Interactions

@mixin card-interactive($lift: -4px) {
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY($lift);
    box-shadow: $shadow-lg;
    border-color: $primary;
  }
}

IntersectionObserver Animations

JavaScript-based animations for complex sequences:

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        setTimeout(() => {
          entry.target.classList.add('animate-in');
        }, index * 100); // Stagger delay
      }
    });
  },
  { threshold: 0.1, rootMargin: '0px 0px -100px 0px' }
);

Applied to:

Portfolio grid items (cards fade in sequentially)
Bio process steps (stagger animation)
Blog post list (progressive reveal)

Button Interactions

.cta-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-md;
    
    .cta-arrow {
      transform: translateX(4px); // Arrow slides right
    }
  }
}

Modal Transitions (Material-UI)

<Fade in={open} timeout={300}>
  <Box className="modal-content">
    {/* Modal content with backdrop fade */}
  </Box>
</Fade>

Performance Considerations

GPU Acceleration: transform and opacity only
Will-Change: Applied sparingly to animated elements
Reduced Motion: @media (prefers-reduced-motion: reduce) support
Animation Budget: Max 60fps, avoid jank on low-end devices

📚 Documentation

Extended documentation is available in the docs/ directory:

Architecture & Development

docs/MODULARIZATION-SUMMARY.md — Component refactoring overview
docs/UI-KIT-IMPLEMENTATION.md — Professional UI component library and design tokens
docs/SCSS-AUDIT-REPORT.md — Style architecture analysis
docs/CARD-MIXIN-GUIDE.md — Reusable card mixin system with variants and usage examples

Performance & Optimization

docs/PERFORMANCE-OPTIMIZATIONS.md — Lighthouse optimization strategies

Features & Setup

docs/CONTACT-REFACTOR-SUMMARY.md — Contact form architecture
docs/MAIL-SETUP.md — SMTP configuration

Legacy materials are archived under docs/archives/.

🔧 Build Configuration

Vite Configuration

// vite.config.cjs
module.exports = defineConfig({
  build: {
    cssCodeSplit: true,        // Split CSS per route
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-react': ['react', 'react-dom', 'react-router-dom']
        }
      }
    }
  },
  plugins: [
    react(),
    svgr(),                     // SVG as React components
    criticalCssPlugin(),        // Inline critical CSS
    viteStaticCopy({ ... })     // Copy robots.txt, sitemap.xml
  ]
});

Gulp SCSS Pipeline

// gulpfile.cjs
gulp.task('styles', () => {
  return gulp.src('src/scss/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())                  // Compile SCSS
    .pipe(stripCssComments())      // Remove comments
    .pipe(cleanCSS())              // Minify
    .pipe(rename('style.min.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('src/css'));
});

🌙 Dark Mode Implementation

Dark mode is implemented using CSS custom properties and a class-based toggle:

// Light mode (default)
:root {
  --color-bg: #ffffff;
  --color-text: #333333;
  --color-primary: #007bff;
}

// Dark mode
html.dark-mode {
  --color-bg: #1a1a1a;
  --color-text: #e0e0e0;
  --color-primary: #66b3ff;
}

Toggle persists to localStorage and respects system preferences via prefers-color-scheme.

🔄 CI/CD Pipeline

Manual Deployment Process

Currently using manual deployment workflow:

Build
```
npm run build
```
- Compiles SCSS to minified CSS
- Runs Vite production build
- Outputs to dist/ directory

Quality Checks

npm run lint           # ESLint validation
npm run preview        # Test production build locally

Deployment
- Upload dist/ contents to hosting provider
- Verify deployment on staging URL
- Run Lighthouse audit
- Promote to production

Planned CI/CD Enhancements

GitHub Actions Workflow (Future):

name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linter
        run: npm run lint
      
      - name: Build
        run: npm run build
      
      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            https://staging.riadkilani.com
          uploadArtifacts: true
      
      - name: Deploy to Netlify
        uses: netlify/actions/cli@master
        with:
          args: deploy --prod
        env:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

Planned Pipeline Stages:

✅ Code pushed to main branch
✅ Run ESLint for code quality
✅ Build production bundle
✅ Run Lighthouse CI (fail if Performance < 90)
✅ Deploy to staging environment
⏳ Manual approval gate
✅ Deploy to production
✅ Purge CDN cache
✅ Send deployment notification

🚀 Deployment

Production Checklist

Run npm run build to create production bundle
Verify Lighthouse scores (Performance 90+, others 100)
Test all routes and modals
Verify dark mode toggle
Check responsive breakpoints (mobile, tablet, desktop)
Validate accessibility with screen reader
Test Core Web Vitals (LCP, FID, CLS)
Upload dist/ folder to hosting

Hosting Recommendations

Netlify: Automatic deployments, edge CDN, serverless functions
Vercel: Optimized for React/Vite projects, automatic previews
AWS S3 + CloudFront: Scalable static hosting with global CDN
GitHub Pages: Free hosting for public repos

Current Hosting

Provider: [Specify hosting provider]
CDN: CloudFlare / AWS CloudFront
SSL: Automatic HTTPS via Let's Encrypt
Deployment: Manual FTP/SFTP upload

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Code Standards

Follow existing SCSS architecture
Use semantic HTML and ARIA labels
Maintain Lighthouse 90+ performance score
Test accessibility with keyboard navigation
Run ESLint before committing

📄 License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Attribution

If you use this code as a reference or starting point for your own portfolio, attribution is appreciated but not required. A link back to this repository would be wonderful!

👤 Author

Riad Kilani
Senior Front-End Developer | React & UI/UX Expert | Design Systems Architect | Building Scalable, Human-Centered Web Experiences | @SyntaxSidekick

Website: riadkilani.com
GitHub: @SyntaxSidekick
Portfolio: 16+ years of experience in modern web development

🙏 Acknowledgments

React Team: For an incredible UI library
Vite Team: For blazing-fast build tooling
Framer Motion: For smooth animation primitives
Material-UI: For accessible component patterns
Open Source Community: For inspiration and tools

Built with ❤️ using React, Vite, and modern web standards.

Open source and free to use — Share, learn, and build amazing things! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 52 Commits
.tasks		.tasks
api		api
backend/mailer		backend/mailer
config		config
contact		contact
docs		docs
public		public
scripts		scripts
src		src
tools		tools
.env.staging		.env.staging
.gitignore		.gitignore
AUDIT-SUMMARY.md		AUDIT-SUMMARY.md
PHASE-1-COMPLETION-REPORT.md		PHASE-1-COMPLETION-REPORT.md
PHASE-2B-COMPLETION-REPORT.md		PHASE-2B-COMPLETION-REPORT.md
PRINCIPAL-ENGINEER-AUDIT.md		PRINCIPAL-ENGINEER-AUDIT.md
README.md		README.md
eslint.config.js		eslint.config.js
favicon.ico		favicon.ico
gulpfile.cjs		gulpfile.cjs
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite-plugin-critical-css.cjs		vite-plugin-critical-css.cjs
vite.config.cjs		vite.config.cjs

SyntaxSidekick/react-portfolio

Folders and files

Latest commit

History

Repository files navigation

Riad Kilani - React Portfolio

🌐 Live Demo

📊 Lighthouse Scores

⚡ Core Web Vitals

Optimization Strategies

✨ Key Features

Performance Optimizations

Accessibility (WCAG 2.1 AA Compliant)

Modern Development Stack

UI/UX Excellence

📱 Mobile-First Responsive Strategy

Breakpoint System

Development Philosophy

Responsive Grid Examples

Mobile Optimizations

🚀 Getting Started

Prerequisites

Installation

Development

Production Build

Code Quality

📁 Project Structure

🛠 Tech Stack

Core Technologies

UI & Animation Libraries

Build Tools & Optimization

Code Quality

Syntax Highlighting

🎨 SCSS Architecture

Modular Structure

Key Features

Card Mixin System

UI Kit Implementation

♿ Accessibility Implementation

Semantic HTML

ARIA Labels & Roles

Keyboard Navigation

Screen Reader Support

Testing

🔍 SEO Implementation

On-Page SEO

Performance SEO

Technical SEO

🧪 Testing

Manual Testing

Browser Support

Accessibility Testing Results

Automated Testing

Manual Testing

Compliance

No Automated Unit Tests

🎨 Design System

Color System

Typography Scale

Spacing System

Shadow System

Technology Brand Colors

🎭 Animation & Interaction System

Animation Principles

Scroll Animations (Framer Motion)

Card Hover Interactions

IntersectionObserver Animations

Button Interactions

Modal Transitions (Material-UI)

Performance Considerations

📚 Documentation

📚 Documentation

Architecture & Development

Performance & Optimization

Features & Setup

🔧 Build Configuration

Vite Configuration

Gulp SCSS Pipeline

🌙 Dark Mode Implementation

🔄 CI/CD Pipeline

Packages