Jest is the first marketplace for messaging games—a real alternative to the app store model.
As the team’s Product Designer, I help shape how the platform looks, feels, and behaves. My work spans early concepting, product flows, UI design, and product management.
The issue arises because, when designing for the web, we need content to have a maximum width. Otherwise, if someone has a wide monitor, the layout looks broken or they have to move their head all the way from left to right to read it.
When we give containers a maximum width, anything that doesn’t fit inside them gets cut off and becomes invisible. In a carousel, that means as you scroll, the content disappears abruptly before the end of the window. (Unless the window is narrower than the max width you set. In other words, this isn’t a problem on mobile.)
Everything on a website is a box. The carousel is also a box. When you put something in the box, it appears on the leftmost side. If you want it to show up more to the right, you can add padding on the left. So hypothetically, we could add padding to align the first book with the left edge of the other sections! Alas… the padding would need to be different depending on the window’s width!
So for a long time, I thought this was an unavoidable problem. But then I saw a carousel that worked right on Apple’s website! So… there was a way!
Thankfully, because this is the web, you can right-click → Inspect Source on any website to see exactly how it’s built. I then adapted it for my website, and ta-da!
The code ↴
$container: 1240px; /* Yes, I use Sass. Yes, I know we have CSS variables now, but I like it and the pre-processor is built into Jekyll, which builds my site anyway! */
$container-padding: 32px;
.book-carousel {
padding: 0 calc(50% - min($container, 100%) / 2 + $container-padding); /* [Half the screen] - [half the container] + [container padding * 2] */
overflow-x: auto; /* makes it horizontally scrollable */
scroll-snap-type: x proximity; /* so you can’t stop in between books: it “snaps” to the closest element in the X axis */
}
The magic part is:
calc(50% - min($container, 100%) / 2 + $container-padding);
We’re basically saying:
And the coolest part is that this is all just CSS! Which means, if scripts don’t load (bad connection, on the train, unknown error, browser that blocks scripts), the carousel still works the same (progressive enhancement 😎).
]]>The design of the platform was mostly complete, and I turned the designs into reusable components and responsive styles. I also created some tricky internal pages and flows using the newly established design patterns.
Done is a modern productivity application designed to help teams manage tasks and workflows efficiently.
As the lead developer, I built the entire application stack from the ground up, utilizing Laravel for the backend, Vue.js for an intuitive frontend interface, and a suite of enterprise-grade technologies for reliability and scalability.
The application is production-ready and actively used by multiple organizations for improved team productivity.
ADZ is a comprehensive platform built with modern web technologies to deliver scalable and efficient solutions.
As a full-stack developer, I architected and implemented the entire platform using Laravel, PHP, and Vue.js, ensuring seamless integration with advanced technologies like ELK for logging, Redis for caching, and InfluxDB for time-series data management.
The platform is currently live and serves thousands of users, providing a reliable and performant experience across all devices.
I was initially brought on for UI Design, but over time my role evolved into what we now call Product Design, spanning everything from visual design to component systems and behavior analytics.
I can’t share details due to the NDA, but here’s the gist of my 2.5 years at Shopflix:
I spent most of my time patching up existing designs as they were being implemented, and rushing to design new features using problematic components in the name of speed and consistency. Alongside that I was creating ad-hoc marketing assets while building a component library in Figma and laying the foundations of a design system on the side.
Due to the replatforming taking place at the same time, rethinking flows was off the table. I hated adapting work I believed was poorly thought-out, but I developed something unique:
I turned complete pages into components (with variables) that I could drop into any flow, ensuring all user journeys would always display the latest version. This solved a major issue: developers would often start working on a feature many months after I’d designed it, and by then there were updates to pages within that flow. Before this approach, they kept accidentally rolling back each other’s work because each person was looking at a different version!
Here’s the component system in action:
With a major deadline gone, I finally had the freedom to explore and pitch improvements. But most of my usability-focused proposals initially got shelved.
That phase taught me as much about organizational dynamics as it did about design at scale. I gradually built stakeholder buy-in by consistently shipping good work, sharing honest opinions, and pushing back when needed. I also got involved with anything I could help improve, even outside my defined role.
My persistence paid off because on Year 3 an organizational shift allowed me to work on the kind of projects I wanted to from the beginning: remaking core flows from scratch.
As of writing this, the bulk of my design work has not been implemented yet (so I can’t show it here 😮💨), but it includes major updates for the:
We’d long been aware of the shortcomings, but conflicting priorities did not previously allow the time to address them. I can’t describe the satisfaction I felt seeing the enormous usability improvements and it goes without saying that I can’t wait to see them live!
I left Shopflix knowing it’s on a much better trajectory than when I joined, and I’m confident that the team will continue doing great work to bring the platform to the state we know it can reach!
]]>
I wanted to create a single variable in my CSS, e.g. --brand: #ff6800;, and have an entire color scale (with variables like --brand-10: #ffe4d3; --brand-20: #ffd2b2; and so on) automatically “generated” for me. Like this! ⤵︎
Similar to what you get from sites like uicolors.app’s Tailwind CSS Color Generator, but locally, in your CSS file.
Why? When playing around with a new design, not yet sure which colors to go with, being able to tweak a couple of values directly in my CSS and preview my own design in different colors would be super practical.
Now, you might be wondering:
These people have done a much better job explaining than I could at the moment:
OK, OKLCH: a color picker made to help think perceptively, by Evil Martians
“OKLCH is a new way of encoding colors (like HEX, RGBA, or HSL). It always has predictable lightness after color transformations (compared to HSL), it’s capable of encoding a wider range of colors, it offers native browser support, and unlike LCH and Lab, it has no hue shift when chroma is changed.”
It’s Time to Learn oklch Color, by Keith J. Grant
“In HSL, 100% saturation is simply as saturated as that particular color can be in the sRGB gamut. In OKLCH, the values aren’t based on technical limits or a mathematical definition, but rather on perceived equality. The amount of lightness indicates exactly how bright the color is, and the amount of chroma indicates exactly how vivid it is. The human eye perceives some colors like green or yellow to be brighter than others, like blue or purple, and OKLCH takes these details into account.”
The gist of it is that, similar to HSL, you can keep the Hue constant while adjusting the Lightness and Saturation (Chroma, in this case) independently. What sets OKLCH apart is that, unlike HSL and the others, all colors with the same hue actually look like they have the same hue! You know how making a vibrant blue lighter makes it look purple? Well, in OKLCH it still looks blue!
You can also use oklch(from…) to convert HEX, RGB, etc. colors into OKLCH and then mess with their Lightness, Chroma, and Hue.
Firstly, I used the numbering format from the Tailwind color scales for familiarity.
Then I tried using oklch(from…) and adjusting the Alpha value to create a scale. But then colors on the scale could not be darker than the original. And if they ever overlap (think, text color with 80% opacity + background at 30%) then the color on top will be a mix of the two!
So I switched to using calc() instead of L and C values within oklch() and keeping the hue value the same.
I first created a color scale using an online generator, then converted to OKLCH and used a spreadsheet to calculate the difference between the Lightness and Chroma values of each color. I rounded those up and created variables in my CSS to represent the Lightness increment and the Chroma increment separately.
:root {
/* Base color */
--brand: #0d1bbd;
/* Lightness and Chroma increments */
--l-increment: 0.075; /* UP: Lighter*/
--c-increment: 0.028; /* UP: LESS saturated*/
/* Some of the resulting color tokens */
--bg-brand-50: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 8)) calc(c - calc(var(--c-increment) * 8)) h / 1);
/* … */
--bg-brand-800: oklch(from var(--brand) l c h / 1); /* This is the base color */
/* … */
--bg-brand-950: oklch(from var(--brand) calc(l - calc(var(--l-increment) * 2)) calc(c - calc(var(--c-increment) * 2)) h / 1);
}
That seemed to work exactly how I imagined!
For that specific color…
Obvious in hindsight: that method only works if the base colors all have similar Lightness and Chroma. There’s no way to create conditional statements (“if this, then that”) in CSS, so a base color would always have to occupy the same step on the color scale.
That can be sorted by spending a bit of extra time choosing base colors. Problem solved? Not so fast! Because of the way OKLCH works, some HEX/RGB/HSL colors do not have an OKLCH equivalent!
oklch(from…) works by converting, say, a HEX value into OKLCH. But that means if you’re using HEX for your base variables, some colors are bound to look less saturated than the rest even if you max out their saturation in the HEX color space.
Switch to OKLCH for the base color variables. Then you can make sure the lightness and chroma of each color are the same, or close enough. Now, you do miss out on a couple of things when you do that…
But hey—it works! :D And changing a single number to get an entirely new color scale is kinda fun, like a design nerd’s slot machine. I figured this technique might be useful (and/or fun) to someone, so why not share.
Here’s the CSS you can use:
:root {
/* Base colors */
/* Change the HUE (last number) for different colors. */
/* You might wanna change the Lightness and Chroma slightly too in some cases. */
--brand: oklch(0.40 0.30 265.71);
/* add more variables here */
/* Adjuts scales */
--l-increment: 0.075; /* UP: Lighter*/
--c-increment: 0.028; /* UP: LESS saturated*/
/* Color tokens */
/* Use them in classes like this: var(----bg-brand-600) */
--bg-brand-50: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 8)) calc(c - calc(var(--c-increment) * 8)) h / 1);
--bg-brand-100: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 7)) calc(c - calc(var(--c-increment) * 7)) h / 1);
--bg-brand-200: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 6)) calc(c - calc(var(--c-increment) * 6)) h / 1);
--bg-brand-300: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 5)) calc(c - calc(var(--c-increment) * 5)) h / 1);
--bg-brand-400: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 4)) calc(c - calc(var(--c-increment) * 4)) h / 1);
--bg-brand-500: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 3)) calc(c - calc(var(--c-increment) * 3)) h / 1);
--bg-brand-600: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 2)) calc(c - calc(var(--c-increment) * 2)) h / 1);
--bg-brand-700: oklch(from var(--brand) calc(l + calc(var(--l-increment) * 1)) calc(c - calc(var(--c-increment) * 1)) h / 1);
--bg-brand-800: oklch(from var(--brand) l c h / 1);
--bg-brand-900: oklch(from var(--brand) calc(l - calc(var(--l-increment) * 1)) calc(c - calc(var(--c-increment) * 1)) h / 1);
--bg-brand-950: oklch(from var(--brand) calc(l - calc(var(--l-increment) * 2)) calc(c - calc(var(--c-increment) * 2)) h / 1);
}
I originally planned to name this post “What I learned making an OKLCH color scale generator in CSS” and it was gonna have a section titled “Why it failed”. While writing that I realized… I had not failed. I just needed to tweak some Chroma values (and mention some caveats)! ;)
]]>Καμία φόρμα επικοινωνίας. Αντί αυτού, γραπτές οδηγίες για το τι να γράψεις στο email που θα στείλεις για να ζητήσεις μεταφορά.
Χωρίς analytics, χωρίς φόρμα, χωρίς τρόπο να μετρήσει αν το site δουλεύει.
Κάνε μια αναζήτηση για “free bootstrap marketing templates” και θα σου φανούν πολύ γνώριμα.
Δες παραδείγματα από το portfolio μου
Πριν το web development δούλευα σε supply chain και operations. Έχω δει πρώτο χέρι πώς κακοσχεδιασμένα συστήματα σπαταλούν χρόνο και χρήμα. Το ίδιο ισχύει και για website — αν δεν δουλεύει, κοστίζει.
Δεν έχω στόχο να φτιάχνω «ωραία» site που δεν κάνουν τίποτα, αλλά όμορφα και χρηστικά εργαλεία που δουλεύουν.
Αυτό περιλαμβάνει:
Θα μπορούσα να φτιάχνω copy-paste sites με template, να τελειώνω γρήγορα και να πληρώνομαι το ίδιο. Αλλά δεν μπορώ να το κάνω με ήσυχη συνείδηση.
Αν θες ένα site απλά για να υπάρχει, δεν είμαι η σωστή επιλογή. Αν θες ένα site που να δουλεύει για σένα, θα χαρώ να μιλήσουμε.