Project notes

Documentation

A practical reference for the portfolio app: stack, features, setup, deployment, and supporting tools.

Overview Stack Setup AWS Quiz Deploy

Sheigfred Bello - Cloud and DevOps Portfolio

A Node.js and Express portfolio for cloud infrastructure, automation, technical writing, project work, small-business website services, and an AWS Cloud Practitioner quiz with an exam-only leaderboard.

Features

  • Portfolio Home: Cloud/DevOps positioning, selected projects, experience, podcast feature, and contact paths
  • 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
  • Small-Business Website Services: Dedicated service page, sample demos, resources, and inquiry CTAs
  • Accessible: Keyboard navigation, ARIA, reduced motion support
  • SEO Friendly: Semantic HTML, meta tags, Open Graph
  • Protected Résumé Download: Private PDF route with password support
  • 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

  • Node.js
  • Express
  • EJS layouts

Frontend

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

Styling

  • Custom CSS
  • CSS Grid & Flexbox

Performance

  • Intersection Observer
  • Throttled events

Storage

  • JSON leaderboard data
  • Markdown resources

Sections

Home

Cloud/DevOps hero, portfolio CTA, and contact info

About

Professional summary, stats, social links, and podcast feature

Skills

Tech stack with badges/tooltips

Experience

Timeline of professional roles

Projects

Cards with tags

YouTube

Embedded “The Root Access Podcast” appearance

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 sheigfredbello.com

2) Create a virtual environment

npm install

3) Configure environment

cp .env.example .env
# Optional: set RESUME_PASSWORD and OpenAI keys if using chat features

4) (Optional) Add résumé PDF

Place your file at:

private/SheigfredBelloCV.pdf

The app serves it through the protected résumé download flow.

5) Run the application

node server.js

6) Open your browser

Navigate to http://localhost:5000

Note: leaderboard.json is created on first write. Ensure the app can write to the data 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

sheigfredbello.com/
├── server.js # Express app, routes, markdown loading, leaderboard handling
├── views/ # EJS pages and shared layout
├── public/ # CSS, JavaScript, images, and static assets
├── content/resources/ # Markdown website guides and resources
├── data/leaderboard.json # AWS quiz exam leaderboard storage
└── private/SheigfredBelloCV.pdf # Protected résumé file

AWS Practice Quiz

Client (public/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 (server.js)

  • Routes:
    app.get('/aws-practice', ...)
    app.post('/api/leaderboard', ...)
  • 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

The résumé lives outside the public folder and is served through a controlled route:

private/SheigfredBelloCV.pdf
RESUME_PASSWORD=replace_me

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

npm run dev

Production Deployment

  1. Set the required environment variables.
  2. Run the app under PM2 or the included production process manager.
npm run start
npm run logs

Ensure write permissions for data/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.