Merge release branch

constants/index.ts

@@ -81,7 +81,7 @@ const projects = ref<Project[]>([
   {
     title: "TaxManager",
     image: "/images/portfolio4.png",
-    url: "https://digitax.tech",
+    url: "https://docs.digitax.tech/docs/sage-online-plugin",
     body: "An Electron Desktop and web application that integrages Locally hosted ERP systems e.g Sage and Odoo to digitax for Tax Compliance with the new ETIMS API specifications. The frontend is Vue while the backend is Expressjs. It uses sequelize ORM to simplify DB access. Integrated for DXC Technology, Ngong Veg Ltd, Seweco Paints, Poa Internet and more.",
     techStack: ["Electron", "Express", "Vue.js", "Typescript", "SQL"],
     opensource: false,
@@ -94,6 +94,13 @@ const projects = ref<Project[]>([
     techStack: ["Vue.js", "Typescript", "unbuild", "pnpm"],
     opensource: true,
   },
+  {
+    title: "HaftStudio Website",
+    image: "/images/portfolio.jpg",
+    url: "https://haftstudio-website.vercel.app",
+    body: "Simple, Modern, professional website made for a Design, Furniture and Build company. Still under developement.",
+    techStack: ["Vue.js", "Vuetify", "SCSS", "Typecript"],
+  },
   {
     title: "Pro-Manager.com",
     image: "/images/portfolio3.png",
@@ -113,13 +120,6 @@ const projects = ref<Project[]>([
       "Docker",
     ],
   },
-  {
-    title: "HaftStudio Website",
-    image: "/images/portfolio.jpg",
-    url: "https://haftstudio-website.vercel.app",
-    body: "Simple, Modern, professional website made for a Design, Furniture and Build company. Still under developement.",
-    techStack: ["Vue.js", "Vuetify", "SCSS", "Typecript"],
-  },
 ]);
 
 export { experiences, projects };

package.json

@@ -12,23 +12,23 @@
     "vue-rough-notation": "^1.0.4"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.21",
-    "@nuxt/content": "^2.8.5",
-    "@nuxt/devtools": "latest",
-    "@nuxt/ui": "^2.9.0",
+    "@iconify-json/carbon": "^1.2.3",
+    "@nuxt/content": "^2.13.4",
+    "@nuxt/devtools": "1.6.0",
+    "@nuxt/ui": "^2.18.7",
     "@nuxtjs/color-mode": "^3.3.0",
-    "@nuxtjs/robots": "^4.1.7",
-    "@nuxtjs/sitemap": "^6.1.0",
+    "@nuxtjs/robots": "^4.1.9",
+    "@nuxtjs/sitemap": "^6.1.2",
     "@vueuse/core": "^11.1.0",
-    "@vueuse/motion": "^2.0.0",
+    "@vueuse/motion": "^2.2.6",
     "@vueuse/nuxt": "^11.1.0",
     "gsap": "^3.12.2",
     "happy-dom": "^15.7.4",
     "nuxt": "^3.13.2",
     "nuxt-gtag": "^3.0.1",
-    "nuxt-og-image": "^3.0.2",
-    "nuxt-schema-org": "^3.0.1",
+    "nuxt-og-image": "^3.0.6",
+    "nuxt-schema-org": "^3.4.1",
     "nuxt-simple-robots": "4.0.1",
-    "nuxt-typed-router": "^3.3.1"
+    "nuxt-typed-router": "^3.7.0"
   }
 }

pages/index.vue

@@ -45,192 +45,113 @@ onMounted(() => {
   <div class="lg:flex lg:justify-between lg:gap-4">
     <!-- HEADER -->
     <header
-      class="font-space lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:py-24"
-    >
+      class="font-space lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:py-24">
       <div>
-        <h1
-          v-motion-slide-top
-          ref="container"
-          :style="headingStyle"
-          class="text-4xl font-bold tracking-tight text-slate-200 sm:text-5xl transition-all"
-        >
+        <h1 v-motion-slide-top ref="container" :style="headingStyle"
+          class="text-4xl font-bold tracking-tight text-slate-200 sm:text-5xl transition-all">
           <NuxtLink to="/"> Cedrouseroll Omondi </NuxtLink>
         </h1>
-        <h2
-          v-motion-pop
-          class="font-medium mt-3 text-lg tracking-tight text-slate-200 sm:text-xl"
-        >
+        <h2 v-motion-pop class="font-medium mt-3 text-lg tracking-tight text-slate-200 sm:text-xl">
           <RoughNotation :is-show="true" type="highlight" color="#f4f169">
             <span class="text-slate-500">Fullstack Software Developer</span>
           </RoughNotation>
         </h2>
         <p v-motion-slide-left class="mt-4 max-w-xs leading-normal">
-          <span class="font-thin"
-            >"The code you write makes you a programmer. The code you delete
+          <span class="font-thin">"The code you write makes you a programmer. The code you delete
             makes you a good one. The code you don't have to write makes you a
             great one."
           </span>
         </p>
         <nav class="nav hidden lg:block" aria-label="In-page jump links">
           <ul v-motion-slide-left class="mt-16 w-max">
             <li>
-              <a
-                class="group flex items-center py-3"
-                :class="{ active: currentSection == 'about' }"
-                href="#about"
-              >
+              <a class="group flex items-center py-3" :class="{ active: currentSection == 'about' }" href="#about">
                 <span
-                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"
-                ></span
-                ><span
-                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200"
-                  >About</span
-                >
+                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"></span><span
+                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200">About</span>
               </a>
             </li>
             <li>
-              <a
-                class="group flex items-center py-3"
-                :class="{ active: currentSection == 'experience' }"
-                href="#experience"
-              >
+              <a class="group flex items-center py-3" :class="{ active: currentSection == 'experience' }"
+                href="#experience">
                 <span
-                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"
-                ></span
-                ><span
-                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200"
-                  >Experience</span
-                >
+                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"></span><span
+                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200">Experience</span>
               </a>
             </li>
             <li>
-              <a
-                class="group flex items-center py-3"
-                :class="{ active: currentSection == 'projects' }"
-                href="#projects"
-              >
+              <a class="group flex items-center py-3" :class="{ active: currentSection == 'projects' }"
+                href="#projects">
                 <span
-                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"
-                ></span
-                ><span
-                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200"
-                  >Projects</span
-                >
+                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"></span><span
+                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200">Projects</span>
               </a>
             </li>
             <li>
-              <a
-                class="group flex items-center py-3"
-                :class="{ active: currentSection == 'blog' }"
-                href="#blog"
-              >
+              <a class="group flex items-center py-3" :class="{ active: currentSection == 'blog' }" href="#blog">
                 <span
-                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"
-                ></span
-                ><span
-                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200"
-                  >Blog</span
-                >
+                  class="nav-indicator mr-4 h-px w-8 bg-slate-600 transition-all group-hover:w-16 group-hover:bg-slate-200 group-focus-visible:w-16 group-focus-visible:bg-slate-200 motion-reduce:transition-none"></span><span
+                  class="nav-text text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-slate-200 group-focus-visible:text-slate-200">Blog</span>
               </a>
             </li>
           </ul>
         </nav>
       </div>
       <ul class="mt-8 flex items-center" aria-label="Social media">
-        <li v-motion-slide-bottom class="mr-5">
-          <SocialLink
-            title="Github"
-            url="https://github.com/zedjarvis"
-            icon="i-carbon-logo-github"
-          />
+        <li class="mr-5">
+          <SocialLink title="Github" url="https://github.com/zedjarvis" icon="i-carbon-logo-github" />
         </li>
-        <li v-motion-slide-bottom class="mr-5">
-          <SocialLink
-            title="Linkedin"
-            url="https://linkedin.com/in/cedrouseroll-omondi-44b119252"
-            icon="i-carbon-logo-linkedin"
-          />
+        <li class="mr-5">
+          <SocialLink title="Linkedin" url="https://linkedin.com/in/cedrouseroll-omondi-44b119252"
+            icon="i-carbon-logo-linkedin" />
         </li>
-        <li v-motion-slide-bottom class="mr-5">
-          <SocialLink
-            title="Twitter"
-            url="https://twitter.com/cedrouseR"
-            icon="i-carbon-logo-twitter"
-          />
+        <li class="mr-5">
+          <SocialLink title="Twitter" url="https://twitter.com/cedrouseR" icon="i-carbon-logo-twitter" />
         </li>
-        <li v-motion-slide-bottom class="mr-5">
-          <SocialLink
-            title="Email"
-            url="mailto:[email protected]"
-            icon="i-carbon-email"
-          />
+        <li class="mr-5">
+          <SocialLink title="Email" url="mailto:[email protected]" icon="i-carbon-email" />
         </li>
       </ul>
     </header>
 
     <!-- MAIN  -->
     <main id="content" ref="root" class="pt-24 lg:w-1/2 lg:py-24 font-space">
       <!-- ABOUT SECTION -->
-      <section
-        id="about"
-        class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
-        aria-label="About me"
-      >
+      <section id="about" class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24" aria-label="About me">
         <SectionHeader title="About" />
-        <About v-motion-pop />
+        <About />
       </section>
 
       <!-- <DesktopPC />  -->
 
       <!-- EXPERIENCE SECTION  -->
-      <section
-        id="experience"
-        class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
-        aria-label="Work experience"
-      >
+      <section id="experience" class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
+        aria-label="Work experience">
         <SectionHeader title="Experience" />
         <div>
           <ol class="group/list">
             <li v-for="(exp, i) in experiences" :key="i" class="mb-12">
-              <ExperienceCard
-                :start-date="exp.startDate"
-                :end-date="exp.endDate"
-                :title="exp.title"
-                :company="exp.company"
-                :url="exp.url"
-                :body="exp.body"
-                :links="exp.links"
-                :tech-stack="exp.techStack"
-              />
+              <ExperienceCard :start-date="exp.startDate" :end-date="exp.endDate" :title="exp.title"
+                :company="exp.company" :url="exp.url" :body="exp.body" :links="exp.links" :tech-stack="exp.techStack" />
             </li>
           </ol>
 
           <!-- SECTION LINK  -->
-          <a
-            class="inline-flex items-center font-medium leading-tight text-slate-200 group"
-            aria-label="View Full Project Archive"
-            href="/cedrouseroll_omondi_resume_full_stack_developer.pdf"
-            target="_blank"
-          >
+          <a class="inline-flex items-center font-medium leading-tight text-slate-200 group"
+            aria-label="View Full Project Archive" href="/cedrouseroll_omondi_resume_full_stack_developer.pdf"
+            target="_blank">
             <span>
               <span
-                class="border-b border-transparent pb-px transition group-hover:border-teal-300 motion-reduce:transition-none"
-              >
+                class="border-b border-transparent pb-px transition group-hover:border-teal-300 motion-reduce:transition-none">
                 View Full Résumé
               </span>
               <span class="whitespace-nowrap">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                   class="ml-1 inline-block h-4 w-4 shrink-0 -translate-y-px transition-transform group-hover:translate-x-2 group-focus-visible:translate-x-2 motion-reduce:transition-none"
-                  aria-hidden="true"
-                >
-                  <path
-                    fill-rule="evenodd"
+                  aria-hidden="true">
+                  <path fill-rule="evenodd"
                     d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
-                    clip-rule="evenodd"
-                  ></path>
+                    clip-rule="evenodd"></path>
                 </svg>
               </span>
             </span>
@@ -239,28 +160,14 @@ onMounted(() => {
       </section>
 
       <!-- PROJECTS SECTION  -->
-      <section
-        id="projects"
-        class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
-        aria-label="Selected projects"
-      >
+      <section id="projects" class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
+        aria-label="Selected projects">
         <SectionHeader title="Projects" />
         <div>
           <ul class="group/list">
-            <li
-              v-motion-pop-visible-once
-              v-for="(project, i) in projects"
-              :key="i"
-              class="mb-12"
-            >
-              <ProjectCard
-                :title="project.title"
-                :image="project.image"
-                :url="project.url"
-                :body="project.body"
-                :tech-stack="project.techStack"
-                :opensource="project.opensource"
-              />
+            <li v-motion-pop-visible-once v-for="(project, i) in projects" :key="i" class="mb-12">
+              <ProjectCard :title="project.title" :image="project.image" :url="project.url" :body="project.body"
+                :tech-stack="project.techStack" :opensource="project.opensource" />
             </li>
           </ul>
 
@@ -270,11 +177,7 @@ onMounted(() => {
       </section>
 
       <!-- BLOG SECTION -->
-      <section
-        id="blog"
-        class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24"
-        aria-label="Blog posts"
-      >
+      <section id="blog" class="mb-16 scroll-mt-16 md:mb-24 lg:mb-36 lg:scroll-mt-24" aria-label="Blog posts">
         <SectionHeader title="Blog" />
         <div>
           <ul class="group/list">