Upgrade nuxt & nuxt-ui to latest

.npmrc

@@ -1 +0,0 @@
-shamefullyHoist=true

assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

components/footer.vue

@@ -3,7 +3,7 @@ const currentYear = new Date().getFullYear();
 </script>
 
 <template>
-  <UContainer class="flex flex-col gap-5" as="footer">
+  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl items-center justify-center" as="footer">
     <div class="text-sm text-gray-400">
       © Marios Antonoudiou {{ currentYear }} - 🏛️ Athens, Greece
     </div>

components/home/been-working-with.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" 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">Been working with</div>
     <PreviousRole
       company="Lateralus Ventures"

components/home/connect.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" 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">

components/home/introduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col md:gap-12 gap-5" 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
@@ -7,7 +7,7 @@
         src="mariosant.webp"
         width="64"
         height="64"
-        class="w-16 h-16 rounded-full border dark:border-gray-800 dark:bg-slate-300"
+        class="w-16 h-16 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300"
       />
 
       <div class="flex gap-3 items-center justify-end">

components/home/personal-projects.vue

@@ -1,5 +1,5 @@
 <template>
-    <UContainer class="flex flex-col gap-5" 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">Personal projects</div>
 
         <div class="grid grid-cols-1 gap-5 md:grid-cols-3">

components/home/recent-posts.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" as="section">
+  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
     <ULink
       class="text-sm text-gray-500 flex flex-row gap-1 items-center group"
       to="/articles"

components/project.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>();
 
 <template>
   <div
-    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-600"
+    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:border-gray-200 md:p-4 md:dark:border-slate-600"
   >
     <ULink :to="props.url" target="_blank">
       <NuxtImg

components/top-nav.vue

@@ -42,17 +42,17 @@ watchEffect(() => {
 <template>
   <div
     ref="target"
-    class="border-b dark:border-none dark:border-b-slate-600 top-0 bg-white z-10 dark:bg-slate-800 bg-opacity-85 dark:bg-opacity-90 backdrop-blur-sm sticky"
+    class="border-b border-b-gray-200 dark:border-none dark:border-b-slate-600 top-0 bg-white z-10 dark:bg-slate-800 bg-opacity-85 dark:bg-opacity-90 backdrop-blur-sm sticky"
   >
-    <UContainer class="grid grid-cols-2 items-center gap-3 !py-2" as="nav">
+    <UContainer class="grid grid-cols-2 items-center gap-3 !py-2 max-w-3xl" as="nav">
       <ULink to="/" class="flex gap-3 items-center">
         <nuxt-img
           placeholder
           alt="Marios Antonoudiou"
           src="mariosant.webp"
-          class="w-10 h-10 rounded-full border dark:border-gray-800 dark:bg-slate-300 block"
+          class="w-10 h-10 rounded-full border border-gray-200  dark:border-gray-800 dark:bg-slate-300 block"
         />
-        <div class="font-bold">Marios Antonoudiou</div>
+        <div class="font-bold text-slate-800 dark:text-white">Marios Antonoudiou</div>
       </ULink>
       <div
         class="flex gap-3 items-center justify-end text-slate-600 dark:text-slate-400"

content/services/from-click-to-customer.md

@@ -0,0 +1,36 @@
+---
+title: From Click to Customer
+coverImage: https://www.livechat.com/tour/chats--hero_huff715b5b55884afe403ac6f300d757d4_241826_1856x0_resize_q75_h2_catmullrom_3.67a4d4e2301f60ac241dac3fef824ccf731078d93cb323c7d84e75d389670fa1.webp
+---
+
+Most websites attract visitors but struggle to turn them into paying customers. People browse, they click, they even add to cart - but somewhere along the way, they drop off. The result? Lost sales, without clear answers.
+
+**From Click to Customer** is a service that helps you uncover exactly where and why this happens.
+
+### How It Works
+
+1. **Event Tracking Setup**
+    I install PostHog across your website or ecommerce store and track every key action (page views, clicks, forms, cart events, purchases).
+2. **Journey Mapping**
+    We’ll see the real paths your visitors take, where they flow, where they drop, and what stops them from buying.
+3. **Insights & Dashboards**
+	 I turn raw data into simple dashboards and reports, so you always know what’s working, what isn’t, and where to focus.
+
+### What You Get
+
+- A clear view of your customer journey
+- Pinpointed conversion bottlenecks
+- Actionable insights to increase sales
+- No more guesswork, just data-backed answers
+
+### Ready to Find Out Why They Don’t Convert?
+
+Every business is different. The best way to uncover why your customers aren’t buying is to take a closer look together.
+
+If you’d like, we can start with a short call where I’ll:
+
+- Learn about your business and your goals
+- Review your current website setup
+- Share first impressions on where conversions might be dropping
+
+👉 **[Schedule a Call](#)**

content/services/livechat.md

@@ -1,26 +0,0 @@
----
-title: LiveChat custom development
-coverImage: https://www.livechat.com/tour/chats--hero_huff715b5b55884afe403ac6f300d757d4_241826_1856x0_resize_q75_h2_catmullrom_3.67a4d4e2301f60ac241dac3fef824ccf731078d93cb323c7d84e75d389670fa1.webp
----
-
-Testing stands as a formidable pillar, ensuring the reliability and stability of applications. As developers, the choices we make regarding testing methodologies can significantly impact the quality of our code. In this exploration of the differences between unit and integration tests in frontend development, we emphasize that even a modest amount of testing is better than none at all.
-
-## Complex Dependencies in Frontend Components
-
-Frontend components often have intricate dependencies, ranging from external APIs to state management libraries. Unit testing, which aims to isolate and evaluate individual units of code in isolation, can be challenging in this context. Complex dependencies may require extensive mocking, making unit tests harder to write and maintain.
-
-## Simulating Real-world Scenarios with Integration Testing
-
-Integration testing steps in to address the limitations of unit testing in the frontend realm. By testing the collaboration between various components and services, integration tests provide a more holistic view of an application's behavior. This becomes crucial in simulating real-world scenarios, including slow network conditions and delayed user responses, that might not be adequately captured in unit tests.
-
-## The Need for Speed: Unit Tests vs. Integration Tests
-
-When it comes to speed, unit tests take the lead. The isolation of smaller units like utility functions and state management for testing means that unit tests can be executed swiftly. This quick turnaround time is crucial in a development environment where feedback loops need to be fast. For smaller units, where dependencies can be effectively managed, unit tests are the preferred choice.
-
-## Running Unit Tests on a Headless Browser
-
-For frontend unit tests, running them on a headless browser provides a more realistic environment compared to a Node.js simulation. A headless browser environment closely mirrors the conditions a user's browser experiences, ensuring that the tests are more representative of real-world scenarios. This approach contributes to the reliability of unit tests and enhances their value in ensuring frontend functionality.
-
-## Conclusion
-
-In the dynamic landscape of frontend development, the choice between unit and integration testing is not an either-or proposition but rather a strategic decision based on the specific needs of the project. While unit tests excel in speed and precision for smaller units, integration tests provide a more comprehensive evaluation of an application's behavior in complex scenarios. Striking the right balance between these testing methodologies is key to delivering a frontend that not only functions as intended but also performs robustly in diverse real-world conditions.

layouts/content.vue

@@ -5,7 +5,7 @@ useHead({
   },
   bodyAttrs: {
     class:
-      "dark:bg-slate-900 selection:bg-blue-100 dark:selection:bg-slate-600",
+      "dark:bg-slate-900 selection:bg-blue-100 dark:selection:bg-slate-600 text-slate-900 dark:text-white",
   },
 });
 </script>

layouts/default.vue

@@ -5,7 +5,7 @@ useHead({
   },
   bodyAttrs: {
     class:
-      "dark:bg-slate-900 selection:bg-blue-100 dark:selection:bg-slate-600",
+      "dark:bg-slate-900 selection:bg-blue-100 dark:selection:bg-slate-600 text-slate-900 dark:text-white",
   },
 });
 </script>

nuxt.config.ts

@@ -17,5 +17,7 @@ export default defineNuxtConfig({
     },
   },
 
+  css: ["~/assets/css/main.css"],
+
   compatibilityDate: "2025-03-15",
 });

package.json

@@ -12,17 +12,20 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/image": "latest",
-    "nuxt": "^3.16.2",
+    "nuxt": "^4.1.2",
-    "vue": "^3.3.8",
+    "vue": "^3.5.21",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4"
   },
   "dependencies": {
-    "@nuxt/content": "^3.5.1",
+    "@nuxt/content": "^3.7.1",
-    "@nuxt/ui": "^2.11.0",
+    "@nuxt/ui": "4.0.0-alpha.2",
-    "@nuxtjs/robots": "^3.0.0",
+    "@nuxtjs/robots": "^5.5.5",
-    "@vueuse/core": "^10.7.0",
+    "@vueuse/core": "^13.9.0",
     "@vueuse/motion": "^3.0.3",
-    "@vueuse/nuxt": "^13.1.0",
+    "@vueuse/nuxt": "^13.9.0",
-    "sharp": "^0.34.1"
+    "better-sqlite3": "^12.2.0",
-  }
+    "sharp": "^0.34.1",
+    "tailwindcss": "^4.1.13"
+  },
+  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
 }

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

@@ -17,17 +17,17 @@ const { data: article } = useAsyncData(path, async () => {
 <template>
   <UContainer
     v-motion-fade
-    class="flex flex-col gap-3 prose dark:prose-invert"
+    class="flex flex-col gap-3 prose max-w-3xl dark:prose-invert p-4 sm:p-6 lg:p-8"
     as="article"
   >
     <div class="text-sm text-slate-500">
       {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
     </div>
-    <h1>{{ article.title }}</h1>
+    <h1 class="text-3xl md:text-4xl font-bold">{{ article.title }}</h1>
   </UContainer>
 
   <UContainer
-    class="hidden md:block"
+    class="hidden md:block max-w-3xl p-4 sm:p-6 lg:p-8"
     as="figure"
     v-if="article.coverImage?.url"
     v-motion-fade
@@ -45,7 +45,7 @@ const { data: article } = useAsyncData(path, async () => {
       v-if="article.coverImage.authorUrl"
       :to="article.coverImage.authorUrl"
       target="_blank"
-      class="text-xs text-slate-500 italic font-serif hover:underline"
+      class="text-xs text-slate-500 italic font-serif hover:underline p-4 sm:p-6 lg:p-8"
     >
       Photo by {{ article.coverImage.author }}
     </ULink>
@@ -54,7 +54,7 @@ const { data: article } = useAsyncData(path, async () => {
   <UContainer
     v-motion-fade
     :delay="500"
-    class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
+    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" />

pages/articles/index.vue

@@ -11,14 +11,14 @@ const articles = useAsyncData("articles", async () => {
 </script>
 
 <template>
-  <UContainer v-motion-fade class="prose dark:prose-invert">
+  <UContainer v-motion-fade class="prose dark:prose-invert p-4 sm:p-6 lg:p-8 max-w-3xl">
-    <h1>Articles</h1>
+    <h1 class="font-bold text-3xl md:text-4xl">Articles</h1>
   </UContainer>
 
-  <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
+  <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8 max-w-3xl p-4 sm:p-6 lg:p-8" as="section">
     <UCard
       class="col-span-12 md:col-span-6"
-      :ui="{ body: { padding: '' } }"
+      :ui="{ body: '!p-0' }"
       v-for="article in articles.data.value"
     >
       <div class="grid gap-4 pb-4 md:pb-6">
@@ -39,7 +39,7 @@ const articles = useAsyncData("articles", async () => {
         </div>
 
         <div class="w-full px-4 md:px-6">
-          <UButton variant="soft" color="gray" :to="article.path"
+          <UButton variant="soft" color="neutral" :to="article.path"
             >Read article</UButton
           >
         </div>

pnpm-workspace.yaml

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