diff options
Diffstat (limited to 'examples/portfolio-svelte/src/pages/index.astro')
| -rw-r--r-- | examples/portfolio-svelte/src/pages/index.astro | 246 |
1 files changed, 0 insertions, 246 deletions
diff --git a/examples/portfolio-svelte/src/pages/index.astro b/examples/portfolio-svelte/src/pages/index.astro deleted file mode 100644 index f2b76224e..000000000 --- a/examples/portfolio-svelte/src/pages/index.astro +++ /dev/null @@ -1,246 +0,0 @@ ---- -// Component Imports -import MainHead from '../components/MainHead.astro'; -import Button from '../components/Button.svelte'; -import Nav from '../components/Nav.svelte'; -import Footer from '../components/Footer.svelte'; -import PortfolioPreview from '../components/PortfolioPreview.svelte'; - -// Data Fetching: List all Markdown posts in the repo. -const projects = Astro.fetchContent('./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> |