Design
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.
Design
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.
Design
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.
As I already mentioned in the Introduction, this is not a simple static website or WordPress page. Instead, I am using modern Svelte 5 to create everything myself.
This and all the other Design posts are focused on my thought process behind the layouts, pages and components that you can find on the website. There might be some code snippets here and there, but the main focus lies on the design choices I made.
If you were more interested in the technicals & coding, check out the Services posts (e.g. Frontend) instead! :)
Desktop & Mobile views
Using Tailwind CSS alongside Svelte 5 allows for an easy way of building components for both desktop and mobile views! Tailwind's "mobile first" system is key for this to work. It can differentiate between multiple screen sizes and show content based on the current size.
This comes in clutch for pages like the Techstack:
My desktop view implements a Nested Navigation on the
left
side of the screen with content in the middle.
The mobile view on the other hand doesn't have enough screen-estate and a different aspect-ratio. So trying to display
both at the same time doesn't work in this case and I had to come up with a different approach (more details in
the Techstack post)!
Themes & Colors
I decided to implement two different themes: Dark Mode & Light Mode. I personally use dark mode for literally everything. But I know that others prefer lighter/brighter colors.
When you visit the website for the first time, it chooses the theme based on your system preferences. If you change the theme manually, it saves the preferred theme in Local Storage for future visits.
Being more backend-focused and having studied Applied Computer Science, where themes & colors are not a priority, I clearly didn't have much experience when it came to designing frontends. I usually built everything that happens behind the scenes after clicking on a button, but I did not style nor place the button.
For my own website however, I want a simple navigation, and it should feel pleasant to look at - especially when reading longer posts like this one. Therefore, I started learning about color harmonies & more.
Helpful resources
- Coolors is a great website with a bunch of tools for generating, visualizing & exploring color palettes. It also has a contrast checker, which helped me with choosing the right primary/secondary colors based on my theme's background.
- Dennis Leoca has an awesome explanation on his YouTube channel. He usually focuses on Figma tutorials (also worth checking out), but this video was the best I could find to understand more about choosing the right Colors.
- oklch.com to quickly visualize oklch colors and convert from/to HEX and other color standards. I wanted to work with oklch, because it seems to be the one that most modern websites are choosing nowadays.
- oklch.fyi gives a good explanation about how the oklch color model works.
- colorffy.com has a Dark Theme Generator and a Light Theme Generator. It's great for visualizing the picked primary color + surface/background color of your theme on a dummy website.