Bryan Perez - Professional Portfolio

A modern, high-performance portfolio website showcasing full-stack development skills, interactive games, and professional projects.

Features

Interactive Games - Play custom-built JavaScript games directly in your browser Live Project Demos - Experience projects through embedded iframe demonstrations Professional Dark Theme - Sleek design with electric blue and purple accents Fully Responsive - Optimized for desktop, tablet, and mobile devices High Performance - Built with Astro's island architecture for minimal JavaScript Accessible - WCAG compliant with keyboard navigation and screen reader support

Tech Stack

Category	Technologies
Framework	Astro, React, TypeScript
Styling	Tailwind CSS, Custom CSS
Games	HTML5 Canvas, Vanilla JavaScript
Tools	Vite, npm, Git

Quick Start

# Clone the repository
git clone https://github.com/BryanPMX/Professional_Portfolio.git
cd Professional_Portfolio

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Visit http://localhost:4321 to see the portfolio in action!

Project Structure

Professional_Portfolio/
├── src/
│   ├── components/
│   │   ├── Modal.tsx           # Live demo modal
│   │   └── ProjectCard.astro   # Reusable project cards
│   ├── layouts/
│   │   └── Layout.astro        # Base layout with navigation
│   ├── pages/
│   │   ├── index.astro         # Home page
│   │   ├── projects.astro      # Projects gallery
│   │   ├── games.astro         # Games showcase
│   │   ├── about.astro         # About me
│   │   ├── contact.astro       # Contact form
│   │   └── games/
│   │       ├── space-invaders.astro
│   │       └── snake.astro
│   └── styles/
│       └── global.css          # Custom styles
├── public/
│   ├── assets/                 # Images and documents
│   └── favicon.svg
└── package.json

Featured Games

Space Invaders

Classic arcade shooter with modern visuals

• Controls: Arrow keys + Spacebar
• Features: Collision detection, progressive difficulty, particle effects

Snake Game

Nostalgic Snake with contemporary design

• Controls: Arrow keys
• Features: High score tracking, speed progression, smooth animations

Featured Projects

CAF Admin Portal

Full-stack web application for nonprofit management

• Stack: React, Node.js, PostgreSQL
• Features: User management, donation tracking, admin dashboard

Banking Application

Object-oriented banking system demonstration

• Stack: Java, Spring Boot, MySQL
• Features: Account management, secure transactions, authentication

Design Philosophy

• Dark Theme: Professional appearance with reduced eye strain
• Minimalist: Clean, focused design that highlights content
• Interactive: Engaging animations and hover effects
• Performance-First: Optimized for speed and user experience

Responsive Design

Device	Breakpoint	Features
Mobile	< 768px	Touch-friendly, collapsible navigation
Tablet	768px - 1024px	Optimized layouts, touch interactions
Desktop	> 1024px	Full features, hover effects

Deployment

The portfolio is optimized for deployment on:

• Vercel (Recommended)
• Netlify
• GitHub Pages
• Any static hosting provider

Simply connect your repository and deploy!

Performance

• Lighthouse Score: 100/100
• First Contentful Paint: < 1.5s
• Bundle Size: < 50KB (gzipped)
• Island Architecture: Minimal JavaScript hydration

Contributing

Interested in contributing? Great! Here's how:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Connect With Me

---

Built with love by Bryan Perez

Computer Science Student | Full-Stack Developer | Game Enthusiast