diff options
Diffstat (limited to 'examples/portfolio/src/pages/index.astro')
| -rw-r--r-- | examples/portfolio/src/pages/index.astro | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro new file mode 100644 index 000000000..5f67e3860 --- /dev/null +++ b/examples/portfolio/src/pages/index.astro @@ -0,0 +1,252 @@ +--- +import { getCollection } from 'astro:content'; + +// Layout import — provides basic page elements: <head>, <nav>, <footer> etc. +import BaseLayout from '../layouts/BaseLayout.astro'; + +// Component Imports +import CallToAction from '../components/CallToAction.astro'; +import Grid from '../components/Grid.astro'; +import Hero from '../components/Hero.astro'; +import Icon from '../components/Icon.astro'; +import Pill from '../components/Pill.astro'; +import PortfolioPreview from '../components/PortfolioPreview.astro'; + +// Page section components +import ContactCTA from '../components/ContactCTA.astro'; +import Skills from '../components/Skills.astro'; + +// Content Fetching: List four most recent work projects +const projects = (await getCollection('work')) + .sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()) + .slice(0, 4); + +// Full Astro Component Syntax: +// https://docs.astro.build/basics/astro-components/ +--- + +<BaseLayout> + <div class="stack gap-20 lg:gap-48"> + <div class="wrapper stack gap-8 lg:gap-20"> + <header class="hero"> + <Hero + title="Hello, my name is Jeanine White" + tagline="I am a Creative Developer who is currently based in Portland, Oregon." + align="start" + > + <div class="roles"> + <Pill><Icon icon="code" size="1.33em" /> Developer</Pill> + <Pill><Icon icon="microphone-stage" size="1.33em" /> Speaker</Pill> + <Pill><Icon icon="pencil-line" size="1.33em" /> Writer</Pill> + </div> + </Hero> + + <img + alt="Jeanine White smiling in a red plaid shirt and tortoise shell glasses" + width="480" + height="620" + src="/assets/portrait.jpg" + /> + </header> + + <Skills /> + </div> + + <main class="wrapper stack gap-20 lg:gap-48"> + <section class="section with-background with-cta"> + <header class="section-header stack gap-2 lg:gap-4"> + <h3>Selected Work</h3> + <p>Take a look below at some of my featured work for clients from the past few years.</p> + </header> + + <div class="gallery"> + <Grid variant="offset"> + { + projects.map((project) => ( + <li> + <PortfolioPreview project={project} /> + </li> + )) + } + </Grid> + </div> + + <div class="cta"> + <CallToAction href="/work/"> + View All + <Icon icon="arrow-right" size="1.2em" /> + </CallToAction> + </div> + </section> + + <section class="section with-background bg-variant"> + <header class="section-header stack gap-2 lg:gap-4"> + <h3>Mentions</h3> + <p> + I have been fortunate enough to receive praise for my work in several publications. Take + a look below to learn more. + </p> + </header> + + <div class="gallery"> + <Grid variant="small"> + { + ['Medium', 'BuzzFeed', 'The Next Web', 'awwwards.', 'TechCrunch'].map((brand) => ( + <li class="mention-card"> + <p>{brand}</p> + </li> + )) + } + </Grid> + </div> + </section> + </main> + + <ContactCTA /> + </div> +</BaseLayout> + +<style> + .hero { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + } + + .roles { + display: none; + } + + .hero img { + aspect-ratio: 5 / 4; + object-fit: cover; + object-position: top; + border-radius: 1.5rem; + box-shadow: var(--shadow-md); + } + + @media (min-width: 50em) { + .hero { + display: grid; + grid-template-columns: 6fr 4fr; + padding-inline: 2.5rem; + gap: 3.75rem; + } + + .roles { + margin-top: 0.5rem; + display: flex; + gap: 0.5rem; + } + + .hero img { + aspect-ratio: 3 / 4; + border-radius: 4.5rem; + object-fit: cover; + } + } + + /* ====================================================== */ + + .section { + display: grid; + gap: 2rem; + } + + .with-background { + position: relative; + } + + .with-background::before { + --hero-bg: var(--bg-image-subtle-2); + + content: ''; + position: absolute; + pointer-events: none; + left: 50%; + width: 100vw; + aspect-ratio: calc(2.25 / var(--bg-scale)); + top: 0; + transform: translateY(-75%) translateX(-50%); + background: + url('/assets/backgrounds/noise.png') top center/220px repeat, + var(--hero-bg) center center / var(--bg-gradient-size) no-repeat, + var(--gray-999); + background-blend-mode: overlay, normal, normal, normal; + mix-blend-mode: var(--bg-blend-mode); + z-index: -1; + } + + .with-background.bg-variant::before { + --hero-bg: var(--bg-image-subtle-1); + } + + .section-header { + justify-self: center; + text-align: center; + max-width: 50ch; + font-size: var(--text-md); + color: var(--gray-300); + } + + .section-header h3 { + font-size: var(--text-2xl); + } + + @media (min-width: 50em) { + .section { + grid-template-columns: repeat(4, 1fr); + grid-template-areas: 'header header header header' 'gallery gallery gallery gallery'; + gap: 5rem; + } + + .section.with-cta { + grid-template-areas: 'header header header cta' 'gallery gallery gallery gallery'; + } + + .section-header { + grid-area: header; + font-size: var(--text-lg); + } + + .section-header h3 { + font-size: var(--text-4xl); + } + + .with-cta .section-header { + justify-self: flex-start; + text-align: left; + } + + .gallery { + grid-area: gallery; + } + + .cta { + grid-area: cta; + } + } + + /* ====================================================== */ + + .mention-card { + display: flex; + height: 7rem; + justify-content: center; + align-items: center; + text-align: center; + border: 1px solid var(--gray-800); + border-radius: 1.5rem; + color: var(--gray-300); + background: var(--gradient-subtle); + box-shadow: var(--shadow-sm); + } + + @media (min-width: 50em) { + .mention-card { + border-radius: 1.5rem; + height: 9.5rem; + } + } +</style> |