I recently created a simple portfolio page going over my experience and interests, and showcasing projects I’m working on. You can find it here: https://errorsuccess.dev. I was surprised and delighted by how easy the page was to put together and wanted to share how I did so if others would like to create pages of their own, but are feeling intimidated by the “modern web,” as I was at the outset of this project.

Before starting, I was worried about how I would ever get the site to look modern and presentable with some kind of UI framework. I even thought about looking at Blazor, given my experience with c#. I realize how silly this sounds now, but I want to be true to how I felt at the time to help others overcome this roadblock. Upon expressing these concerns in the HMN Discord, I was encouragingly but firmly dissuaded from this view. Members shared sites like https://motherfuckingwebsite.com/ and http://bettermotherfuckingwebsite.com/ (excuse the language, but it does really drive the point home), as well as their own creations such as https://ced.quest/. This reassured me that I could get something going in the plain HTML and CSS I was familiar with from college, so off I went.

Site Layout

As my praise for the sites above betrays, I am a fan of simple, unobtrusive websites generally. Being visually impaired, a site that lets me crank up the text size without breaking every menu onscreen is a friend indeed. I knew well-contrasted text in the center of the screen against a dark background was going to be my starting point, because that’s my preference for sites in general. Luckily, this alignment was very easy to achieve in CSS using the .container selector. I knew I wanted an About Me and Projects section, with smaller headings for each project. This was all achieved using simple HTML tags. The only styling applied to the heading tags was color, which I will talk about later.

I made a conscious decision to not use images, at least for now. My concern with images was firstly their alignment, which I remembered being troublesome from my college web design class. In addition, I worried they would add too much clutter and visual busyness to the site. This meant that all I had to do content-wise was write up the About Me section and then provide short blurbs and links for the projects. I used <hr> tags to separate the projects and help with the flow of the site. With those written up and links filled in, it was time to move on to making the site more visually appealing.

Colors

I also must confess, in addition to my love for simple websites, I love bright colors. Unlike the former preference, however, I knew that the bright and vibrant colors that I favor in the real world would not make for a visually pleasing website. I’m not very good at picking color schemes, so I took a lot of inspiration (and pokes with the PowerToys color picker tool) from better websites and tools. The background and text colors are similar to GitHub’s, and the accent colors are evocative of the default dark theme in Visual Studio. Given the site’s name, this was a nice way to not only get some pleasing colors, but evoke the “theme” that I was going for. All of the colors were applied to elements using plain selectors, with the exception of the header at the top of the site which uses spans to mimic VS’ macro definition colors.

The “macro name” purple color turned out to be a great accent for the smaller headings as well. The only element colors that gave me pause were the links. The default colors were much too dark, so something else was needed. After experimenting with different shades of blue, I ended up settling on the “macro value” green color for unvisited links, and a more muted, darker green color for visited. Visual Studio Code’s built in color picker helped a lot with experimenting with different colors. To make the bold text and smaller headings pop, I applied a slightly lighter text color to them than the rest of the site. The exact colors to use took some trial and error, but I’m very happy with how it turned out.

Font

The only piece missing at this point was a font that evoked the “IDE” look I was going for. Turns out that GitHub came to the rescue once again with their monospace font family (available at https://github.com/githubnext/monaspace ). It’s made by GitHub so it must be perfect for code, right? The Neon subfamily turned out to be just what I was looking for, and it was permissively licensed and already had “woff” files for the web. But wait, how could I apply these to my site? A quick search led me to the @font-face CSS selector. I’d just need to include the font files in the site itself (no problem since I was hosting on GitHub pages). Basic regular, bold, italic, and bold italic fonts were all that was needed. The font was a great match for the look I was going for, and I’m so pleased that it was so easy to embed in the site.

Putting It All Together

I used the instructions for GitHub pages to create the repo and upload the HTML, CSS, and font files to it. I then added my custom URL by aliasing it to the GitHub pages URL (which was very easy to do, I can’t recommend NameCheap highly enough). No VPS necessary, totally free and up running in about an hour! I cannot overstate how happy I am with not just how the site looks, but how easy it was to pull off. I hope this post will encourage anyone wanting to put together a simple site that it is really quite doable, no JavaScript or nginx needed. Thanks again to the HMN Discord for their help and encouragement with this and so many of my other projects.