🚀 Víctor Vega Sobral - AI Portfolio

Modern, responsive portfolio built with Reflex framework showcasing AI & Intelligent Systems expertise

🌐 Live Page: www.victorvegasobral.com

---

⚠️ IMPORTANT: Build Requirements

Warning

WSL/Linux Required for Build: The build process (build.sh) must be executed in a Linux environment (WSL, Linux, or CI/CD). Windows PowerShell/CMD will not work properly due to Unix-specific commands.

---

📋 Project Overview

Professional portfolio for Víctor Vega Sobral - 4th-year Intelligent Systems Engineering student and AI Software Engineer, showcasing expertise in Deep Learning, AI solutions, and Formula 1 applications.

🎯 Key Features

• ✅ 100% Static: No backend, no websockets - pure frontend
• 📱 Fully Responsive: Optimized for mobile, tablet, and desktop
• 🚀 Fast Loading: Optimized assets and minimal dependencies
• 🎨 Modern Design: Clean UI with smooth animations
• 🔧 Easy Deploy: Automated Vercel deployment

---

🏗️ Architecture Diagram

graph TB
    A[Portfolio.py - Main App] --> B[Views]
    A --> C[Components]
    A --> D[Utils]
    A --> E[Assets]

    B --> B1[index.py - Home Page]

    C --> C1[hero.py - Landing Section]
    C --> C2[about.py - Bio & Skills]
    C --> C3[projects.py - Project Showcase]
    C --> C4[contact.py - Contact Info]
    C --> C5[navigation.py - Header Nav]
    C --> C6[footer.py - Site Footer]

    D --> D1[styles.py - Design System]

    E --> E1[favicon.ico]
    E --> E2[CV.pdf]

    F[rxconfig.py] --> A
    F --> F1[frontend_only: true]
    F --> F2[no backend/websockets]

    G[build.sh] --> H[Vercel Deploy]
    G --> I[Static Export]

    style A fill:#a78bfa
    style F fill:#ef4444
    style G fill:#10b981

Loading

---

🛠️ Tech Stack

Technology	Version	Purpose
Reflex	0.8.3	Frontend framework
Python	3.11+	Backend language
Vercel	Latest	Hosting platform
GitHub	Latest	Version control & CI/CD

---

📁 Project Structure

Portfolio/
├── 📁 Portfolio/                    # Main application package
│   ├── 📄 Portfolio.py              # Main app entry point
│   ├── 📁 components/               # Reusable UI components
│   │   ├── 🎯 hero.py               # Landing hero section
│   │   ├── 👤 about.py              # About me section
│   │   ├── 🚀 projects.py           # Projects showcase
│   │   ├── 📞 contact.py            # Contact information
│   │   ├── 🧭 navigation.py         # Header navigation
│   │   ├── 🦶 footer.py             # Site footer
│   │   └── 📝 blog.py               # Blog section
│   ├── 📁 views/                    # Page layouts
│   │   └── 🏠 index.py              # Home page
│   └── 📁 utils/                    # Utilities & styles
│       └── 🎨 styles.py             # Design system
├── 📁 assets/                       # Static assets
│   ├── 🖼️ favicon.ico               # Site icon
│   └── 📄 Victor_Vega_Sobral_CV_Public.pdf # Public resume
├── 🌍 .env                          # Environment variables (not in git)
├── 📝 .env.example                  # Environment template
├── 🐳 Dockerfile                    # Docker configuration
├── 🚫 .dockerignore                 # Docker ignore file
├── ⚙️ rxconfig.py                   # Reflex configuration
├── 📋 requirements.txt              # Python dependencies
├── 🔨 build.sh                      # Build & deploy script
└── 📖 README.md                     # Project documentation

---

🚀 Quick Start

📋 Prerequisites

• Python 3.11+
• Git
• WSL/Linux (for building)
• Docker (optional)

⚙️ Environment Setup

1. Clone Repository

git clone https://github.com/VforVitorio/Portfolio.git
cd Portfolio

2. Configure Environment Variables

# Copy the example file
cp .env.example .env

# Edit .env and add your email
# EMAIL_ADDRESS=your_email@example.com

🔧 Local Development

1. Install Dependencies

pip install -r requirements.txt

2. Run Development Server

reflex run

3. Access Application

• 🌐 Frontend: http://localhost:3000
• 🔧 Backend: http://localhost:8000 (if needed)

🐳 Docker Development

1. Build Docker Image

docker build -t portfolio .

2. Run Container

# With environment variables
docker run -p 3000:3000 \
  -e EMAIL_ADDRESS=your_email@example.com \
  portfolio

# Or with .env file
docker run -p 3000:3000 \
  --env-file .env \
  portfolio

3. Docker Compose (Optional)

# docker-compose.yml
version: "3.8"
services:
  portfolio:
    build: .
    ports:
      - "3000:3000"
    env_file:
      - .env

🏗️ Production Build

[!WARNING] > Must be run in WSL/Linux environment

chmod +x build.sh
./build.sh

---

🔧 Configuration

🌍 Environment Variables

Create a .env file in the root directory:

# Copy from example
cp .env.example .env

Required Variables:

EMAIL_ADDRESS=your_email@example.com

Important

The .env file is ignored by git for security. Make sure to configure it in your deployment environment.

Static Configuration (rxconfig.py)

config = rx.Config(
    app_name="Portfolio",
    env=rx.Env.PROD,
    frontend_only=True,    # No backend/websockets
    api_url="",           # No API needed
    backend_port=None,    # No backend port
)

Responsive Breakpoints

• 📱 Mobile: < 768px - Vertical layout, centered content
• 💻 Desktop: ≥ 768px - Horizontal layout, optimized spacing

---

🌐 Deployment

🚀 Vercel (Recommended)

1. Setup Environment Variables in Vercel:

   • Go to Vercel Dashboard → Project Settings → Environment Variables
   • Add: EMAIL_ADDRESS = your_email@example.com

2. Auto Deployment:

   • Push to main branch
   • Vercel automatically builds and deploys
   • Changes live in ~2 minutes

🐳 Docker Deployment

1. Build Production Image:

docker build -t portfolio-prod .

2. Deploy to Container Platform:

# Example: Deploy to production with environment variables
docker run -d \
  -p 80:3000 \
  -e EMAIL_ADDRESS=your_email@example.com \
  --name portfolio-app \
  portfolio-prod

🔧 Manual Deployment

[!WARNING] > Requires WSL/Linux environment

# Generate static files
./build.sh

# Commit and push
git add .
git commit -m "Deploy: Update portfolio"
git push origin main

☁️ Other Platforms

Netlify:

• Connect GitHub repo
• Build command: ./build.sh
• Publish directory: public
• Environment variables: Add EMAIL_ADDRESS

GitHub Pages:

• Enable GitHub Actions
• Use build workflow
• Set environment secrets

---

🎨 Features Showcase

📱 Fully Responsive Design

• Hero section adapts to mobile (vertical) and desktop (horizontal)
• Projects grid: 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop)
• Navigation collapses on mobile devices

🎯 AI & Tech Focus

• Deep Learning certifications highlighted
• Formula 1 AI projects featured
• Technical skills prominently displayed

---

🤝 Contributing

1. Fork the repository
2. Create 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 Pull Request

---

📄 License

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

---

👨‍💻 Author

Víctor Vega Sobral

• 🎓 Intelligent Systems Engineering Student
• 🤖 AI Software Engineer
• 🏎️ Formula 1 AI Enthusiast

🤝 Connect with me

---

⭐ Star this repo if you found it helpful!