Initial commit WIP

app/pages/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <v-container fluid>
+    <!-- Hero Section -->
+    <v-row justify="center" class="text-center my-16">
+      <v-col cols="12" md="8">
+        <h1 class="text-h3 font-weight-bold mb-4">
+          Inspire Emotion and Evoke Storytelling through the Art of Photography.
+        </h1>
+        <p class="text-body-1">
+          Explore my photography portfolio and see the world through my creative lens.
+          Contact me if you would like to hire me.
+        </p>
+      </v-col>
+    </v-row>
+
+    <!-- Hero Image Grid -->
+    <v-row dense class="mb-16">
+      <v-col
+        v-for="(image, index) in heroImages"
+        :key="index"
+        cols="12"
+        sm="6"
+        md="4"
+      >
+        <v-img
+          :src="image.src"
+          :alt="image.alt"
+          :width="image.width"
+          :height="image.height"
+          class="rounded-lg elevation-2"
+          cover
+        />
+      </v-col>
+    </v-row>
+
+    <!-- About Me Section -->
+    <v-row class="align-center my-16">
+      <v-col cols="12" md="5">
+        <v-img
+          src="/img/home/personal-photo.webp"
+          alt="Oscar Mattern"
+          width="100%"
+          height="auto"
+          class="rounded-lg"
+          cover
+        />
+      </v-col>
+      <v-col cols="12" md="7">
+        <h2 class="text-h4 font-weight-bold mb-4">About Me</h2>
+        <p class="text-body-1 mb-4">
+          I am a photographer based in New York City. I specialize in
+          <strong>landscape, travel, and portrait photography</strong>. I have been
+          photographing for over 10 years and have been published in many magazines and
+          newspapers. I am available for hire for weddings, events, and portraits.
+        </p>
+        <p class="text-body-1">
+          I am a passionate photographer with a keen eye for capturing the beauty of life
+          through the art of photography.
+        </p>
+      </v-col>
+    </v-row>
+
+    <!-- Awards Section -->
+    <v-row class="my-12">
+      <v-col cols="12">
+        <h2 class="text-h5 font-weight-bold mb-6">Awards</h2>
+        <v-timeline side="end" dense>
+          <v-timeline-item
+            v-for="(award, index) in awards"
+            :key="index"
+            dot-color="primary"
+            size="small"
+          >
+            <strong>{{ award.title }} ({{ award.year }})</strong><br />
+            <span class="text-body-2">{{ award.description }}</span>
+          </v-timeline-item>
+        </v-timeline>
+      </v-col>
+    </v-row>
+
+    <!-- CTA Hire Me Section -->
+    <v-row justify="center" class="text-center mt-16">
+      <v-col cols="12" md="8">
+        <h2 class="text-h4 font-weight-bold mb-4">Questions or collaboration ideas?</h2>
+        <p class="text-body-1 mb-6">
+          I would love to hear from you! Whether you have <strong>questions</strong> about
+          my work, have <strong>collaboration ideas</strong>, or are interested in
+          <strong>hiring me</strong> for a project, don't hesitate to reach out.
+        </p>
+        <p class="text-body-1">I usually respond within hours!</p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+const heroImages = [
+  { src: '/img/home/hero-grid-01.webp', alt: 'Image 1', width: 1600, height: 2400 },
+  { src: '/img/home/hero-grid-02.webp', alt: 'Image 2', width: 1600, height: 2199 },
+  { src: '/img/home/hero-grid-03.webp', alt: 'Image 3', width: 1600, height: 2400 },
+  { src: '/img/home/hero-grid-07.webp', alt: 'Image 4', width: 1600, height: 2400 },
+  { src: '/img/home/hero-grid-05.webp', alt: 'Image 5', width: 1600, height: 2000 },
+  { src: '/img/home/hero-grid-06.webp', alt: 'Image 6', width: 1600, height: 2400 },
+  { src: '/img/home/hero-grid-04.webp', alt: 'Image 7', width: 1600, height: 2400 },
+]
+
+const awards = [
+  {
+    title: 'Best Landscape Photographer',
+    year: '2019',
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.',
+  },
+  {
+    title: 'Best Portrait Photographer',
+    year: '2018',
+    description: 'Lorem ipsum dolor sit amet.',
+  },
+  {
+    title: 'Best Travel Photographer',
+    year: '2017',
+    description: 'Lorem ipsum dolor sit amet.',
+  },
+]
+</script>