@minch/bentolio 0.9.2 → 0.9.4

package/README.md

@@ -1,6 +1,6 @@
 # Bentolio
 
-A minimal portfolio template built with Nuxt 4, Tailwind CSS 4, and GSAP.
+A minimal portfolio template and Nuxt layer built with Nuxt 4, Tailwind CSS 4, and GSAP.
 
 All content and basic styling are configured via `app/app.config.ts`.
 
@@ -10,7 +10,7 @@ All content and basic styling are configured via `app/app.config.ts`.
 
 ## Features
 
-- **Nuxt 4**: Modern DX, serverless-friendly, and SSG by default
+- **Nuxt Layer**: Modern DX, serverless-friendly, and SSG by default
 - **Tailwind CSS 4**: Zero-config utility classes with CSS-first authoring
 - **GSAP animations**: Smooth entrance animations and micro‑interactions
 - **Dark Mode**: Toggle via `@nuxtjs/color-mode` (class strategy)
@@ -19,26 +19,25 @@ All content and basic styling are configured via `app/app.config.ts`.
 - **Static generation**: Pre‑rendered pages for easy deployment to any static host
 - **OG Image**: Automatically generated OG image via `nuxt-og-image`
 
-## Project Structure
+## Configure Your Portfolio
+
+To use as a template, you can simply clone and update the files to your liking.
 
+Alternatively, you can also use it as a Nuxt layer:
+
+```bash
+npm i -D @minch/bentolio
 ```
-app/
-  app.config.ts          # Portfolio data and style options (edit me)
-  app.vue                # Single-page portfolio content using app config
-  assets/css/main.css    # Tailwind entry + custom theme/utilities
-  components/            # UI components (Header, Footer, Social link, Theme toggle)
-  layouts/default.vue    # Layout + SEO meta + GSAP entrance animations
-  plugins/gsap.client.ts # Nuxt plugin providing `$gsap`
-  utils/types.ts         # Types for the app config
-public/
-  favicon.svg, logo.svg, profile.jpg, robots.txt
-nuxt.config.ts           # Nuxt configuration
-package.json             # Scripts and dependencies
+
+```ts
+export default defineNuxtConfig({
+  extends: ["@minch/bentolio"]
+});
 ```
 
-## Configure Your Portfolio
+Have a look at [.playground](/.playground/) to see how to set up as a layer.
 
-All site data lives in `app/app.config.ts` and is fully typed (see `app/utils/types.ts`). Edit the example values to your own:
+All page content lives in `app/app.config.ts` and is fully typed (see `app/utils/types.ts`). Edit the example values to your own:
 
 ```ts
 // app/app.config.ts (excerpt)
@@ -80,15 +79,17 @@ Supported social keys by default: `"X" | "LinkedIn" | "Bluesky" | "GitHub"`. To
 ### Assets
 
 - Replace `public/profile.jpg` with your own avatar.
-- Update `public/favicon.svg` and `public/logo.svg` if desired.
-- OG image is auto-generated using the `nuxt-og-image` module.
+- Update `public/favicon.svg`, `public/og-image.png`, `public/logo.svg` and `public/logo.svg` if desired.
+- OG image can be auto-generated using the `nuxt-og-image` module.
 
 ### Theming and Styles
 
-- Tailwind entry is `app/assets/css/main.css`.
+- Tailwind entry is `app/assets/css/tailwind.css`.
 - Primary color is set via CSS theme variable:
 
 ```css
+@import "@minch/bentolio/tailwind";
+
 /*  Change `--color-primary` to customize your accent. */
 @theme {
   --color-primary: var(--color-lime-500);
@@ -98,7 +99,7 @@ Supported social keys by default: `"X" | "LinkedIn" | "Bluesky" | "GitHub"`. To
 ### Animations
 
 - GSAP is provided via a Nuxt plugin (`$gsap`). See `app/layouts/default.vue` for entrance animations.
-- Elements with the `animate-element` utility class will animate in on page load. The initial state and transitions are defined in `app/assets/css/main.css`.
+- Elements with the `animate-element` utility class will animate in on page load. The initial state and transitions are defined in `app/assets/css/tailwind.css`.
 - The waving hand emoji animation is controlled via the `#wave` id in CSS.
 
 ## Deployment

package/app/app.vue

@@ -1,156 +1,93 @@
 <script setup lang="ts">
-  import type { SocialMediaKey } from "~";
+  import "@fontsource/space-grotesk/400.css";
+  import "@fontsource/space-grotesk/500.css";
+  import "@fontsource/space-grotesk/600.css";
+  import "@fontsource/space-grotesk/700.css";
+  import gsap from "gsap";
 
-  const { portfolio, style } = useAppConfig();
+  const { portfolio } = useAppConfig();
 
-  const {
-    name,
-    subtitle,
-    avatar,
-    company,
-    bio,
-    cta: { contact, location, link },
-    socials
-  } = portfolio;
+  const { name, subtitle, avatar, bio, customOgImage } = portfolio;
 
-  const { roundedItems } = style;
+  const { $gsap } = useNuxtApp();
 
-  const topFourSocials = Object.fromEntries(
-    Object.entries(socials).slice(0, 4)
-  );
+  const ctx = ref<gsap.Context | null>(null);
 
-  const numSocials = Object.entries(topFourSocials).length;
-  const socialLinkClass = {
-    "col-span-full lg:col-span-4 lg:row-span-2": numSocials === 1,
-    "col-span-6 lg:col-span-4": numSocials === 2,
-    "col-span-4 last:col-span-4 lg:col-span-2 lg:last:col-span-4":
-      numSocials === 3,
-    "col-span-3 lg:col-span-2": numSocials === 4
-  };
+  onMounted(() => {
+    ctx.value = $gsap.context(() => {
+      $gsap.fromTo(
+        ".animate-layout",
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: 0.75,
+          delay: 0.5,
+          ease: "elastic.out(0.5, 0.3)"
+        }
+      );
+      $gsap.fromTo(
+        ".animate-element",
+        { scale: 0.75, opacity: 0, y: 20 },
+        {
+          scale: 1,
+          opacity: 1,
+          y: 0,
+          duration: 0.15,
+          delay: 0.9,
+          ease: "elastic.out(0.5, 0.3)",
+          stagger: 0.1
+        }
+      );
+    });
+  });
 
-  defineOgImageComponent("SocialImage", {
-    name: name,
-    subtitle: subtitle,
-    avatar: avatar
+  onUnmounted(() => {
+    ctx.value && ctx.value.revert();
   });
-</script>
 
-<template>
-  <NuxtRouteAnnouncer />
-  <NuxtLayout>
-    <article
-      class="flex flex-col gap-4 *:grid *:grid-cols-12 *:gap-4 *:w-full *:*:min-h-16 *:*:py-4 *:*:px-6 sm:*:*:py-6 sm:*:*:px-10 *:*:border *:*:border-zinc-200 dark:*:*:border-zinc-700 *:*:bg-zinc-50/50 dark:*:*:bg-zinc-800/25 *:text-zinc-950 dark:*:text-zinc-300">
-      <!-- Hero -->
-      <div class="grid-rows-2">
-        <!-- Intro -->
-        <div
-          :class="[
-            'animate-element col-span-full lg:col-span-8 row-span-2',
-            { 'rounded-lg': roundedItems }
-          ]">
-          <img
-            v-if="avatar"
-            :src="avatar"
-            alt="My Profile Picture"
-            class="size-20 mb-4 mx-auto lg:mx-0 bg-transparent rounded-full ring ring-zinc-200 dark:ring-zinc-800 p-0.5" />
+  useHead({
+    bodyAttrs: {
+      class: "animate-layout opacity-0"
+    }
+  });
 
-          <div class="space-y-4 py-6 sm:pb-8">
-            <h1
-              class="text-2xl sm:text-3xl lg:text-4xl text-center lg:text-left font-bold *:inline-block">
-              Hi, I'm {{ name }}
-              <span id="wave">👋</span>
-            </h1>
-            <h2
-              class="text-center lg:text-left font-bold *:inline-block text-zinc-500 dark:text-primary text-xl sm:text-2xl lg:text-3xl">
-              <span>{{ subtitle }}</span
-              ><span v-if="company">&nbsp;@&nbsp;{{ company }}</span>
-            </h2>
-          </div>
-        </div>
+  useSeoMeta({
+    title: `${name} · ${subtitle}`,
+    description: bio.text,
+    ogTitle: `${name} · ${subtitle}`,
+    ogDescription: bio.text,
+    ogImage: customOgImage,
+    twitterImage: customOgImage,
+    twitterCard: "summary_large_image"
+  });
+
+  if (!customOgImage) {
+    defineOgImageComponent("SocialImage", {
+      name: name,
+      subtitle: subtitle,
+      avatar: avatar
+    });
+  }
+</script>
 
-        <!-- Social Media -->
-        <social-media-link
-          v-for="(item, key) in topFourSocials"
-          :key="key"
-          :to="item.profileUrl"
-          :name="key as SocialMediaKey"
-          :icon="item.socialMediaIcon"
-          :style="{
-            backgroundColor: item.socialMediaBgColor,
-            textColor: item.socialMediaTextColor,
-            borderColor: item.socialMediaBorderColor
-          }"
-          :class="[
-            'animate-element',
-            socialLinkClass,
-            { 'rounded-lg': roundedItems }
-          ]" />
-      </div>
+<template>
+  <div class="space-y-5 sm:space-y-10">
+    <app-header />
 
-      <!-- About -->
-      <div class="grid-rows-1">
-        <p
-          v-if="bio.html"
-          :class="[
-            'animate-element leading-relaxed col-span-full font-medium gap-4 py-6! sm:py-10! text-zinc-700 dark:text-zinc-300 text-lg sm:text-xl lg:text-2xl',
-            { 'rounded-lg': roundedItems }
-          ]"
-          v-html="bio.html"></p>
-        <p
-          v-else
-          :class="[
-            'animate-element leading-relaxed col-span-full font-medium gap-4 py-6! sm:py-10! text-zinc-700 dark:text-zinc-300 text-lg sm:text-xl lg:text-2xl',
-            { 'rounded-lg': roundedItems }
-          ]">
-          {{ bio.text }}
-        </p>
-      </div>
+    <main class="min-h-full">
+      <article
+        class="flex flex-col gap-4 *:grid *:grid-cols-12 *:gap-4 *:w-full *:*:min-h-16 *:*:py-4 *:*:px-6 sm:*:*:py-6 sm:*:*:px-10 *:*:border *:*:border-zinc-200 dark:*:*:border-zinc-700 *:*:bg-zinc-50/50 dark:*:*:bg-zinc-800/25 *:text-zinc-950 dark:*:text-zinc-300">
+        <!-- Hero -->
+        <app-hero />
 
-      <!-- Miscellany -->
-      <div
-        class="grid-rows-1 grid-cols-1! sm:grid-cols-[repeat(auto-fit,minmax(100px,1fr))]!">
-        <!-- Link -->
-        <nuxt-link
-          v-if="link"
-          :to="link.url"
-          :class="[
-            'animate-element flex flex-col items-center justify-center gap-y-2 focus-visible:global-focus hover:scale-105!',
-            { 'rounded-lg': roundedItems }
-          ]">
-          <Icon
-            name="ph:arrow-square-up-right-duotone"
-            class="text-3xl lg:text-4xl text-primary" />
-          <span class="text-center text-lg">
-            {{ link.label }}
-          </span>
-        </nuxt-link>
+        <!-- About -->
+        <app-about />
 
-        <!-- Location -->
-        <p
-          :class="[
-            'animate-element flex flex-col items-center justify-center gap-y-2',
-            { 'rounded-lg': roundedItems }
-          ]">
-          <Icon
-            name="ph:map-pin-duotone"
-            class="text-3xl lg:text-4xl text-primary" />
-          <span class="text-center text-lg"> {{ location }} </span>
-        </p>
+        <!-- Miscellany -->
+        <app-miscellany />
+      </article>
+    </main>
 
-        <!-- Contact -->
-        <p
-          :class="[
-            'animate-element flex flex-col items-center justify-center gap-y-2',
-            { 'rounded-lg': roundedItems }
-          ]">
-          <Icon
-            name="ph:chat-circle-text-duotone"
-            class="text-3xl lg:text-4xl text-primary" />
-          <span class="text-center text-lg">
-            {{ contact }}
-          </span>
-        </p>
-      </div>
-    </article>
-  </NuxtLayout>
+    <app-footer />
+  </div>
 </template>

package/app/assets/css/tailwind.css

@@ -0,0 +1,86 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+@source "../../**/*";
+
+@theme {
+  --color-primary: var(--color-lime-500);
+}
+
+@utility global-focus {
+  @apply outline-none ring-2 ring-offset-0 ring-primary/75;
+}
+
+@utility animate-element {
+  @apply transition-transform opacity-0;
+}
+
+* {
+  @apply box-border selection:bg-primary/50;
+}
+
+body {
+  font-family: "Space Grotesk", sans-serif;
+  word-wrap: break-word;
+  @apply w-full bg-white dark:bg-zinc-900;
+}
+
+#app {
+  @apply max-w-5xl min-w-xs w-full bg-white dark:bg-zinc-900 mx-auto break-words my-0 p-4 sm:p-6 md:p-12;
+}
+
+/* Animated Wave Emoji */
+#wave {
+  @apply inline-block ml-1 origin-[70%_70%] animate-[10s_ease_2s_infinite_wave] hover:animate-[1.5s_ease_hoverwave];
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+  2.5%,
+  7.5% {
+    transform: rotate(14deg);
+  }
+  5% {
+    transform: rotate(-8deg);
+  }
+  10% {
+    transform: rotate(-4deg);
+  }
+  12.5% {
+    transform: rotate(10deg);
+  }
+  15% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes hoverwave {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(14deg);
+  }
+  20% {
+    transform: rotate(-8deg);
+  }
+  30% {
+    transform: rotate(14deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+  60% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}

package/app/components/section/app-about.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+  const { portfolio, style } = useAppConfig();
+
+  const { bio } = portfolio;
+
+  const { roundedItems } = style;
+</script>
+
+<template>
+  <div class="grid-rows-1">
+    <p
+      v-if="bio.html"
+      :class="[
+        'animate-element leading-relaxed col-span-full font-medium gap-4 py-6! sm:py-10! text-zinc-700 dark:text-zinc-300 text-lg sm:text-xl lg:text-2xl',
+        { 'rounded-lg': roundedItems }
+      ]"
+      v-html="bio.html"></p>
+    <p
+      v-else
+      :class="[
+        'animate-element leading-relaxed col-span-full font-medium gap-4 py-6! sm:py-10! text-zinc-700 dark:text-zinc-300 text-lg sm:text-xl lg:text-2xl',
+        { 'rounded-lg': roundedItems }
+      ]">
+      {{ bio.text }}
+    </p>
+  </div>
+</template>

package/app/components/section/app-hero.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+  import type { SocialMediaKey } from "~";
+
+  const { portfolio, style } = useAppConfig();
+
+  const { name, subtitle, avatar, company, socials } = portfolio;
+
+  const { roundedItems } = style;
+
+  const topFourSocials = Object.fromEntries(
+    Object.entries(socials).slice(0, 4)
+  );
+
+  const numSocials = Object.entries(topFourSocials).length;
+  const socialLinkClass = {
+    "col-span-full lg:col-span-4 lg:row-span-2": numSocials === 1,
+    "col-span-6 lg:col-span-4": numSocials === 2,
+    "col-span-4 last:col-span-4 lg:col-span-2 lg:last:col-span-4":
+      numSocials === 3,
+    "col-span-3 lg:col-span-2": numSocials === 4
+  };
+</script>
+
+<template>
+  <div class="grid-rows-2">
+    <!-- Intro -->
+    <div
+      :class="[
+        'animate-element col-span-full lg:col-span-8 row-span-2',
+        { 'rounded-lg': roundedItems }
+      ]">
+      <img
+        v-if="avatar"
+        :src="avatar"
+        alt="My Profile Picture"
+        class="size-20 mb-4 mx-auto lg:mx-0 bg-transparent rounded-full ring ring-zinc-200 dark:ring-zinc-800 p-0.5" />
+
+      <div class="space-y-4 py-6 sm:pb-8">
+        <h1
+          class="text-2xl sm:text-3xl lg:text-4xl text-center lg:text-left font-bold *:inline-block">
+          Hi, I'm {{ name }}
+          <span id="wave">👋</span>
+        </h1>
+        <h2
+          class="text-center lg:text-left font-bold *:inline-block text-zinc-500 dark:text-primary text-xl sm:text-2xl lg:text-3xl">
+          <span>{{ subtitle }}</span
+          ><span v-if="company">&nbsp;@&nbsp;{{ company }}</span>
+        </h2>
+      </div>
+    </div>
+
+    <!-- Social Media -->
+    <template v-for="(item, key) in topFourSocials" :key="key">
+      <social-media-link
+        v-if="item"
+        :to="item.profileUrl"
+        :name="key as SocialMediaKey"
+        :icon="item.socialMediaIcon"
+        :style="{
+          backgroundColor: item.socialMediaBgColor,
+          textColor: item.socialMediaTextColor,
+          borderColor: item.socialMediaBorderColor
+        }"
+        :class="[
+          'animate-element',
+          socialLinkClass,
+          { 'rounded-lg': roundedItems }
+        ]" />
+    </template>
+  </div>
+</template>

package/app/components/section/app-miscellany.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+  const { portfolio, style } = useAppConfig();
+
+  const {
+    cta: { contact, location, link }
+  } = portfolio;
+
+  const { roundedItems } = style;
+</script>
+
+<template>
+  <div
+    class="grid-rows-1 grid-cols-1! sm:grid-cols-[repeat(auto-fit,minmax(100px,1fr))]!">
+    <!-- Link -->
+    <nuxt-link
+      v-if="link"
+      :to="link.url"
+      :class="[
+        'animate-element flex flex-col items-center justify-center gap-y-2 focus-visible:global-focus hover:scale-105!',
+        { 'rounded-lg': roundedItems }
+      ]">
+      <Icon
+        name="ph:arrow-square-up-right-duotone"
+        class="text-3xl lg:text-4xl text-primary" />
+      <span class="text-center text-lg">
+        {{ link.label }}
+      </span>
+    </nuxt-link>
+
+    <!-- Location -->
+    <p
+      :class="[
+        'animate-element flex flex-col items-center justify-center gap-y-2',
+        { 'rounded-lg': roundedItems }
+      ]">
+      <Icon
+        name="ph:map-pin-duotone"
+        class="text-3xl lg:text-4xl text-primary" />
+      <span class="text-center text-lg"> {{ location }} </span>
+    </p>
+
+    <!-- Contact -->
+    <p
+      :class="[
+        'animate-element flex flex-col items-center justify-center gap-y-2',
+        { 'rounded-lg': roundedItems }
+      ]">
+      <Icon
+        name="ph:chat-circle-text-duotone"
+        class="text-3xl lg:text-4xl text-primary" />
+      <span class="text-center text-lg">
+        {{ contact }}
+      </span>
+    </p>
+  </div>
+</template>

package/app/components/theme-toggle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  const colorMode = useColorMode();
+  const { style } = useAppConfig();
+
+  const { roundedItems } = style;
+
+  const onClick = () =>
+    colorMode.value === "light"
+      ? (colorMode.preference = "dark")
+      : (colorMode.preference = "light");
+</script>
+
+<template>
+  <button
+    aria-label="Color Mode"
+    :class="[
+      'w-10 h-10 flex items-center justify-center text-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50/50 dark:bg-zinc-800/25 hover:bg-zinc-200 dark:hover:bg-zinc-700 *:text-zinc-950 dark:*:text-zinc-300 focus-visible:global-focus',
+      { 'rounded-lg': roundedItems }
+    ]"
+    @click="onClick">
+    <ColorScheme placeholder="...">
+      <template v-if="colorMode.value === 'dark'">
+        <Icon name="ph:sun-duotone" class="w-5 h-5" />
+        <span class="sr-only">Dark Mode</span>
+      </template>
+      <template v-else>
+        <Icon name="ph:moon-duotone" class="w-5 h-5" />
+        <span class="sr-only">Light Mode</span>
+      </template>
+    </ColorScheme>
+  </button>
+</template>

package/app/utils/types.ts

@@ -1,42 +1,43 @@
 export type SocialMediaKey = "X" | "LinkedIn" | "Bluesky" | "GitHub";
 
 export interface SocialMediaValue {
-	socialMediaIcon: string;
-	socialMediaBgColor: string;
-	socialMediaBorderColor: string;
-	socialMediaTextColor: string;
-	profileUrl: string;
+  socialMediaIcon: string;
+  socialMediaBgColor: string;
+  socialMediaBorderColor: string;
+  socialMediaTextColor: string;
+  profileUrl: string;
 }
 
 export interface Portfolio {
-	name: string;
-	subtitle: string;
-	avatar?: string;
-	company?: string;
-	socials: Partial<Record<SocialMediaKey, SocialMediaValue>>;
-	bio: {
-		html?: string;
-		text: string;
-	};
-	cta: {
-		contact?: string;
-		location?: string;
-		link?: { url: string; label: string };
-	};
+  name: string;
+  subtitle: string;
+  avatar?: string;
+  customOgImage?: string;
+  company?: string;
+  socials: Partial<Record<SocialMediaKey, SocialMediaValue>>;
+  bio: {
+    html?: string;
+    text: string;
+  };
+  cta: {
+    contact?: string;
+    location?: string;
+    link?: { url: string; label: string };
+  };
 }
 
 export interface Style {
-	roundedItems: boolean;
+  roundedItems: boolean;
 }
 
 declare module "nuxt/schema" {
-	interface AppConfigInput {
-		portfolio: Portfolio;
-		style?: Style;
-	}
+  interface AppConfigInput {
+    portfolio: Portfolio;
+    style?: Style;
+  }
 
-	interface AppConfig {
-		portfolio: Portfolio;
-		style?: Style;
-	}
+  interface AppConfig {
+    portfolio: Portfolio;
+    style?: Style;
+  }
 }

package/eslint.config.mjs

@@ -6,6 +6,7 @@ export default withNuxt(
   {
     rules: {
       "vue/html-self-closing": "off",
+      "vue/multi-word-component-names": "off"
     }
   }
 )

package/nuxt.config.ts

@@ -19,6 +19,13 @@ export default defineNuxtConfig({
     transpile: ["gsap"]
   },
 
+  components: [
+    {
+      path: join(currentDir, "./app/components"),
+      pathPrefix: false
+    }
+  ],
+
   colorMode: { classSuffix: "" },
 
   compatibilityDate: "2025-05-15",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minch/bentolio",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "A minimal portfolio template and layer built with Nuxt 4, Tailwind CSS 4, and GSAP.",
   "type": "module",
   "repository": {
@@ -52,10 +52,11 @@
     "vue-router": "^4.5.1"
   },
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "dev": "nuxt dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   }
 }

package/app/app.config.ts

@@ -1,53 +0,0 @@
-export default defineAppConfig({
-	style: {
-		roundedItems: false,
-	},
-	portfolio: {
-		name: "Dawit",
-		subtitle: "I Craft Delightful Web Apps",
-		// company: "[COMPANY]",
-		avatar: "/profile.jpg",
-		bio: {
-			html: "I'm a Full-Stack Problem-Solver specializing in <span class='font-bold text-primary'>Vue</span>, <span class='font-bold text-primary'>Nuxt</span>, <span class='font-bold text-primary'>Tailwind CSS</span>, and <span class='font-bold text-primary'>Node</span>. I sometimes write articles on various software development topics. I'm also a hobbyist photographer.",
-			text: "I'm a Full-Stack Problem-Solver Specializing in Vue, Nuxt, Tailwind CSS and Node.js. I Sometimes Write Articles on Various Web Dev Topics. I'm Also a Hobbyist Photographer.",
-		},
-		socials: {
-			Bluesky: {
-				socialMediaIcon: "simple-icons:bluesky",
-				profileUrl: "https://bsky.app/profile/minch.dev",
-				socialMediaBgColor: "bg-blue-500!",
-				socialMediaBorderColor: "border-blue-500!",
-				socialMediaTextColor: "text-white!",
-			},
-			GitHub: {
-				socialMediaIcon: "simple-icons:github",
-				profileUrl: "https://x.com/oneminch",
-				socialMediaBgColor: "bg-black!",
-				socialMediaBorderColor: "border-black!",
-				socialMediaTextColor: "text-white!",
-			},
-			X: {
-				socialMediaIcon: "simple-icons:x",
-				profileUrl: "https://x.com/oneminch",
-				socialMediaBgColor: "bg-black!",
-				socialMediaBorderColor: "border-black!",
-				socialMediaTextColor: "text-white!",
-			},
-			LinkedIn: {
-				socialMediaIcon: "simple-icons:linkedin",
-				profileUrl: "https://linkedin.com/in/oneminch",
-				socialMediaBgColor: "bg-blue-600!",
-				socialMediaBorderColor: "border-blue-600!",
-				socialMediaTextColor: "text-white!",
-			},
-		},
-		cta: {
-			contact: "[firstname]@example.com",
-			location: "Planet Earth",
-			link: {
-				url: "https://github.com/oneminch/Bentolio",
-				label: "Source Code",
-			},
-		},
-	},
-});

package/app/assets/css/main.css

@@ -1,85 +0,0 @@
-@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-	--color-primary: var(--color-lime-500);
-}
-
-@utility global-focus {
-	@apply outline-none ring-2 ring-offset-0 ring-primary/75;
-}
-
-@utility animate-element {
-	@apply transition-transform opacity-0;
-}
-
-* {
-	@apply box-border selection:bg-primary/50;
-}
-
-body {
-	font-family: "Space Grotesk", sans-serif;
-	word-wrap: break-word;
-	@apply w-full bg-white dark:bg-zinc-900;
-}
-
-#app {
-	@apply max-w-5xl min-w-xs w-full bg-white dark:bg-zinc-900 mx-auto break-words my-0 p-4 sm:p-6 md:p-12;
-}
-
-/* Animated Wave Emoji */
-#wave {
-	@apply inline-block ml-1 origin-[70%_70%] animate-[10s_ease_2s_infinite_wave] hover:animate-[1.5s_ease_hoverwave];
-}
-
-@keyframes wave {
-	0% {
-		transform: rotate(0deg);
-	}
-	2.5%,
-	7.5% {
-		transform: rotate(14deg);
-	}
-	5% {
-		transform: rotate(-8deg);
-	}
-	10% {
-		transform: rotate(-4deg);
-	}
-	12.5% {
-		transform: rotate(10deg);
-	}
-	15% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}
-
-@keyframes hoverwave {
-	0% {
-		transform: rotate(0deg);
-	}
-	10% {
-		transform: rotate(14deg);
-	}
-	20% {
-		transform: rotate(-8deg);
-	}
-	30% {
-		transform: rotate(14deg);
-	}
-	40% {
-		transform: rotate(-4deg);
-	}
-	50% {
-		transform: rotate(10deg);
-	}
-	60% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}

package/app/components/ThemeToggle.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const colorMode = useColorMode();
-const onClick = () =>
-	colorMode.value === "light"
-		? (colorMode.preference = "dark")
-		: (colorMode.preference = "light");
-</script>
-
-<template>
-	<button
-		aria-label="Color Mode"
-		class="w-10 h-10 flex items-center justify-center text-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50/50 dark:bg-zinc-800/25 hover:bg-zinc-200 dark:hover:bg-zinc-700 *:text-zinc-950 dark:*:text-zinc-300 focus-visible:global-focus"
-		@click="onClick"
-	>
-		<ColorScheme placeholder="...">
-			<template v-if="colorMode.value === 'dark'">
-				<Icon name="ph:sun-duotone" class="w-5 h-5" />
-				<span class="sr-only">Dark Mode</span>
-			</template>
-			<template v-else>
-				<Icon name="ph:moon-duotone" class="w-5 h-5" />
-				<span class="sr-only">Light Mode</span>
-			</template>
-		</ColorScheme>
-	</button>
-</template>

package/app/layouts/default.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import "@fontsource/space-grotesk/400.css";
-import "@fontsource/space-grotesk/500.css";
-import "@fontsource/space-grotesk/600.css";
-import "@fontsource/space-grotesk/700.css";
-import gsap from "gsap";
-
-const { portfolio } = useAppConfig();
-
-const { name, subtitle, bio } = portfolio;
-
-const { $gsap } = useNuxtApp();
-
-const ctx = ref<gsap.Context | null>(null);
-
-onMounted(() => {
-	ctx.value = $gsap.context(() => {
-		$gsap.fromTo(
-			".animate-layout",
-			{ opacity: 0 },
-			{
-				opacity: 1,
-				duration: 0.75,
-				delay: 0.5,
-				ease: "elastic.out(0.5, 0.3)",
-			}
-		);
-		$gsap.fromTo(
-			".animate-element",
-			{ scale: 0.75, opacity: 0, y: 20 },
-			{
-				scale: 1,
-				opacity: 1,
-				y: 0,
-				duration: 0.15,
-				delay: 0.9,
-				ease: "elastic.out(0.5, 0.3)",
-				stagger: 0.1,
-			}
-		);
-	});
-});
-
-onUnmounted(() => {
-	ctx.value && ctx.value.revert();
-});
-
-useHead({
-	bodyAttrs: {
-		class: "animate-layout opacity-0",
-	},
-});
-
-useSeoMeta({
-	title: `${name} · ${subtitle}`,
-	description: bio.text,
-	ogTitle: `${name} · ${subtitle}`,
-	ogDescription: bio.text,
-	twitterCard: "summary_large_image",
-});
-</script>
-
-<template>
-	<div class="space-y-5 sm:space-y-10">
-		<app-header />
-
-		<main class="min-h-full">
-			<slot />
-		</main>
-
-		<app-footer />
-	</div>
-</template>

package/public/favicon.svg

@@ -1,6 +0,0 @@
-<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M181 0H75C33.5786 0 0 33.5786 0 75V181C0 222.421 33.5786 256 75 256H181C222.421 256 256 222.421 256 181V75C256 33.5786 222.421 0 181 0Z" fill="#020617"/>
-<rect x="62" y="63" width="58" height="131" rx="20" fill="#D9D9D9"/>
-<rect x="135" y="63" width="58" height="58" rx="20" fill="#D9D9D9"/>
-<rect x="135" y="136" width="58" height="58" rx="20" fill="#D9D9D9"/>
-</svg>

package/public/logo.svg

@@ -1,6 +0,0 @@
-<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M181 0H75C33.5786 0 0 33.5786 0 75V181C0 222.421 33.5786 256 75 256H181C222.421 256 256 222.421 256 181V75C256 33.5786 222.421 0 181 0Z" fill="#020617"/>
-<rect x="62" y="63" width="58" height="131" rx="20" fill="#D9D9D9"/>
-<rect x="135" y="63" width="58" height="58" rx="20" fill="#D9D9D9"/>
-<rect x="135" y="136" width="58" height="58" rx="20" fill="#D9D9D9"/>
-</svg>