125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<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>
|