initial commit

app/components/AppFooter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter
+    class="z-10 bg-default"
+    :ui="{ left: 'text-muted text-xs' }"
+  >
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>

app/components/AppHeader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+defineProps<{
+  links: NavigationMenuItem[]
+}>()
+</script>
+
+<template>
+  <div class="fixed top-2 sm:top-4 mx-auto left-1/2 transform -translate-x-1/2 z-10">
+    <UNavigationMenu
+      :items="links"
+      variant="link"
+      color="neutral"
+      class="bg-muted/80 backdrop-blur-sm rounded-full px-2 sm:px-4 border border-muted/50 shadow-lg shadow-neutral-950/5"
+      :ui="{
+        link: 'px-2 py-1',
+      }"
+    >
+      <template #list-trailing>
+        <ColorModeButton />
+      </template>
+    </UNavigationMenu>
+  </div>
+</template>

app/components/ColorModeButton.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
+
+const switchTheme = () => {
+  colorMode.preference = nextTheme.value
+}
+
+const startViewTransition = (event: MouseEvent) => {
+  if (!document.startViewTransition) {
+    switchTheme()
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y)
+  )
+
+  const transition = document.startViewTransition(() => {
+    switchTheme()
+  })
+
+  transition.ready.then(() => {
+    const duration = 600
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`
+        ]
+      },
+      {
+        duration: duration,
+        easing: 'cubic-bezier(.76,.32,.29,.99)',
+        pseudoElement: '::view-transition-new(root)'
+      }
+    )
+  })
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <UButton
+      :aria-label="`Switch to ${nextTheme} mode`"
+      :icon="`i-lucide-${nextTheme === 'dark' ? 'sun' : 'moon'}`"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      class="rounded-full"
+      @click="startViewTransition"
+    />
+    <template #fallback>
+      <div class="size-4" />
+    </template>
+  </ClientOnly>
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+</style>

app/components/PolaroidItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  image: {
+    src: string
+    alt: string
+  }
+  index: number
+}>()
+</script>
+
+<template>
+  <div
+    class="bg-white p-2 flex flex-col drop-shadow-2xl transition-transform duration-300 ease-in-out hover:scale-105 hover:rotate-0 hover:z-10"
+    :class="[
+      index % 2 === 0 ? '-rotate-5' : 'rotate-5',
+      index % 2 === 0 ? 'hover:-translate-x-4' : 'hover:translate-x-4'
+    ]"
+  >
+    <img
+      :src="image.src"
+      :alt="image.alt"
+      class="size-32 object-cover"
+    >
+    <span class="w-32 text-xs text-black font-serif font-medium text-center mt-2">
+      {{ image.alt }}
+    </span>
+  </div>
+</template>

app/components/landing/About.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageSection
+    :title="page.about.title"
+    :description="page.about.description"
+    :ui="{
+      container: '!p-0',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'text-left mt-3 text-sm sm:text-md lg:text-sm text-muted'
+    }"
+  />
+</template>
+
+<style scoped>
+
+</style>

app/components/landing/Blog.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+
+const { data: posts } = await useAsyncData('index-blogs', () =>
+  queryCollection('blog').order('date', 'DESC').limit(3).all()
+)
+if (!posts.value) {
+  throw createError({ statusCode: 404, statusMessage: 'blogs posts not found', fatal: true })
+}
+</script>
+
+<template>
+  <UPageSection
+    :title="page.blog.title"
+    :description="page.blog.description"
+    :ui="{
+      container: 'px-0 !pt-0 sm:gap-6 lg:gap-8',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'text-left mt-2 text-sm sm:text-md lg:text-sm text-muted'
+    }"
+  >
+    <UBlogPosts
+      orientation="vertical"
+      class="gap-4 lg:gap-y-4"
+    >
+      <UBlogPost
+        v-for="(post, index) in posts"
+        :key="index"
+        orientation="horizontal"
+        variant="naked"
+        v-bind="post"
+        :to="post.path"
+        :ui="{
+          root: 'group relative lg:items-start lg:flex ring-0 hover:ring-0',
+          body: '!px-0',
+          header: 'hidden'
+        }"
+      >
+        <template #footer>
+          <UButton
+            size="xs"
+            variant="link"
+            class="px-0 gap-0"
+            label="Read Article"
+          >
+            <template #trailing>
+              <UIcon
+                name="i-lucide-arrow-right"
+                class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
+              />
+            </template>
+          </UButton>
+        </template>
+      </UBlogPost>
+    </UBlogPosts>
+  </UPageSection>
+</template>

app/components/landing/Education.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageSection
+    :title="page.education.title"
+    :ui="{
+      container: '!p-0 gap-4 sm:gap-4',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'mt-2'
+    }"
+  >
+    <template #description>
+      <div class="flex flex-col gap-2">
+        <Motion
+          v-for="(education, index) in page.education.items"
+          :key="index"
+          :initial="{ opacity: 0, transform: 'translateY(20px)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :transition="{ delay: 0.4 + 0.2 * index }"
+          :in-view-options="{ once: true }"
+          class="text-muted flex items-center text-nowrap gap-2"
+        >
+          <p class="text-sm">
+            {{ education.date }}
+          </p>
+          <USeparator />
+          <ULink
+            class="flex items-center gap-1"
+            :to="education.institution.url"
+            target="_blank"
+          >
+            <span class="text-sm">
+              {{ education.degree }}
+            </span>
+            <div
+              class="inline-flex items-center gap-1"
+              :style="{ color: education.institution.color }"
+            >
+              <span class="font-medium">{{ education.institution.name }}</span>
+              <img
+                :src="education.institution.logo" 
+                :alt="education.institution.name"
+                :width=32
+              />
+            </div>
+          </ULink>
+        </Motion>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<style scoped>
+
+</style>

app/components/landing/FAQ.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+const props = defineProps<{
+  page: IndexCollectionItem
+}>()
+
+const items = computed(() => {
+  return props.page.faq?.categories.map((faq) => {
+    return {
+      label: faq.title,
+      key: faq.title.toLowerCase(),
+      questions: faq.questions
+    }
+  })
+})
+
+const ui = {
+  root: 'flex items-center gap-4 w-full',
+  list: 'relative flex bg-transparent dark:bg-transparent gap-2 px-0',
+  indicator: 'absolute top-[4px] duration-200 ease-out focus:outline-none rounded-lg bg-elevated/60',
+  trigger: 'px-3 py-2 rounded-lg hover:bg-muted/50 data-[state=active]:text-highlighted data-[state=inactive]:text-muted',
+  label: 'truncate'
+}
+</script>
+
+<template>
+  <UPageSection
+    :title="page.faq.title"
+    :description="page.faq.description"
+    :ui="{
+      container: 'px-0 !pt-0 gap-4 sm:gap-4',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'text-left mt-2 text-sm sm:text-md lg:text-sm text-muted'
+    }"
+  >
+    <UTabs
+      :items
+      orientation="horizontal"
+      :ui
+    >
+      <template #content="{ item }">
+        <UAccordion
+          trailing-icon="lucide:plus"
+          :items="item.questions"
+          :unmount-on-hide="false"
+          :ui="{
+            item: 'border-none',
+            trigger: 'mb-2 border-0 group px-4 transform-gpu rounded-lg bg-elevated/60 will-change-transform hover:bg-muted/50 text-base',
+            trailingIcon: 'group-data-[state=closed]:rotate-0 group-data-[state=open]:rotate-135 text-base text-muted'
+          }"
+        >
+          <template #body="{ item: _item }">
+            <MDC
+              :value="_item.content"
+              unwrap="p"
+              class="px-4"
+            />
+          </template>
+        </UAccordion>
+      </template>
+    </UTabs>
+  </UPageSection>
+</template>

app/components/landing/Hero.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+const { footer, global } = useAppConfig()
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageHero
+    :ui="{
+      headline: 'flex items-center justify-center',
+      title: 'text-shadow-md max-w-lg mx-auto',
+      links: 'mt-4 flex-col justify-center items-center'
+    }"
+  >
+    <template #headline>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.1
+        }"
+      >
+        <UColorModeAvatar
+          class="size-18 ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
+          :light="global.picture?.light!"
+          :dark="global.picture?.dark!"
+          :alt="global.picture?.alt!"
+        />
+      </Motion>
+    </template>
+
+    <template #title>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.1
+        }"
+      >
+        {{ page.title }}
+      </Motion>
+    </template>
+
+    <template #description>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.3
+        }"
+      >
+        {{ page.description }}
+      </Motion>
+    </template>
+
+    <template #links>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.5
+        }"
+      >
+        <div
+          v-if="page.hero.links"
+          class="flex items-center gap-2"
+        >
+          <!-- <UButton v-bind="page.hero.links[0]" /> -->
+          <UButton
+            :color="global.available ? 'success' : 'error'"
+            variant="ghost"
+            class="gap-2"
+            :to="global.available ? global.meetingLink : ''"
+            :label="global.available ? 'Available for new projects' : 'Not available at the moment'"
+          >
+            <template #leading>
+              <span class="relative flex size-2">
+                <span
+                  class="absolute inline-flex size-full rounded-full opacity-75"
+                  :class="global.available ? 'bg-success animate-ping' : 'bg-error'"
+                />
+                <span
+                  class="relative inline-flex size-2 scale-90 rounded-full"
+                  :class="global.available ? 'bg-success' : 'bg-error'"
+                />
+              </span>
+            </template>
+          </UButton>
+        </div>
+      </Motion>
+
+      <div class="gap-x-4 inline-flex mt-4">
+        <Motion
+          v-for="(link, index) of footer?.links"
+          :key="index"
+
+          :initial="{
+            scale: 1.1,
+            opacity: 0,
+            filter: 'blur(20px)'
+          }"
+          :animate="{
+            scale: 1,
+            opacity: 1,
+            filter: 'blur(0px)'
+          }"
+          :transition="{
+            duration: 0.6,
+            delay: 0.5 + index * 0.1
+          }"
+        >
+          <UButton
+            v-bind="{ size: 'md', color: 'neutral', variant: 'ghost', ...link }"
+          />
+        </Motion>
+      </div>
+    </template>
+
+    <!-- <UMarquee
+      pause-on-hover
+      class="py-2 -mx-8 sm:-mx-12 lg:-mx-16 [--duration:40s]"
+    >
+      <Motion
+        v-for="(img, index) in page.hero.images"
+        :key="index"
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: index * 0.1
+        }"
+      >
+        <NuxtImg
+          width="234"
+          height="234"
+          class="rounded-lg aspect-square object-cover"
+          :class="index % 2 === 0 ? '-rotate-2' : 'rotate-2'"
+          v-bind="img"
+        />
+      </Motion>
+    </UMarquee> -->
+  </UPageHero>
+</template>

app/components/landing/Testimonials.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageSection
+    :ui="{
+      container: 'px-0 !pt-0'
+    }"
+  >
+    <UCarousel
+      v-slot="{ item }"
+      :items="page.testimonials"
+      :autoplay="{ delay: 4000 }"
+      loop
+      dots
+      :ui="{
+        viewport: '-mx-4 sm:-mx-12 lg:-mx-16 bg-elevated/50 max-w-(--ui-container)'
+      }"
+    >
+      <UPageCTA
+        :description="item.quote"
+        variant="naked"
+        class="rounded-none"
+        :ui="{
+          container: 'sm:py-12 lg:py-12 sm:gap-8',
+          description: '!text-base text-balance before:content-[open-quote] before:text-5xl lg:before:text-7xl before:inline-block before:text-dimmed before:absolute before:-ml-6 lg:before:-ml-10 before:-mt-2 lg:before:-mt-4 after:content-[close-quote] after:text-5xl lg:after:text-7xl after:inline-block after:text-dimmed after:absolute after:mt-1 lg:after:mt-0 after:ml-1 lg:after:ml-2'
+        }"
+      >
+        <UUser
+          v-bind="item.author"
+          size="xl"
+          class="justify-center"
+        />
+      </UPageCTA>
+    </UCarousel>
+  </UPageSection>
+</template>

app/components/landing/WorkExperience.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageSection
+    :title="page.experience.title"
+    :ui="{
+      container: '!p-0 gap-4 sm:gap-4',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'mt-2'
+    }"
+  >
+    <template #description>
+      <div class="flex flex-col gap-2">
+        <Motion
+          v-for="(experience, index) in page.experience.items"
+          :key="index"
+          :initial="{ opacity: 0, transform: 'translateY(20px)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :transition="{ delay: 0.4 + 0.2 * index }"
+          :in-view-options="{ once: true }"
+          class="text-muted flex items-center text-nowrap gap-2"
+        >
+          <p class="text-sm">
+            {{ experience.date }}
+          </p>
+          <USeparator />
+          <ULink
+            class="flex items-center gap-1"
+            :to="experience.company.url"
+            target="_blank"
+          >
+            <span class="text-sm">
+              {{ experience.position }}
+            </span>
+            <div
+              class="inline-flex items-center gap-1"
+              :style="{ color: experience.company.color }"
+            >
+              <span class="font-medium">{{ experience.company.name }}</span>
+              <img
+                :src="experience.company.logo" 
+                :alt="experience.company.name"
+              />
+            </div>
+          </ULink>
+        </Motion>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<style scoped>
+
+</style>