The Canvas
The Canvas is the very platform you are currently viewing with your eyes. It is my personal portfolio website, custom designed with a unique brand identity consisting of deep blacks, pure whites, and nuanced shades of gray. This palette represents the professional rigor and focus I bring to both client and personal projects. The site includes all necessary portfolio sections, filled with interactive animations, detailed CV states, and hidden Easter eggs. Every asset is aggressively optimized, ensuring instant load times and zero lag even on low end devices under poor network coverage.
About This Project
Creating a memorable, highly unique personal branding space that showcases full stack expertise while remaining accessible and high performance on low end devices.
Engineered this portfolio platform (The Canvas) using Next.js, Framer Motion, and GSAP. Designed a minimalist black and white visual aesthetic and implemented asset optimization and smooth scrolling pipelines via Lenis.
Delivered a performant, visually captivating personal portfolio website complete with Easter eggs and customized animations that run smoothly across all browser network constraints.
Portfolio Owner
2024
Public
Personal
Technology Stack
Project Story
Creating a memorable, highly unique personal branding space that showcases full stack expertise while remaining accessible and high performance on low end devices.
Engineered this portfolio platform (The Canvas) using Next.js, Framer Motion, and GSAP. Designed a minimalist black and white visual aesthetic and implemented asset optimization and smooth scrolling pipelines via Lenis.
Delivered a performant, visually captivating personal portfolio website complete with Easter eggs and customized animations that run smoothly across all browser network constraints.
Insights & Takeaways
Highlights
- A unique, dark-mode visual identity built entirely on shades of black, white, and gray.
- Highly optimized asset delivery, allowing fluid, low-latency renders on low end mobile devices.
- Houses interactive elements, detailed CV modules, and hidden Easter eggs.
Challenges
- Balancing complex timeline based scroll animations (GSAP) with web performance metrics to maintain a high performance score.
- Designing custom responsive vector and raster assets to scale without fuzzy blurring.
Lessons Learned
- Learned that restricting design constraints (like using only shades of gray) forces you to focus heavily on typography, motion spacing, and micro-interactions, resulting in a much more polished product.
Related Work
Case Study
Auto Shutdown
Rust + React desktop app to automate PC shutdowns by timer, schedule or idle state.
Case Study
Azkari
Lightweight desktop app that displays Azkar reminders based on time of day, built with Tauri, SolidJS, TypeScript and Rust.
Case Study
Chef Kit
Modern multilingual cooking app offering recipe discovery, chef profiles, inventory management, favourites and push notifications, built with Flutter, Dart and Flask.
