gbmagat / profile
Résumé
gbmagat / profile Online

Hello, I'm

Gabriel Magat Jr.

Computer Science student Full-stack Cloud AI engineering

I build web applications end to end — React interfaces, Node.js APIs, and SQL databases — and deploy them on Linux servers with nginx and HTTPS.

View projects Résumé
Open to opportunities Pampanga, PH · PHT

gbmagat / the road so far

  1. 2023 Started BS Computer Science at Holy Angel University
  2. 2024 Dean's Lister, and built MOPAC — my first website
  3. 2025 Started freelancing: React sites and Linux servers for small businesses
  4. 2026 Built JobFinder for my undergraduate thesis
  5. 2027 Graduating with a BS in Computer Science

gbmagat / projects

Selected work

Things I've designed, built, and shipped — each one live on the web, with its source code on GitHub.

Featured Undergraduate thesis · 2026

JobFinder

Job matching for Angeles City, ranked by real road distance.

A full-stack platform for job seekers, employers, and PESO administrators that pairs ontology-based skill matching with shortest-path routing on the city's road network.

  • Dijkstra's algorithm written from scratch with a custom binary min-heap over an 8,282-node OpenStreetMap road graph
  • Zod validation, Helmet security headers, rate limiting, and scrypt password hashing
  • Runs on a Linux VPS with nginx, systemd, and auto-renewing Let's Encrypt HTTPS
  • React
  • TypeScript
  • Node.js
  • Express
  • SQLite
  • Leaflet
Live site Source

Course final project · 2026

Our Places

A private journal for two — places, plans, and blind reviews.

A shared space for two people to discover places, plan visits, and log experiences with photos. Each person's review stays hidden until both have submitted, then the combined score is revealed.

  • Shortest road routes with Dijkstra and a binary-heap priority queue over OpenStreetMap roads, cached per map tile
  • Nearest-first search with the Haversine formula, plus email reminders for planned visits
  • Blind reviews enforced in the server query; custom sign-in with scrypt hashes and database sessions
  • Next.js
  • React
  • TypeScript
  • PostgreSQL
  • Leaflet
  • Zod
Live app (sign-in) Source

Research simulation platform · Full-stack developer

It's a Match

A dating-app simulation for a study on language and text styles.

Built for an academic research team: participants chat through scripted Filipino and English conversations, while researchers follow progress from a private dashboard.

  • Multiple-choice conversations in formal, informal, and colloquial styles, with resumable progress
  • Password-protected researcher dashboard with completion statistics and CSV export
  • Express API with MySQL storage; Playwright flow checks on desktop and mobile
  • React
  • Vite
  • Node.js
  • Express
  • MySQL
  • Playwright
Live site Source

Academic final project · 2024

MOPAC

Museum of Philippine Arts and Culture website.

My first responsive website: a multi-page site for the ADF Museum of Philippine Arts and Culture in Pampanga, built on my own from information architecture through visual design and code.

  • Exhibition pages for the Mabini Art Movement, the 13 National Artists, and Ifugao artifacts
  • Video introduction, artwork search with jQuery, and visitor info with an embedded map
  • Responsive layouts with a mobile menu, hosted on GitHub Pages
  • HTML
  • CSS
  • JavaScript
  • jQuery
Live site Source

gbmagat / more-projects

  • 2026 This portfolio Hand-built with no framework, styled after my GitHub profile. HTML · CSS · JavaScript GitHub
  • 2025 Payroll System (CLI) Command-line payroll app with login, role-based admin and employee consoles, and a DAO layer over MySQL. PHP · MySQL · PDO GitHub
  • 2025 Celestial Bodies Database Relational database of galaxies, stars, planets, moons, and comets. PostgreSQL · SQL GitHub
See all repositories on GitHub

gbmagat / about

About me

I'm a fourth-year Computer Science student who likes connecting the pieces — from a responsive interface and a backend API to a database and a running application on a Linux server.

Since 2025 I've worked as a freelance web developer, designing and building responsive React websites for small and medium-sized businesses — from requirements gathering through launch. I also provision Linux servers on AWS and Alibaba Cloud and set up their domains and DNS.

I'm working toward a career in cloud computing, with a focus on infrastructure and application deployment. I completed AWS Academy Cloud Foundations and used Amazon EC2 and AWS Lambda in coursework, and I keep building on that through web and Linux server projects.

Off the keyboard, I manage social media for the Holy Angel String Ensemble, where I previously served as secretary — designing graphics in Canva and Photoshop and covering performances on site.

What I do

  • Building web applications

    Responsive interfaces, backend APIs, and dashboards with React, Next.js, Node.js, and Express.

  • Working with data

    MySQL, PostgreSQL, and SQLite for application records, participant tracking, and reporting.

  • Deploying projects

    Linux servers, SSH, nginx, systemd, domain configuration, and HTTPS with Let's Encrypt.

  • Checking user flows

    Playwright-based checks for desktop and mobile web experiences.

  • Applying computer science

    Skill matching and shortest-path algorithms, like Dijkstra on real road networks.

  • Learning cloud computing

    AWS Academy Cloud Foundations, with hands-on Amazon EC2 and AWS Lambda.

gbmagat / experience

Experience & education

Work

  1. 2025 — Present

    Freelance Web Developer

    Independent · City of San Fernando, Pampanga

    • Design and build responsive React websites for small and medium-sized business clients, from requirements gathering through launch.
    • Provision Linux VPS instances on AWS and Alibaba Cloud, and configure domains and DNS.
    • React
    • Linux
    • AWS
    • Alibaba Cloud

  2. 2026 — Present

    Social Media Manager

    Holy Angel String Ensemble · Holy Angel University

    • Promote performances and recruitment, create graphics in Canva and Adobe Photoshop, and cover events on site.

  3. Jun 2025 — Apr 2026

    Secretary

    Holy Angel String Ensemble · Holy Angel University

    • Maintained minutes, records, and schedules; coordinated events and communication with officers and the performance head.

Education

2023 — 2027 (expected)

BS Computer Science

Holy Angel University · Angeles City, Pampanga

  • Dean's Lister, S.Y. 2023–2024
  • Thesis: JobFinder — ontology-based skill and geographic accessibility matching

Certifications & training

  • AWS Academy Graduate — Cloud FoundationsAmazon Web Services · Training badge
  • Computer Systems Servicing NC IITESDA
  • Data Analytics EssentialsCisco Networking Academy
  • JavaScript Essentials 1Cisco Networking Academy
  • Agents and Workflows · Get Started with Codex · Extend Codex Workflows · AI FoundationsOpenAI
  • Teaching AI Fluency · Claude 101 · AI Fluency: Framework and FoundationsAnthropic / Claude Academy

gbmagat / stack

Tech stack & tools

Technologies I've used in freelance work, academic projects, and coursework.

Languages

  • JavaScript
  • TypeScript
  • Python
  • Dart
  • PHP
  • SQL

Frontend

  • HTML
  • CSS
  • React
  • Next.js
  • Tailwind CSS

Backend & databases

  • Node.js
  • Express
  • MySQL
  • PostgreSQL
  • SQLite

Cloud & deployment

  • AWS
  • Amazon EC2
  • AWS Lambda
  • Alibaba Cloud
  • Google Cloud
  • Docker
  • Kubernetes
  • Linux
  • Nginx
  • SSH

Development & testing

  • Git
  • GitHub
  • Vite
  • Playwright
gbmagat / contact

Contact

Let's connect.

Have a project, an opportunity, or a question? My inbox is open — I'm always happy to talk about web development, deployment, and cloud computing.

Email me

$ ping gbmagat

PING gbmagat (Pampanga, PH): 3 routes

email [email protected] ok

linkedin in/gabriel-magat-jr ok

github github.com/gbmagat ok

--- 3 replies, 0% packet loss ---

$

gbmagat / projects / jobfinder

Undergraduate thesis · 2026

JobFinder

Ontology-based skill and geographic accessibility matching for opportunity recommendation — a job platform for Angeles City, Pampanga.

JobFinder home page hero: “Your skills. Your place. Your next job.” over line art of Angeles City.
The JobFinder home page.
Type
Undergraduate thesis
Users
Job seekers, employers, PESO administrators
Stack
React, TypeScript, Node.js, Express, SQLite, Leaflet
Hosting
Linux VPS · nginx · systemd · Docker image

Overview

JobFinder is a research prototype for job opportunities in Angeles City. Instead of ranking openings by keywords alone, it combines ontology-based skill matching with shortest-path computation on the city's road network — so recommendations reflect both what a person can do and how far they would really travel.

What I built

  • A full-stack platform with a React and TypeScript front end, an Express REST API, and an SQLite database.
  • Separate tools for job seekers, employers, and PESO administrators.
  • Interactive maps with Leaflet and OpenStreetMap data, including a view of the underlying road graph.

Under the hood

  • Dijkstra's shortest-path algorithm implemented from scratch with a custom binary min-heap, running over an 8,282-node OpenStreetMap road graph to rank jobs by road travel distance.
  • Zod schema validation, Helmet security headers, rate limiting, and scrypt password hashing.
  • Deployed on a Linux VPS with nginx and systemd, with automated Let's Encrypt certificate renewal for HTTPS.
  • Published as a Docker image so evaluators can run the whole app with one command; container checks covered startup, authentication, uploads, and persistence.
JobFinder search results listed beside a map of Angeles City.
Search results beside the map, with the road graph one click away.
Live site Source code Docker image
gbmagat / projects / our-places

Course final project · 2026

Our Places

A private web app for two people to discover places, plan visits, keep a shared record of what they did together, and review each visit independently.

Our Places feed with story filters and the next planned place.
The shared feed, with story filters and the next planned place (demo data).
Type
Course final project
Stack
Next.js (App Router), React, TypeScript, PostgreSQL
Maps
Leaflet with OpenStreetMap
Testing
Vitest with PGlite

Overview

Our Places covers restaurants, cafés, museums, parks, and anywhere else worth remembering. Each person's review stays hidden from the other until both have submitted — then the combined score is revealed.

Features

  • Map and search: saved places sit at their real coordinates, and pressing Enter searches OpenStreetMap for any real place to save in one step.
  • Nearest first: after you pin your location, search ranks results by distance using the Haversine formula.
  • Planned visits with email reminders, and a four-step experience log with up to six private photos.
  • A feed with filters, reactions, and private comments.

Under the hood

  • Shortest road routes: the server builds a graph from OpenStreetMap roads (respecting one-way streets) and runs Dijkstra's algorithm with a binary-heap priority queue. Roads are saved per map tile, so later routes in the same area take a fraction of a second.
  • Blind reviews are enforced in the server query itself — a partner's review is withheld until both exist.
  • Custom email and password sign-in with scrypt hashes and database-backed sessions; every request is validated with Zod and every query is parameterised.

Why Next.js instead of a separate Express server?

The app is private, so nothing may reach the browser before the server checks who is asking. Running the pages and the API in one process on one origin means the session is checked before a page renders, there is no CORS to configure, and there is a single service to deploy. The business rules still live in plain TypeScript modules with their own tests.

Our Places shared map of Metro Manila with saved places and a details panel.
Saved places on the shared map, with status filters and Near me (demo data).
Live app (sign-in) Source code
gbmagat / projects / its-a-match

Research simulation platform · Full-stack developer

It's a Match

A responsive dating-app simulation developed for an academic research study on language, text styles, and perceived desirability.

It's a Match landing page.
The participant landing page.
Role
Full-stack developer
Type
Research platform
Stack
React, Vite, Node.js, Express, MySQL
Testing
Playwright flow checks

Overview

Participants move through scripted conversations and choose their replies, while the research team follows progress from a private dashboard. The visual designs and conversation scripts were supplied by the research team; I implemented them and built the system around them.

What I built

  • Scripted Filipino and English conversations with multiple-choice replies, in three text styles: formal, informal, and colloquial.
  • Participant-selected conversation order with resumable progress in the browser.
  • An Express API with MySQL storage for participant records and completion tracking.
  • A password-protected researcher dashboard with completion statistics and CSV export.
  • Responsive desktop and mobile layouts.

Quality checks

  • Playwright flow tests at desktop (1366×650) and mobile (390×844) viewport sizes.
  • An isolated in-memory database adapter for development checks, so tests never touch the live study.
Live site Source code
gbmagat / projects / mopac

Academic final project · 2024

MOPAC

A responsive, multi-page website for the ADF Museum of Philippine Arts and Culture in Pampanga — my first website project.

MOPAC Exhibitions page with a gallery hallway of framed paintings.
The Exhibitions page.
Role
Solo — structure, design, and build
Type
Academic final project
Stack
HTML, CSS, JavaScript, jQuery
Hosting
GitHub Pages

Overview

I built MOPAC on my own, handling the information architecture, visual design, and implementation. It brings together museum information, exhibition galleries, artwork highlights, and visitor details.

Features

  • A video introduction and featured artwork on the homepage.
  • Exhibition pages covering the Mabini Art Movement, the 13 National Artists, and Ifugao artifacts.
  • Visitor information with an embedded Google Maps location.
  • Homepage search for artwork highlights, powered by jQuery.
  • Responsive layouts and a mobile navigation menu.
MOPAC Art Highlights section with three featured artwork cards.
Art highlights on the homepage.
Live site Source code