Add basic content for hero

astro-imagetools.config.mjs

@@ -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,
+            },
+        },
+    },
+})

astro.config.mjs

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

package.json

@@ -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",

public/fonts/fonts.css

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

src/components/content/index/Hero.astro

@@ -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>

src/components/content/index/Section.astro

@@ -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>

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -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>

src/layouts/properties/Head.astro

@@ -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>

src/pages/index.astro

@@ -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>

tailwind.config.cjs

@@ -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',