Throughout the years, I've redesigned my personal website and blog numerous times. I typically wrote each iteration in a different programming language — one that I felt best represented my skillset at the time. This relaunch is no exception.

The Basics

In recent years, I've taken a fondness to the Ruby language and to the Ruby on Rails MVC (Model-View-Controller) platform. As such, the core of this new site is a Rails app. I've optimized the pages for speed and usability. It's nothing too fancy, but it suits my needs.

"For the blog portion of my redesign, I wanted to use a platform that was lean, efficient, and easy to work with."

At launch, the site is relatively simple and includes a few basic pages: home, about, blog, and contact. Three of these pages are served up through my Rails app. However, for the blog portion of my redesign, I wanted to use a platform that was lean, efficient, and easy to work with. That lead me to Ghost.

The beautiful admin and writing interface of Ghost's backend.

About Ghost

For those of you not already familiar, Ghost is a nonprofit organization that set out on a mission to revolutionize the online publication world. Those of us who've felt bogged down by bloated platforms like WordPress have often longed for a simpler CMS that allows us to focus on creating solid content. And that's exactly what Ghost is: a modern, lightweight, and simple CMS.

Ghost is open-source software that anyone can install and run on a webserver (check out the project on Github). Or, if you prefer to avoid the maintenance that comes with running your own server, you can pay a nominal fee for an instance of  Ghost(Pro), the organization's premium hosting service.

Ghost is also very customizable. I created a completely custom Ghost theme to match the design of my Rails app. Templating for Ghost is simple and utilizes the Handlebars.js templating engine along with basic HTML, CSS, and Javascript.

Design

The inspiration for the design of this current iteration of oryowen.com ultimately sources back to print newspapers. As a someone who consumes a large amount of news as part of my career, I have always appreciated the asethetics of well-designed newspapers.

"I have always appreciated the asethetics of well-designed newspapers."

So, I sought to implement the closest thing I could imagine to an online newspaper. You'll likely see elements that remind you of The New York Times, TechCrunch, Time, and several other publications' websites. On the whole, I wanted to be able to pull up my site or an article on my blog and feel like I was reading a good 'ole ink and paper news publication.

Photo by rawpixel from Unsplash.com

Interactivity

In building both my Rails core app and my custom Ghost theme, I wanted to make sure that their respective designs felt modern, fluid, and interactive. I chose to implement basic CSS animations (Animate.css) paired with smoothState.js by Miguel Perez. The combination of these two elements make the pages you'll interact with here flow seamlessly into one another without a (sometimes) jarring flash that typically comes along with full page loads.

Responsiveness

As our society moves continuously toward mobile devices and platforms, it's essential that modern web applications be able to gracefully adapt to any screen size. The breakpoints for my sites designs have been meticulously chose to ensure that content and images are highly visible and easily consumed no matter what device you may be using.


In closing, I'm immensely proud of how this redesign turned out. It accurately represents my personal brand, is modern, interactive, and accessible. However, I, like most developers, am not immune from making mistakes. So, it you catch a glitch or a bug when using the new design, please don't hesitate to let me know about it — I love a good learning opportunity. Enjoy the site!

Published:
Last updated: