Portfolio Project Architecture

Project Overview

A React-based single-page portfolio application with a sci-fi/cyberpunk aesthetic, featuring animated components, sound effects, and responsive design. Built with Vite as the build tool and includes a Node.js/Express backend server.

Technology Stack

Frontend

• React 18.2.0 - Main UI framework
• React Router DOM 6.16.0 - Client-side routing
• Vite 4.4.9 - Build tool and dev server
• React JSS - CSS-in-JS styling
• Anime.js 3.0.1 - Animation library
• Howler.js 2.1.1 - Audio management
• Arwes 1.0.0-alpha.23 - Sci-fi UI components
• Augmented UI 2.0.0 - CSS framework for futuristic interfaces

Backend

• Express 4.16.4 - Web server
• Helmet 3.16.0 - Security middleware
• Morgan 1.9.1 - HTTP request logger
• CORS 2.8.5 - Cross-origin resource sharing
• Nodemailer 7.0.5 - Email functionality
• Firebase 10.4.0 - Backend services (if used)

Project Structure

Entry Points

src/
├── index.js          # React app entry point
├── main.js           # Main component with routing
└── server.js         # Express backend server

Core Architecture Layers

1. Layout System

src/layouts/Template/
├── Template.js       # Main layout wrapper
├── Template.styles.js # Layout styles
└── index.js          # HOC wrapper with styles and router

Key Features:

• Conditional rendering based on route (isURLContent)
• Background animations
• Enter/exit animations with overlay
• Responsive design handling

2. Component Architecture

Core Components:

src/components/
├── App/              # Main app container with header/footer
├── Header/           # Navigation with animated SVG background
├── Menu/             # Navigation menu with links
├── Background/       # Animated circuit board background
├── Layout/           # Root layout with meta tags and providers
├── Main/             # Content wrapper with fade animations
├── Brand/            # Logo component with SVG animations
├── Footer/           # Footer with social links
└── Animation/        # Animation context provider

UI Components:

src/components/
├── Button/           # Animated button with SVG borders
├── Text/             # Typing animation text component
├── Link/             # Router-aware link component
├── Popup/            # Modal dialog component
├── Fader/            # Fade in/out animation wrapper
├── Secuence/         # Staggered animation sequence
├── SocialLinks/      # Social media links
├── Legal/            # Copyright footer
└── Brand/            # Logo/branding component

3. Page Components

src/pages/
├── index.js          # Home page (landing)
├── about.js          # Resume/About page
├── skills.js         # Skills showcase
└── recommendations.js # Testimonials page

4. Utility Tools

src/tools/
├── withStyles/       # CSS-in-JS HOC
├── withRouter/       # React Router HOC
├── withAnimation/    # Animation HOC
├── withSounds/       # Audio HOC
├── viewport/         # Responsive viewport utilities
├── animationStatus/  # Animation state management
├── animationTick/    # Animation timing utilities
├── createSounds/     # Audio creation utilities
├── createPlayer/     # Audio player utilities
└── general/          # General utility functions

5. Settings & Configuration

src/settings/
├── theme.js          # Design system and colors
├── meta.js           # SEO meta tags
└── sounds.js         # Audio configuration

Data Flow Architecture

1. Routing Flow

BrowserRouter (main.js)
    ↓
Template Layout (layouts/Template/)
    ↓
Conditional Rendering:
- Home page: Direct content
- Other pages: App wrapper with Header/Footer
    ↓
Page Components (pages/)

2. Animation System

Animation Context (components/Animation/)
    ↓
Secuence Component (staggered animations)
    ↓
Individual Components (withAnimation HOC)
    ↓
Anime.js animations

3. Audio System

SoundsProvider (components/SoundsProvider/)
    ↓
Howler.js players
    ↓
Component sound triggers

4. Styling System

Theme Provider (react-jss)
    ↓
withStyles HOC
    ↓
Component styles

Key Features

1. Responsive Design

• Mobile-first approach with viewport utilities
• Different layouts for mobile/desktop
• Responsive navigation (burger menu on mobile)

2. Animation System

• Complex SVG path animations
• Staggered entrance animations
• Typing text effects
• Circuit board background animations

3. Audio Integration

• Sound effects for interactions
• Background audio management
• Audio context for performance

4. SEO & Performance

• React Helmet for meta tags
• Static file serving
• Optimized build process

Backend Architecture

Express Server (server.js)

• Static file serving
• Email functionality for resume downloads
• Security middleware (Helmet, CORS)
• Environment-based configuration

API Endpoints

• POST /api/download-resume - Resume download tracking

Build & Deployment

Development

• Vite dev server with hot reload
• Babel configuration for React
• ESLint for code quality

Production

• Vite build process
• Static file generation
• Express server for production serving

State Management

• React Context for animations and sounds
• Local component state for UI interactions
• No global state management library needed

Performance Optimizations

• Code splitting with React Router
• Optimized animations with requestAnimationFrame
• Lazy loading of audio files
• Efficient SVG animations

Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd Portfolio

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Start production server
npm run server

Environment Variables

Create a .env file in the root directory:

NODE_ENV=development
PORT=14000
HOST=127.0.0.1
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run server - Start production server
• npm run lint - Run ESLint
• npm run deploy:build - Build and copy to public directory
• npm run vercel-build - Build for Vercel deployment

File Structure

Portfolio/
├── public/           # Static assets
├── src/
│   ├── components/   # React components
│   ├── layouts/      # Layout components
│   ├── pages/        # Page components
│   ├── tools/        # Utility functions
│   ├── settings/     # Configuration files
│   ├── data/         # Static data
│   ├── images/       # Image assets
│   ├── index.js      # App entry point
│   └── main.js       # Main component
├── server.js         # Express backend
├── vite.config.js    # Vite configuration
├── package.json      # Dependencies
└── README.md         # This file

Component Architecture Details

Layout System

The Template component serves as the main layout wrapper, handling:

• Route-based conditional rendering
• Background animations
• Enter/exit animations
• Responsive design logic

Navigation System

• Header: Animated SVG background with responsive navigation
• Menu: Navigation links with hover effects and sound
• Mobile: Burger menu with overlay navigation

Animation System

• Animation Context: Provides animation state to child components
• Secuence: Manages staggered animations
• withAnimation HOC: Wraps components with animation capabilities
• Anime.js: Handles complex SVG and CSS animations

Audio System

• SoundsProvider: Manages audio context and players
• Howler.js: Handles audio playback
• Sound triggers: Components trigger sounds on interactions

Styling Architecture

• React JSS: CSS-in-JS styling
• Theme system: Centralized design tokens
• Responsive utilities: Viewport-based responsive design
• Component styles: Scoped component styling

Performance Considerations

• Code splitting: Route-based code splitting
• Animation optimization: RequestAnimationFrame for smooth animations
• Audio optimization: Lazy loading and context management
• Build optimization: Vite's fast build process

This architecture creates a cohesive, performant portfolio with a unique sci-fi aesthetic, smooth animations, and responsive design across all devices.