me
/
ethanreece.com
Archived
1
0
Fork 0

Add basic content for hero

main
Ethan Reece 2023-05-31 00:45:49 -05:00
parent 7c99b084a1
commit 9e14f90d92
Signed by: me
GPG Key ID: D3993665FF92E1C3
30 changed files with 1015 additions and 26 deletions

View File

@ -0,0 +1,32 @@
import { defineConfig } from 'astro-imagetools/config'
export default defineConfig({
placeholder: 'blurred',
format: ['webp', 'jpg'],
fallbackFormat: 'png',
includeSourceFormat: false,
formatOptions: {
jpg: {
quality: 80,
},
png: {
quality: 80,
},
webp: {
quality: 50,
},
tracedSVG: {
function: 'trace',
options: {
background: '#fff',
color: '#000',
turnPolicy: 'black',
turdSize: 1,
alphaMax: 1,
optCurve: true,
threshold: 100,
blackOnWhite: false,
},
},
},
})

View File

@ -1,8 +1,9 @@
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config'
import tailwind from '@astrojs/tailwind'
import { astroImageTools } from 'astro-imagetools'
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});
integrations: [tailwind(), astroImageTools],
})

View File

@ -11,8 +11,11 @@
},
"dependencies": {
"@astrojs/tailwind": "^3.1.3",
"@fontsource-variable/jetbrains-mono": "^5.0.3",
"astro": "^2.5.5",
"astro-imagetools": "^0.8.1",
"astro-seo": "^0.7.2",
"sharp": "^0.32.1",
"tailwindcss": "^3.3.2",
"tailwindcss-hero-patterns": "^0.1.2"
},
@ -25,6 +28,7 @@
"eslint-plugin-astro": "^0.27.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-tailwindcss": "^3.12.0",
"find-up": "^6.3.0",
"prettier": "^2.8.8",
"prettier-plugin-astro": "^0.9.1",
"prettier-plugin-sort-imports": "^1.7.2",

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +0,0 @@
@font-face {
font-family: JetBrainsMono-Regular;
src: url('JetBrainsMono/JetBrainsMono-Regular.woff2');
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 MiB

View File

@ -0,0 +1,29 @@
---
import { Picture } from 'astro-imagetools/components'
---
<section class="flex h-[25rem] items-center p-[3rem]">
<div class="ml-auto text-[1.75rem]">
<i><b><u>Hello</u></b><span class="text-font-light">, I am</span></i>
<br />
<b class="text-[3rem]">Ethan Reece</b>
<br />
<i
><span class="text-font-light">and I do</span>
<b><u>web stuff</u></b></i
><span class="text-font-light">.</span>
</div>
<div class="mr-auto h-full">
<Picture
src="../public/images/index/myself.png"
alt="black and white portrait of myself"
sizes={(breakpoints: any) => {
const maxWidth = breakpoints[breakpoints.length - 1]
return `(min-width: ${maxWidth}px) ${maxWidth}px, 100vw`
}}
fit="cover"
layout="fill"
placeholder="none"
/>
</div>
</section>

View File

@ -6,6 +6,6 @@ export interface Props {
const { background } = Astro.props
---
<div class={background ? 'bg-background-dark' : ''}>
<section class={background ? 'bg-background-dark' : ''}>
<slot />
</div>
</section>

View File

@ -4,6 +4,7 @@ import Font from './properties/Font.astro'
import Head from './properties/Head.astro'
import Navbar from '../components/content/global/Navbar.astro'
import { SEO } from 'astro-seo'
import Footer from '../components/content/global/Footer.astro'
export interface Props {
title: string
@ -22,8 +23,11 @@ const { title, description } = Astro.props
<Font>
<Background>
<Navbar />
<slot />
<main>
<slot />
</main>
</Background>
<Footer />
</Font>
</body>
</html>

View File

@ -4,5 +4,4 @@
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<link rel="stylesheet" href="/fonts/fonts.css" />
</head>

View File

@ -1,7 +1,17 @@
---
import Hero from '../components/content/index/Hero.astro'
import About from '../components/content/index/About.astro'
import Projects from '../components/content/index/Projects.astro'
import Experience from '../components/content/index/Experience.astro'
import Hobbies from '../components/content/index/Hobbies.astro'
import Base from '../layouts/Base.astro'
---
<Base title="Ethan Reece" description="">
<p>hello world</p>
<Hero />
<About />
<Projects />
<Experience />
<Hobbies />
</Base>

View File

@ -15,10 +15,11 @@ module.exports = {
'background-dark': '#bbd8bb',
'background-light': '#ffffff',
font: '#000000',
'font-light': '#004f07',
pattern: 'rgba(0,0,0,.02)',
},
fontFamily: {
main: ['JetBrainsMono-Regular', 'monospace'],
main: ['JetBrains Mono Variable', 'monospace'],
},
backgroundSize: {
contain: 'contain',