// 13 projects · 1 write-up · 5 constellations
Sprucetrap
Cybersecurity × Full-Stack Development
01 · home planet
About me
I'm early in my cybersecurity career and building my skills step by step. Along the way I've built full-stack web apps, worked with several kinds of databases, put together machine learning pipelines, and written network servers from scratch.
- focus Learning cybersecurity, starting with the fundamentals
- now Building the core skills every cybersecurity professional needs
- learning New tools, techniques and threats in the field
- open to Working on ideas and projects that help me grow in cybersecurity
02 · star map
Projects
13 projects charted across 4 constellations. Each constellation is a skill area; every star is something I built.
Full-Stack Web
REST APIs with Express and FastAPI behind React and Next.js frontends, with auth, roles and audit trails.
★ The Pulse
Emergency platform for Iligan City with a live infrastructure map, shortest-path routing for first responders, QR-based worker login, admin approvals and database backups.
- React
- Vite
- Node.js
- Neo4j
★ GPA Calculator
App that tracks term and cumulative GPA, with Google sign-in and saved sessions.
- Node.js
- Express
- MySQL
- Google OAuth
✦ Cryp-Cross
MERN app for managing project logs (create, view, update, delete).
- MongoDB
- Express
- React
- Node.js
Data & ML
Machine learning pipelines from data cleaning to forecasting, explained with SHAP and shown in interactive charts.
★ Tourist Arrivals Forecasting Lab
8-stage machine learning pipeline that forecasts Philippine tourist arrivals, with a step-by-step interface and SHAP explanations.
- FastAPI
- Next.js
- TensorFlow
- scikit-learn
★ Soil & Weather API App
Combines Open-Meteo weather data and SoilGrids soil data in interactive charts.
- FastAPI
- Next.js
- Streamlit
- Plotly
Networking
HTTP and WebSocket servers written from scratch, real-time broadcasting and WebRTC video calls.
✦ my-bsl-http-server
HTTP server written from scratch in Bonezegei, with custom routing and 404 handling.
- Bonezegei
- HTTP
Databases
Document, relational, graph, key-value and wide-column stores: MongoDB, MySQL, Neo4j, Redis and Cassandra.
✦ itd110_neo4j
Academic records manager (colleges, departments, faculty, courses, students) on a Neo4j graph.
- Neo4j
- Cypher
03 · tech stack
Toolkit
The languages, frameworks and tools that orbit my projects.
Languages
- JavaScript
- TypeScript
- Python
- HTML5
- CSS3
- SQL
Frontend
- React
- Next.js
- Vite
- Tailwind CSS
- Leaflet
- Plotly
Backend
- Node.js
- Express
- FastAPI
- Streamlit
Databases
- MongoDB
- MySQL
- Neo4j
- Redis
- Cassandra
Data & ML
- pandas
- NumPy
- scikit-learn
- TensorFlow
Tools
- Git
- Docker
- Vercel
- VS Code
04 · intercepted transmissions
Write-ups
Security notes and build logs. Each one is also a star in the Cybersecurity constellation.
Hardening a static portfolio with security headers
A static site has no login or database, but the browser can still be told how to treat it. These are the headers this portfolio sends on Vercel, and why each one is there.
05 · open channel
Open a channel
SPRUCE // ch.01
Hey, traveller! You flew all the way to the edge of the map. I'm Spruce, Sprucetrap's guide out here.
“Things are not meant to last, but they will last to give meaning to things.”— Sprucetrap