stevanussatria.com

summary_

stevanussatria.com is a revamp of my previous personal website hosted in wordpress.com. Upon realizing the world of possibilities provided by wordpress.org, I finally made the jump in 2020 to migrate to wordpress.org and have it undergo a complete redesign.

Year 2020
My Role Designer, Developer
Language HTML, CSS, JavaScript, PHP
Software WordPress, Visual Studio Code, Figma

background_

The design-centric nature of my undergraduate degree meant that by the time I graduated, I had engaged and completed quite a large number of projects. Some of these projects were quite extensive, involving thorough use case analysis, research, and prototyping. Whereas LinkedIn provides a feature to document them, I felt that it would not be as comprehensive as a dedicated portfolio. As such, in 2017 I decided to compile all of them into an online portfolio.

Given my lack of coding experience (I was a mechanical engineer graduate), online site builders such as Wix and WordPress.com were ideal. A lot of people recommended WordPress.org, but I was immediately taken aback by the amount of programming involved and the plethora of domain and website hosting options. As such, I decided to go with a more integrated solution and paid for a WordPress.com membership.

A few days of setting up my brand new domain name and designing the content, my personal portfolio was live!

One year on and I decided to do a small revamp of the site. I felt that the previous design was too “blog-like”, and I wanted something more professional. After a couple of tweaks on the theme and content segregation I finally settled on this design:

I was content with it for a while, but I never stopped wishing that it looked more professional and modern. By 2020, I realized that I was limited not by my imagination, but my choice of hosting platform given the amount of money I was willing to fork out every year. With the Personal Plan, I was able to obtain my own domain name, but I was not allowed to use plugins nor write custom CSS. The latter is available on the Professional Plan which would cost 2x more whereas the former is only available on the US$25/month business plan.

I finally understood why most people recommended using WordPress.org instead, and after hesitating for the majority of 2019, I finally made the plunge to switch over in 2020.

research_

The first step that I took was to browse the web to find inspiration from other people’s portfolio site. These included both personal and company portfolios. From all of them, I noticed several common patterns that I loved and would like to adopt for my own portfolio site:

• Huge banner/hero image on the landing page
• Parallax scrolling
• Eye-catching and indicative CSS animations
• Small eye-catching Javascript functionalities
• Single Page Application (SPA)-like behavior

local development setup_

As I still had around 2 months of WordPress.com subscription, I decided to start the makeover on a local WordPress.org installation before uploading it to my hosting provider of choice. This would allow me to minimize downtime as much as possible as hopefully by the time I let my WordPress.com subscription expire, my locally developed website is ready to be deployed live.

As I was already working as a full-time software engineer by then, the process was much smoother than I had anticipated and within 5 minutes I have a local WordPress.org instance running on my MacBook Pro.

With that, I went straight ahead to shop for themes. I needed to start with the correct theme that’s not only beautiful but also equipped with essential customizations for scalability. After a couple of hours of browsing, I found several promising themes such as Make but eventually decided to go with Astra.

With that and a couple of other plugin installs, the local development environment was set up, and it was time to start the redesign!

initial design and implementation_

Going into this, I did not have a clear separation between the design and implementation phases. Instead, both went in tandem, and I used Figma whenever I needed to visualize things better before translating it into WordPress via its Page Editor. Although the primary target device was desktop, I ensured that the website was responsive and viewable on mobile and tablet as well.

As seen from the image above, the initial design and implementation for the homepage comprised a page height banner image with my personal logo pulsating in the middle. There would be an animated downward angle to indicate the availability of more content below. Next would be a segment of the “Latest Update” pertaining to my project (e.g. commencement of a new project, or revival of an old one). Last, but not least, would be the 3 menus where readers could navigate further into my website. On a desktop, the options would be overlayed when the user hovers on an image, whereas on mobile and tablet the options would already be overlayed on the images by default.

For the content page, I decided to have a smaller banner section overlayed by the title (and subtitle, if any) of the page being viewed. It would then be followed by the main content of the page. For the “Projects” and “Hobbies” pages, the design would be close to the one shown above. On mobile, the images would be placed at the center above the title section instead. The “Milestone” page was designed to be different from the two pages above as they were constructed using the Cool Timeline plugin.

Last, but not least, I initially decided to have a single page dedicated to outlining who I am as a person. It was originally designed as per the image above. The unique thing about this page was a custom JavaScript code that allowed readers to decide the length and voice of the description excerpt, which was something I saw on Chris Coyier‘s personal website.

I had not originally planned on creating a dedicated page for each of my projects. Hence the designs above where information was summarized and condensed into 3 menu pages and 1 about page. Of course, if you had seen this page then you would know that a lot has changed since the original redesign. Nonetheless, the backbone outlined on this page remained the same 🙂

key modifications_

The original design and implementation outlined above were deployed live the moment my WordPress.com subscription expired. I had chosen Namecheap to host my domain and BlueHost to host the site respectively. I was satisfied with the site, but like any other developers, could not resist making improvements and tweaks here and there. Hence, the following section would outline several key modifications that I had completed to this site since the original deployment.

smoothstate integration_

Despite how happy I was with the user interface of my portfolio site, I could never come to terms with the experience of navigating from one page to another. Unlike most modern websites or Single Page Applications which only reload the changed content of the page, my website was still reloading the entire page on every navigation. It was not until roughly 6 months later that I managed to find and integrate an AJAX-based plugin into my website, but boy was it worth it! If you are curious as to how I did it, you may find the full write-up on Medium.

page restructuring and site-wide enhancements_

Upon asking for feedback from my close friends about the structure of my website, I decided to shuffle things around a little bit in order to improve both its impact as well as user experience. Some of the key decisions I made included:

• Moving the content of the dedicated about page into the homepage
• Moving all images to the left for “Projects” and “Hobbies” pages’ desktop view for better readability
• Creating a dedicated page documenting each project/key milestone I have completed in greater detail
• Removing quotes section and excessive screenshots from the “Hobbies” page in order to improve mobile readability and performance
• Increasing the minimum font size to 15 for mobile readability and removing all usages of light fonts across the website for improved readability

cdn integration_

When I first migrated the website from WordPress.com to BlueHost, the application of the SSL certificate took some time. As such, I had no choice but to disable Cloudflare first. Subsequently, whenever I tried to enable it via BlueHost’s dashboard, my website consistently became inaccessible. For the longest time, I thought I was unable to integrate Cloudflare into my website.

Until I decided to do a little bit of research after contacting BlueHost’s customer service team.

Ultimately, I learned that I would be able to use Cloudflare by setting it up myself outside of BlueHost. True enough, within a few minutes of deleting the old configuration and creating a new one, Cloudflare was successfully enabled on my website, and it brought with it substantial performance improvement!

evaluation_

Migrating and redesigning my personal portfolio site from WordPress.com to WordPress.org has truly been an amazing journey. I had come to learn so much more about domain name hosting, website hosting, content delivery network (CDN), PHP, as well as AJAX. I personally love the look-and-feel of my website now, and I really hope you do too! Nonetheless, maintaining and improving this website will never stop, and until it’s time to migrate to a more current stack, I will do my utmost best in keeping this website user-friendly, entertaining, fast, and secure 🙂