2023

Coming back to building the site

Two years had passed since I had last worked on the site.

This had been down to being occupied by other things but also down to actively avoiding the site’s development.

Whenever I thought about progressing the site into a presentable form, I would start to get a headache and a feeling of dread about building the about page and homepage.

My MTA had progressed quite significantly since 2021 as I had studied a great deal more courses and acquired nearly as many new diplomas.

I had also created twenty new learning modules which all needed their own individual web pages.

So I needed to update ibuiltmyown.education to reflect this further evolution of my postgraduate studies.

Basically, I had a lot of work to do in order to get the site into a presentable form!

Creating the v2 about page

I knew I needed to create a single about page that covered the topics of all the previous about pages but did it in a concise and visually engaging way.

I didn’t yet have a conception of what this new about page would look like, so I went back to the about pages I had created in 2020.

I selected the elements that had worked on the v1 about pages and would serve as good starting points for the v2 about page.

These good elements were the…

• Header banner with tagline from the about my MTA Portfolio page
• Colour panels concept from the about my MTA Portfolio page
• Full-page images from the about my MTA Portfolio page
• Black and white graduate hat photos from the about my MTA Portfolio page
• Majors definition colour panel from the about my majors page

I wanted to re-use the header banner with letter cutouts with tagline from the v1 About my MTA Portfolio page.

But I ended up discarding it because while the original banner looks great with its letter cutouts on large screen orientations, the letter cut out effect is lost on smaller screen orientations.

The slides don’t look nearly as impressive on smaller screen orientations.

Also, the fact that the tagline was displayed across three different slides meant that it took a bit of time for the full tagline to become apparent.

Ultimately, I wanted the about page header to be something much more instant that would look good on all screen orientations.

I took inspiration from the concentration and final project pages and created a simple full-width banner image that was big enough to contain the full tagline heading but small enough not to take up the full page.

I also knew that the information immediately following the page header need to clearly and concisely define what is my MTA Portfolio and why the website that houses it has a different name to it.

I discarded the original text I had written for the v1 About page and instead used my MTA mission statement as a starting point for creating the new overview statement.

Then I just created an additional statement that explained the purpose of ibuiltmyown.education.

For the structure of the rest of the page I took my original conception of having multiple about pages and turned those additional about pages into sections of the singular about page…

• Section 1 – About my MTA Portfolio
• Section 2 – About my Majors
• Section 3 – About my Mission
• Section 4 – About my Accreditation
• Section 5 – About my Final Projects
• Section 6 – About Me

Then I took the full page image concept I had introduced on the v1 about page…

… And used it in the v2 about page to separate each section.

I added a parallax effect to make each image more dynamic.

I also used images that were relevant to the following section.

I had always liked the colour panel I had created on the v1 about my majors page that displayed the definitions of my majors.

I pretty much copy and pasted IT straight over to the v2 about page.

But because I had a colour panel in the about my majors section, I decided that I would had a colour panel to each of the sections.

I use each colour panel to highlight key information for its relevant section.

I also used a colour panel to highlight the definition of Master of Transdisciplinary Application that I copy and pasted over from the v1 About my MTA Portfolio page.

Regarding the content that resides outside the colour panels, I was incredibly strict with myself to ensure that it is was entirely concise.

I completely discarded all the content I had written on the v1 about page and started from scratch with the v2 page.

This was the best course of action because I have developed greatly as a content writer and I’ve become much more effective at writing shorter content (which has historically been a challenge for me).

I also recreated the black and white graduate hat photos from the v1 about page.

Overall, I am very pleased with the resulting v2 about page because it embodies the modular and colour coded aesthetic of the rest of ibuiltmyown.education; as well as conveying a simplified contextual overview of my MTA Portfolio.

Creating the homepage

Since 2019 the MTA Overview page had served as the homepage for ibuiltmyown.education.

While I had originally intended for the MTA Overview page to be homepage for the site, I later re-thought that Idea after I had created the MTA Overview page.

The MTA Overview page is great for presenting a structure overview of how my MTA Portfolio fits together.

But the MTA Overview page is too much too soon for a website homepage.

A website homepage needs to give you a brief overview of what the website is about in a highly engaging way.

The plan was then to create a homepage that would more closely follow the notes and sketches I had made for ibuiltmyown.education since 2013.

Essentially, my original thinking for the homepage was to create a banner slider with offshoot links.

I had already partly utilised this idea on the v1 MTA Overview page.

I added this to the MTA Overview page when I used it to serve as the temporary homepage.

When a user loaded onto my website, I wanted the welcome to be have a brief introduction and overview.

Later, I discovered the brilliant WordPress plugin called Slider Revolution which has a wonderful animated whiteboard feature which allows you to write and animate whatever you like on the whiteboard.

When I started to develop the homepage at the beginning of 2023, I fully intended to use the whiteboard feature.

In the same way I had used the banner slider as the intro on the MTA Overview stand-in page, I wanted to use an animated whiteboard as the intro for the actual homepage.

Eventually, I decided against this as the whiteboard was incredibly tedious to animate and because it wasn’t as personal as having a header slider with my image.

So I reverted back to my original idea of having a banner slider.

Also, instead of just copy and pasted the banner slider from the v1 MTA Overview page, I opted to recreate it using Slider Revolution.

Unlike the banner slider feature that comes with the Olvi theme, Slider Revolution allows you to have much more control over all the elements present within the slider.

Eventually, I decided against this as the whiteboard was incredibly tedious to animate and because it wasn’t as personal as having a header slider with my image.

So I reverted back to my original idea of having a banner slider.

Also, instead of just copy and pasted the banner slider from the v1 MTA Overview page, I opted to recreate it using Slider Revolution.

Unlike the banner slider feature that comes with the Olvi theme, Slider Revolution allows you to have much more control over all the elements present within the slider.

I also took this opportunity to create some new images for the new slider.

With the banner slider on the v1 MTA Overview page, I had just used images that I already had lying around or created without ever intending to use them on the site.

However, now that I was creating the actual proper homepage, I wanted images that were specifically designed for illustrating the headings that accompanied them.

This is also why I re-created the graduate hat images for the v2 about page because I needed to create more variations than what I had originally created with the v1 photos.

They also all needed to be consistent with my longer hair.

Besides, I definitely look better in a graduate hat with longer hair.

With the rest of the homepage, I already knew that I was going to expand beyond my original sketches of just a banner slider and have additional sections to highlight different aspects of my MTA Portfolio.

One key aspect was my final projects.

I knew I needed to have my final projects supremely highlighted on the homepage because it’s in the final projects that the true magic of my MTA Portfolio happens.

At one point I had thought about using my final projects to replace the banner slider, but decided against this when I realised I needed a bit of a narrative to set the stage for all that follows.

But I knew I wanted my final projects immediately following the into banner slider.

I also knew I wanted the final projects to be showcased in their own slider.

So I used Slider Revolution to create a slider unique to them.

The homepage would also need to showcase all the diplomas I had earned in some shape or form.

Because that was the point of ibuiltmyown.education, it was always envisioned as being one big explorable degree certificate.

So it made sense that the actual diplomas present within my MTA Portfolio should be featured prominently on it.

I also knew the homepage would need to highlight the concentrations of my MTA Portfolio to provide some idea of just how broad its focus really is.

So I figured that the diplomas and the concentrations should also get their own sliders.

But now I had to find a way of separating all these sliders into their own sections so as to not make the homepage feel overcluttered and over-confusing.

This is where I took inspiration from the v2 about page, which I was developing at the same time as the homepage.

I took the colour blocks and just expanded them into full sections.

Now each slider was house within its own colour section.

I also knew I wanted to have my MTA’s mission statement present on the homepage, so this too also got its own colour block section.

I wanted the MTA Overview page to have its own dedicated link at the bottom of the homepage, so this was also embedded in its own colour block section.

But there were a lot of colour block sections with sliders, all one after the other, and the page felt very cluttered.

This over-crowded feeling was made worse once I decided to add a blog to ibuiltmyown.education with its own dedicated colour block section with slider on the homepage.

I only had the MTA mission statement being the only section without a slider that was breaking the patter of the other sections.

Basically, I needed to break up the sliders some more and for this I took inspiration from the full-page images with headers I had used on the v1 about page.

I created two new ones form the homepage.

The first one I placed in-between the final project section with slider and the concentration section with slider.

This first image header served an integral purpose that took the pressure of the intro header banner because it gave me a devoted space to introduce myself as the creator of this website and of my masters degree.

It also allowed me a space to establish the majors of my master’s degree.

The second image header I placed in-between the diploma section with slider and the blog section with slider.

The second image header was something I had never intended to place on the homepage but made perfect sense now that I had made it.

I needed somewhere to state what was my ideal intended outcome for my MTA Portfolio

That’s the homepage.

Simple, colourful and to the point.

Finally I have portfolio website I can show off to the world

I am very happy with how ibuiltmyown.education has turned out!

Granted, it is still not completely finished as still need to finish putting up the other final project pages, which I can only do once I’ve finished orchestrating each of the final projects.

But I am now one step closer to finishing my Education Innovation final project, a part of which is the building of ibuiltmyown.education and writing up my thinking behind its design.

Overall, I have achieved my aim of progressing this site into a presentable form and now it’s good enough to be getting on with.

I can finish off the rest of it while I am showing it – and my MTA Portfolio housed within it – to the world.