mirror of
https://github.com/withastro/astro.git
synced 2025-02-03 22:29:08 -05:00
237 lines
5.4 KiB
Text
237 lines
5.4 KiB
Text
---
|
||
// Component Imports
|
||
import MainHead from '../components/MainHead.astro';
|
||
import Button from '../components/Button/index.jsx';
|
||
import Nav from '../components/Nav/index.jsx';
|
||
import Footer from '../components/Footer/index.jsx';
|
||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
||
|
||
// Data Fetching: List all Markdown posts in the repo.
|
||
const projects = await Astro.glob('./project/**/*.md');
|
||
const featuredProject = projects[0];
|
||
|
||
// Full Astro Component Syntax:
|
||
// https://docs.astro.build/core-concepts/astro-components/
|
||
---
|
||
|
||
<html lang="en">
|
||
<head>
|
||
<MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." />
|
||
<style lang="scss">
|
||
$w-s: 750px;
|
||
|
||
.hero {
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
@media (min-width: $w-s) {
|
||
height: 45vw;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.gradient,
|
||
.gradient2 {
|
||
background-image: url('/assets/mesh-gradient.jpg');
|
||
background-size: cover;
|
||
pointer-events: none;
|
||
mix-blend-mode: screen;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.gradient2 {
|
||
mix-blend-mode: multiply;
|
||
background-size: cover;
|
||
}
|
||
|
||
.overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding-left: 2rem;
|
||
|
||
@media (min-width: $w-s) {
|
||
padding-left: 4rem;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-weight: 900;
|
||
font-size: var(--f-u8);
|
||
margin-bottom: 0.5rem;
|
||
margin-top: 0;
|
||
|
||
@media (min-width: $w-s) {
|
||
font-size: var(--f-u12);
|
||
}
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-gap: 2rem;
|
||
|
||
@media (min-width: 1200px) {
|
||
grid-template-columns: 2fr 1fr;
|
||
}
|
||
}
|
||
|
||
.sectionTitle {
|
||
font-weight: 700;
|
||
font-size: var(--f-u8);
|
||
margin-top: 4rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.role {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-weight: 900;
|
||
color: var(--t-bg);
|
||
background-color: var(--t-fg);
|
||
padding: 0.25em 0.5em;
|
||
z-index: 2;
|
||
|
||
@media (min-width: $w-s) {
|
||
font-size: var(--f-u3);
|
||
}
|
||
|
||
+ .role {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
&:nth-of-type(1) {
|
||
.invert {
|
||
background-color: var(--c-pink);
|
||
}
|
||
}
|
||
|
||
&:nth-of-type(2) {
|
||
.invert {
|
||
background-color: var(--c-blue);
|
||
}
|
||
}
|
||
|
||
&:nth-of-type(3) {
|
||
.invert {
|
||
background-color: var(--c-green);
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
.invert {
|
||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.invert {
|
||
position: absolute;
|
||
color: var(--t-fg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
|
||
transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms;
|
||
}
|
||
|
||
.desc {
|
||
font-size: var(--f-u2);
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-weight: 400;
|
||
font-size: var(--f-d6);
|
||
letter-spacing: -0.0625em;
|
||
}
|
||
|
||
.bio {
|
||
line-height: 2;
|
||
margin-bottom: 2rem;
|
||
|
||
> span:first-of-type {
|
||
line-height: 1;
|
||
margin-bottom: 0.5em;
|
||
display: block;
|
||
font-weight: 700;
|
||
font-size: var(--f-u4);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<Nav />
|
||
<header class="hero">
|
||
<img
|
||
width="1600"
|
||
height="1131"
|
||
class="img"
|
||
src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
|
||
srcset="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w"
|
||
sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
|
||
/>
|
||
<div class="gradient"></div>
|
||
<div class="gradient2"></div>
|
||
<div class="overlay">
|
||
<h1 class="title">
|
||
<small class="subtitle">The personal site of </small>Jeanine White
|
||
</h1>
|
||
<div>
|
||
<span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span>
|
||
<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>
|
||
<span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
|
||
</div>
|
||
<p class="desc">Lover of dogs, roadtrips, and poetry.</p>
|
||
</div>
|
||
</header>
|
||
<main class="wrapper mt4 mb4">
|
||
<div class="grid">
|
||
<div class="section">
|
||
<h3 class="sectionTitle">Selected Work</h3>
|
||
<PortfolioPreview project={featuredProject} />
|
||
<div class="tac mt4">
|
||
<a href="/projects">
|
||
<Button>View All</Button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<h3 class="sectionTitle">About me</h3>
|
||
<p class="bio">
|
||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
|
||
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a>, a new way to build static sites. This is just an example template for you to
|
||
modify.
|
||
</p>
|
||
<p>
|
||
<a href="/about">Read more</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</body>
|
||
</html>
|