Building a site to showcase yourself is hard. Even after working on websites professionally for three years I didn't have a grand vision in my head of what the site should look like. However I knew I that I was going to make it exactly the way I wanted it since I haven't had the luxury of complete creative control on a website since I started working professionally.

Preparations:

Before getting started I got my website hooked up with Cloudflare. It does two awesome things: speeds up load times and keeps your site online even if your server goes down. To kick-start the design I found a great template called Responsive, as created using Initializr. It gave me a template for the CSS that makes the site scale appropriately to different screen sizes, which is a necessity in modern web design. I've included Prefix free to simplify my CSS code and HTML5Shiv is used to ensure I can write HTML5 without worrying about compatibility in IE. I've added Holmes for development to ensure I stick to proper design standards. Lastly I am using ProtoFluid to view the site in different resolutions while maintaining my work setup on my computer. It's awesome.

The menu bar:

After seeing the fantastic menu bar built by Amanita Design I knew I wanted to use it. However they used jQuery coupled with a Cycle plugin and I wanted to see the same effect replicated using purely CSS. You can see a boiled-down version of the menu I built below (or at CodePen if the embed is broken). The trick is to use text-shadow to duplicate the text, then increase the height the same amount that you decrease the margin-top, which effective makes the button look like it is scrolling up.

Multiple resolutions:

The entire time I was building the site I tweaked the CSS to ensure it would look good on any device. I want people looking to buy my web design services to see the site on their desktop in its full beauty, but I also need to be able to pull out my iPhone in a conference to quickly show a potential employer. With the rising prevalence of browsing on tablets I made the site looked great on my iPad as well.

Final Touches:

I added the menu from danieljost.com to the blog that I assume you are reading this on to provide consistency across the site.

The future:

I haven't implemented everything I want yet. I would like to give each project its own page with some text, pictures, and maybe a video. My Resume is lacking a good couple paragraphs describing myself and I want to have a true resume. However I am very pleased with what I have so far.

🎉

Thanks for reading. If you want to chat about this article, hit me up on Twitter.