I Abandoned My Old Website Design After Going Full Time Freelance
Tags: freelance, redesign, website, portfolio
Published: 2021-09-27 12:43:06

---
published: true
description: I've launched my redesigned website after going full time freelance
tags: freelance, redesign, website, portfolio
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo1nd8gf54lm5lsjxtcj.png
---
<p>Refreshes, redesigns, and rebuilds are always fun and exciting for me.  I get the sense of giving new life to something that hasn't seen it for a while.  However, it wasn't an easy task to re-imagine the purpose, layout, and design of something I love as much as my own website.  </p>

<p>It holds a special place in my developer heart.  I mean it was, quite literally, the very first website I put on the live web.</p>

<p>It was a fun, albeit long, process that really tested my ability to mesh colors, design, and purpose but I'm very happy with the finished design and build.</p>

<h2>My Previous Website</h2>

<figure class="wp-block-image size-large is-style-default"><img src="https://jonathansexton.me/blog/wp-content/uploads/2021/07/image-1024x574.png" alt="jonathan sexton's previous portfolio website with links at the top" class="wp-image-1183"/><figcaption>My previous portfolio was built with the purpose of getting a developer job and was roughly 3 years old</figcaption></figure>

<p>The previous version of my website was built with the intention of landing my first developer job.  As such, it had sections and content that's relevant to that purpose.  </p>

<p>It reads like a resume which is exactly what I wanted at the time because when the site was built I was looking for my first developer job.</p>

<p>Now that my focus has changed (check my <a href="https://twitter.com/jj_goose/status/1432702211662909441">tweet about going full time freelance</a> ) from <a href="https://jonathansexton.me/blog/landing-my-first-development-job-what-a-crazy-journey/">getting a full time job </a>to going freelance, it was time my website reflected that.</p>

<p>To prepare, I did quite a bit of research on accessibility, <a href="https://en.wikipedia.org/wiki/Color_theory">color theory</a>, and layout design so I’d have a good foundation to start from on the visual aesthetic.  I asked for some input from my daughter and that’s where the initial purple color came from.</p>

<p>I also shifted the layout to have multiple pages instead of the landing page style that my previous website implemented.</p>

<h2>What Made This the Right Time</h2>

<p>It’s been nearly 3 years since I changed industries by landing my first developer job.  In that time I’ve learned a ton, grown as a person and as a developer, and met some amazing people.</p>

<p>My ultimate goal is (and was from the beginning) to move into freelancing full time.  This redesign is just one of the many steps I’ve taken in that direction.</p>

<p>The freedom and flexibility that freelancing affords me and my family is what initially drew me to freelancing but the love for helping people/small businesses has truly become my calling.</p>

<p>Being in a place financially, emotionally, and mentally stable enough to make the transition into full time freelancing made this the most opportune time for this redesign.</p>

<h2>The Results</h2>

<div class="wp-block-group">
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://jonathansexton.me/blog/wp-content/uploads/2021/09/new_landing_page-min-1024x350.png" alt="the new landing page for jonathansexton.me" class="wp-image-1200" width="768" height="263"/><figcaption>The new landing page - complete with a color/style/layout refresh</figcaption></figure></div>

<p>This refresh took much longer than I anticipated or wanted (but isn't that always the case with our own projects?) but I'm very happy with the end result. </p>

<p>I wanted a new design that was bright and vibrant - I think I hit the mark on that one with the purple and orange/red combination.</p>

<p>I use a custom but simple form for the contact portion - after all I don't need much from a potential client at this stage. </p>

<p>Without going too much into the technical weeds, it's built on <a href="https://www.gatsbyjs.com/">Gatsby</a> which means I get greater control over what's being sent to the client and it's super fast:</p>

<figure class="wp-block-image size-full"><img src="https://jonathansexton.me/blog/wp-content/uploads/2021/09/new_website_performance.png" alt="" class="wp-image-1219"/></figure>

<p>I also took the time to make accessibility a focus from the ground up - focusing on color contrast, element flow, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/semantics">semantic HTML</a>.  I want my website to be usable by anyone that visits it.  </p>

<p>I'm extremely happy with the way this process turned out and I feel like the results speak for themselves :D</p>

<h2>Planned Upgrades</h2>

<p>Like any project, it's never finished so I do have some upgrades planned for the not-so-distant-future.  Here are a few ideas:</p>

<ul><li>I want to bring the blog posts into the Gatsby ecosystem via a <a href="https://en.wikipedia.org/wiki/Headless_content_management_system">headless CMS</a>.  I feel like this will have a much better user experience while bringing my website and blog design inline with one another.</li>
<li>I'm also eying a dedicated contact page. I haven't decided on the specifics of this implementation yet</li>

<li>Adding customizable banner/notification area at the top of pages for special events/promos/important messages</li>

<li>Easter eggs for developers/curious visitors</li></ul>

<p>I'm sure this list will grow before everything above is complete, but it's good to have a starting point :D
</p>

<hr/>

<p>This was originally posted on my <a href="https://jonathansexton.me/blog">blog</a>.
</p>

<p>Since you've made it this far, why not sign up for my <strong>Newsletter</strong>?
</p>  

<p>You can do that at the top right of the main blog page.  I promise I’ll never spam your inbox and your information stays with me.  I like to occasionally send out interesting resources I find, interesting tweets I see, articles about web development, a list of my newest posts, etc.
</p>

<p><strong>Lastly, I'm available for hire!  You can use the form on my portfolio or send a message to <em>hello at jonathan sexton dot me</em> to get in touch :)</strong>
</p>

<p>Have an awesome day my friend and happy coding!</p>