@minch/bentolio 0.9.1

package/.env.example

@@ -0,0 +1,3 @@
+# For OG Image Generator
+NUXT_SITE_URL=https://bento.minch.dev
+NUXT_SITE_NAME='Bentolio'

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dawit Urgessa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# Bentolio
+
+A minimal portfolio template built with Nuxt 4, Tailwind CSS 4, and GSAP.
+
+All content and basic styling are configured via `app/app.config.ts`.
+
+![Screenshot](/public/screenshot.png)
+
+> For the original Astro version (not actively updated), check the [`astro`](https://github.com/oneminch/Bentolio/tree/astro) branch.
+
+## Features
+
+- **Nuxt 4**: 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)
+- **Icons**: `@nuxt/icon` with Iconify collections (e.g., `ph`, `simple-icons`)
+- **Type‑safe app config**: Autocompletion and validation for your site data
+- **Static generation**: Pre‑rendered pages for easy deployment to any static host
+- **OG Image**: Automatically generated OG image via `nuxt-og-image`
+
+## Project Structure
+
+```
+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
+```
+
+## Configure Your Portfolio
+
+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:
+
+```ts
+// app/app.config.ts (excerpt)
+export default defineAppConfig({
+  style: {
+    roundedItems: false
+  },
+  portfolio: {
+    name: "Your Name",
+    subtitle: "What you do",
+    // company: "[COMPANY]",
+    avatar: "/profile.jpg",
+    bio: {
+      // Prefer html for rich content; fallback to text if html is empty
+      html: "I'm a <span class='font-bold text-primary'>Full‑Stack</span> Dev...",
+      text: "I'm a Full‑Stack Dev..."
+    },
+    socials: {
+      GitHub: {
+        socialMediaIcon: "simple-icons:github",
+        profileUrl: "https://github.com/your-handle",
+        socialMediaBgColor: "bg-black!",
+        socialMediaBorderColor: "border-black!",
+        socialMediaTextColor: "text-white!"
+      }
+      // X, LinkedIn, Bluesky are also supported
+    },
+    cta: {
+      contact: "you@example.com",
+      location: "Your City",
+      link: { url: "https://your-site.com", label: "Portfolio" }
+    }
+  }
+});
+```
+
+Supported social keys by default: `"X" | "LinkedIn" | "Bluesky" | "GitHub"`. To add more networks, extend the `SocialMediaKey` union and the `socials` mapping in `app/utils/types.ts`. The layout is designed to only display 4 social links by default.
+
+### 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.
+
+### Theming and Styles
+
+- Tailwind entry is `app/assets/css/main.css`.
+- Primary color is set via CSS theme variable:
+
+```css
+/*  Change `--color-primary` to customize your accent. */
+@theme {
+  --color-primary: var(--color-lime-500);
+}
+```
+
+### 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`.
+- The waving hand emoji animation is controlled via the `#wave` id in CSS.
+
+## Deployment
+
+This template is configured for static generation via `routeRules` in `nuxt.config.ts`.
+
+## Credit
+
+The design is inspired by [@TomIsLoading](https://twitter.com/TomIsLoading)'s Bento Grid from [Hover.dev](https://hover.dev).

package/app/app.config.ts

@@ -0,0 +1,53 @@
+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/app.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+  import type { SocialMediaKey } from "~";
+
+  const { portfolio, style } = useAppConfig();
+
+  const {
+    name,
+    subtitle,
+    avatar,
+    company,
+    bio,
+    cta: { contact, location, link },
+    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
+  };
+
+  defineOgImageComponent("SocialImage", {
+    name: name,
+    subtitle: subtitle,
+    avatar: avatar
+  });
+</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" />
+
+          <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 -->
+        <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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+        <!-- 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>
+    </article>
+  </NuxtLayout>
+</template>

package/app/assets/css/main.css

@@ -0,0 +1,85 @@
+@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/AppFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer class="text-center py-4 space-y-2 text-zinc-600 dark:text-zinc-400">
+    <p class="flex items-center">&copy; {{ new Date().getFullYear() }}</p>
+  </footer>
+</template>

package/app/components/AppHeader.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const {
+	portfolio: { name },
+} = useAppConfig();
+</script>
+
+<template>
+	<header class="py-0 sm:py-4">
+		<nav class="flex items-center justify-between">
+			<h2 class="text-center">
+				<a
+					href="/"
+					class="flex items-center gap-x-4 p-1 font-semibold text-xl text-zinc-950 dark:text-zinc-300 focus-visible:global-focus"
+				>
+					<img
+						src="/logo.svg"
+						alt="Logo"
+						class="size-10 rounded-xl ring ring-zinc-200 dark:ring-zinc-800 p-0.5"
+					/>
+					{{ name }}
+				</a>
+			</h2>
+
+			<theme-toggle />
+		</nav>
+	</header>
+</template>

package/app/components/OgImage/SocialImage.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Portfolio } from "#imports";
+
+withDefaults(defineProps<Pick<Portfolio, "name" | "subtitle" | "avatar">>(), {
+	name: "Full Name",
+	subtitle: "Whatever It Is I Do",
+});
+</script>
+
+<template>
+	<div
+		:style="{
+			background:
+				'#18181b radial-gradient(circle at 1px 1px, #3f3f46 1px, transparent 0) repeat 0 0 / 20px 20px',
+		}"
+		class="flex h-full w-full items-center justify-center overflow-hidden p-16 text-zinc-200 bg-zinc-900"
+	>
+		<div class="flex flex-row items-center justify-center gap-16">
+			<div class="flex flex-col items-center justify-around gap-6 text-left">
+				<h1 class="text-8xl font-black">{{ name }}</h1>
+				<p class="text-4xl font-bold">{{ subtitle }}</p>
+			</div>
+
+			<!-- <div
+				v-if="avatar"
+				class="mx-auto w-44 h-44 shrink-0 rounded-full bg-cover bg-center p-1 ring ring-zinc-700"
+				:style="{ backgroundImage: `url(${avatar})` }"
+			/> -->
+		</div>
+	</div>
+</template>

package/app/components/SocialMediaLink.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SocialMediaKey, SocialMediaValue } from "~";
+
+defineProps<{
+	name: SocialMediaKey;
+	icon: SocialMediaValue["socialMediaIcon"];
+	to: SocialMediaValue["profileUrl"];
+	style: {
+		backgroundColor: SocialMediaValue["socialMediaBgColor"];
+		borderColor: SocialMediaValue["socialMediaBorderColor"];
+		textColor: SocialMediaValue["socialMediaTextColor"];
+	};
+}>();
+</script>
+
+<template>
+	<nuxt-link
+		:to="to"
+		:title="name"
+		:aria-label="name"
+		:class="[
+			'flex items-center justify-center text-2xl sm:text-3xl p-0! hover:scale-105! focus-visible:global-focus',
+			style.backgroundColor,
+			style.textColor,
+			style.borderColor,
+		]"
+	>
+		<Icon :name="icon" />
+	</nuxt-link>
+</template>

package/app/components/ThemeToggle.vue

@@ -0,0 +1,26 @@
+<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/index.d.ts

@@ -0,0 +1 @@
+export * from "./utils/types";

package/app/layouts/default.vue

@@ -0,0 +1,73 @@
+<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/app/plugins/gsap.client.ts

@@ -0,0 +1,9 @@
+import { gsap } from "gsap";
+
+export default defineNuxtPlugin((nuxtApp) => {
+	return {
+		provide: {
+			gsap,
+		},
+	};
+});

package/app/utils/types.ts

@@ -0,0 +1,42 @@
+export type SocialMediaKey = "X" | "LinkedIn" | "Bluesky" | "GitHub";
+
+export interface SocialMediaValue {
+	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 };
+	};
+}
+
+export interface Style {
+	roundedItems: boolean;
+}
+
+declare module "nuxt/schema" {
+	interface AppConfigInput {
+		portfolio: Portfolio;
+		style?: Style;
+	}
+
+	interface AppConfig {
+		portfolio: Portfolio;
+		style?: Style;
+	}
+}

package/eslint.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+  {
+    rules: {
+      "vue/html-self-closing": "off",
+    }
+  }
+)

package/nuxt.config.ts

@@ -0,0 +1,51 @@
+import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    rootAttrs: {
+      id: "app"
+    },
+    head: {
+      link: [{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" }]
+    }
+  },
+
+  build: {
+    transpile: ["gsap"]
+  },
+
+  colorMode: { classSuffix: "" },
+
+  compatibilityDate: "2025-05-15",
+
+  css: [join(currentDir, "./app/assets/css/tailwind.css")],
+
+  alias: {
+    "@minch/bentolio/tailwind": join(
+      currentDir,
+      "./app/assets/css/tailwind.css"
+    )
+  },
+
+  devtools: { enabled: true },
+
+  modules: [
+    "@nuxt/eslint",
+    "@nuxt/icon",
+    "@nuxtjs/color-mode",
+    "nuxt-og-image"
+  ],
+
+  routeRules: {
+    "/*": { prerender: true }
+  },
+
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@minch/bentolio",
+  "version": "0.9.1",
+  "description": "A minimal portfolio template and layer built with Nuxt 4, Tailwind CSS 4, and GSAP.",
+  "type": "module",
+  "repository": {
+    "url": "https://github.com/oneminch/bentolio"
+  },
+  "homepage": "https://github.com/oneminch/bentolio#readme",
+  "license": "MIT",
+  "author": {
+    "name": "Dawit",
+    "url": "https://bsky.app/profile/minch.dev"
+  },
+  "main": "./nuxt.config.ts",
+  "files": [
+    "nuxt.config.ts",
+    "app/**/*",
+    "public/**/*",
+    ".env.example",
+    "pnpm-workspace.yaml",
+    "eslint.config.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "nuxt",
+    "nuxt-layer",
+    "tailwindcss",
+    "gsap"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "@fontsource/space-grotesk": "^5.2.8",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.47",
+    "@nuxt/eslint": "1.8.0",
+    "@nuxt/icon": "2.0.0",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "@unhead/vue": "^2.0.14",
+    "eslint": "^9.33.0",
+    "gsap": "^3.13.0",
+    "nuxt": "^4.0.3",
+    "nuxt-og-image": "5.1.9",
+    "tailwindcss": "^4.1.11",
+    "unstorage": "^1.16.1",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
+  },
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - unrs-resolver

package/public/favicon.svg

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,6 @@
+<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/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: