You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2023-01-10-time-tracker-concept.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ sections:
32
32
text: |-
33
33
A strip at the top, colored to represent the change of the sky's color during course of a day, reminds you how long you have left until the day is over.
34
34
35
-
Each hour is assigned an icon besed on the activity you type, to give you a quick overview of your day when you look back.
35
+
Each hour is assigned an icon based on the activity you type, to give you a quick overview of your day when you look back.
36
36
37
37
A line visually separates hours past, from time yet to come, grounding you.
38
38
image-1: "/assets/time-tracker-top.jpg"
@@ -43,6 +43,6 @@ sections:
43
43
I'm more mindful about how I spend my time because I mentally check in with myself
Copy file name to clipboardExpand all lines: _posts/2024-09-25-speed.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ icon: /assets/blog/speed.webp
11
11
lang: en
12
12
---
13
13
14
-
A thought that occured to me after reading [We’re turning designers into factory workers](https://uxdesign.cc/were-turning-designers-into-factory-workers-a7471daaf6fd).
14
+
A thought that occurred to me after reading [We’re turning designers into factory workers](https://uxdesign.cc/were-turning-designers-into-factory-workers-a7471daaf6fd).
15
15
16
16
I find that the best tool for exploration is still pen on paper. When I have a fuzzy concept in my head, I turn to paper. It's not collaborative, there's no expectation of polish, and I can pivot quickly and easily. I can sketch almost as fast as I think, without being constrained by a design tool’s UI.
Copy file name to clipboardExpand all lines: _posts/2024-10-05-portfolio-project-showcase.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -49,7 +49,7 @@ I had to add a way to either drag or click to scroll. Considering that dragging
49
49
Alas, it wasn’t that simple. I tried to set it up so that the right arrow would only appear when it’s possible to scroll right, and vice versa. But that sometimes didn’t work, and the arrow never appeared. After an excruciatingly long “conversation” with ChatGPT, the issue was solved when I wrapped the entire JS script in this:
50
50
51
51
```js
52
-
window.addEventListener('load', () => { }
52
+
window.addEventListener('load', () => { });
53
53
```
54
54
55
55
It finally worked, but then I wondered how discoverable that “feature” was. Would visitors instinctively hover over the right part of the container to scroll? I asked a couple of people, and the answer was no. They couldn’t immediately tell the area was scrollable.
Copy file name to clipboardExpand all lines: _posts/2024-12-13-airboxr.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ sections:
32
32
Collaborating closely with the founder, who provided early user feedback, I designed a comprehensive web application from scratch (0→1).
33
33
34
34
Key features include:
35
-
- A interface built on top of Google Sheets for running and creating “hops”—custom recipes that pull data from multiple sources into Google Sheets, with predefined sorting and filtering rules.
35
+
- An interface built on top of Google Sheets for running and creating “hops”—custom recipes that pull data from multiple sources into Google Sheets, with predefined sorting and filtering rules.
36
36
- A main app comprising:
37
37
- A dashboard showcasing automatically generated insights.
38
38
- An integrations page for connecting data sources.
Copy file name to clipboardExpand all lines: _posts/2025-05-13-css-color-scales.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,13 +15,13 @@ lang: en
15
15
16
16
## The idea
17
17
18
-
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! ⤵︎
18
+
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! ⤵︎
19
19
20
20
21
21
22
22
Similar to what you get from sites like [uicolors.app’s Tailwind CSS Color Generator](https://uicolors.app/generate), but locally, in your CSS file.
23
23
24
-
Why? When playing around with a new design, not yet sure which colors to go with, being able to tweak a couple of values direcly in my CSS and preview my own design in different colors would be super practical.
24
+
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.
25
25
26
26
Now, you *might* be wondering:
27
27
@@ -37,7 +37,7 @@ These people have done a much better job explaining than I could at the moment:
37
37
38
38
“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.”
39
39
40
-
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) independetnly. What sets OKLCH apart is that, unlike HSL and the others, all colors with the same hue **actually look like they have the saem hue**! You know how making a vibrant blue lighter makes it look purple? Well, in OKLCH it still lookes blue!
40
+
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!
Copy file name to clipboardExpand all lines: _posts/2025-10-05-database.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ type: Design System, UI
16
16
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.
0 commit comments