diff --git a/components/Bio/Bio.module.css b/components/Bio/Bio.module.css
index 7f90f87..bfbacc8 100644
--- a/components/Bio/Bio.module.css
+++ b/components/Bio/Bio.module.css
@@ -1,9 +1,25 @@
.bio {
+ position: relative;
margin-top: 200px;
color: var(--light-text);
}
+.bio .pic {
+ position: absolute;
+ z-index: 1;
+ left: -7rem;
+ top: 2.5rem;
+}
+
+.bio .blob {
+ position: absolute;
+ z-index: 0;
+ left: -9.5rem;
+ top: -2.5rem;
+}
+
.bio h1 {
+ position: relative;
font-size: 3.8rem;
}
@@ -12,6 +28,7 @@
}
.bio p {
+ position: relative;
font-weight: bold;
font-size: 1.9rem;
line-height: 35px;
diff --git a/components/Bio/Bio.tsx b/components/Bio/Bio.tsx
index e3c1d20..b170caf 100644
--- a/components/Bio/Bio.tsx
+++ b/components/Bio/Bio.tsx
@@ -1,10 +1,13 @@
import React from "react";
+import { BlueBlob } from "../Blobs/Blobs";
import SocialLinks from "../SocialLinks/SocialLinks";
import styles from "./Bio.module.css";
function Bio() {
return (
+

+
Hi, i'm Ethan.
diff --git a/components/Blobs/Blobs.ts b/components/Blobs/Blobs.ts
new file mode 100644
index 0000000..b5254eb
--- /dev/null
+++ b/components/Blobs/Blobs.ts
@@ -0,0 +1,8 @@
+import BlueBlob from "./BlueBlob";
+import GreenBlob from "./GreenBlob";
+import LightBlueBlob from "./LightBlueBlob";
+import LightPurpleBlob from "./LightPurpleBlob";
+import PurpleBlob from "./PurpleBlob";
+import YellowBlob from "./YellowBlob";
+
+export { BlueBlob, GreenBlob, LightBlueBlob, LightPurpleBlob, PurpleBlob, YellowBlob };
diff --git a/components/Blobs/BlueBlob.tsx b/components/Blobs/BlueBlob.tsx
new file mode 100644
index 0000000..45e2c39
--- /dev/null
+++ b/components/Blobs/BlueBlob.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+type BlueBlobProps = {
+ className?: string;
+};
+
+function BlueBlob({ className }: BlueBlobProps) {
+ return (
+
+ );
+}
+
+export default BlueBlob;
diff --git a/components/Blobs/GreenBlob.tsx b/components/Blobs/GreenBlob.tsx
new file mode 100644
index 0000000..8acbece
--- /dev/null
+++ b/components/Blobs/GreenBlob.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+function GreenBlob({ className }) {
+ return (
+
+ );
+}
+
+export default GreenBlob;
diff --git a/components/Blobs/LightBlueBlob.tsx b/components/Blobs/LightBlueBlob.tsx
new file mode 100644
index 0000000..2e1eb1e
--- /dev/null
+++ b/components/Blobs/LightBlueBlob.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+function LightBlueBlob({ className }) {
+ return (
+
+ );
+}
+
+export default LightBlueBlob;
diff --git a/components/Blobs/LightPurpleBlob.tsx b/components/Blobs/LightPurpleBlob.tsx
new file mode 100644
index 0000000..e9fa7b1
--- /dev/null
+++ b/components/Blobs/LightPurpleBlob.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+function LightPurpleBlob({ className }) {
+ return (
+
+ );
+}
+
+export default LightPurpleBlob;
diff --git a/components/Blobs/PurpleBlob.tsx b/components/Blobs/PurpleBlob.tsx
new file mode 100644
index 0000000..5ca5f3f
--- /dev/null
+++ b/components/Blobs/PurpleBlob.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+function PurpleBlob({ className }) {
+ return (
+
+ );
+}
+
+export default PurpleBlob;
diff --git a/components/Blobs/YellowBlob.tsx b/components/Blobs/YellowBlob.tsx
new file mode 100644
index 0000000..8278eb6
--- /dev/null
+++ b/components/Blobs/YellowBlob.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+function YellowBlob({ className }) {
+ return (
+
+ );
+}
+
+export default YellowBlob;
diff --git a/components/NavBar/NavBar.module.css b/components/NavBar/NavBar.module.css
index 48dc811..c7806c8 100644
--- a/components/NavBar/NavBar.module.css
+++ b/components/NavBar/NavBar.module.css
@@ -1,5 +1,6 @@
.nav {
margin: 0 0 0 auto;
+ z-index: 1;
}
.nav a {
diff --git a/pages/index.tsx b/pages/index.tsx
index 02cd400..22f2a90 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,3 +1,4 @@
+import { GreenBlob, LightBlueBlob, LightPurpleBlob, PurpleBlob, YellowBlob } from "../components/Blobs/Blobs";
import Bio from "../components/Bio/Bio";
import RightArrowIcon from "../components/Icons/RightArrowIcon";
import ProjectCard from "../components/ProjectCard/ProjectCard";
@@ -6,6 +7,11 @@ import styles from "../styles/Home.module.css";
function Home() {
return (