In May 2021, I was contacted to build the initial UI for racOS for the grammy-award-winning music artist RAC along with @trolldart. I was instantly thrilled when I saw the designs: a gorgeous Poolsuite-esque retro look that would be a fun challenge to bring into the browser.

A few weeks later, it was done: complete with custom window management, custom scrollbars, a desktop, volume slider, and more. After my work on it, the amazing HiFi Labs took it to the finish line, adding in additional UI polish and functionality.

**Tools + frameworks used:**

* React

* Styled Components

```cv
tweet
https://twitter.com/RAC/status/1491820073916383232
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FFZdzof0ZvYaN1b4jLkqS%2Fa09251e7-f0a1-4836-91e8-b8b2b3732d1e.png?alt=media&token=56fb3a33-3fd3-4689-a16f-114a9b1da903","id":"a09251e7-f0a1-4836-91e8-b8b2b3732d1e","width":1500,"height":713,"filename":"750x0-5_p1fss429b6uh51o0eiq21k3k65j4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FFZdzof0ZvYaN1b4jLkqS%2F896a3d5a-8653-466b-8535-f2383e3a0296.png?alt=media&token=4be6b8d0-3dcd-4418-8c60-6015a4bc77b7","id":"896a3d5a-8653-466b-8535-f2383e3a0296","width":1500,"height":720,"filename":"750x0-5_p1fss429b617ca1vee1ro31jfhcag5.png","type":"image/png","caption":"","border":false}]}
```

racOS

I created Proof of Self Care as a way to share your daily moments of self love: maybe that means taking a walk, going on a hike, sitting in a park, you name it! Whatever makes you happy.

It's important, especially with everything going on right now, to make sure you do things that bring joy to yourself. Sharing your moments might remind others to do the same.

[proofofself.care](https://proofofself.care)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FM2t0VbqrWHRW0pWFBcp3%2F9df06cc9-0975-46c5-988a-02ecac5c254c.png?alt=media&token=e8bc2cea-f3b6-410b-a29f-47d9a41b64e3","id":"9df06cc9-0975-46c5-988a-02ecac5c254c","width":1170,"height":2532,"filename":"proofofself.care_(iPhone 12 Pro) (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FM2t0VbqrWHRW0pWFBcp3%2F13ba4a15-7183-4030-ba8e-394ddc336d57.png?alt=media&token=8c59ed83-7012-48d7-951c-038eb4e173e0","id":"13ba4a15-7183-4030-ba8e-394ddc336d57","width":1170,"height":2532,"filename":"localhost_3000_(iPhone 12 Pro).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FM2t0VbqrWHRW0pWFBcp3%2Fef8cf63e-e200-4bcf-8712-44b29d40f126.png?alt=media&token=47f046e3-a230-4366-8fd5-f4586b7c59e0","id":"ef8cf63e-e200-4bcf-8712-44b29d40f126","width":1170,"height":2532,"filename":"proofofself.care_(iPhone 12 Pro).png","type":"image/png","caption":"","border":false}]}
```

Proof of Self Care

After seeing my boyfriend struggle with getting his Gumroad page to reflect his brand guidelines, I started making a custom CSS theme for him. I realized it would not be much more work to make a simple platform to allow others to do the same, so I did just that.

Within two hours I had a functional MVP and after uploading to Vercel, messaged Gumroad founder Sahil to share what I had made:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FYfw2vR0nKHa5TrgG4Nbp%2F92c6805b-90f3-41ca-a200-341d48a59eef.png?alt=media&token=9bb92fd1-5824-4846-ba44-82fef09c38de","id":"92c6805b-90f3-41ca-a200-341d48a59eef","width":2102,"height":322,"filename":"Screen Shot 2022-03-02 at 3.00.23 PM.png","type":"image/png","caption":"","border":false}]}
```

Shortly after that message, I was delighted to see Gumroad already throwing some support my way via their Twitter:

```cv
tweet
https://twitter.com/gumroad/status/1413725418809663489
```

The site was also added to the official Gumroad docs and sent out in an email to the creators on the platform.

Although the latest version of Gumroad does not support custom CSS, I learned a lot and had a fun time helping other creatives.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FYfw2vR0nKHa5TrgG4Nbp%2F9ee4ffc3-4f65-4d24-8bc2-429a905f8c05.png?alt=media&token=5840086c-dfdf-45b7-8101-eda26eaf989c","id":"9ee4ffc3-4f65-4d24-8bc2-429a905f8c05","width":5112,"height":2656,"filename":"Screen Shot 2022-03-02 at 3.04.28 PM.png","type":"image/png","caption":"","border":false}]}
```

Gumlane

I worked with the talented [Daryl Ginn](https://twitter.com/darylginn) to give the challenge platform Framework a facelift, complete with a new landing page, documentation site, FAQs, and much more.

The project was built using Typescript, React, Tailwind CSS, and Next.js.

I also pulled in GSAP's wonderful ScrollTrigger library to aid in creating some smooth animations on the primary page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FZGbqgBYuNmqa1H0Y88x1%2F46f528bd-c4b3-4e07-b5ce-ed5d35362bc5.png?alt=media&token=777fcc88-091c-4dce-9dcb-f39a4b6b6ed0","id":"46f528bd-c4b3-4e07-b5ce-ed5d35362bc5","width":3722,"height":2116,"filename":"Screen Shot 2022-04-12 at 9.20.48 AM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FZGbqgBYuNmqa1H0Y88x1%2Fbab115a1-5da7-464c-adc1-5aa53b411178.png?alt=media&token=124c594b-d566-452f-abc0-6305bca2e5aa","id":"bab115a1-5da7-464c-adc1-5aa53b411178","width":3716,"height":2120,"filename":"Screen Shot 2022-04-12 at 9.21.02 AM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FZGbqgBYuNmqa1H0Y88x1%2F2985598c-9e6a-4388-9a7a-d065327f08d9.png?alt=media&token=4d70f8c9-d552-412b-8f49-bde5fcdc4686","id":"2985598c-9e6a-4388-9a7a-d065327f08d9","width":3712,"height":2108,"filename":"Screen Shot 2022-04-12 at 9.21.13 AM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FZGbqgBYuNmqa1H0Y88x1%2F54420f37-dd95-49c4-8c90-54e0b02f1c60.png?alt=media&token=ab7f582e-f3cf-4e0c-948a-4c56828c63b7","id":"54420f37-dd95-49c4-8c90-54e0b02f1c60","width":3722,"height":2116,"filename":"Screen Shot 2022-04-12 at 9.21.23 AM.png","type":"image/png","caption":"","border":false}]}
```

Landing Page

When selling presets, LUTs, or Photoshop services, showing before and after images is a great way to show the world what your product or services can do. After being surprised at the difficulty of creating beautiful image sliders, I went ahead and made a SaaS to allow anyone to create high-quality, performant image sliders with just a few clicks.

I built it in just about a week, using Auth0, Next.js, Typescript, Tailwind CSS, React, and Stripe.

Haven't launched the platform... yet.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FnXwzWZiAm8McfrvA3pKJONkLzAp2%2FoypIRLbSjPWquaxRIAxD%2F11475032-592e-48c5-ba51-c4c4e251fe62.png?alt=media&token=0d9bffd1-15ab-43c6-89d4-665dc62c6e04","id":"11475032-592e-48c5-ba51-c4c4e251fe62","width":2608,"height":1398,"filename":"Screen Shot 2022-04-12 at 9.33.16 AM.png","type":"image/png","caption":"","border":false}]}
```

Slideover