Edit: 8/19/19 @ 9:45am
I have merged this branch with my master branch. All links now point to my current site, ryanfurrer.dev
Edit: 8/22/19 @7:10am
I discovered this cool thing that Netlify does and it gives all pushes to the Origin a unique URL - this means I can still display my old site!
Relevent Links
If you just wish to see the old and new sites you can hit the links below:
- Old Portfolio Site
- New Portfolio Site - at a temporary Netlify domain until I merge with the Master Branch
Redesigns Are Fun
Early in my journey, I created my initial portfolio website as my first "big" HTML & CSS project. It is very basic but not the worst looking website, in my opinion.
As I will be applying to jobs in the next 1-1.5 months, mid to late September 2019, I wanted to recreate the portfolio site that will be housing my projects.
Why Redesign?
I wanted to redesign my site for a few reasons:
- I have learned a lot in the last few months and wanted to apply it all in one project
- I did not feel that the current site was worth the effort of re-factoring the code, I'd rather start from scratch
- I have a problem with looking at the same design for an extended period of time.
- While this is kind of a joke, I often say that I have a problem because I change my phone's home screen (Android) about once per week 😂
Design Process
Upon choosing the look and feel for my site, I wanted to create the feeling of something light (in feel, not color), clean, simple, and meaningful. Everything on the page has to have purpose.
I mention the color because there will be dark mode toggle on my site #darkmodeeverything
I also knew I wanted to include a "card" idea in it. These cards would contain the actual content of the web page.
These were the only real general ideas I set out with. Instead, I first created a skeleton of the page by creating the content with HTML. For sections where I hadn't decided upon the content, I just put placeholder text.
Next I created my banner. I knew I wanted this to take up 100% of the screen upon loading the page so I set the height of the <header> to 100vh. You can see it below on both mobile and desktop.
Mobile First
You may have heard of this "mobile-first" approach to building modern websites. While I personally don't like designing mobile sites, I think they're boring, I feel it's easier to go from small -> large.
It was important for the "card" design to be on both mobile and desktop, so I created a class called .content-container and applied it to every section on my page that I wanted that "card" design on - Reusable CSS is a beautiful thing.
I also knew that I did not want to use a standard mobile navigation at the top of my page. Hamburger menus are great, but they are used everywhere, even on some desktop sites. You can see below that my mobile site navigation in the header looks the same as it does on larger screens.
Optimizations
This was my first time truly utilizing Google's Lighthouse Audits that are built right into the Dev Tools. This is an amazing and powerful tool that I highly recommend you check out if you haven't.
The audit breaks your sight down on a scale of 0 - 100 in four different sections: Performance, Accessibility, Best Practices, and SEO.
Performance is how well your site performs. How fast it is to load, how well optimized your images are, minifying your code, and much more.
Accessibility is currently a very big topic, and rightfully so. For those browsing the web who's sight is impaired, they need a way to navigate, and a lot use something called a screen reader. Lighthouse ensures your website is accessible to everyone and is one of the biggest reasons I recommend using it.
Best Practices is just that, ensuring that you are using the best coding practices possible. One of those that I see ignored most of the time is "Avoids Requesting The Notification Permission On Page Load" 😒
SEO is very important if you want your site to show up in search results. SEO stands for "Search Engine Optimization" and while I'm not expert at it, Google is, which means Lighthouse is.
I think the best thing about Lighthouse is that if you don't understand something it is telling you to do, every part of the audit has a "learn more" link!
Things still to do
These are items that I want to complete before merging this branch with the master-branch. When that is done it will replace the current site at my domain.
- Fix Photos that are too compressed
- Finalize font sizing
- Add LinkedIn link to footer
- Add favicon
- Clean up code
- Redundant/Unnecessary CSS
- Make sure HTML is semantic
- Adjust margin and padding
- Increase margin/padding to allow for more room to breathe
- Make sure it is all equal where it should be
- Add dark theme to website
- I'll be using ezToggle
- Add floating navigation when past header
Closing Thoughts
I have thoroughly enjoyed this project and cannot wait to work on my next one. If you've waited this entire time to check out the new site, here it is!
I really appreciate you taking the time to read my article and please to reach out below in the comments or on Twitter if you have any questions, comments, constructive criticism...anything!
Edit: 8/19/19 @ 9:45am
I have merged this branch with my master branch. All links now point to my current site, ryanfurrer.dev
Edit: 8/22/19 @7:10am
I discovered this cool thing that Netlify does and it gives all pushes to the Origin a unique URL - this means I can still display my old site!
Top comments (12)
I always forget that Google's Lighthouse Audits are a thing. Thanks for the reminder! I should go run that on my site now... :)
Ha! It's easy to forget since they're built right in now. I know it was a separate website, then it was built in, then the kept it built in but also had a website...now it's back to just being built into the dev tools haha.
Best of luck on that audit 😂 and thanks for reading!
Hey Ryan 👋
I see that you're using netlify to deploy your websites. I was just wondering if there is more code that you use to do deployments, or are the GitHub projects all HTML and CSS? I'd love to see how you deploy your projects!
I personally use Dokku to host my web apps, which is like having a self hosted mini-heroku.
Here's an example of one of my web apps. I hope that I can help with anything you need. Thanks for the post, keep up the great work! 🤝
Hey Seth!
I currently have one other complete project on Netlify, ezToggle. It's a simple little theme switcher I built using CSS Variables and Vanilla JS. I'll have more JS projects (as well as React) coming up in the near future!
I've not herad of Dokku but I'll look into it! I really like Netlify as it's extremely easy to get up and running, there's the continuous deployment from the connected GitHub repo, and they even offer (again very easy) form submission!
Your adopt-a-pet looks and works great, nice work!
Thanks for reading :)
Great catch, Evgeniy! Not to mention the resizing has the same transition-timing and just feels weird. I'll add that to the "to-do" list and fix it tonight.
Thanks so much for reading and pointing that out, and providing the solution :)
Great portfolio Ryan. I think you should reduce the font size of the ordinary text, just so it looks a little nicer.
Thank you very much, Allen! I agree - one of my goals for tonight is to finalize the font-sizes.
Hi Ryan, I found a typo while checking out ur site. On the 'Skills' section it's languages.
Also I loved reading this😊
Ha! The amount I've stared at this site and didn't catch that is embarrassing 😅 Thanks for the catch and for reading! I'm glad you enjoyed
This was a nice read. I've been working as a fullstack developer for a year and never had a live portfolio site. Let us know when you finish your projects for your portfolio!
Oh wow, full-stack that's great! My goal is to become a full-stack developer in the next few years.
I'll definitely keep you all up to date! Both of the other projects on the site will be completed within a month but I'll also be working on other things as well...I just started learning React this week as well so there's a lot going on 😂
Thanks so much for reading, Edgar! Let me know if you get a portfolio site up and running, I'd love to take a look at it.