https://github.com/bryanpmx/professional_portfolio
Welcome to my Responsive Portfolio Website GitHub repository! This project showcases my personal portfolio through a website built entirely with vanilla HTML, CSS, and JavaScript. It's designed to be fully responsive, ensuring a seamless viewing experience on devices of all sizes, from mobile phones to desktop monitors.
https://github.com/bryanpmx/professional_portfolio
css frontend html javascript no-frameworks responsive-web-design web-development
Last synced: about 1 month ago
JSON representation
Welcome to my Responsive Portfolio Website GitHub repository! This project showcases my personal portfolio through a website built entirely with vanilla HTML, CSS, and JavaScript. It's designed to be fully responsive, ensuring a seamless viewing experience on devices of all sizes, from mobile phones to desktop monitors.
- Host: GitHub
- URL: https://github.com/bryanpmx/professional_portfolio
- Owner: BryanPMX
- Created: 2024-09-02T04:01:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-13T06:39:23.000Z (4 months ago)
- Last Synced: 2026-02-13T13:04:14.881Z (4 months ago)
- Topics: css, frontend, html, javascript, no-frameworks, responsive-web-design, web-development
- Language: Astro
- Homepage: https://professional-portfolio-webpage.vercel.app
- Size: 40.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bryan Perez - Professional Portfolio
> A modern, high-performance portfolio website showcasing full-stack development skills, interactive games, and professional projects.
[](https://astro.build)
[](https://tailwindcss.com)
[](https://reactjs.org)
[](https://www.typescriptlang.org)
## 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
```bash
# 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](LICENSE) file for details.
## Connect With Me
[](https://linkedin.com/in/brpmx)
[](https://github.com/BryanPMX)
[](mailto:perez.bryan24@outlook.com)
---
**Built with love by Bryan Perez**
*Computer Science Student | Full-Stack Developer | Game Enthusiast*