motivation
Build a secure, cloud-based workspace where music creators can collaborate, organize projects, and share the right files with the right people (drafts, stems, mixes, and everything in between), without the usual back-and-forth.
about
Syfr was my first baby. I initially thought of the idea when I was still in the early stages of my developer journey. I had, for the most part, completed the "App Academy Open" boot camp curriculum and I knew I needed to start working on a big project if I was really going to cut my teeth. In those days I was still doing a lot of music production while learning to code. Perhaps that's what gave me the idea for something like a "GitHub for musicians".
I kept running into the same issues again and again. There were many different people who would collaborate on one song, with many different roles, and they would all need access to different files. The artist might want to hear the latest version of a track, a musician might need a stripped-down version to play over, another producer might need stems for the whole project, or maybe the whole project in some other format. Typically, this was done with Gmail, Dropbox, WeTransfer, or some other service for sending files. (As far as I can tell, this is still the industry standard.) To me, this seemed like a problem that was begging for a solution.
I dove headfirst into the process of building a full-scale web app from scratch. I created mockups, showed my ideas to designers, researched different tech stacks, pulled all-nighters, and banged my head against the wall dealing with the sort of problems that real developers face every day. Eventually, that project helped me land my first job at AVI.
About a year into my tenure at AVI, having learned a ton, I decided to rewrite it entirely, this time foregoing any component frameworks, using a more appropriate database and server, and adopting the Next.js framework. Today, given what I know now, I'd love to rewrite it again! This project taught me how quickly tech evolves and ages. Since then, many companies have been funded to build a similar product, from what I can tell, with little success. A few of them seem to have pivoted to other ideas. It turns out musicians are not the most profitable target demographic. I still use Syfr occasionally with friends and hope to one day continue improving it!
motivation
Create a brand identity, design, and build a professional, luxury-forward website for a high-end massage therapy business, building trust and increasing bookings through an elegant, responsive one-page site.
about
By the Sea was my attempt to foray into the world of design. As front-end developers, we're often asked to make design decisions, but most of us don't have formal design training, so we do the best we can. Having designed Syfr (syfr.studio) and being a regular visitor to awwwards.com , I wasn't entirely new to design, but with this project I wanted to dive headfirst into the techniques and mindset of a real designer. The client was starting from scratch and trusted me not just to create a functioning website, but also to create a brand identity, logo, and design aesthetic that fit their business.
I immersed myself in great design in every way I could think of. I bought design books, renewed my long-dormant Adobe subscription, took an online Adobe Illustrator course, and even started learning how to draw. Once my workflow was dialed in and I had the basics down, it was easy to get inspired and get to work.
The design process varies from person to person, but most projects follow a similar set of core steps:
- Gather requirements: Ascertain the client's vision in as much detail as possible. In this case, the client wanted to evoke feelings of calmness and serenity and steer away from businesses focused on athletic injury recovery.
- Mood boards: Learn how other designers have approached similar problems and get a feel for what's possible, what you like, and what you don't. I looked at websites for similar businesses (spas, boutique wellness brands, and anything that felt calm). I also started curating stock photos, building a color palette, and exploring font pairings.
- Low-fidelity mockups: Make a rough sketch of what sections you need, what they might look like, and where they will live on the page. In this case, we wanted a simple one-pager with an about section, a services section, and a contact section that could evolve into online booking later.
- High-fidelity mockups: The hard part. Take the design out of your head and onto the screen. For a website, you usually need separate layouts for desktop, tablet, and mobile. I went through many revisions, hashing out ideas only to find they didn't work the way I expected. I've always found this process to be time-consuming, and this time was no different, even with new knowledge. Being the developer does give me an advantage here. I don't have to be quite as detailed because I know the intent won't be lost in the handoff from design to development.
Some early design iterations of the site in Figma. You can see how much work goes into designing for desktop,
tablet, and mobile!
On the tech side, I tried to keep it simple. Astro is my go-to "framework" for building static sites. It lets me use basic HTML/CSS/JS, while still breaking things into components for cleaner, more structured code. It also comes with built-in optimizations and TypeScript support. The hard part was learning GSAP. GSAP is the industry standard for building interactive animations on the web. Having the three slats in the hero swipe across the screen, tied to scroll, with a parallax effect was an idea I had early on. It wasn't easy, but I was able to pull it off with GSAP's ScrollTrigger plugin.
I learned a ton from this project, and I'm grateful I had the opportunity to do it. I'm happy to leave the designing to the designers, but I'm glad that I feel a little more comfortable now stepping in if I need to.
motivation
Create my own personal space on the web, for funsies.
about
I’ve always wanted to have a cool website, a home for my ideas. I’ve been a citizen of the internet since I was a little kid. I always feel a rush of nostalgia whenever I see one of those old sites, back in the GeoCities era, when TechTV was still around, a simpler time.
This project was supposed to be short. Having spent a ton of time on By the Sea Massage, I thought I would be able to move fast, even with having to design and develop it. That turned out to be wrong. I had ideas to move fast! I used pre-designed, prebuilt elements, but jamming external code into the codebase proved difficult more than once, so I ended up having to implement everything myself.
During the time that I spent implementing this project, AI capabilities grew massively. When I tried using Claude Code back in July it was barely ever successful. All the minor design and animation implementation details seem to overwhelm it. But sometime in January I decided to try Codex since it came with my ChatGPT subscription, and I slowly started to understand how to use it. As of the time I am writing this in March, I am barely writing any handwritten code on this project anymore, compared to when I started, when I was writing every line myself.
One of the issues I had with this project was that I didn’t have a design, since I had originally planned on using a bunch of pre-designed components. Usually, that’s a bad idea. You spend 10x longer revising design ideas in code than you would if you had just done it in Figma. But with the AI, it became possible. Suddenly, I could propose far far-fetched ideas, then have Codex actually implement them. Many of the ideas I had, I never would have implemented myself. Not just because of the time, but because I was unsure if they would even look good. Sunk cost fallacies become very real after spending that amount of time.
I’m happy to call this place home, and I hope there will be a lifetime of content to fill it with!