diff --git a/src/assets/headshot.jpg b/src/assets/headshot.jpg
new file mode 100644
index 00000000..e18099ad
Binary files /dev/null and b/src/assets/headshot.jpg differ
diff --git a/src/assets/illustrations/blob.svg b/src/assets/illustrations/blob.svg
deleted file mode 100644
index f95c9567..00000000
--- a/src/assets/illustrations/blob.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/illustrations/undraw-developer-activity.svg b/src/assets/illustrations/undraw-developer-activity.svg
deleted file mode 100644
index be09e11d..00000000
--- a/src/assets/illustrations/undraw-developer-activity.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/illustrations/undraw-feeling-proud.svg b/src/assets/illustrations/undraw-feeling-proud.svg
deleted file mode 100644
index 59535540..00000000
--- a/src/assets/illustrations/undraw-feeling-proud.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fc09d5c6..5db45204 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,14 @@
---
+import { Picture } from "astro:assets";
+
import MainLayout from "../layouts/Main.astro";
import Projects from "../components/Projects.astro";
import Contact from "../components/ContactForm.astro";
import TiltDivider from "../assets/hero-tilt-divider.svg?raw";
-import feelingProudIllustration from "../assets/illustrations/undraw-feeling-proud.svg?raw";
-import Blob from "../assets/illustrations/blob.svg?raw";
+import Headshot from "../assets/headshot.jpg";
+
const yearsAsDev = new Date().getFullYear() - 2021;
---
@@ -49,11 +51,13 @@ const yearsAsDev = new Date().getFullYear() - 2021;
websites for a variety of individuals and businesses.
-
@@ -189,39 +193,29 @@ const yearsAsDev = new Date().getFullYear() - 2021;
&#about {
.section-content {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr max-content;
+ gap: 12rem;
align-items: center;
+ justify-content: space-between;
.content {
p {
font-size: 1.25rem;
}
}
-
- .illustration {
- position: relative;
+
+ .headshot {
display: grid;
place-content: center;
z-index: 0;
-
- .blob {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 25rem;
- height: 25rem;
- transform: translate(-50%, -50%);
- z-index: -1;
- :global(svg) {
- width: 100%;
- height: 100%;
- }
- }
-
- :global(.feeling-proud-illustration) {
- width: 18rem;
- height: auto;
+ img {
margin-left: auto;
+ height: auto;
+ width: 20rem;
+ max-width: 100%;
+ aspect-ratio: 1/1;
+ border-radius: 100%;
+ outline: 2px solid var(--accent);
}
}
}
@@ -289,22 +283,23 @@ const yearsAsDev = new Date().getFullYear() - 2021;
gap: 4rem;
padding-top: 2rem;
- .illustration {
+ .headshot {
grid-row: 1;
- :global(.feeling-proud-illustration) {
- width: 60%;
- height: auto;
+ img {
+ width: 80%;
margin: 0 auto;
}
-
- .blob {
- width: 20rem;
- height: 20rem;
- }
}
}
}
}
+ @media screen and (max-width: 768px) {
+ .title {
+ h1 {
+ font-size: 5rem;
+ }
+ }
+ }
}
}
\ No newline at end of file