The Ryan Furrer Blog

Front-End Web Development Blogs For All

Subscribe to stay in the know for when I publish new articles, find interesting things on the web, and more!

Like what you've read?

![](/images/portfolio-cover-image-v3.svg)

## The Why

I had previously built a decent portfolio, but with the "re-branding," which I recently, made, along with my re-focus on learning code, I thought it wise to create a new home on the Internet. Something I was proud of to house my work while learning more and prepare to apply for my first web development job.

I already want to make changes to my site, but I \* have to \* concentrate elsewhere if I want to actually get a job in this area. Further refinements can be made in the future, but I can't let myself be distracted. In the end, it is useless to have a *nice* portfolio, but nothing to fill it with.

I say this because I don't think I'll ever feel 100% complete with my portfolio, but I can get it to the point where I'm content to share it with the world - so I've done exactly that.

## Portfolio Versions

### v1 - Published February 2019

This was built about a month after I started learning HTML and CSS. It's nothing special, but it was the first web page I had built in full. None of the projects were ever completed, but this was the first thing I was excited to code. (link no longer available)

### [v2](https://ryan-furrer-v2.netlify.app/) - Published in August 2019

v2 was built about 6 months after the "completion" of v1. I learned a lot in this time, which, I believe, can be observed in the design language. Looking at it now, I see many things that need refinement, but I remember being pleased with the way this one came together at the time.

### [v3](https://the-ryan-furrer-v3.netlify.app/) - Published July 2021

v3 was recently completed and announced to the world on 7/2/21, which is *quite* some time since August 2019. A lot has happened over the years, and I will not make excuses for my insufficient progress... I was simply not disciplined enough to do the work that needs to be done to change careers as I want.

## The Tech Stack

*   HTML
    As with everything I build from scratch, I like to focus on using semantic HTML, as it helps greatly with accessibility and organization. If you're not using semantic HTML in your projects, you're not helping anyone.

*   CSS (SCSS)
    I *love* using [SCSS](https://sass-lang.com/) and it's definitely my preferred method for writing CSS these days. If you're not familiar with SCSS, it "...is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax."

That said, if you are new to front-end work, please do your due diligence and learn regular CSS before anything else in the CSS world. It is powerful and is a prerequisite, in my opinion, for any CSS frameworks, stylesheet languages like SASS, etc.

*   JavaScript (future endeavors)
    While I am still learning JavaScript, I have a few ideas on how to implement it in my site. A theme-switcher is #1, but also some fun easter eggs!

*   Deployed on Netlify
    I *love* [Netlify](https://www.netlify.com/) for so many reasons, but the #1 reason is how simple and quick it is to get a new project deployed onto the web. There are other options, like [Vercel](https://vercel.com/), but for now I am loyal to Netlify.

## The Design

When designing my portfolio, I knew that I wanted something clean, but not necessarily minimal. I love minimalist designs, but I didn't want that to limit my portfolio. I also knew I wanted to refine the card design I used on [Coding Catchup v2](https://coding-catchup-v2.netlify.app/).

![](/images/blog-026\_02.gif)

So first I thought about what colors I would like to use...

### The Colors

My original goal was to identify a brand color for me and one for my tech blog Coding Catchup. I chose purple for myself as an evolution of the indigo color that I featured in the previous version of my portfolio.

v2 main color: `#646FCB`
v3 main color: `#AD96E9`

As for Coding Catchup, I've had my eyes on this sort of green-blue color for a while and decided to run with it.

v1 main color: `#3FC8A7`
v3 main color: `#96E9D8`

![](/images/blog-026\_03.png)

Little did I realize these two colors actually work well together, and the Coding Catchup green is now featured on my portfolio site as an accent color. I think of this as a type of harmonious binding in my two main projects - I like it!

### The Content

Content, layout and structure are pretty straightforward. As a single-page app, I simply have to link to different IDs on the page, like Projects, About and Contact Me.

I chose to place my projects first, so it's the first thing (technically second thing) that someone notices when visiting my site. In the Projects section, there are cards containing information about each of my projects. At the time of writing, I am featuring 3 Projects: [Coding Catchup](http://codingcatchup.com/), the [Portfolio](http://theryanfurrer.dev/) itself, and my [Wedding](http://furrever.wedding/) website.

Next up is the “About” section where visitors can learn more about me - pretty self-explanatory! I’m not good at writing about myself, so this will undergo some revisions for sure.

Lastly, is the “Contact Me” section. This is simply a contact form connected via Netlify Forms, which again makes it *so simple*. Netlify even has integrated spam protection, which, while I am sure it won't stop every bit, is good enough for me at the moment.

## The Assembly

### Content First

As I worked through this, I had a basic design in mind, so it was easy for me to insert all HTML and style later. Having said that, it hurts me to continue adding content when my navigation bar still looks like a standard list. But I trusted the process, and frankly, it was pretty fast... not that the site is huge lol.

After putting all the content together, it was time to make it look better.

### Styling Second

Again, coming into this with an idea of a design and color scheme helped immensely. Hell, I had already picked out my colors and fonts, so I got to work creating my SCSS variables, linking to Google Fonts for [Poppins](https://fonts.google.com/specimen/Poppins?query=popp) and [Open Sans](https://fonts.google.com/specimen/Open+Sans?query=open+sa), and prettying up my new portfolio. Oh, and I of course created a CSS Reset using [Andy Bell's](https://piccalil.li/) [Modern CSS Reset.](https://github.com/andy-piccalilli/modern-css-reset)

When styling the site, as with most other projects, I started with the mobile site and then built larger from there. For me, I prefer starting small and building out for a few reasons.

1.  Mobile traffic is *much* higher than desktop traffic, so I had to make sure everything looked good there first.

2.  Mobile layouts are typically clear and straight forward. It's just a column of content, whereas larger screens, including tablets, laptops and desktops, allow you to have a little more fun with your designs and layouts.

From there, I made sure everything was responsive and looked good across as many devices and browsers worth checking. Currently, the site is simple, with only one media query for screen size breakpoints.

### Finishing Touches

The last thing I've done was add what I like to think of as finishing touches - things that merely make for a nicer experience. These are things like the :hover styles on links, navigation items, my logo, etc., but also the outline on my projects and the contact form. Just some things to add a sense of polish to the site.

Although I am not 100% satisfied with it, I have to build new projects to be featured on my site! In my opinion, the portfolio should grow with the developer, and so far I think v3 shows I've grown... even a little.

## Extras

After the main site was built, there were just a few things left to do, these included:

*   Build a success page users see after submitting a message via the form.

    This was done easily with the Netlify docs on their [form setup](https://docs.netlify.com/forms/setup/). It isn't anything fancy, but at least it matches the rest of the site's styles.

*   Create a "Links" page

    Again, a very simple page that I wanted to create to easily have all my links in one place. There are services out there that allow you to do this without code, like [bio.link](http://bio.link/), but I wanted it to match the look and feel of the rest of the website, and it's easy enough to do it myself.

*   Forward subdomains to respective pages

    Again, it's simple, but something that makes it easier to remember different links and seems a little more professional - in my opinion.

    I have 3 domains currently forwarded:

    *   [blog.theryanfurrer.dev](http://blog.theryanfurrer.dev/) points to [codingcatchup.com](http://codingcatchup.com/)

    *   [links.theryanfurrer.dev](http://links.theryanfurrer.dev/) points to [theryanfurrer.dev/pages/links.html](http://theryanfurrer.dev/pages/links.html)

    *   [timeline.theryanfurrer.dev](http://timeline.theryanfurrer.dev/) points to my [Polywork](https://www.polywork.com/theryanfurrer) profile

*UPDATE 1/30/21*
[*blog.theryanfurrer.dev*](http://blog.theryanfurrer.dev/)\* no longer works as my blog is now hosted at [*theryanfurrer.blog*](https://www.theryanfurrer.blog/), thus no need for redundancy.\*

## Wrapping up

That's all I've got for now. I hope you enjoyed reading about my process, and I hope you choose to return for more! Feel free to contact me via [my website](https://theryanfurrer.dev/contact.html) or on [Twitter](https://twitter.com/TheRyanFurrer) if you have any questions or want to say hello.

There is always more work to be done, but only so many hours in the day! My next project (at the moment) is an e-commerce site built with React. This is new for me, but I am enjoying it so far. Subscribe for more weekly updates, project summaries, and tech articles, and/or follow me on Twitter!


Designing and Developing My Portfolio - v3

**![](/images/blog-018.jpeg)

Let me start this off with the fact that I *love* [DEV](https://dev.to/). It has created a fantastic community of developers and has become a home for many people's original content. It enabled me to begin writing and seeing that others (my followers) cared to see it. It's also what drove me to create my own blog.

I view DEV, and others, as a sort of extension of the very active developer community on Twitter. The difference being, Twitter is not friendly to long-form thoughts. Of course, some people choose to create threads and threads of Tweets to create one conducive train of thoughts, however, I imagine most of these are better suited for a blog post.

## Why Should You Build Your Own Blog?

Owning your space and content on this giant thing we call The Internet is extremely important in my opinion. I believe every professional should have a personal website these days, and if you write regularly I believe you should have your own blog as well. It doesn't have to be a different website from your portfolio site if you have one, however, I'm choosing to do so as a sort of future-proofing measure - should Coding Catchup become more than what it currently is.

So owning your content and space is one thing, however, I feel that writing somewhere that is entirely your own may make you consider *what* you're writing more. [Andy Bell](https://twitter.com/hankchizljaw) has his own article on self-publishing that I highly encourage you to read, but here's an excerpt that hits it home for me:

> "I've found that actually owning my content makes me consider the impact of my writing more. It's easy for it to feel disposable on Medium or Twitter, because they affectively treat it that way." - Andy Bell's [The Power of Self Publishings](https://hankchizljaw.com/wrote/the-power-of-self-publishing/)

Lastly, with modern tools (👇keep reading for my recommendations) that are available to us these days, it's easier than ever.

## How Should I Build My Own Blog?

I recently decided between 3 options in creating Coding Catchup. Those 3 were:

*   [Hylia Starter Kit](https://hylia.website/)

*   [Stackbit](https://www.stackbit.com/)

*   [Notion Blog](https://notion-blog.now.sh/)

I'll break down each of them below, and then you can find out which I went with and why.

### Hylia Starter Kit

![](/images/blog-018\_01.png)

Hylia was created by the aforementioned Andy Bell and it is a dead-simple way to create your own blog. It is self-described as "...a lightweight Eleventy starter kit to help you to create your own blog or personal website."

That is the perfect way to put it. It uses [Eleventy](https://www.11ty.dev/), a static site generator to create the site and [Netlify CMS](https://www.netlifycms.org/) to deliver the content to it. I absolutely adore [Netlify](https://www.netlify.com/), and their CMS is just as great as their deployment services.

Hylia comes with a built-in Light & Dark themes which listens to the user's preference by default. Once you get your site set up with just a few clicks and minutes, you can log into the CMS by visiting [www.yourbloghere.com/admin](http://www.yourbloghere.com/admin). There you can do anything you want with the content of the site, as well as change some of the styles including colors, nav links, and more. It also focuses on accessibility which is something we all could be doing more of.

Andy writes great, clean code and Hylia is as snappy as can be. I enjoyed my time messing around with Hylia and couldn't recommend it enough. [Build your blog with Hylia](https://hylia.website/).

### Stackbit

![](/images/blog-018\_02.png)

[Stackbit](https://www.stackbit.com/) has a bit more to offer than Hylia. While Hylia is built with getting you up and running ASAP using Eleventy and Netlify CMS, Stackbit is all about giving you options.

Those options include which Static Site Generator you'd like to use, which CMS you'd like to use, as well as several themes that are built-in and expanding.

Now is a good time for me to mention that Stackbit is currently in beta, however, that shouldn't stop you from checking it out. You can also add it to an existing project on Netlify if you'd like, but it's so easy to start something new that either way you'd be up and running in minutes.

You can choose these site generators:

*   Jekyll

*   Hugo

*   Gatsby

With these on the way:

*   VuePress

*   Hexo

You can choose these CMS:

*   Forestry

*   Netlify CMS

*   Contentful

*   DatoCMS

*   Sanity

On the way:

*   Prismic

Lastly, it currently uses GitHub for repositories and Netlify to build + deploy your site with support for the following coming soon:

*   GitLab

*   Bitbucket

*   GitHub Pages

Stackbit is quite a different offering from Hylia, but I highly encourage you to check them both out. [Build your blog with Stackbit here](https://www.stackbit.com/).

**Side Note**: DEV seems to be working with Stackbit and encouraging you to make your own blog. If you go to Settings > Integrations you can see a way to generate your personal blog from your DEV posts.

### Notion Blog

![](/images/blog-018\_03.png)

Last but not least is [Notion Blog](https://notion-blog.now.sh/). This is a great option if you love [Notion](https://www.notion.so/) and already write your blogs in it. **As a disclaimer**, I've not yet tried this option, but it seems interesting enough I thought I'd mention it.

Notion is "...an all-in-one workspace for note-taking, project management and task management." I'll be the 1st to admit that while I use Notion, I am certainly not using it to it's fullest potential. If you're interested in learning to use it better there are plenty of [videos](https://www.youtube.com/watch?v=m9S5I3pWz94\&t=3s) and [blog posts](https://dev.to/search?q=notion) on it.

Notion Blog, built by [JJ Kasper](https://twitter.com/\_ijjk), uses [Next.js](https://nextjs.org/) to generate the site, and [Zeit](https://zeit.co/) to deploy it.

Despite my not having experience using this option I still thought it worth mentioning as it's a new option that could prove very fruitful for Notion power users. [Build your blog with Notion Blog here](https://notion-blog.now.sh/).

## What Did I Go With?

As mentioned above, I've not used Notion Blog but I *have* used the former two, Hylia and Stackbit. I initially used Hylia to start Coding Catchup a few months ago, however, I am now using Stackbit and couldn't be happier.

I wanted to use something different and a bit more fleshed out than Hylia. It is very much a starter kit and great to get your site up as quickly as possible so you can get writing as quickly as possible.

We'll see how and where Stackbit goes. It's got a much larger team than Hylia (11 devs vs 1) and looks like they have plans to make it grow as a platform.

No matter which you choose, hosting your own blog and self-publishing is a great thing you can do for yourself. With so many easy tools there's no reason not to. I'll continue to post on DEV as well for the foreseeable future as it's a fantastic community and is what got me started with blogging.

Be sure to visit [Coding Catchup](https://www.codingcatchup.com/) and let me know what you think! I'm always open to questions, comments, concerns, suggestions, or even just a friendly chat over on [Twitter](https://twitter.com/TheRyanFurrer)!


Simple Ways To Build Your Own Blog

![Featured Image of a Keyboard](/images/blog-001.webp)

## Getting Started

This is it. I decided at the beginning of June 2019 to finally take coding seriously and get to work studying code, practicing what I've learned, and building projects.

If you care to stick along I'd really appreciate it! I will be writing once a week to start so be sure to give me a follow if you are interested.

### Why Write About It?

I decided to write about my journey for a few reasons:

#### Document what I am working on

Instead of boring my girlfriend with whatever I am working on that day or week, I thought it better to write it down - think of it almost like a journal! Except for the fact that you don't have to deal with my horrendous handwriting.

#### Reflect on what I've done

There will be times where I feel like I've made no progress or can't really see what I've been working on. This will act as a way for me to see what I've learned - kind of like taking progress pictures when losing weight.

#### Help others looking to make a change

While I know this is said a lot, if I can do it you can do it. I, like many others, went to college for something completely unrelated to what I am pursuing now and am so dedicated and passionate about starting this career. Perhaps you just started your own journey or you're thinking about dipping your feet into web programming, either way I hope I can help.

#### Something for future employers

If, by some chance, a future employer is looking at my social media platforms I want them to see this as a sort of time capsule. They can see how I've grown and keep up to date with what I'm working on in a different capacity than GitHub or my portfolio site will allow.

Now that we have that out of the way, let me introduce myself more thoroughly.

### More About Me

I went to college for Music Education & Performance, my main instrument was Viola. I've been playing for just under 20 years and it's an amazing thing, music. I never finished my degree and bounced around from job to job never loving what I did.

That's where coding comes in. I've always been interested in it and threw around the idea of a few different careers in the last year before settling on Front-End Web Development - here they are in order:

*   Front-End Web Development

*   Network Security

*   AWS Solutions Architect

*   ...Front-End Web Development

I suppose part of my desire to work on the front-end is the ability to create and be imaginative in what I create.

### What I'm Working On

I am currently working on my portfolio site - it's ever expanding and something I'm not sure I'll truly feel is ever "finished." Beyond my own website I am working on a few sites for local businesses including a brewery, an environmental company, and a food business.

I am also learning Vanilla JavaScript and will eventually move onto React, however, I want to have a solid and thorough understanding of JS before adding on any libraries. I'm learning via [Treehouse](https://teamtreehouse.com/), [freeCodeCamp](https://www.freecodecamp.org/), and my own practicing of what I learn.

I often equate learning coding languages to learning music and incorporate similar practice techniques - it's something I'm very thankful for having learned.

### Let's Wrap This Up

So that's me in a nutshell. I'll probably write another post in the 1st half of this week to bring you all up to speed with what my site looked like before it's redesign this past week.

If you stuck around this long I seriously thank you for reading and hope you'll come back for more!


The Ryan Furrer Blog

Don't know where to start?

Designing and Developing My Portfolio - v3

Simple Ways To Build Your Own Blog

Journey to My New Career: An Introduction

Like what you've read?

Home

The Ryan Furrer Blog

Don't know where to start?

Designing and Developing My Portfolio - v3

Simple Ways To Build Your Own Blog

Journey to My New Career: An Introduction

Like what you've read?