wip
This commit is contained in:
parent
653b23082f
commit
59728dd64a
4 changed files with 26 additions and 250 deletions
|
@ -1,9 +1,16 @@
|
||||||
---
|
---
|
||||||
const { title = 'Jeanine White: Personal Site' } = Astro.props;
|
export interface Props {
|
||||||
---
|
title: string;
|
||||||
|
description?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function __state({props}: {props: Props}) {
|
||||||
|
return {description: props.description || 'This is the default site descrition.'};
|
||||||
|
}
|
||||||
|
---
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>{title}</title>
|
<title>{$props.title}</title>
|
||||||
|
<meta name="description" content={$state.description}>
|
||||||
<link rel="stylesheet" type="text/css" href="/global.css">
|
<link rel="stylesheet" type="text/css" href="/global.css">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
|
|
@ -3,12 +3,10 @@ import MainHead from '../components/MainHead.astro';
|
||||||
import Button from '../components/Button/index.jsx';
|
import Button from '../components/Button/index.jsx';
|
||||||
import Footer from '../components/Footer/index.jsx';
|
import Footer from '../components/Footer/index.jsx';
|
||||||
import Nav from '../components/Nav/index.jsx';
|
import Nav from '../components/Nav/index.jsx';
|
||||||
|
|
||||||
const { content } = Astro.props;
|
|
||||||
---
|
---
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<MainHead title={content.title} />
|
<MainHead title={$props.content.title} />
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.hero {
|
.hero {
|
||||||
padding: 8rem;
|
padding: 8rem;
|
||||||
|
|
|
@ -1,245 +1,12 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import MainHead from '../components/MainHead.astro';
|
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 PorfolioPreview from '../components/PortfolioPreview/index.jsx';
|
|
||||||
|
|
||||||
// Data Fetching: List all Markdown posts in the repo.
|
|
||||||
const projects = await Astro.fetchContent(import.meta.glob('./project/**/*.md'));
|
|
||||||
const featuredProject = projects[0];
|
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
|
||||||
// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md
|
|
||||||
---
|
---
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<MainHead title="Jeanine White: Personal Site" />
|
<MainHead title="Jeanine White: Personal Site" />
|
||||||
<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');
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Nav />
|
Test
|
||||||
<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 class="gradient2" />
|
|
||||||
<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>
|
|
||||||
<PorfolioPreview 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/snowpackjs/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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -124,8 +124,11 @@ const Astro = {
|
||||||
};
|
};
|
||||||
const __Astro = Astro;
|
const __Astro = Astro;
|
||||||
|
|
||||||
// <script astro></script>
|
|
||||||
|
// Frontmatter Script
|
||||||
${result.imports.join('\n')}
|
${result.imports.join('\n')}
|
||||||
|
${result.script}
|
||||||
|
|
||||||
${
|
${
|
||||||
result.hasCustomElements
|
result.hasCustomElements
|
||||||
? `
|
? `
|
||||||
|
@ -141,16 +144,18 @@ const __astro_element_registry = new AstroElementRegistry({
|
||||||
// \`__render()\`: Render the contents of the Astro module.
|
// \`__render()\`: Render the contents of the Astro module.
|
||||||
import { h, Fragment } from 'astro/dist/internal/h.js';
|
import { h, Fragment } from 'astro/dist/internal/h.js';
|
||||||
const __astroInternal = Symbol('astro.internal');
|
const __astroInternal = Symbol('astro.internal');
|
||||||
async function __render(props, ...children) {
|
async function __render($props, ...children) {
|
||||||
const Astro = {
|
const Astro = {
|
||||||
...__Astro,
|
...__Astro,
|
||||||
props,
|
// props,
|
||||||
css: props[__astroInternal]?.css || [],
|
css: $props[__astroInternal]?.css || [],
|
||||||
request: props[__astroInternal]?.request || {},
|
request: $props[__astroInternal]?.request || {},
|
||||||
isPage: props[__astroInternal]?.isPage || false,
|
isPage: $props[__astroInternal]?.isPage || false,
|
||||||
};
|
};
|
||||||
|
|
||||||
${result.script}
|
const $state = typeof __state !== 'undefined' ? __state({props: $props}) : {};
|
||||||
|
console.log('$state', $state);
|
||||||
|
|
||||||
return h(Fragment, null, ${result.html});
|
return h(Fragment, null, ${result.html});
|
||||||
}
|
}
|
||||||
export default {
|
export default {
|
||||||
|
@ -194,10 +199,9 @@ export async function __renderPage({request, children, props, css}) {
|
||||||
return childBodyResult;
|
return childBodyResult;
|
||||||
};
|
};
|
||||||
|
|
||||||
${result.exports.join('\n')}
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
console.log(moduleJavaScript);
|
||||||
return {
|
return {
|
||||||
result,
|
result,
|
||||||
contents: moduleJavaScript,
|
contents: moduleJavaScript,
|
||||||
|
|
Loading…
Reference in a new issue