main: Updated the site again

Author: wazzac

src/assets/images/profile/profilewc.png

@@ -5,14 +5,18 @@ export default {
             bios: [
                 {
                     id: 1,
-                    bio: "Hey there👋 I'm Warren Coetzee, a software developer based in Perth, Australia. By day, I'm passionate about crafting clean and efficient code, particularly with PHP projects and building RESTful APIs. I'm currently diving deep into the worlds of Yii2 and Laravel frameworks, constantly learning and expanding my skillset. I also enjoy working with databases and data management in general. In my spare time, I love working on my own open-source projects and would be thrilled if others would fork and help improve them.",
+                    bio: "Hey there👋 I'm Warren Coetzee, a software developer based in Perth, Australia and working at Locafy.",
                 },
                 {
                     id: 2,
-                    bio: "Outside of the coding world, my interests take a more aquatic turn. I love exploring the ocean and spending time snorkelling whenever I get the chance. When I'm on dry land, you might find me grappling on the BJJ mats, cheering on the Springboks or Blue Bulls (champions all the way!), or spending quality time with my amazing wife and two fantastic kids."
+                    bio: "By day, I'm passionate about building clean and efficient code, particularly with PHP projects and building RESTful APIs. I'm currently working on both Yii2 and Laravel frameworks, constantly learning and expanding my skillset. I also enjoy working with databases and data management in general. In my spare time, I love working on my own open-source projects and would be thrilled if others would fork and help improve them."
                 },
                 {
                     id: 3,
+                    bio: "Outside of the coding world, my interests take a more aquatic turn. I love exploring the ocean and spending time snorkeling whenever I get the chance. When I'm on dry land, you might find me grappling on the BJJ mats, cheering on the Springboks (champions all the way!), or spending quality time with my amazing wife and two fantastic kids."
+                },
+                {
+                    id: 4,
                     bio: "Feel free to browse around my portfolio and see the open-source projects I'm working on, or connect with me on LinkedIn!"
                 },
             ],
@@ -25,7 +29,7 @@ export default {
     <div class="block mt-10 sm:flex sm:gap-10 sm:mt-20">
         <!-- About profile image -->
         <div class="w-full sm:w-1/4 mb-7 sm:mb-0">
-            <img src="@/assets/images/comingsoon.png" class="rounded-xl w-96" alt="" />
+            <img src="@/assets/images/profile/profilewc.png" class="rounded-2xl w-96" alt="" />
         </div>
 
         <!-- About details -->

src/components/about/AboutMe.vue

@@ -52,7 +52,7 @@ export default {
         <!-- Projects grid title -->
         <div class="text-center">
             <p
-                class="font-general-semibold text-2xl sm:text-5xl font-semibold mb-2 text-ternary-dark dark:text-ternary-light"
+                class="mb-2 text-2xl font-semibold font-general-semibold sm:text-5xl text-ternary-dark dark:text-ternary-light"
             >
                 {{ projectsHeading }}
             </p>
@@ -61,11 +61,11 @@ export default {
         <!-- Filter and search projects -->
         <div class="mt-10 sm:mt-10">
             <h3
-                class="font-general-regular text-center text-secondary-dark dark:text-ternary-light text-md sm:text-xl font-normal mb-4"
+                class="mb-4 font-normal text-center font-general-regular text-secondary-dark dark:text-ternary-light text-md sm:text-xl"
             >
                 Search projects by title or filter by category
             </h3>
-            <div class="flex justify-between border-b border-primary-light dark:border-secondary-dark pb-3 gap-2">
+            <div class="flex justify-between gap-2 pb-3 border-b border-primary-light dark:border-secondary-dark">
                 <div class="flex justify-between gap-2">
                     <span
                         class="hidden sm:block bg-primary-light dark:bg-ternary-dark p-2.5 shadow-sm rounded-xl cursor-pointer"
@@ -74,7 +74,7 @@ export default {
                     </span>
                     <input
                         v-model="searchProject"
-                        class="font-general-medium pl-3 pr-1 sm:px-4 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-sm sm:text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+                        class="py-2 pl-3 pr-1 text-sm border-gray-200 rounded-lg font-general-medium sm:px-4 border-1 dark:border-secondary-dark sm:text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
                         id="name"
                         name="name"
                         type="search"
@@ -88,7 +88,7 @@ export default {
         </div>
 
         <!-- Projects grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
+        <div class="grid grid-cols-1 mt-6 sm:grid-cols-2 lg:grid-cols-2 sm:gap-10">
             <ProjectSingle v-for="project in filteredProjects" :key="project.id" :project="project" />
         </div>
     </section>

src/components/projects/ProjectsGrid.vue

@@ -23,16 +23,16 @@ export default {
 </script>
 
 <template>
-    <section class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-10">
+    <section class="flex flex-col items-center mt-12 sm:justify-between sm:flex-row sm:mt-10">
         <!-- Banner left contents -->
-        <div class="w-full md:w-1/3 text-left">
+        <div class="w-full text-left md:w-1/3">
             <h1
-                class="font-general-semibold text-3xl md:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
+                class="text-3xl text-center uppercase font-general-semibold md:text-3xl xl:text-4xl sm:text-left text-ternary-dark dark:text-primary-light"
             >
-                Hey, Warren here...
+                Hey, Warren here👋
             </h1>
             <p
-                class="font-general-medium mt-2 text-lg sm:text-xl xl:text-2xl text-center sm:text-left leading-none text-gray-400"
+                class="mt-2 text-lg leading-none text-center text-gray-400 font-general-medium sm:text-xl xl:text-2xl sm:text-left"
             >
                 A Software Engineer with a passion for integration, automation, databases and development.
             </p>
@@ -44,15 +44,15 @@ export default {
                     class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white duration-500"
                     aria-label="Download Resume"
                 >
-                    <i data-feather="arrow-down-circle" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6 duration-100"></i>
-                    <span class="text-sm sm:text-lg font-general-medium duration-100">Download CV</span></a
+                    <i data-feather="arrow-down-circle" class="w-5 ml-0 mr-2 duration-100 sm:ml-1 sm:mr-3 sm:w-6"></i>
+                    <span class="text-sm duration-100 sm:text-lg font-general-medium">Download CV</span></a
                 >
             </div>
             -->
         </div>
 
         <!-- Banner right illustration -->
-        <div class="w-full md:w-2/3 text-right float-right">
+        <div class="float-right w-full text-right md:w-2/3">
             <img v-if="theme === 'light'" src="@/assets/images/projectpeople.svg" alt="Developer" class="float-right" />
             <img v-else src="@/assets/images/projectpeople.svg" alt="Developer" class="float-right"/>
         </div>

src/components/shared/AppBanner.vue

@@ -78,12 +78,12 @@ export default {
 	<nav id="nav" class="sm:container sm:mx-auto">
 		<!-- Header start -->
 		<div
-			class="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center my-6"
+			class="z-10 block max-w-screen-lg my-6 xl:max-w-screen-xl sm:flex sm:justify-between sm:items-center"
 		>
 			<!-- Header menu links and small screen hamburger menu -->
-			<div class="flex justify-between items-center px-4 sm:px-0">
+			<div class="flex items-center justify-between px-4 sm:px-0">
 				<!-- Header logos -->
-				<div>
+				<!-- <div>
 					<router-link to="/"
 						><img
 							v-if="theme === 'light'"
@@ -98,7 +98,7 @@ export default {
 							alt="Light Logo"
 						/>
 					</router-link>
-				</div>
+				</div> -->
 
 				<!-- Theme switcher small screen -->
 				<theme-switcher
@@ -118,7 +118,7 @@ export default {
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 24 24"
-							class="h-7 w-7 fill-current text-secondary-dark dark:text-ternary-light"
+							class="fill-current h-7 w-7 text-secondary-dark dark:text-ternary-light"
 						>
 							<path
 								v-if="isOpen"
@@ -141,7 +141,7 @@ export default {
 
 			<!-- Header right section buttons -->
 			<div
-				class="hidden sm:flex justify-between items-center flex-col md:flex-row"
+				class="flex-col items-center justify-between hidden sm:flex md:flex-row"
 			>
 				<!-- Hire me button -->
 				<!-- <div class="hidden md:block">
@@ -158,7 +158,7 @@ export default {
 				<theme-switcher
 					:theme="theme"
 					@themeChanged="updateTheme"
-					class="ml-8 bg-primary-light dark:bg-ternary-dark px-3 py-2 shadow-sm rounded-xl cursor-pointer"
+					class="px-3 py-2 ml-8 shadow-sm cursor-pointer bg-primary-light dark:bg-ternary-dark rounded-xl"
 				/>
 			</div>
 		</div>

src/components/shared/AppHeader.vue

@@ -8,30 +8,36 @@ export default {
     <!-- Header links -->
     <div
         :class="isOpen ? 'block' : 'hidden'"
-        class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none"
+        class="items-center justify-center p-5 m-0 mt-5 shadow-lg sm:ml-4 sm:mt-3 sm:flex sm:p-0 sm:shadow-none"
     >
+        <router-link
+            to="/"
+            class="block mb-2 text-lg font-medium text-left font-general-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 sm:py-2"
+            aria-label="Projects"
+            >Home</router-link
+        >
         <router-link
             to="/projects"
-            class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 mb-2 sm:py-2"
+            class="block mb-2 text-lg font-medium text-left font-general-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 sm:py-2"
             aria-label="Projects"
-            >Active Projects</router-link
+            >GitHub Projects</router-link
         >
         <router-link
             to="/about"
-            class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+            class="block pt-3 mb-2 text-lg font-medium text-left border-t-2 font-general-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 sm:py-2 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
             aria-label="About Me"
             >About Me</router-link
         >
         <!--
 		<router-link
 			to="/contact"
-			class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+			class="block pt-3 mb-2 text-lg font-medium text-left border-t-2 font-general-medium text-primary-dark dark:text-ternary-light hover:text-indigo-600 dark:hover:text-indigo-300 sm:mx-4 sm:py-2 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
 			aria-label="Contact"
 			>Contact</router-link
 		>
-        <div class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
+        <div class="pt-3 border-t-2 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
             <button
-                class="font-general-medium sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2 duration-500"
+                class="block px-4 py-2 mt-2 font-medium text-left text-white duration-500 bg-indigo-500 rounded-sm shadow-sm font-general-medium sm:hidden text-md hover:bg-indigo-600"
                 @click="showModal()"
                 aria-label="Hire Me Button"
             >

src/components/shared/AppHeaderLinks.vue

@@ -4,7 +4,7 @@
 const projects = [
     {
         id: 1,
-        title: "Dom Translate",
+        title: "Laravel Translate",
         category: "Laravel Package",
         img: require("@/assets/images/github-domtranslate.jpg"),
 		description: "The Laravel Auto-Translation Package enables seamless multilingual support by allowing you to define phrases for automatic translation within your Laravel application. Using a built-in Blade directive, you can easily mark phrases that need translation before they are displayed to the user. This package simplifies multi-language management.",