Update stuff

README.md

@@ -1,75 +0,0 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

assets/css/main.css

@@ -1,2 +1,18 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+@theme static {
+  --color-primary: var(--color-blue-500);
+
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+}

components/articles/about-author.vue

@@ -0,0 +1,53 @@
+<template>
+  <UContainer
+    class="flex flex-col md:gap-8 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
+    as="section"
+  >
+    <nuxt-img
+      placeholder
+      alt="Marios Antonoudiou"
+      src="mariosant.webp"
+      width="64"
+      height="64"
+      class="w-16 h-16 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300"
+    />
+
+    <p class="md:text-xl text-lg font-semibold">
+      <ULink
+        class="text-blue-500 dark:text-blue-300 hover:underline hover:underline-offset-4"
+        to="mailto:mariosant@sent.com"
+        >Marios Antonoudiou</ULink
+      >, independent software engineer.<br />
+      Building digital products that feel simple, even when they are not.
+    </p>
+    <p class="text-gray-800 dark:text-gray-200">
+      <span class="font-semibold">Software engineer</span> specializing at
+      <span class="font-semibold">Javascript & Typescript ecosystem</span>, with
+      a focus on digital products, enterprise apps and streaming data.
+      Well-versed in a wide range of technologies, especially on
+      <span class="font-semibold">frontends</span>.
+    </p>
+
+    <div class="flex gap-4 overflow-x-auto">
+      <UButton
+        color="primary"
+        variant="soft"
+        icon="mynaui:calendar"
+        target="_blank"
+        to="https://cal.com/mariosant/30min"
+      >
+        Arrange a call
+      </UButton>
+
+      <UButton
+        color="neutral"
+        icon="mynaui:envelope"
+        variant="soft"
+        target="_blank"
+        to="mailto:mariosant@sent.com"
+      >
+        Send a message
+      </UButton>
+    </div>
+  </UContainer>
+</template>

components/home/connect.vue

@@ -1,23 +1,24 @@
 <template>
-  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
+  <UContainer
+    class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
+    as="section"
+  >
     <div class="text-sm text-gray-500">Let's connect</div>
 
     <div class="flex gap-4 overflow-x-auto">
       <UButton
-        color="purple"
+        color="neutral"
-        icon="i-heroicons-arrow-right-circle"
+        icon="mynaui:calendar"
-        class="rounded-full"
         variant="soft"
         target="_blank"
-        to="https://mariosant.youcanbook.me/"
+        to="https://cal.com/mariosant/30min"
       >
         Calendar
       </UButton>
 
       <UButton
-        color="green"
+        color="neutral"
-        icon="i-heroicons-arrow-right-circle"
+        icon="mynaui:envelope"
-        class="rounded-full"
         variant="soft"
         target="_blank"
         to="mailto:mariosant@sent.com"
@@ -26,9 +27,8 @@
       </UButton>
 
       <UButton
-        color="orange"
+        color="neutral"
-        icon="i-heroicons-arrow-right-circle"
+        icon="mynaui:brand-github"
-        class="rounded-full"
         variant="soft"
         target="_blank"
         to="https://github.com/mariosant"
@@ -37,9 +37,8 @@
       </UButton>
 
       <UButton
-        color="blue"
+        color="neutral"
-        icon="i-heroicons-arrow-right-circle"
+        icon="mynaui:brand-linkedin"
-        class="rounded-full"
         variant="soft"
         target="_blank"
         to="https://www.linkedin.com/in/mariosant/"

components/home/introduction.vue

@@ -1,5 +1,8 @@
 <template>
-  <UContainer class="flex flex-col md:gap-12 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="header">
+  <UContainer
+    class="flex flex-col md:gap-12 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
+    as="header"
+  >
     <div class="flex items-center justify-between">
       <nuxt-img
         placeholder
@@ -41,5 +44,28 @@
       Well-versed in a wide range of technologies, especially on
       <span class="font-semibold">frontends</span>.
     </p>
+
+    <div class="flex gap-4 overflow-x-auto">
+      <UButton
+        size="xl"
+        color="primary"
+        icon="mynaui:calendar"
+        target="_blank"
+        to="https://cal.com/mariosant/30min"
+      >
+        Arrange a call
+      </UButton>
+
+      <UButton
+        size="xl"
+        color="neutral"
+        icon="mynaui:envelope"
+        variant="soft"
+        target="_blank"
+        to="mailto:mariosant@sent.com"
+      >
+        Send a message
+      </UButton>
+    </div>
   </UContainer>
 </template>

components/project.vue

@@ -24,7 +24,7 @@ const props = defineProps<Props>();
     <div class="grid row-span-3 gap-2">
       <div>
         <ULink
-          class="font-semibold hover:underline hover:underline-offset-4"
+          class="font-semibold hover:underline hover:underline-offset-4 !text-slate-900 dark:text-white"
           :to="props.url"
           target="_blank"
           >{{ props.title }}</ULink

package.json

@@ -26,6 +26,5 @@
     "better-sqlite3": "^12.2.0",
     "sharp": "^0.34.1",
     "tailwindcss": "^4.1.13"
-  },
+  }
-  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
 }

pages/articles/[...slug].vue

@@ -57,9 +57,19 @@ const { data: article } = useAsyncData(path, async () => {
     class="flex flex-col gap-3 prose dark:prose-invert !pt-0 max-w-3xl p-4 sm:p-6 lg:p-8"
     as="article"
   >
-    <ContentRenderer :value="article" />
+    <ContentRenderer :value="article" prose />
   </UContainer>
 
+  <UContainer
+    v-motion-fade
+    :delay="500"
+    class="flex flex-col gap-3 prose dark:prose-invert !pt-0 max-w-3xl p-4 sm:p-6 lg:p-8"
+  >
+    <hr class="border border-slate-100" />
+  </UContainer>
+
+  <ArticlesAboutAuthor v-motion-fade :delay="500" />
+
   <Footer v-motion-fade :delay="500" />
 </template>
 

pages/index.vue

@@ -11,8 +11,8 @@ useSeoMeta({
 
 <template>
   <HomeIntroduction v-motion-fade />
-  <HomeConnect v-motion-fade :delay="500" />
   <HomeBeenWorkingWith v-motion-fade :delay="500" />
   <HomePersonalProjects v-motion-fade :delay="500" />
+  <HomeConnect v-motion-fade :delay="500" />
   <Footer v-motion-fade :delay="500" />
 </template>

pnpm-workspace.yaml

@@ -1,7 +0,0 @@
-onlyBuiltDependencies:
-  - '@parcel/watcher'
-  - '@tailwindcss/oxide'
-  - better-sqlite3
-  - esbuild
-  - sharp
-  - vue-demi