Update index

Author: ctrl-vi

src/assets/monserate-headshot.png

@@ -2,6 +2,7 @@
     box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.2);
     transition: 0.15s;
     height: 100%;
+    border-radius: 1em;
 }
 
 a {
@@ -16,6 +17,7 @@ a {
 .card>.card-image {
     width: 100%;
     height: auto;
+    border-radius: 1em 1em 0px 0px; 
 }
 
 .card>.card-icon-container {

src/components/Card.css

@@ -25,6 +25,8 @@
     display: block;
     text-align: left;
     text-wrap: break-word;
+    transition: 0.1s;
+
 }
 
 /* Add a grey background color to dropdown links on hover */

src/components/NavDropdown.css

@@ -11,6 +11,8 @@
     text-decoration: none;
     height: 100%;
     line-height: 1em;
+    transition: 0.1s;
+
 }
 
 .link a:hover,

src/components/Navlink.css

@@ -1,8 +1,10 @@
 ---
 import Layout from "@components/Layout.astro";
-
 import "../styles/global.css";
+import "../styles/index.css";
 
+import headshot from "@assets/monserate-headshot.png";
+import { Image } from "astro:assets";
 const pageTitle = "Home";
 const ogType = "website";
 const ogDescription =
@@ -12,16 +14,24 @@ const seoDescription =
 ---
 
 <Layout {pageTitle} {ogType} {ogDescription} {seoDescription}>
-	<h1>{pageTitle}</h1>
-	<h2>Computer Engineering and Philosophy: Ethics Student</h2>
-	<p>
-		Welcome to my brand new* website! This is a place where I will be
-		posting my projects, blog posts, and other things I find interesting.
-	</p>
-	<p>&lt;Big Button to "about me"&gt;</p>
-	<p>&lt;Big Button to "projects"&gt;</p>
-	<p>
-		*This website is still under construction, so please excuse the mess! I
-		will be adding more content soon.
-	</p>
+	<div id="content">
+		<div id="left">
+			<h1>Violet Monserate</h1>
+			<h2>Computer Engineering and Philosophy: Ethics Student</h2>
+			<p>
+				Welcome to my website! This is a place where I will
+				posting my projects, contact info, and other things I find
+				interesting. Feel free to explore, and feel free to contact
+				me below. I love hearing from folks!
+			</p>
+			<a href="/about" class="button">About Me</a>
+			<a href="/projects" class="button">Projects</a>
+			<a href="/contact" class="button">Contact Me</a>
+		</div>
+		<Image
+			id="headshot"
+			src={headshot}
+			alt="Headshot of Violet Monserate, a brown woman with long black hair, playing cello"
+		/>
+	</div>
 </Layout>

src/pages/index.astro

@@ -0,0 +1,68 @@
+#content {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    min-height: 70vh;
+    gap: 2em;
+    padding: 2em 1em;
+}
+
+#left {
+    flex: 1 1 300px;
+    max-width: 500px;
+}
+
+#headshot {
+    width: 100%;
+    height: auto;
+    border-radius: 1em;
+    box-shadow: 0 4px 24px rgba(80, 0, 120, 0.15);
+    object-fit: cover;
+    margin: 0 auto;
+    display: block;
+}
+
+.button {
+    background: #7213ad;
+    border: none;
+    color: white;
+    padding: 0.75em 2em;
+    margin: 0.5em 0.5em 0 0;
+    border-radius: 1em;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    box-shadow: 0 2px 8px rgba(80, 0, 120, 0.08);
+    transition: 0.1s;
+    cursor: pointer;
+}
+.button:hover, .button:focus {
+    background: #af2eff;
+}
+
+h1 {
+    font-size: 2.5em;
+    margin-bottom: 0.2em;
+}
+
+p {
+    font-size: 1.1em;
+    color: #333;
+    margin-bottom: 1.5em;
+}
+
+@media (max-width: 900px) {
+    #content {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1.5em;
+        min-height: unset;
+    }
+    #headshot {
+        margin-bottom: 1em;
+    }
+    #left {
+        max-width: 100%;
+    }
+}