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: content/posts/personalwebsite.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,35 +12,35 @@ My personal website is my home on the web.
12
12
13
13
{{< iframe src="/index.html" alt="homepage" >}}
14
14
15
-
I made this site because I want to have an online presence, but I didn't want to use social media or a premade blogging platform (e.g. [Blogger](https://www.blogger.com) or [Tumblr](https://www.tumblr.com/)).
15
+
I made this site because I want to have an online presence, but I didn't want to use social media or a premade blogging platform (e.g. [Blogger](https://www.blogger.com), [Tumblr](https://www.tumblr.com/), or [Bearblog](https://bearblog.dev/)).
16
16
17
17
I decided that it would be more interesting to start from scratch, so I designed, built, and published a site of my own.
18
18
19
19
## Build
20
20
21
-
This site uses [Hugo](/posts/hugoswitch) to render my [Markdown](https://en.wikipedia.org/wiki/Markdown) content to my [HTML](https://en.wikipedia.org/wiki/HTML) templates. I also use Hugo for things like [asset minification](https://gohugo.io/functions/resources/minify/) and [Sass transpiling](https://gohugo.io/hugo-pipes/transpile-sass-to-css/). I love Hugo because it's feature-rich, extremely fast (it takes less than a tenth of a second for a full build), and does exactly what I want it to.
21
+
This site uses [Hugo](/posts/hugoswitch) to render my Markdown content to my HTML templates. I also use Hugo for things like asset minification and Sass transpiling. I love Hugo because it's feature-rich, extremely fast (it takes less than a tenth of a second for a full build), and does exactly what I want it to.
22
22
23
-
### History
23
+
### Build History
24
24
25
-
In the beginning, this site didn't have *any* build step, and I wrote every line of HTML, CSS, and JavaScript by hand. This approach was extremely tedious, so I only wrote a few posts like this.
25
+
At the start, this site didn't have *any* build step, and I wrote every line of HTML, CSS, and JavaScript by hand. This approach was extremely tedious, so I only wrote a few posts like this.
26
26
27
-
On June 6, 2025, I switched to [build.py](https://github.com/ethmarks/ethmarks.github.io/blob/b194fe064cbbc43dc714fbde7b27d47dfcad262f/build.py), a custom SSG I wrote in [Python](https://en.wikipedia.org/wiki/Python_(programming_language)). Build.py was an acceptable solution, but it was slow, complex, and was very limited in what it could do. I eventually solved this on July 10 by [switching to Hugo](/posts/hugoswitch).
27
+
On June 6, 2025, I switched to [build.py](https://github.com/ethmarks/ethmarks.github.io/blob/b194fe064cbbc43dc714fbde7b27d47dfcad262f/build.py), a custom SSG I wrote in Python. Build.py was an acceptable solution, but it was slow, complex, and was very limited in what it could do. I eventually solved this on July 10 by [switching to Hugo](/posts/hugoswitch).
28
28
29
29
## Hosting
30
30
31
31

32
32
33
-
To host the site on the World Wide Web, I use [GitHub Pages](https://pages.github.com/). This is why the site url includes ".github.io". Every time I push new code, GitHub automatically redeploys this site. The main reason I'm using GitHub Pages is convenient: I'm already using GitHub for source control, so it was easy to just add a [GitHub Action to deploy the site](https://github.com/ethmarks/ethmarks.github.io/blob/main/.github/workflows/hugo.yaml). My second choice would probably have been [Neocities](https://neocities.org/) for hosting.
33
+
To host the site on the World Wide Web, I use GitHub Pages. This is why the site url includes ".github.io". Every time I push new code, GitHub automatically redeploys this site. The main reason I'm using GitHub Pages is convenient: I'm already using GitHub for source control, so it was easy to just add a [GitHub Action to deploy the site](https://github.com/ethmarks/ethmarks.github.io/blob/main/.github/workflows/hugo.yaml). My second choice would probably have been [Neocities](https://neocities.org/) for hosting.
34
34
35
35
## Styling
36
36
37
-
My site has a very specific aesthetic that I find quite pleasing. The aesthetic is the culmination of my [spearmint colour palette](#colour-palette), modern [typography](#typography), and careful use of [effects](#special-effects), all brought together with thousands of lines of [Sass](#sass) code.
37
+
My site has a very specific aesthetic that I find quite pleasing. The aesthetic is the culmination of my spearmint colour palette, modern typography, and careful use of effects, all brought together with thousands of lines of Sass code.
38
38
39
39
### Sass
40
40
41
-
This site is styled with [Sass](https://en.wikipedia.org/wiki/Sass_(style_sheet_language)), a CSS preprocessor that adds useful features to CSS, like [mixins](https://sass-lang.com/documentation/at-rules/mixin/), [variables](https://sass-lang.com/documentation/variables/), and [build-time imports](https://sass-lang.com/documentation/at-rules/import/).
41
+
This site is styled with Sass, a CSS preprocessor that adds useful features to CSS, like mixins, variables, and build-time imports.
42
42
43
-
This site's Sass is transpiled using [LibSass](https://sass-lang.com/libsass/). LibSass is an old Sass transpiler that's been deprecated since 2020. The only reason I use LibSass is that I was having trouble setting Hugo up with [Dart Sass](https://sass-lang.com/dart-sass/) (the modern and recommended transpiler), because it kept causing timeout errors that were inconsistent and very difficult to debug. I eventually just gave up and switched to LibSass. This means that I can't use any of the new Dart Sass features like [@use](https://sass-lang.com/documentation/at-rules/use/), so I use [@import](https://sass-lang.com/documentation/at-rules/import/) instead.
43
+
This site's Sass is transpiled using LibSass. LibSass is an old Sass transpiler that's been deprecated since 2020. The only reason I use LibSass is that I was having trouble setting Hugo up with Dart Sass (the modern and recommended transpiler), because it kept causing timeout errors that were inconsistent and very difficult to debug. I eventually just gave up and switched to LibSass. This means that I can't use any of the new Dart Sass features like `@use`, so I use `@import` instead.
44
44
45
45
Every page layout has its own Sass file that imports the modules that page needs. For example, here's the annotated Sass file for [my posts page](/posts/).
46
46
@@ -59,7 +59,7 @@ Every page layout has its own Sass file that imports the modules that page needs
59
59
@import'components/random-post-btn';
60
60
```
61
61
62
-
These Sass files are then transpiled into normal CSS and imported into the page using some custom [partials](https://gohugo.io/functions/partials/include/) I wrote that take a file name as an input and automatically minifies and transpiles the asset, and then generates the HTML import for that file. For example, here's the code at the top of [the posts index page](/posts).
62
+
These Sass files are then transpiled into normal CSS and imported into the page using some custom partials I wrote that take a file name as an input and automatically minifies and transpiles the asset, and then generates the HTML import for that file. For example, here's the code at the top of [the posts index page](/posts).
63
63
64
64
```go-html-template
65
65
{{ partial "css.html" "posts.scss" }}
@@ -87,11 +87,11 @@ This site uses a dark theme with a spearmint teal accent colour.
87
87
88
88
### Typography
89
89
90
-
I self-host this site's fonts using [variable](https://fonts.google.com/knowledge/using_variable_fonts_on_the_web)[woff2](https://github.com/google/woff2) files. Variable fonts significantly cut down on the file size, allowing the site to load faster. I sourced the fonts from the [Variable Font Helper](https://variable-font-helper.web.app/) app, which sources them from [Google Fonts](https://fonts.google.com/).
90
+
I self-host this site's fonts using [variable](https://fonts.google.com/knowledge/using_variable_fonts_on_the_web) woff2 files. Variable fonts significantly cut down on the file size, allowing the site to load faster. I sourced the fonts from the [Variable Font Helper](https://variable-font-helper.web.app/) app, which sources them from Google Fonts.
91
91
92
-
-**Primary Font**: I use [Nunito](https://fonts.google.com/specimen/Nunito) as the primary font, for its sleek [neo-grotesque](https://fonts.google.com/knowledge/glossary/grotesque_neo_grotesque) design and its support for both [Latin](https://en.wikipedia.org/wiki/Latin_script) and [Cyrillic](https://en.wikipedia.org/wiki/Cyrillic_script) glyphs.
92
+
-**Primary Font**: I use [Nunito](https://fonts.google.com/specimen/Nunito) as the primary font, for its sleek neo-grotesque design and its support for both Latin and Cyrillic glyphs.
93
93
-**Secondary Font**: I use [Sen](https://fonts.google.com/specimen/Sen) as the font for headings. There are many subtle differences between Sen and Nunito, but the most noticeable is the lack of rounded strokes. Sen looks sharper and more angular than Nunito.
94
-
-**Monospace Font**: I use [Fira Code](https://fonts.google.com/specimen/Fira+Code) for all [monospace](https://fonts.google.com/knowledge/glossary/monospaced) text, like code blocks, ASCII art, or inline code spans.
94
+
-**Monospace Font**: I use [Fira Code](https://fonts.google.com/specimen/Fira+Code) for all monospace text, like code blocks, ASCII art, or inline code spans.
95
95
-**Display Font**: I use [Kenia](https://fonts.google.com/specimen/Kenia) for the "404" numerals on [this site's 404 page](/404).
96
96
97
97
### Special Effects
@@ -100,9 +100,9 @@ I self-host this site's fonts using [variable](https://fonts.google.com/knowledg
100
100
101
101
**Mint Gradient**: All `<h1>` elements have a mint gradient applied to them. This gradient starts off at the standard **<spanclass="mint">spearmint teal</span>** accent color, and then fades into the standard white text color. This also applies to the title on the left side of my site header. This adds polish and branding.
102
102
103
-
**Header Blur**: I love [glassmorphic](https://css.glass/) blur effects, so I added a 20 pixel gaussian blur effect to my site header. For performance reasons, the header is the *only* element on the site that has a significant gaussian blur. When I was first designing this site, I put blurs everywhere, including on the article background. Turns out, this makes the page really, really, really slow. Blurring the header adds polish, and *not* blurring anything else adds frames per second.
103
+
**Header Blur**: [I love glassmorphic blur effects](/posts/liquidglass), so I added a 20 pixel gaussian blur effect to my site header. For performance reasons, the header is the *only* element on the site that has a significant gaussian blur. When I was first designing this site, I put blurs everywhere, including on the article background. Turns out, this makes the page really, really, really slow. Blurring the header adds polish, and *not* blurring anything else adds frames per second.
104
104
105
-
**Header Nav Indicator**: The nav links in my site header glow when the current page is on their domain. Currently, the "Posts" nav link is glowing because you're on a post ([/posts/personalwebsite](/posts/personalwebsite)). On [my About page](/about), the "About" nav link glows. On [my Home page](/), the "Home" nav link glows. On my Projects page(/tags/projects), the "Projects" nav link glows. This helps with readability and polish.
105
+
**Header Nav Indicator**: The nav links in my site header glow when the current page is on their domain. Currently, the "Posts" nav link is glowing because you're on a post right now. On [my About page](/about), the "About" nav link glows. On [my Home page](/), the "Home" nav link glows. On my [Projects page](/tags/projects), the "Projects" nav link glows. This helps with readability and polish.
106
106
107
107
**Header Birthday Mode**: On my birthday (September 13), my site header glows pinkish-orange, the title on the left side strobes between pastel red, cyan, blue, sage, orange, and pink, and the cake and party emojis (🎂🎉) are appended to the title. This helps with "yay its my birthday".
108
108
@@ -117,9 +117,9 @@ As of August 31, 2025, the site earns a perfect 100 on [Lighthouse](https://deve
My site's performance is largely due to it being lightweight and carefully optimized.
120
-
-**Static Rendering**: All of my site's content is present in the HTML. Unlike some sites that use [JSX](https://react.dev/learn/writing-markup-with-jsx) and [client-side rendering](https://developer.mozilla.org/en-US/docs/Glossary/CSR) to dynamically [hydrate](https://en.wikipedia.org/wiki/Hydration_(web_development)) their pages using JavaScript, my site render all content at build time. This uses much less processing power on your device and makes the page load much faster.
120
+
-**Static Rendering**: All of my site's content is present in the HTML. Unlike some sites that use JSX and client-side rendering to dynamically hydrate their pages using JavaScript, my site render all content at build time. This uses much less processing power on your device and makes the page load much faster.
121
121
-**Optimized CSS and JS**: Each page on my site only loads the resources that it needs, and the resources that it does import are minified. I used custom partials to automate this process slightly, as discussed in the [Sass section](#sass). This per-page approach minimizes the data that needs to be downloaded and allows the page to load faster.
122
-
-**Optimized Images and Videos**: The images, videos, and animations on my website use the [WebP](https://en.wikipedia.org/wiki/WebP) and [WebM](https://en.wikipedia.org/wiki/WebM) formats, which allows them to load faster and use less data.
122
+
-**Optimized Images and Videos**: The images, videos, and animations on my website use the WebP and WebM formats, which allows them to load faster and use less data.
123
123
124
124
## Privacy
125
125
@@ -131,11 +131,11 @@ This site is designed to be accessible to as many users as possible. I've done m
131
131
132
132
## Authoring
133
133
134
-
Each post (including the words you're reading right now) is written in Markdown. I occasionally use custom [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/) for things like iframes, but I mostly stick with plain Markdown syntax.
134
+
Each post (including the words you're reading right now) is written in Markdown. I occasionally use custom Hugo shortcodes (inline templates) for things like iframes, but I mostly stick with plain Markdown syntax.
135
135
136
-
I use the [Zed editor](~/switchingtozed) for all of my coding and most of my post writing, but I write the longer and more heavily-researched posts in[Obsidian](https://obsidian.md/).
136
+
I use the [Zed editor](~/switchingtozed) for all of my coding and most of my writing, but I write the longer and more heavily-researched posts using[Obsidian](https://obsidian.md/).
137
137
138
-
I use [Hugo's live server](https://gohugo.io/commands/hugo_server/) to instantly (I've never seen it take longer than 100 milliseconds for a refresh) render the site locally so that I can see the changes I make in real time.
138
+
I use Hugo's [live development server](https://gohugo.io/commands/hugo_server/) to instantly (I've never seen it take longer than 100 milliseconds for a rebuild) render the site locally so that I can see the changes I make in real time.
0 commit comments