diff options
Diffstat (limited to 'examples/portfolio/src/pages/index.astro')
| -rw-r--r-- | examples/portfolio/src/pages/index.astro | 241 |
1 files changed, 241 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..fcdc21d60 --- /dev/null +++ b/examples/portfolio/src/pages/index.astro @@ -0,0 +1,241 @@ +--- +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'; + +const projects = Astro.fetchContent('./project/*.md'); +const featuredProject = projects[0]; +--- + +<html> + <head> + <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> + <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 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> +</html> |