Happy new year - Home page Updated

First of all; 

Happy New Year! πŸŽ‰ πŸ₯³πŸ₯³

Happy new year to every reader of this site.

This might be an update post but might also be the only post I could wish y'all on.

πŸ€”This is my first post for the year. 🀷🏾‍♂️

I hope you had a wonderful New Year celebration and are excited for the year ahead! 

✍🏾I'm not a good wisher but I'm wishing a happy new year.

Today's post is just to log the changes made on the website. 😏 Yes this is still the same site; the homepage only changed a bit.

 Changes Made

 I have revamped the homepage hero and link boxes. Here’s a look at the changes:

Homepage Hero Section


Old homepage
How the homepage used to look with the logo as background

I had to give up on this design because of the fact that it covers the whole viewport and added a big load to my LCP (Largest Contentful Paint ).

Also, there is usually and empty space when the homepage loads, before the browser download and display the image. The transitioning for an empty space till when the image fully loads also some weight to the CLS (Cumulative Layout Shift ).


New homepage
The new homepage with Animated switching texts and two Action buttons

I Got the same problem I ran away from in this new design.

Weight on LCP is only reduced by a little bit because of the long text with is rendered large.

The CLS also had a little improvement in results and was drawn back by the animated text. The text is a css trick to look like it's typing and backspacing itself. All these movements causes shifts and therefore added to CLS score. 

On the LCP issue, I plan to fix this by adding a read more link later on. 

I plan to make the read more link built with CSS only - I don't want an above the fold section depending on JavaScript. Hopefully this work out and helps πŸ‘ŒπŸΎ

The CLS score is still manageable. I'll leave that for now. 

Homepage Link Box

The link box appears below/after the hero section.


Old link box
The Old Link Box Look - Even on Desktop View

This old design is link box is designed to always keep links stacked on top each other, and they consumed a lot of space (😏 in my own view)


New grid link box
The New Grid Link Box adds to a compact view

The new link box Is more finer than the old one. Not only that, it has a compact grid look on desktop and stack on each other on mobile. 

Grid Link box Mobile view
The mobile view of the grid box: turns to a stacked list box

About / Info Section

I also changed the Info / about section on the homepage and added skill bars to it.


Old about section


New about section

In the redesign, the Photo will only be visible on desktop, I added a paragraph slider made with css only. And below is my skills bar.

Other Sections Swallowed into an Offering Section

Other Old sections
The old sections consumes space:

The Portfolio / Creations section and other sections have been grouped into a new three(3) tabbed offerings section.

The offering section showcase what I do (my creations), my services and other exploration ventures making it easier for you to explore everything I have to offer.

New offering section
The New Offering Section - no need to scroll

Services: Find all the services I provide in one convenient place.

My Creations: Explore my latest projects and creations.

Venture Tab: Discover other brands and activities I am involved in.

Offering Section on Mobil view
On Mobile View

The tab switch was rebuilt in pure CSS so it's always available for clicking. And it's very responsive and compact.

That's all

These updates mean no more unnecessary viewport space is consumed, making it easier for you to navigate and find what you need.

I hope you enjoy these changes and find them beautiful. Once again, I wish you a very Happy New Year filled with joy, success, and new resolutions!

Happy New year πŸŽŠπŸŽ‰

Comments on this post are disabled. You can only Webmention

Additional Widgets

Profile Picture

S David Prince

Typically replies in minutes

Profile Picture

Hi there πŸ‘‹

Leave a message

or Chat with DeePee

Start chat with:

Explore: Navigation