mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Adds a new example template portfolio-svelte (#1667)
- Template is based on svelte components instead of react - Bumps astro version to "^0.21.0-next.0" for portfolio-svelte template Co-authored-by: Konstantinos Kostarellis <Konstantinos.Kostarellis@gmail.com>
This commit is contained in:
Konstantinos Kostarellis
GitHub
parent
c0d9ed832e
commit
b4dbb90b5f
24 changed files with 1008 additions and 0 deletions
|
|
@ -42,6 +42,14 @@
|
|||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio",
|
||||
"command": "npm init astro -- --template portfolio"
|
||||
},
|
||||
{
|
||||
"name": "Portfolio-svelte",
|
||||
"description": "A portfolio theme using Svelte components, perfect for your personal or professional online portfolio.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/portfolio-svelte",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio-svelte",
|
||||
"command": "npm init astro -- --template portfolio-svelte"
|
||||
},
|
||||
{
|
||||
"name": "Minimal",
|
||||
"description": "A minimal theme, with just the bare minimum needed to get started.",
|
||||
|
|
|
|||
19
examples/portfolio-svelte/.gitignore
vendored
Normal file
19
examples/portfolio-svelte/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# build output
|
||||
dist
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
.snowpack/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
pnpm-lock.yaml
|
||||
2
examples/portfolio-svelte/.npmrc
Normal file
2
examples/portfolio-svelte/.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
## force pnpm to hoist
|
||||
shamefully-hoist = true
|
||||
6
examples/portfolio-svelte/.stackblitzrc
Normal file
6
examples/portfolio-svelte/.stackblitzrc
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"startCommand": "npm start",
|
||||
"env": {
|
||||
"ENABLE_CJS_IMPORTS": true
|
||||
}
|
||||
}
|
||||
23
examples/portfolio-svelte/README.md
Normal file
23
examples/portfolio-svelte/README.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# Astro Starter Kit: Portfolio
|
||||
|
||||
```
|
||||
npm init astro -- --template portfolio
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/portfolio-svelte)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
|:----------------|:--------------------------------------------|
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
|
||||
13
examples/portfolio-svelte/astro.config.mjs
Normal file
13
examples/portfolio-svelte/astro.config.mjs
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Full Astro Configuration API Documentation:
|
||||
// https://docs.astro.build/reference/configuration-reference
|
||||
|
||||
// @type-check enabled!
|
||||
// VSCode and other TypeScript-enabled text editors will provide auto-completion,
|
||||
// helpful tooltips, and warnings if your exported object is invalid.
|
||||
// You can disable this by removing "@ts-check" and `@type` comments below.
|
||||
|
||||
// @ts-check
|
||||
export default /** @type {import('astro').AstroUserConfig} */ ({
|
||||
// Enable the Svelte renderer to support Svelte components.
|
||||
renderers: ['@astrojs/renderer-svelte'],
|
||||
});
|
||||
17
examples/portfolio-svelte/package.json
Normal file
17
examples/portfolio-svelte/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "@example/portfolio-svelte",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.21.0-next.0"
|
||||
},
|
||||
"snowpack": {
|
||||
"workspaceRoot": "../.."
|
||||
}
|
||||
}
|
||||
BIN
examples/portfolio-svelte/public/assets/mesh-gradient.jpg
Normal file
BIN
examples/portfolio-svelte/public/assets/mesh-gradient.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
examples/portfolio-svelte/public/favicon.ico
Normal file
BIN
examples/portfolio-svelte/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
11
examples/portfolio-svelte/src/components/Button.svelte
Normal file
11
examples/portfolio-svelte/src/components/Button.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<span><slot /></span>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
border: 3px solid currentColor;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
23
examples/portfolio-svelte/src/components/Footer.svelte
Normal file
23
examples/portfolio-svelte/src/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let name = "Jeanine White";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
© {new Date().getFullYear()} {name}
|
||||
<small>🚀 Built with Astro</small>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 8rem 2rem 4rem;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
color: var(--t-subdue);
|
||||
font-size: var(--f-d2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
13
examples/portfolio-svelte/src/components/MainHead.astro
Normal file
13
examples/portfolio-svelte/src/components/MainHead.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
|
||||
---
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" property="og:description" content={description}>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" type="text/css" href="/_astro/src/scss/global.css">
|
||||
<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">
|
||||
80
examples/portfolio-svelte/src/components/Nav.svelte
Normal file
80
examples/portfolio-svelte/src/components/Nav.svelte
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<nav>
|
||||
<a class="logolink" href="/">
|
||||
<div class="monogram">JW</div>
|
||||
</a>
|
||||
<a class="link" href="/projects">Portfolio</a>
|
||||
<a class="link" href="/about">About</a>
|
||||
<a class="social" href="https://twitter.com/me">
|
||||
<svg class="socialicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social" href="https://github.com/me">
|
||||
<svg class="socialicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social" href="https://dev.to/me">
|
||||
<svg class="socialicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40" style="enable-background:new 0 0 50 40" xmlSpace="preserve">
|
||||
<path d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z" />
|
||||
<path d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z" />
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.logolink {
|
||||
display: block;
|
||||
color: var(--t-fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
.link {
|
||||
color: var(--t-subdue);
|
||||
display: block;
|
||||
margin-left: 1rem;
|
||||
text-decoration: none;
|
||||
font-size: var(--f-d1);
|
||||
text-transform: uppercase;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
}
|
||||
.link:focus,
|
||||
.link:hover {
|
||||
color: var(--t-active);
|
||||
}
|
||||
.monogram {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--c-black);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.125rem;
|
||||
border: 3px solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.social {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
.social + .social {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
.socialicon {
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
fill: var(--t-subdue);
|
||||
transition: fill linear 150ms;
|
||||
}
|
||||
.socialicon:hover {
|
||||
fill: var(--t-active);
|
||||
}
|
||||
</style>
|
||||
119
examples/portfolio-svelte/src/components/PortfolioPreview.svelte
Normal file
119
examples/portfolio-svelte/src/components/PortfolioPreview.svelte
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<script>
|
||||
export let project;
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="titleCard" style="background-image:url({project.img})">
|
||||
<h1 class="title">{project.title}</h1>
|
||||
</div>
|
||||
<div class="pa3">
|
||||
<p class="desc mt0 mb2">{project.description}</p>
|
||||
<div class="tags">
|
||||
Tagged:
|
||||
{#each project.tags as t}
|
||||
<div class="tag" data-tag={t}>
|
||||
{t}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<a class="link" href={project.url}>
|
||||
<span class="linkInner">View</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
position: relative;
|
||||
color: var(--t-bg);
|
||||
background: var(--t-fg);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
font-size: var(--f-u4);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0625em;
|
||||
}
|
||||
.titleCard {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: 50% 100%;
|
||||
padding-top: 37.5%;
|
||||
}
|
||||
.desc {
|
||||
font-size: var(--f-u1);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--t-bg);
|
||||
font-size: var(--f-u2);
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: opacity 150ms linear;
|
||||
}
|
||||
.link:focus,
|
||||
.link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.link:focus .linkInner,
|
||||
.link:hover .linkInner {
|
||||
transform: translateY(0);
|
||||
border-color: rgba(255, 255, 255, 0.625);
|
||||
}
|
||||
.linkInner {
|
||||
padding: 0.375em 1em;
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1),
|
||||
border-color 1s linear;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.tags {
|
||||
font-size: var(--f-d2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
color: var(--c-yellow);
|
||||
text-transform: uppercase;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.tag:nth-of-type(1n) {
|
||||
color: var(--c-green);
|
||||
}
|
||||
.tag:nth-of-type(2n) {
|
||||
color: var(--c-orange);
|
||||
}
|
||||
.tag:nth-of-type(3n) {
|
||||
color: var(--c-blue);
|
||||
}
|
||||
.tag:nth-of-type(4n) {
|
||||
color: var(--c-pink);
|
||||
}
|
||||
</style>
|
||||
92
examples/portfolio-svelte/src/layouts/project.astro
Normal file
92
examples/portfolio-svelte/src/layouts/project.astro
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Button from '../components/Button.svelte';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import Nav from '../components/Nav.svelte';
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
<html lang={ content.lang || 'en' }>
|
||||
<head>
|
||||
<MainHead title={content.title} description={content.description} />
|
||||
<style lang="scss">
|
||||
.hero {
|
||||
padding: 8rem;
|
||||
display: flex;
|
||||
background-color: var(--t-fg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 25vw;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:nth-of-type(1n) {
|
||||
color: var(--c-green);
|
||||
}
|
||||
&:nth-of-type(2n) {
|
||||
color: var(--c-orange);
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
color: var(--c-blue);
|
||||
}
|
||||
&:nth-of-type(4n) {
|
||||
color: var(--c-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--f-u10);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0625em;
|
||||
}
|
||||
|
||||
.leadIn {
|
||||
color: var(--t-bg);
|
||||
background-color: var(--t-fg);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-weight: 300;
|
||||
font-size: var(--f-u3);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: var(--f-u1);
|
||||
line-height: 2.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<header style={`background-image:url(${content.img})`} class="hero">
|
||||
<h1 class="title">{content.title}</h1>
|
||||
</header>
|
||||
<div class="leadIn">
|
||||
<div class="wrapper pt8 pb8 mb8 tac">
|
||||
{content.tags.map((t) => (
|
||||
<span class="tag">{t}</span>
|
||||
))}
|
||||
<h3 class="tagline">{content.description}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper wrapper__readable">
|
||||
<div class="content"><slot></slot></div>
|
||||
</div>
|
||||
<footer class="tac mt6">
|
||||
<a href="/projects">
|
||||
<Button>View More</Button>
|
||||
</a>
|
||||
</footer>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
20
examples/portfolio-svelte/src/pages/404.astro
Normal file
20
examples/portfolio-svelte/src/pages/404.astro
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import Nav from '../components/Nav.svelte';
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<MainHead title="Not Found" />
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<div class="wrapper mt4 mb4">
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Not found</p>
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
60
examples/portfolio-svelte/src/pages/about.astro
Normal file
60
examples/portfolio-svelte/src/pages/about.astro
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import Nav from '../components/Nav.svelte';
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" />
|
||||
<style lang="scss">
|
||||
.heroImg {
|
||||
object-fit: cover;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
font-size: var(--f-u1);
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<div class="wrapper">
|
||||
<h1>About Jeanine</h1>
|
||||
<div class="heroImg">
|
||||
<img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" />
|
||||
</div>
|
||||
<div class="bio wrapper wrapper__readable mt8">
|
||||
<p>
|
||||
Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper
|
||||
jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
|
||||
</p>
|
||||
<p>
|
||||
Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino
|
||||
macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego.
|
||||
</p>
|
||||
<p>
|
||||
Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop
|
||||
cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie.
|
||||
</p>
|
||||
<p>
|
||||
Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino
|
||||
port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie.
|
||||
</p>
|
||||
<p>
|
||||
Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese
|
||||
triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop
|
||||
cauliflower cheese.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
247
examples/portfolio-svelte/src/pages/index.astro
Normal file
247
examples/portfolio-svelte/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
---
|
||||
// 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 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>
|
||||
<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/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>
|
||||
23
examples/portfolio-svelte/src/pages/project/mars-rover.md
Normal file
23
examples/portfolio-svelte/src/pages/project/mars-rover.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: ../../layouts/project.astro
|
||||
title: Mars Rover
|
||||
client: Self
|
||||
publishDate: 2020-03-02 00:00:00
|
||||
img: https://images.unsplash.com/photo-1547234935-80c7145ec969?fit=crop&w=1400&h=700&q=75
|
||||
description: |
|
||||
We built an unofficial Mars Rover Landing site in celebration of NASA’s Perseverance Rover.
|
||||
tags:
|
||||
- design
|
||||
- dev
|
||||
- branding
|
||||
---
|
||||
|
||||
Rubber cheese mascarpone cut the cheese. Jarlsberg parmesan cheesy grin cream cheese port-salut stinking bishop ricotta brie. Roquefort when the cheese comes out everybody's happy goat cheese triangles stilton cheese and biscuits goat babybel. Bocconcini roquefort queso danish fontina pecorino.
|
||||
|
||||
Smelly cheese stinking bishop roquefort. Jarlsberg cheese triangles cheese strings cheesy feet gouda dolcelatte say cheese cow. Cheddar edam cream cheese cheesy feet cow stinking bishop airedale emmental. Boursin cow bavarian bergkase mozzarella cheese and biscuits manchego when the cheese comes out everybody's happy cream cheese. Cheese on toast st. agur blue cheese croque monsieur halloumi.
|
||||
|
||||
Fromage frais jarlsberg st. agur blue cheese. Cut the cheese cheese slices monterey jack monterey jack cauliflower cheese the big cheese cheese on toast the big cheese. Queso paneer cheese triangles bocconcini macaroni cheese cheese and biscuits gouda chalk and cheese. Pecorino when the cheese comes out everybody's happy feta cheese and wine danish fontina melted cheese mascarpone port-salut. When the cheese comes out everybody's happy pecorino cottage cheese.
|
||||
|
||||
Caerphilly parmesan manchego. Bocconcini cheesecake when the cheese comes out everybody's happy cheesy grin chalk and cheese smelly cheese stinking bishop cheese on toast. Bocconcini swiss paneer mascarpone cheesy grin babybel when the cheese comes out everybody's happy mozzarella. Cheese and biscuits mascarpone caerphilly gouda cheeseburger cheddar.
|
||||
|
||||
Cheese and biscuits cheesy grin roquefort. Ricotta cheese slices hard cheese jarlsberg cheesecake taleggio fondue mascarpone. Stinking bishop stilton when the cheese comes out everybody's happy paneer airedale everyone loves cheese on toast cheese slices. Ricotta cut the cheese cheese triangles babybel cream cheese ricotta.
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: ../../../layouts/project.astro
|
||||
title: Lunar Eclipse
|
||||
client: Self
|
||||
publishDate: 2020-03-04 00:00:00
|
||||
img: https://images.unsplash.com/photo-1548391350-1a529f6ea42d?fit=crop&w=1400&h=700&q=75
|
||||
description: |
|
||||
We took some cool pictures of the moon and made a website about it.
|
||||
tags:
|
||||
- design
|
||||
- dev
|
||||
- branding
|
||||
---
|
||||
|
||||
Rubber cheese mascarpone cut the cheese. Jarlsberg parmesan cheesy grin cream cheese port-salut stinking bishop ricotta brie. Roquefort when the cheese comes out everybody's happy goat cheese triangles stilton cheese and biscuits goat babybel. Bocconcini roquefort queso danish fontina pecorino.
|
||||
|
||||
Smelly cheese stinking bishop roquefort. Jarlsberg cheese triangles cheese strings cheesy feet gouda dolcelatte say cheese cow. Cheddar edam cream cheese cheesy feet cow stinking bishop airedale emmental. Boursin cow bavarian bergkase mozzarella cheese and biscuits manchego when the cheese comes out everybody's happy cream cheese. Cheese on toast st. agur blue cheese croque monsieur halloumi.
|
||||
|
||||
Fromage frais jarlsberg st. agur blue cheese. Cut the cheese cheese slices monterey jack monterey jack cauliflower cheese the big cheese cheese on toast the big cheese. Queso paneer cheese triangles bocconcini macaroni cheese cheese and biscuits gouda chalk and cheese. Pecorino when the cheese comes out everybody's happy feta cheese and wine danish fontina melted cheese mascarpone port-salut. When the cheese comes out everybody's happy pecorino cottage cheese.
|
||||
|
||||
Caerphilly parmesan manchego. Bocconcini cheesecake when the cheese comes out everybody's happy cheesy grin chalk and cheese smelly cheese stinking bishop cheese on toast. Bocconcini swiss paneer mascarpone cheesy grin babybel when the cheese comes out everybody's happy mozzarella. Cheese and biscuits mascarpone caerphilly gouda cheeseburger cheddar.
|
||||
|
||||
Cheese and biscuits cheesy grin roquefort. Ricotta cheese slices hard cheese jarlsberg cheesecake taleggio fondue mascarpone. Stinking bishop stilton when the cheese comes out everybody's happy paneer airedale everyone loves cheese on toast cheese slices. Ricotta cut the cheese cheese triangles babybel cream cheese ricotta.
|
||||
38
examples/portfolio-svelte/src/pages/projects.astro
Normal file
38
examples/portfolio-svelte/src/pages/projects.astro
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import Nav from '../components/Nav.svelte';
|
||||
import PortfolioPreview from '../components/PortfolioPreview.svelte';
|
||||
|
||||
interface MarkdownFrontmatter {
|
||||
publishDate: number;
|
||||
}
|
||||
|
||||
const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md')
|
||||
.filter(({ publishDate }) => !!publishDate)
|
||||
.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" />
|
||||
<style lang="scss">
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 3rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<div class="wrapper">
|
||||
<h1 class="title mt4 mb4">All Projects</h1>
|
||||
<div class="grid">
|
||||
{projects.map((project) => (
|
||||
<PortfolioPreview project={project} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
163
examples/portfolio-svelte/src/scss/global.scss
Normal file
163
examples/portfolio-svelte/src/scss/global.scss
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
// Tokens
|
||||
:root {
|
||||
// (c)olor
|
||||
--c-black: #05091e;
|
||||
--c-blue: #46b4ff;
|
||||
--c-gray: #90aab7;
|
||||
--c-green: #9ef2cb;
|
||||
--c-pink: #ffb8d9;
|
||||
--c-orange: #ffb7a3;
|
||||
--c-yellow: #ffdace;
|
||||
--c-white: #fff;
|
||||
|
||||
// (f)ont
|
||||
--f-u18: 11.390625em;
|
||||
--f-u17: 9.950627481136905em;
|
||||
--f-u16: 8.692673779389363em;
|
||||
--f-u15: 7.59375em;
|
||||
--f-u14: 6.63375165409127em;
|
||||
--f-u13: 5.795115852926242em;
|
||||
--f-u12: 5.0625em;
|
||||
--f-u11: 4.422501102727513em;
|
||||
--f-u10: 3.8634105686174953em;
|
||||
--f-u9: 3.375em;
|
||||
--f-u8: 2.9483340684850083em;
|
||||
--f-u7: 2.575607045744997em;
|
||||
--f-u6: 2.25em;
|
||||
--f-u5: 1.9655560456566725em;
|
||||
--f-u4: 1.7170713638299977em;
|
||||
--f-u3: 1.5em;
|
||||
--f-u2: 1.3103706971044482em;
|
||||
--f-u1: 1.1447142425533319em;
|
||||
--f-d1: 0.8735804647362989em;
|
||||
--f-d2: 0.7631428283688879em;
|
||||
--f-d3: 0.6666666666666666em;
|
||||
--f-d4: 0.5823869764908659em;
|
||||
--f-d5: 0.5087618855792586em;
|
||||
--f-d6: 0.4444444444444444em;
|
||||
--f-d7: 0.3882579843272439em;
|
||||
--f-d8: 0.3391745903861724em;
|
||||
--f-d9: 0.2962962962962963em;
|
||||
--f-d10: 0.2588386562181626em;
|
||||
--f-d11: 0.22611639359078162em;
|
||||
--f-d12: 0.19753086419753085em;
|
||||
--f-d13: 0.17255910414544176em;
|
||||
--f-d14: 0.15074426239385438em;
|
||||
--f-d15: 0.13168724279835392em;
|
||||
--f-d16: 0.11503940276362785em;
|
||||
--f-d17: 0.10049617492923625em;
|
||||
--f-d18: 0.0877914951989026em;
|
||||
|
||||
// (t)heme
|
||||
--t-fg: var(--c-black);
|
||||
--t-bg: var(--c-white);
|
||||
--t-subdue: var(--c-gray);
|
||||
--t-active: var(--c-blue);
|
||||
}
|
||||
|
||||
// Base
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--t-fg);
|
||||
font-family: 'Inter', 'system-ui', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--t-active);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--f-u8);
|
||||
}
|
||||
|
||||
// Utils
|
||||
|
||||
// color
|
||||
$colors: 'black', 'blue', 'white';
|
||||
@each $color in $colors {
|
||||
// text color
|
||||
.tc-#{$color} {
|
||||
color: var(--c-#{color});
|
||||
}
|
||||
// background color
|
||||
.bg-#{$color} {
|
||||
background-color: var(--c-#{color});
|
||||
}
|
||||
}
|
||||
|
||||
// font size
|
||||
@for $i from 0 through 18 {
|
||||
.f-u#{$i} {
|
||||
font-size: var(--f-u#{$i});
|
||||
}
|
||||
.f-d#{$i} {
|
||||
font-size: var(--f-d#{$i});
|
||||
}
|
||||
}
|
||||
|
||||
// margin & padding
|
||||
@for $i from 0 through 36 {
|
||||
.ma#{$i} {
|
||||
margin: #{0.5 * $i}rem;
|
||||
}
|
||||
.mt#{$i} {
|
||||
margin-top: #{0.5 * $i}rem;
|
||||
}
|
||||
.mr#{$i} {
|
||||
margin-right: #{0.5 * $i}rem;
|
||||
}
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{0.5 * $i}rem;
|
||||
}
|
||||
.ml#{$i} {
|
||||
margin-left: #{0.5 * $i}rem;
|
||||
}
|
||||
.pa#{$i} {
|
||||
padding: #{0.5 * $i}rem;
|
||||
}
|
||||
.pt#{$i} {
|
||||
padding-top: #{0.5 * $i}rem;
|
||||
}
|
||||
.pr#{$i} {
|
||||
padding-right: #{0.5 * $i}rem;
|
||||
}
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{0.5 * $i}rem;
|
||||
}
|
||||
.pl#{$i} {
|
||||
padding-left: #{0.5 * $i}rem;
|
||||
}
|
||||
}
|
||||
|
||||
// text align
|
||||
.tac {
|
||||
text-align: center;
|
||||
}
|
||||
.tal {
|
||||
text-align: left;
|
||||
}
|
||||
.tar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// wrapper
|
||||
.wrapper {
|
||||
max-width: 80em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.wrapper__readable {
|
||||
max-width: 50em;
|
||||
}
|
||||
3
examples/portfolio-svelte/tsconfig.json
Normal file
3
examples/portfolio-svelte/tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
|
|
@ -19,6 +19,11 @@ export const TEMPLATES = [
|
|||
value: 'portfolio',
|
||||
renderers: ['@astrojs/renderer-preact'],
|
||||
},
|
||||
{
|
||||
title: 'Portfolio Svelte',
|
||||
value: 'portfolio-svelte',
|
||||
renderers: ['@astrojs/renderer-svelte'],
|
||||
},
|
||||
{
|
||||
title: 'Minimal',
|
||||
value: 'minimal',
|
||||
|
|
|
|||
Loading…
Reference in a new issue