feat - launch

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

README.md

@@ -0,0 +1,34 @@
+# 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
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+bun run preview
+```

app.config.ts

@@ -0,0 +1,31 @@
+export default defineAppConfig({
+  ui: {
+    primary: "sky",
+    gray: "neutral",
+    formGroup: {
+      help: "text-xs mt-1 text-gray-500 dark:text-gray-400",
+      error: "text-xs mt-1 text-red-500 dark:text-red-400",
+      label: {
+        base: "text-sm block font-medium text-gray-500 dark:text-gray-200",
+      },
+    },
+    button: {
+      rounded:
+        "rounded-md transition-transform active:scale-x-[0.98] active:scale-y-[0.99]",
+    },
+    modal: {
+      overlay: {
+        background: "bg-[rgba(0,8,47,.275)] saturate-50",
+      },
+      padding: "p-0",
+      rounded: "rounded-t-2xl sm:rounded-xl",
+      transition: {
+        enterFrom: "opacity-0 translate-y-full sm:translate-y-0 sm:scale-x-95",
+        leaveFrom: "opacity-100 translate-y-0 sm:scale-x-100",
+      },
+    },
+    container: {
+      constrained: "max-w-5xl",
+    },
+  },
+});

app.vue

@@ -0,0 +1,37 @@
+<template>
+  <NuxtLoadingIndicator color="primary" />
+  <SharedNavbar />
+  <div class="h-4 md:h-32" />
+  <UContainer>
+    <NuxtPage />
+  </UContainer>
+  <div class="h-4 md:h-32" />
+  <SharedFooter />
+  <div class="h-16 md:hidden" />
+</template>
+<script setup>
+const config = useRuntimeConfig();
+useSeoMeta({
+  ogImage: `${config.public.baseURL}/og_me.png`,
+  twitterCard: 'summary_large_image',
+})
+</script>
+<style>
+* {
+  font-family: "Fira Code", monospace;
+}
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s;
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(5px);
+}
+</style>

components/blog/Card.vue

@@ -0,0 +1,26 @@
+<template>
+  <NuxtLink
+    :to="article._path"
+    class="py-4 text-gray-600 dark:text-gray-300 text-sm group"
+  >
+    <UBadge
+      :label="useDateFormat(article.published, 'DD MMM YYYY').value"
+      color="black"
+      variant="soft"
+      class="mb-2"
+    />
+    <div
+      class="font-bold md:text-lg text-gray-700 dark:text-gray-200 group-hover:text-primary-500"
+    >
+      {{ article.title }}
+    </div>
+    <div>{{ article.description }}</div>
+  </NuxtLink>
+</template>
+<script setup>
+import { useDateFormat } from "@vueuse/core";
+
+defineProps({
+  article: Object,
+});
+</script>

components/content/contact.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-6 py-2 mt-1">
+    <a
+      v-for="item in items"
+      :key="item.name"
+      :href="item.url"
+      target="_blank"
+      rel="noopener"
+      class="rounded-md text-gray-700 dark:bg-gray-900 dark:text-gray-300 transition-all duration-300 border border-gray-500 p-2 hover:text-primary-500 hover:border-primary-500 flex items-center justify-center"
+    >
+      <Icon :name="item.name" class="w-5 h-5 md:w-4 md:h-4" />
+    </a>
+  </div>
+</template>

components/content/header.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1
+      class="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100"
+    >
+      {{ title }}
+    </h1>
+    <p class="mt-2 text-base text-gray-600 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+</script>

components/content/hero.vue

@@ -0,0 +1,6 @@
+<template>
+  <section class="space-y-2 text-sm">
+    <h1 class="text-2xl font-bold md:text-4xl"><slot /></h1>
+    <slot name="description" />
+  </section>
+</template>

components/content/pageContent.vue

@@ -0,0 +1,6 @@
+<template>
+  <section class="space-y-2 py-4 text-gray-600 dark:text-gray-300 text-sm">
+    <div class="font-bold md:text-lg text-gray-700 dark:text-gray-200"><slot /></div>
+    <slot name="description" />
+  </section>
+</template>

components/project/Card.vue

@@ -0,0 +1,42 @@
+<template>
+  <NuxtLink
+    class="flex items-start gap-4 group p-2 -m-2 rounded-lg"
+    :to="project.url"
+    target="_blank"
+    external
+  >
+    <UChip :color="STATUS_COLORS[project.status]" size="sm" variant="solid" position="top-left" inset>
+      <UAvatar
+        :src="project.thumbnail"
+        :ui="{ rounded: 'rounded p-0.5 relative bg-gray-700' }"
+        :alt="project.heading"
+        size="md"
+      />
+    </UChip>
+    <div>
+      <h3
+        class="text-sm font-medium group-hover:text-primary-600 dark:group-hover:text-primary-500"
+      >
+        {{ project.heading }}
+        <UBadge v-if="project.role" color="gray" size="xs" variant="soft">
+        {{ project.role }}
+        </UBadge>
+      </h3>
+      <p class="dark:text-gray-400 text-gray-600 text-sm py-1">
+        {{ project.description }}
+      </p>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup>
+import { STATUS_COLORS } from '~/constants';
+
+defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+});
+
+</script>

components/project/List.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="space-y-4">
+    <h3 class="font-bold md:text-lg text-gray-700 dark:text-gray-200">
+      Projects
+    </h3>
+    <div class="space-y-4">
+      <ProjectCard
+        v-for="(project, id) in projects"
+        :key="id"
+        :project="project"
+      />
+    </div>
+    <div class="flex items-center justify-end mt-6 text-sm">
+      <UButton
+        label="All Projects &rarr;"
+        to="/projects"
+        variant="link"
+        color="gray"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { data: projects } = await useAsyncData("projects-home", () =>
+  queryContent("/projects").limit(3).find()
+);
+</script>

components/project/StatusLegend.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex gap-4 py-3 px-1">
+    <div
+      v-for="status in legend"
+      :key="status.name"
+      class="flex gap-2 items-center"
+    >
+      <UChip :color="status.color" />
+      <span class="text-xs text-gray-600 dark:text-gray-400 capitalize">{{ status.name }}</span>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  legend: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>

components/shared/colorMode.vue

@@ -0,0 +1,28 @@
+<script setup>
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+  },
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>