★

@AlexanderTheBored | Turning class requirements into finished projects

Hi, I’m Rovel Lumapas

A first year BSIT student specializing in taking chaotic deadlines, broken ideas, and half written drafts and turning them into clean, working experiences on screen.

Live from Cebu • Always in dev mode

Focus: HTML, CSS, JavaScript, C, basic ML, and way too many drafts

Note: This portfolio is built in raw HTML, CSS, and JavaScript. No frameworks, just student brain and caffeine.

Snapshot

v1.0 Online

Semester

AY 2025

CIS1104 • HCI • GE-PC

Mode

Creative + Essay outputs in one hub

Progress

Tracking

Sub-outputs

0 / ?

Auto updates as I add more

Goal

One clean card per requirement

Current Focus

Portfolio Build

This page

HTML • CSS • JS

Card based layout with shimmer animations

Up next

Fill in weekly outputs and upload to Canvas as PDF

Long term

Connect to future projects like MangaView and hackathon builds

About

Block B1 • BSIT • University of San Carlos

Who I Am

Student, builder, and chronic overthinker

Profile

I am a first year BSIT student who lives inside group chats, Google Docs, and VS Code. I enjoy turning instructions into working outputs and giving every requirement a bit of personality.

Comfortable in HTML, CSS, C, and basic Python
Can switch between creative writing and technical work
Usually the one centralizing files and fixing formatting

Student dev Class representative energy Night owl

How This Portfolio Works

One requirement = one card

System

This site is structured to match how teachers check work. Hero on top, then sections for featured projects, weekly outputs, and skills.

Each sub output from the Google Doc becomes a card under Weekly Outputs
Major creative pieces and websites are highlighted under Featured Projects
The layout is print friendly for PDF export, but still animated on the web

Teacher friendly Organized Expandable for future semesters

Featured Projects

Web based work that feels like me

MangaView (Concept)

Personal manga library web app

Web

A card based interface that treats each manga like a collectible. Focus on clean tiles, hover states, and a layout that feels like a bookshelf but behaves like a dashboard.

Dark themed interface with soft neon accents
Card grid with title, status, and chapter counts
Designed to scale with JSON based metadata

HTML CSS Card design

Status: In progress, being reshaped for class safe demo

Networking Information Page

Educational site turning notes into a visual reference

School

A simple, structured page for networking fundamentals where each topic is a card. Clear headings, consistent icons, and enough whitespace to keep information readable.

Responsive layout for phone and laptop checking
Card based sections for OSI, TCP, and basic concepts
Built to be easy to expand in future semesters

HTML CSS Educational

Role: Design, structure, and implementation

Creative Writing & HCI Collabs

Bringing story brain into interface design

Mixed

As a former creative writing org president, I carry narrative structure into UI decisions. Every card on this site is treated as a mini story with a clear beginning, middle, and end.

Uses hierarchy and pacing to guide reading order
Pairs text density with visual breathing room
Balances academic tone with personal voice

Storytelling UX writing HCI

Output type: Essays, reflections, and interface drafts

Weekly Outputs

Each card below is a placeholder for a sub output from the Google Doc

How to use this section

Replace the placeholder text with your actual outputs

Guide

For each requirement in the Google Doc (creative or essay version), create or edit a card below. You can duplicate a card structure and fill it with your:

Title of the task or sub output
Short description of what you did
Bullet points for key learning or reflection

Editable Teacher view friendly Centralized

Week 1 • Orientation & Expectations

First contact with the course

Week 1

Short reflection on how I entered the course, my starting expectations, and what I want my portfolio to look like by the end of the semester.

Initial feelings about the subject
What I am excited or nervous about
How I plan to manage requirements

Week 2 • First Creative Output

Translating concepts into a story

Week 2

I chose the creative version and wrote a piece that connected the topic to my own experience as a student learning technology.

Main idea or thesis of the output
Key scenes or arguments
What I learned while writing it

Week 3 • Reflection Task

Looking at my habits honestly

Week 3

A reflection on how I balance time, procrastination, and sudden waves of productivity, especially around coding tasks.

One habit I am proud of
One habit I want to change
Concrete step I will try next week

Week 4 • Group Activity

Working in teams and surviving chats

Week 4

A short documentation of our group activity, my role in it, and how we divided tasks among members.

Group number and members
Main output we produced
How collaboration went and what could improve

Week 5 • Midterm Preparation

Converting notes into understanding

Week 5

A summary of my midterm review strategies, plus any reviewer or study aid I created and how it helped.

Topics I focused on the most
How I tested myself
What I will keep or change for finals

Week 6 • Portfolio Progress Check

Bringing everything into one page

Week 6

A short status update on how many outputs I have added to this site and what is still pending.

What is complete
What still needs to be added
One thing I am proud of so far

Skills & Tools

What I am currently using to stay afloat

Technical Skills

Languages and tools

Tech

HTML & CSS for structured, responsive layouts
Basic JavaScript for interactivity and animations
C programming for foundational logic and problem solving
Beginner Python and machine learning fundamentals

HTML CSS JavaScript C

Collaboration & Organization

Class rep instincts

Soft

Helps coordinate group tasks and announcements
Keeps track of files, folders, and submission formats
Comfortable talking to teachers for clarifications
Balances multiple subject requirements in parallel

Communication Time management (work in progress)

Creative & Writing

Words plus layout

Creative

Experience leading a creative writing organization
Comfortable writing essays, reflections, and narratives
Can adjust tone for academic, casual, or technical work
Uses story thinking to design flows and layouts

Writing Story structure HCI perspective