Aroan's logo
Junior Next.js Developer

Turning ideas into projects through logical problem-solving, creative experimentation, and attention to detail. Builds on strong fundamentals to create modern, interactive applications.

View Projects
My focus is creating applications that solve real problems, combining logical problem-solving with thoughtful design.

Featured Projects

A showcase of my recent web development projects, featuring modern technologies and creative solutions.

Android phone mockup of the Vote Page project.
Logo for Nylon Vote Page projectNylon Vote Page
Next.js
Tailwind CSS
Vercel
Shadcn/UI

This project started during a fandom vote competition where our team was falling behind. The gap was widening, and to make things worse, participation from our fandom was low. The few of us who were still voting felt like our efforts weren’t moving the needle. That’s when I began thinking: "How can I make voting easier and more motivating for the ones still in the fight?"

My first idea was efficiency. I dug into the host poll’s script, rooted it out, and re-injected it into my own page. Then I made five iframe copies of it, so voters could cast multiple votes faster across different browsers and devices. To prevent issues, I also figured out what triggered the rate limits and added instructions so voters could avoid getting blocked.

The second idea was morale. I built a votes sent tracker that counted every successful vote through the server’s response and stored the number in local storage. This way, each voter could see their personal total across sessions — a number they could proudly share with the group.

I also added a live gap counter that refreshed every 3 seconds, plus a redesigned results page that was far more engaging than the dull original.

In the end, the project hit its two goals: it empowered voters by giving them a clear count of their contributions, and it made voting less boring by turning it into a more interactive and motivating experience.

We didn’t win the competition — we finished in second place — but morale was high. Voters could finally see and celebrate how much they had contributed, and that made the whole experience worth it.

Ipad mockup of AI Macro Calculator project.
Logo for the AI Macro Calculator projectAI Macro Calculator
Next.js
Groq
Gemma-2b
Tailwind CSS
DaisyUI
Vercel
Shadcn/UI

Tracking meals can feel overwhelming, especially when standard macro trackers force users to pick from limited serving options or predefined ingredients. It’s easy to get lost in all the details and feel restricted by the app. That’s why a simpler and more accessible solution was needed.

With the power of AI—using Gemma (by Google and Gemini) and Groq as the API provider—users can now just type a detailed description of what they ate. This freedom of description is the core of its accuracy. Unlike standard trackers that limit to predefined ingredients or generic meals, the AI understands the nuances of an input, such as specifying pork adobo without potatoes or grilled chicken breast with minimal oil. The AI then calculates calories and protein more accurately than traditional apps, handling the complexities of ingredients and portions.

All that's really needed is a weighing scale and a record of what was eaten. Users can input the details, and let AI do the math. Simple, fast, and precise.

Macbook and iphone mockup of the Vote Dashboard page.
Logo for the Vote Dashboard projectVote Dashboard
Next.js
Tailwind CSS
Zustand
D3-Charts
cronjob
Vercel
Github Actions
Shadcn/UI

Fans will do anything to support their favorite artists—even lose sleep to vote in online polls and awards shows. I saw this when I joined the effort to vote for Will Ashley, who was nominated for Nylon’s Boldest Breakout Star.

To make the voting more interesting, and to bring out the fandom's competitive side, I created an interactive vote tracker. It was a visual tool designed to reimagine the typically boring, straightforward poll result. Inspired by the dynamic and engaging vote displays of MTV EMAs and MTV Hottest, I built a system that showcased the results with a unique visual flair.

Using cron-job.org and GitHub Actions, I took a snapshot of the vote standings every five minutes, from August 19 to September 1. This real-time data was fed directly into the dashboard, allowing us to see our progress in an exciting new way.

We used the data to figure out our strategy, and even though we only made it to second place, the whole thing proved to me how technology can rally a fandom and make even a simple online poll feel like a true team effort.

Screenshot of Tic Tac Toe game interface

Tic-Tac-Toe Game

HTML
CSS
Javascript
This is my take on Tic-Tac-Toe — an interactive game where you can challenge a computer opponent with four difficulty levels; the AI knows different winning and blocking strategies and on each move either plays randomly or chooses a game-winning / player-blocking move, with the probability of using strategic moves increasing at higher difficulties.
Screenshot of Battleships game interface

Battleships

HTML
CSS
Javascript
Jest
Unit Testing
A block-based Battleships game built with a focus on smart computer and robust game logic. Supports Player vs Computer and Player vs Player modes. Core game logic is fully tested with Jest to ensure accurate hits, sinks, and turn management.
Screenshot of Calculator app interface

Calculator

HTML
CSS
Javascript
This repository houses a fully-functional calculator application built with HTML, CSS, and JavaScript.

Creative Archive

A look back at my creative direction and branding work before I dove into web development

Cover photo for Vote Pilipinas Campaign

Vote Pilipinas

Branding
Creative Direction
Visual Identity
Social Media

Vote Pilipinas is a non-profit, non-partisan campaign in partnership with COMELEC that encouraged voter registration and participation nationwide. I led the creative direction, developing a modern visual identity inspired by the Philippine flag.

My work covered branding, logo design, merchandise, stage and background visuals, and digital campaign materials across web and social media.

Cover photo of Impact Hackathon Program

Impact Hackathon

Branding
Creative Direction
Visual Identity
Social Media
Impact Hackathon is a nationwide tech innovation program that challenges participants to build solutions for real-world problems. As Creative Lead, I shaped the evolving visual identity across four years—designing cohesive branding systems, the hackathon platform, and marketing materials that adapted from onsite to online and hybrid formats.
Cover photo for the Pilipinas Debates 2022: The Turning Point

Pilipinas Debates 2022: The Turning Point

Branding
Creative Direction
Visual Identity
Pilipinas Debates 2022: The Turning Point was a landmark nationwide debate series by COMELEC and Vote Pilipinas, broadcast simultaneously across major networks for the first time in Philippine history. As Creative Lead, I designed the official logo and developed the event’s overall branding and visual identity.
Screenshot of Tic Tac Toe game interface

Kuha Sa Tingi

Branding
Creative Direction
Visual Identity
Merchandise
Kuha Sa Tingi is a joint initiative by RIPPLEx, Greenpeace Philippines, and local governments promoting refill systems in sari-sari stores as sustainable alternatives to single-use plastics. I led its rebrand from pilot to nationwide rollout, designing the logo, packaging, store kits, and campaign materials used across 2,300+ partner stores in San Juan City, Quezon City, and Marikina City.
Screenshot of Tic Tac Toe game interface

The Filipino Vote on Display

Branding
Creative Direction
Visual Identity
The Filipino Vote on Display is a collaboration with COMELEC that transformed its building into a visual timeline of Philippine democracy. Spanning over 90 windows, the exhibit showcased voting history, COMELEC milestones, and elected officials. I led the design and layout, crafting a chronological flow that guided visitors through the story of how Filipinos vote.

Collaborations & Impact

Before diving into web development, I honed my craft in design. Here are some of the companies, programs, and partners I worked with as a Creatives Lead, creating visuals, branding, and campaigns that built my creative foundation.

Where I've Worked

Teams I was part of, where I led creative and digital projects.

Impact Hub Manila logoInnovation Catalyst logoVote Pilipinas logoImpact Hub Asia Pacific logoKuha Sa Tingi logoRippleX logo
Partners I've Directly Worked With

Collaborations where I worked closely with partners as the creatives lead.

COMELEC logoADB logoSATO logoCartier logoKMC logoQuezon City logoQuimbo logoPasay City logoPasig City logoSan Juan City logoGreenpeace logo
Creative Campaigns for Vote Pilipinas

Campaigns I designed and managed end-to-end, from concepts to execution.

Pilipinas Debates 2022: The Turning Point logo#MagparehistroKa logo#BumotoKa Campaign logoCOMELEC VSO logo
Regional Programs with Impact Hub Asia Pacific

Initiatives I managed across APAC hubs, driving creative and digital strategies.

Accelerate 2030 logoAccelerate Membership logoGeneration Impact Fellowship logoHack The Challenge logoHumans of Impact logo
Programs, Projects, and Events I've Managed

A selection of key programs and events I managed—just a glimpse of the many projects I was part of.

Impact Hackathon logoImpact Hackathon 2020 logoImpact Hackathon 2021 logoImpact Hackathon 2022 logoDigitalXADB logoImpact2050 logo2050 Fest logoCartier Women's Initiative logoElevate Regional Startup Roadshow logoElevate Training Program logoFuckUp Nights logoMB Youth Talks logoIncubate logoPlastics Initiative logoPrism logoResiliency Project logoSEED logoSFI logoWomen Now logo
Josh's picture

Frontend Development

React
Next.js
Vercel
Framer Motion
HTML / CSS
JavaScript
Tailwind CSS
shadcn/ui
DaisyUI

UI / UX Design

Figma
Photoshop
Illustrator
Adobe Creative Suite

Other Tools

Github
Firebase
NPM
Sanity Studio

About Me

I’m Josh, though I design and build under the brand name Aroan—an identity I crafted from my second name. I’m an aspiring full-stack web developer who enjoys turning ideas into interactive projects. I like breaking down problems, experimenting with solutions, and refining details until they click.

I graduated from Mapúa University with a BS degree in Multimedia Arts and Sciences. I started as a Visual Communicator and eventually became the Creatives Manager. I handled branding, social media, publication materials, and website design through Figma. While design sharpened my creative eye, I eventually realized my true passion wasn’t in digital arts—it was in building, problem-solving, and crafting solutions through development.

Two years ago, I began transitioning to web development. My experience before this includes handling websites built on drag-and-drop platforms like Squarespace and WordPress (via Elementor), which gave me a strong foundation in visual structure and content management. I then shifted my focus to core programming, mastering HTML, CSS, and JavaScript, before moving into modern frameworks like React and Next.js.

Today, I’m working toward becoming a full-stack developer. As I start applying for junior developer roles, I look forward to growing further, learning from real-world challenges, and continuing to push my skills forward one project at a time.

I’d love to hear from you!

Check out my socials or download my resume

Github
Download CV
Copy Email