Narvin's Website

Welcome

Welcome to my website. As you can see, I'm still working on it. This color-scheme is temporary. The header is not responsive yet, but next I'm going to implement a breakpoint at 600px and make a mobile version. Why not mobile-first, you ask? I dunno, but I don't really buy that it's easier to build a site that way. So, I figured I'd build for larger screens first, then do mobile and see if it would have been easier to do it the other way around. I'll let you know what I find out. Also, I'm targeting browsers that support flex and grid. Maybe I'll add some fallbacks for older browsers once I'm done.

Update 1

I've implemented a responsive header where the menu transitions to a drop-down at or below 600px. I don't really see what the benefit to making this version first would have been. In fact, since the CSS for the mobile version is so much more complicated, I would have had to unset a lot of it for the much simpler desktop version.

Next, I have to work on the color scheme. Also, I think I want to change the hamburger menu icon to an arrow that spins from down to up when the menu drops and vice-versa when the menu raises (so in the final state, the arrow will be pointing in the direction the menu will slide if you click the arrow again). I should probably have a footer too. And of course, I have to implement the menu items, at which point the menu should also indicate the currenlty selected item. Oh, I should include that little logo I made for the favicon in the header, and make the branding part of the header link to the homepage.

Update 2

I've thrown on a Solarized dark color scheme and extended the banner to appear to stretch across the entire screen, while actually having a max-width. I want to include a custom font. I'll probably also switch to a non-fixed header.

Update 3

I fixed a bug with the menu slide animation where you could see it slide up when the page loads or the breakpoint is triggered. The new method uses clip (or clip-path if available), so it won't work in IE. I changed the h1 in the heading to an anchor so it wouldn't mess with the sectioning outline, and changed the h2's in each section to h1's. I also updated the favicon to use Solarized colors. Finally, I added classes to various elements so I could use classes in all selectors. I also added a class to the html element so I can set styles for differnt types of pages.