In progress: Portfolio WP projects added, project nav, and hesitation

In this series: I'll cover the reasons why I build my portfolio without using a CMS, show my progress of troubleshooting, working through the mess and what I learn in between. The portfolio is in the making.
The purpose of the series: to record my process, visualize my progress for a future improvement, keep myself accountable and connect with you who may have the same journey.

WordPress Projects Added

Feb 18-19, 2021

Two days of good productivity I should say. I was able to add the rest of the projects into the portfolio, make a project navigation, and put some deep thoughts into what I should do with the project page.

Head over to the project page: (https://www.gifttanakan.com/projects.php)

What projects I put in?

• The Seattle Collegian website

  This is my current WordPress work at my college. Even though I didn't develop it from the beginning, I'm now in charge of running the site both frontend, backend, including security and maintenance tasks.

• The Craft Minded blog

  A personal blog I built since 2018; my first ever WordPress website. It's "The blog that will make you code, craft and care more for the planet"

The reason I included WordPress work in the portfolio is that WordPress is one of the biggest, most-trusted Content Management System out there. WordPress-related skills are always valuable. Especially if you can develop a very robust project like e-commerce, which requires a lot of tool integrations, you'll be in demand.

I do have an e-commerce WordPress site I built for my mom's business, but haven't finished setting up WooCommerce thoroughly yet. Aww, that's another thing I should get it done within this quarter.

Project Navigation

• Challenge

I decided to use the languages that I know (HTML, CSS, PHP) to make the navigation. So, the way to make it was quite limiting unlike using JavaScript. It looked like this on every project page:

My concern was users may not realize that the page is changed when they click on each project name until they scroll down, even though the project title changes. Because the navigation already takes up the whole page.

• Solution

I showed this to my boyfriend, and as I thought, he suggested making a collapsible navigation - using JavaScript. Otherwise, as a user, he doesn't know that the page changes.

I was hesitant but understood his point of view. As I searched for how to make a collapsible menu on W3school, I found a perfect solution I never thought of: the breadcrumb.

Had a quick look at the code and it doesn't need JavaScript. A gift of the day! Thanks W3school!

Here's how it looks like when using the breadcrumb instead of the bulky navigation (the texts are white only when hovered over):

I'm happy with this solution. Breadcrumb is clean, minimal, and does its job well. When users are on one project page and want to view other projects, they can just click on the upper level directory("Projects"). Then it will take them back to the project pages.

I also like the background that doesn't fight the dominance of the main navigation at the top. Giving myself some credits here :)

Can't wait to see the whole site after dropping these breadcrumbs...

Okay now. What else? Oh..

Project Page

Here's the current project page:

Or you can view it live here: Project Page

Now this page is like a hub of all project links. I'm unsure what else this page should do. On one side, it does what it's supposed to - giving directions to users based on how they want to view it ("By technology" or "By projects"). But on the other side, this page is like topful (if that's the word) but bottomless. Like, it's missing something.

Something visual...

One thought I have - make a simple gallery of all projects and name this section "By impression" or something like that. It could show as grids or tiles. Each tile has an image of a project and users can choose the project based on their impression of those images. Thinking about using flexbox for this. What do you think?

My next move...?

• Add two wireframing projects
• Add two WordPress projects
• Edit content in each project
• Link stuff together
• Write copy for my About page
• Determine what to do with the Contact page
• Gallery in project page?
• Ask people for testimonials
• Finish that WP E-commerce

Question for today:
Without JavaScript, what's your move in making navigation bar?