From b3853c78dea067bb2fc49b25173fb9133015de64 Mon Sep 17 00:00:00 2001
From: theamazing0 <samvidk@proton.me>
Date: Tue, 18 Jun 2024 17:02:32 -0400
Subject: [PATCH] Finished up icons on home, worked on cards for projects

---
 public/Ellipse.svg               |  1 +
 public/arrow-up-right.svg        |  1 +
 public/astro.svg                 |  1 +
 public/git.svg                   |  2 +-
 public/mastodon.svg              |  2 +-
 public/matrix.svg                |  2 +-
 src/components/Icon.astro        | 16 +++++++++++
 src/components/ProjectCard.astro | 47 ++++++++++++++++++++++++++++++++
 src/pages/index.astro            | 11 ++++++--
 src/pages/projects.astro         | 35 ++++++++++++++++++++++++
 10 files changed, 112 insertions(+), 6 deletions(-)
 create mode 100644 public/Ellipse.svg
 create mode 100644 public/arrow-up-right.svg
 create mode 100644 public/astro.svg
 create mode 100644 src/components/Icon.astro
 create mode 100644 src/components/ProjectCard.astro
 create mode 100644 src/pages/projects.astro

diff --git a/public/Ellipse.svg b/public/Ellipse.svg
new file mode 100644
index 0000000..3e80523
--- /dev/null
+++ b/public/Ellipse.svg
@@ -0,0 +1 @@
+<svg width="60" xmlns="http://www.w3.org/2000/svg" height="60" fill="none"><circle cx="30" cy="30" style="fill: rgb(177, 178, 181); fill-opacity: 1;" r="30" class="fills"/></svg>
\ No newline at end of file
diff --git a/public/arrow-up-right.svg b/public/arrow-up-right.svg
new file mode 100644
index 0000000..5a5e298
--- /dev/null
+++ b/public/arrow-up-right.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6.00005 19L19 5.99996M19 5.99996V18.48M19 5.99996H6.52005" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/public/astro.svg b/public/astro.svg
new file mode 100644
index 0000000..2df2147
--- /dev/null
+++ b/public/astro.svg
@@ -0,0 +1 @@
+<svg role="img" fill="#9dac93" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Astro</title><path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.856 1.026 2.043 1.352 3.272 1.535 1.897.283 3.76.177 5.522-.678.202-.098.388-.229.608-.36.166.473.209.95.151 1.437-.14 1.185-.738 2.1-1.688 2.794-.38.277-.782.525-1.175.787-1.205.804-1.531 1.747-1.078 3.119l.044.148a3.158 3.158 0 0 1-1.407-1.188 3.31 3.31 0 0 1-.544-1.815c-.004-.32-.004-.642-.048-.958-.106-.769-.472-1.113-1.161-1.133-.707-.02-1.267.411-1.415 1.09-.012.053-.028.104-.045.165h.002zm-5.961-4.445s3.24-1.575 6.49-1.575l2.451-7.565c.092-.366.36-.614.662-.614.302 0 .57.248.662.614l2.45 7.565c3.85 0 6.491 1.575 6.491 1.575L16.088.727C15.93.285 15.663 0 15.303 0H8.697c-.36 0-.615.285-.784.727l-5.516 14.99z"/></svg>
\ No newline at end of file
diff --git a/public/git.svg b/public/git.svg
index 13af359..9b8f291 100644
--- a/public/git.svg
+++ b/public/git.svg
@@ -1 +1 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Git</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
\ No newline at end of file
+<svg role="img" fill="#9dac93" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Git</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
\ No newline at end of file
diff --git a/public/mastodon.svg b/public/mastodon.svg
index 5e3b7e1..11a6b35 100644
--- a/public/mastodon.svg
+++ b/public/mastodon.svg
@@ -1 +1 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
\ No newline at end of file
+<svg role="img" fill="#9dac93" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
\ No newline at end of file
diff --git a/public/matrix.svg b/public/matrix.svg
index 05385ef..5e77084 100644
--- a/public/matrix.svg
+++ b/public/matrix.svg
@@ -1 +1 @@
-<svg stroke="#9dac93" fill="#9dac93" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
\ No newline at end of file
+<svg fill="#9dac93" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
new file mode 100644
index 0000000..57178aa
--- /dev/null
+++ b/src/components/Icon.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+	icon: string;
+    size: string;
+}
+
+const { icon, size } = Astro.props;
+---
+
+<img src=`${ icon }.svg` width=`${ size }px` height=`${ size }px` />
+
+<style>
+    img {
+        margin-right: 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
new file mode 100644
index 0000000..186ce9c
--- /dev/null
+++ b/src/components/ProjectCard.astro
@@ -0,0 +1,47 @@
+---
+interface Props {
+    name: string;
+}
+
+const { name } = Astro.props;
+
+import Icon from "../components/Icon.astro";
+---
+
+<div id="main">
+    <div style="display:flex">
+        <div style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 0.7rem;">
+            <img src="/Ellipse.svg" width="50px" height="50px" />
+        </div>
+        <div style="margin-left:1rem" class="cardText">
+            <h2>Portfolio</h2>
+            <p>A website to display my awesomeness</p>
+        </div>
+    </div>
+    <div style="display:flex;">
+        <div id="languages"><Icon icon="astro" size="32" /></div>
+        <div style="margin-left: auto;"><Icon icon="git" size="32" /></div>
+    </div>
+</div>
+
+<style>
+    #main {
+        background-color: #292e28;
+        border-radius: 8px;
+        width: fit-content;
+        padding: 0.5rem;
+        line-height: 1;
+        max-width: 35%;
+    }
+    .cardText {
+        h2 {
+            font-weight: 500;
+            font-size: 1.5rem;
+            color: #e6fbd4;
+        }
+        p {
+            font-weight: 400;
+            color: #9dac93;
+        }
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 40ebd52..8fa0019 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+import Icon from "../components/Icon.astro";
+
 ---
 
 <Layout title="Samvid Konchada">
@@ -9,8 +11,10 @@ import Card from "../components/Card.astro";
         <p class="subtitle">
             Hey there! I'm Samvid, a high schooler interested in computer science and programming.
         </p>
-        <div>
-            <img src="../../public/matrix.svg" width="32px" height="32px" />
+        <div style="margin-top:2rem">
+            <Icon icon="matrix" size="32"></Icon>
+            <Icon icon="mastodon" size="32"></Icon>
+            <Icon icon="git" size="32"></Icon>
         </div>
     </main>
 </Layout>
@@ -18,6 +22,7 @@ import Card from "../components/Card.astro";
 <style>
     main {
         color: white;
+        
         font-size: 20px;
         /* line-height: 1.6; */
     }
@@ -35,7 +40,7 @@ import Card from "../components/Card.astro";
     }
     .subtitle {
         color: #c3d6b2;
-        max-width: 50%;
+        max-width: 55%;
         font-size: 1.6rem;
         margin: 0px;
     }
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
new file mode 100644
index 0000000..cf551ee
--- /dev/null
+++ b/src/pages/projects.astro
@@ -0,0 +1,35 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ProjectCard from "../components/ProjectCard.astro";
+import Icon from "../components/Icon.astro";
+---
+
+<Layout title="Samvid Konchada">
+    <main>
+        <h1 class="header">Projects</h1>
+        <div>
+            <ProjectCard name="hi" />
+        </div>
+    </main>
+</Layout>
+
+<style>
+    main {
+        color: white;
+
+        font-size: 20px;
+        /* line-height: 1.6; */
+    }
+    html {
+        background-image: url("bg.svg");
+        background-attachment: fixed;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    .header {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
+    }
+</style>