Heyo, nice to e-meet you!

This portfolio is built with React and TypeScript, styled up with Tailwind CSS and a few typography tweaks to keep things looking sharp and easy on the eyes.

Data flows from my personal Notion! Whenever I want to update something, I just hop into my Notion workspace and make the change—no code required. The site grabs the latest updates automatically, with Redis working behind the scenes as a speedy cache to keep everything running smoothly.

It’s all running on Next.js with Incremental Static Regeneration (ISR), so pages are refreshed in the background, think of it as getting the best of both static and server-side worlds, with fresh content always on tap.

P.S: If you’re a fellow frontend nerd, check out the Lighthouse scores—this site is tuned for performance, accessibility, and all the good stuff 🚀

I built this Airtable clone over 3 weeks as a personal learning project to dive deep into modern full-stack development and see how far I could push performance with large datasets.

Built with the T3 Stack (Next.js 15, React 19, TypeScript) and tRPC for type-safe APIs, basically autocomplete and error checking from frontend to backend. Data lives in PostgreSQL with Prisma handling the ORM magic, plus Google authentication through NextAuth.

The fun part was solving the "how do you smoothly handle 100,000+ rows" problem. I implemented a multi-layer data fetching strategy with infinite scrolling, viewport-specific loading, and lazy cell loading that cuts payload sizes by 70-80%. When you add rows, everything feels instant thanks to optimistic updates that show changes immediately, then sync with the server in the background.

Threw in all the spreadsheet essentials: keyboard navigation, context menus, drag-and-drop, filtering, sorting, and bulk operations. The virtualization renders only visible rows, keeping performance smooth even with massive datasets. It's not perfect yet, but it's getting there!

P.S: If you're into React performance patterns, check out the optimistic updates and TanStack Virtual implementation—learned a ton about handling large-scale data efficiently 🚀

Atlaskit is a design system and React component library developed by Atlassian. It is designed to provide a consistent look and feel across Atlassian products like Jira, Confluence, and Trello while enabling developers to create user interfaces quickly and efficiently.

Particularly in:

• Editor Core
• Media Card
• Media Client
• Media Viewer

Carefund is a job marketplace connecting support workers with individuals with disabilities.

The site comprises two sections: a static landing page and a dynamic application page accessible after login.

I was responsible for developing the entire front end, utilizing Vue.js and Vuetify. My role also involved integrating third-party libraries and APIs, including Google Maps API, Moment.js, and Vuetify's calendar.

Unfortunately, the site was discontinued a few months after launch due to a shift in the company's focus.

A simple URL shortening application built with Next.js and MongoDB (with Mongoose).

This project implements a Video Chapters feature to enhance user experience by enabling seamless navigation through video content.

It supports adding chapters using multiple time formats:

• HH:MM:SS
• MM:SS
• SS

It integrates chapter buttons within both the Editor and Renderer. Key functionalities include jumping to specific timestamps, displaying tooltip chapter titles, and storing chapter data as node attributes.

The project also addresses edge cases and outlines a future roadmap for feature improvements.

This initiative won the People's Choice Award at Atlassian Innovation Week 2021.

One of the first few projects of mine as a software developer. A simple color guessing game.

There are 5 modes, ranging from the easiest to the hardest. Made with HTML, CSS (w/ bootstrap-material-design via CDN) and Vanilla JS.

Romanous Construction, founded in 1980, has been a successful player in the construction industry ever since. This project was developed during my time with the company.