Documentation

Technical documentation for the cyberpunk portfolio website

Sheigfred Bello - DevOps Engineer Portfolio

A modern, cyberpunk-themed portfolio built with Flask: neon aesthetics, animated particles, smooth scrolling navigation, a downloadable résumé, and an AWS Cloud Practitioner quiz with an exam-only leaderboard.

Features

  • Cyberpunk Aesthetic: Neon gradients, animated particles, scanlines, and glitch effects
  • Responsive Design: Mobile-first with breakpoints for all devices
  • Dark/Light Mode: Theme toggle with saved preference (localStorage)
  • Smooth Scrolling: Sticky navigation + active link highlighting
  • Performance Optimized: Lazy-ish media, throttled scroll, GPU-friendly animations
  • Accessible: Keyboard navigation, ARIA, reduced motion support
  • SEO Friendly: Semantic HTML, meta tags, Open Graph
  • Downloadable Résumé: One-click PDF from a prominent CTA
  • AWS Practice Quiz:
    • Practice & Exam modes (Exam = 15 randomized questions, 90-minute timer)
    • Practice shows inline explanations
    • Only Exam results saved to leaderboard
    • Leaderboard shows correct/total (e.g., 12/15) and highlights your latest attempt

Tech Stack

Backend

  • Python 3.x
  • Flask
  • Jinja2

Frontend

  • HTML5
  • CSS3 (Vanilla)
  • JavaScript (ES6+)

Styling

  • Custom CSS
  • CSS Grid & Flexbox

Performance

  • Intersection Observer
  • Throttled events

Storage

  • JSON file (leaderboard.json)

Sections

Home

Hero with animated title, résumé download, contact info

About

Summary with stats and neon glow

Skills

Tech stack with badges/tooltips

Experience

Timeline of professional roles

Projects

Cards with tags

YouTube

Embedded “The Root Access Podcast”

Contact

Form with validation + direct contact details

AWS Practice

Quiz (Practice/Exam) with exam-only leaderboard

Installation & Setup

1) Clone the repository

git clone <repository-url>
cd portfolio

2) Create a virtual environment

python -m venv venv
# macOS/Linux
source venv/bin/activate
# Windows
# venv\Scripts\activate

3) Install dependencies

pip install -r requirements.txt

4) (Optional) Add résumé PDF

Place your file at:

static/assets/resume.pdf

The homepage “Resume” button links to this path.

5) Run the application

python app.py

6) Open your browser

Navigate to http://localhost:5000

Note: leaderboard.json is created on first write. Ensure the app can write to the project directory.

Run with Docker (Prebuilt Image)

Image: shig24/shig-webapp:latest

1) Pull

docker pull shig24/shig-webapp:latest

2) Run (simple)

docker run --rm -p 5000:5000 shig24/shig-webapp:latest
# Open http://localhost:5000

3) Run (with secrets & persistence)

docker run --rm -p 5000:5000 \
  -e SECRET_KEY='replace_me' \
  -e RESUME_PASSWORD='replace_me' \
  -v "$PWD/private:/app/private:ro" \
  -v "$PWD/leaderboard.json:/app/leaderboard.json" \
  --name shig-webapp \
  shig24/shig-webapp:latest

4) Update to latest

docker pull shig24/shig-webapp:latest
docker stop shig-webapp || true
docker rm shig-webapp || true

5) Save/Load offline

docker save -o shig-webapp.tar shig24/shig-webapp:latest
docker load -i shig-webapp.tar

Note: If private, run docker login before pulling.

Project Structure

portfolio/
├── app.py # Flask app (with /aws-practice + alias /awspractice)
├── requirements.txt
├── README.md
├── leaderboard.json # Created at runtime (exam leaderboard storage)
├── templates/
│  ├── index.html # Home
│  ├── documentation.html # Docs page
│  └── aws_practice.html # AWS quiz page (exam-only leaderboard)
└── static/
  ├── assets/
  │  └── resume.pdf # Résumé served by the CTA
  ├── css/
  │  ├── styles.css # Main site styles (home/docs/shared)
  │  └── aws-practice.css # Quiz styles (scoped to .aws-practice-main)
  └── js/
    ├── app.js # Nav, theme, particles, typing, etc.
    └── aws-quiz.js # Quiz logic (Practice/Exam, timer, POST to backend)

AWS Practice Quiz

Client (static/js/aws-quiz.js)

  • Prompts for player name on Start
  • Exam Mode:
    • Randomizes bank, uses 15 questions (AWSQuiz.EXAM_QUESTIONS = 15)
    • 90:00 countdown; warning class under 5 mins
    • POST body on submit:
      player-name, score, correct, total, time, quiz-mode
  • Practice Mode: Full pool, shows explanations; not saved to leaderboard
  • On success: redirect to /aws-practice?highlight=<name>#leaderboard

Server (app.py)

  • Routes:
    @app.route('/aws-practice', methods=['GET', 'POST'])
    @app.route('/awspractice', methods=['GET', 'POST']) # alias
  • POST:
    • Accepts legacy score plus correct and total
    • Recomputes score = round((correct/total) * 100) if counts provided
    • Persists only when mode == 'exam'
    • Sorts leaderboard: correct (desc) → shorter time → earlier timestamp
  • GET:
    • Renders exam-only leaderboard (top N)
    • Displays score as correct/total

Résumé Download (CTA)

Add a download button in the hero:

<a class="cta-button resume"
  href="{{ url_for('static', filename='assets/resume.pdf') }}"
  download>
  Download Résumé
</a>

Performance

90+
Lighthouse Score
< 1.5s
First Contentful Paint
< 2.5s
Largest Contentful Paint
< 0.1
Cumulative Layout Shift

Accessibility

  • Keyboard Navigation: Full keyboard support with focus indicators
  • ARIA Labels: Screen reader friendly navigation and controls
  • High Contrast Support: Enhanced visibility
  • Reduced Motion Support: Respects user preferences
  • Semantic HTML: Proper heading hierarchy & landmarks

Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Deployment

🔧 Local Development

python app.py

🚀 Production Deployment

  1. Set debug=False in app.py
  2. Use a production WSGI server like Gunicorn:
pip install gunicorn
gunicorn app:app

Ensure write permissions for leaderboard.json.

Contact

Sheigfred Bello

[email protected]
0906-025-1610
Makati City, Philippines

License

This project is open source and available under the MIT License.