diff --git a/package.json b/package.json
index ee34480..47667ca 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^17.0.0",
     "@types/react-animate-on-scroll": "^2.1.2",
     "@types/react-dom": "^17.0.0",
+    "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-slick": "^0.23.4",
     "@types/react-syntax-highlighter": "^13.5.2",
@@ -24,6 +25,7 @@
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.3",
+    "react-modal": "^3.16.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
diff --git a/src/components/blog-card/BlogCard.css b/src/components/blog-card/BlogCard.css
index 896a903..3e3b47a 100644
--- a/src/components/blog-card/BlogCard.css
+++ b/src/components/blog-card/BlogCard.css
@@ -24,7 +24,7 @@
 }
 
 .blog-card-int {
-    border-radius: 10px;
+    border-radius: 7px;
     background-color: #1a1a1e;
     transition: 1s;
 }
diff --git a/src/components/hobbies/Hobbies.tsx b/src/components/hobbies/Hobbies.tsx
index fcc078c..9dac0e5 100644
--- a/src/components/hobbies/Hobbies.tsx
+++ b/src/components/hobbies/Hobbies.tsx
@@ -9,36 +9,13 @@ export default function Hobbies () {
     const [cur, setCur] = useState(1);
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
-            <div style={{
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "column",
-                width: "96vw",
-                height: "100vh",
-                minHeight: "100vh",
-                alignContent: "center",
-                alignItems: "center"
-            }}>
-                <div className={"d-md-block d-none"}>
-                    <h1>Hobbies</h1>
+
+                <div>
+
                     {AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
                                                          info={hobby}/>)}
                 </div>
 
-                <div className={"align-content-center d-md-none"}>
-                    <h1 className={"mb-4"}>Other Hobbies</h1>
-                    <p>{cur}/{AllHobbies.length}</p>
-                    <Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
-                        {AllHobbies.map((hobby, i) =>
-                            <Carousel.Item>
-                                <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
-                                          info={hobby}/>
-                            </Carousel.Item>
-                        )}
-                    </Carousel>
-
-                </div>
-            </div>
         </div>
     )
 }
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index ed9f914..f7a6bd0 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -6,7 +6,7 @@ export default function Navbar() {
     const location = useLocation();
 
     return (
-        <div style={{maxWidth:"100%", marginTop: 10}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-down-d3s" : "")} >
+        <div style={{maxWidth:"100%", marginTop: 10, maxHeight: "5vh"}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-down-d3s" : "")} >
             <div className={"d-flex flex-row justify-content-around"} style={{width: 700}}>
                 <div className={"d-flex flex-column justify-content-center align-items-center"}>
                     <Link to={"/home"} className={"mb-0 no-blue-link"}>Home</Link>
diff --git a/src/components/project-card/ProjectCard.css b/src/components/project-card/ProjectCard.css
new file mode 100644
index 0000000..0a1fe1e
--- /dev/null
+++ b/src/components/project-card/ProjectCard.css
@@ -0,0 +1,171 @@
+.project-card {
+
+    padding: 3px;
+}
+
+.project-card-int {
+    background-color: #222;
+    padding: 2px;
+    background-size: cover;
+    background-position: center;
+    transition: .5s;
+    border-radius: 10px;
+}
+
+.project-card-int:hover {
+    transform: translateY(-5px);
+    transition: .5s;
+    cursor: pointer;
+}
+
+.project-card-modal {
+    background-color: #000000;
+    color: #FFFFFF;
+    width: 100vmin;
+    height: max-content;
+    position: absolute;
+
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    outline: none;
+    padding: 5vmin;
+}
+
+.ReactModal__Overlay  {
+    background-color: rgba(20,20,20,.8) !important;
+    backdrop-filter: blur(5px);
+}
+
+.back-button {
+    color: #2F74C0;
+}
+
+.back-button:hover {
+    cursor: pointer;
+}
+
+.lang-card {
+    border-radius: 5px;
+    font-family: monospace;
+    background-color: #00AA00;
+}
+
+.lang-card-modal {
+    border-radius: 5px;
+    font-family: monospace;
+    align-content: center;
+    justify-content: center;
+    display: flex;
+    margin: 2px;
+    width: max-content;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: #00AA00;
+}
+
+.kubernetes {
+    background-color: #326ce5;
+}
+
+.c\# {
+    background-color: #800080FF;
+}
+
+.html {
+    background-color: #e34c26;
+}
+
+.react {
+    background-color: #61DAFB;
+}
+
+.typescript {
+    background-color: #2F74C0;
+}
+
+.bootstrap {
+    background-color: #7952B3;
+}
+
+.nws {
+    background-color: #DB4437;
+}
+
+.docker {
+    background-color: #2496ED;
+}
+
+.dotnet {
+    background-color: #5C2D91;
+}
+
+.nosql {
+    background-color: #4EA94B;
+}
+
+.nginx {
+    background-color: #269539;
+}
+
+.react-native {
+    background-color: #61DBFB;
+}
+
+.cloudflare {
+    background-color: #F38020;
+}
+
+.html {
+    background-color: #E44D26;
+}
+
+.javascript {
+    background-color: #b9a617;
+}
+
+.css {
+    background-color: #1572B6;
+}
+
+.xenhtml {
+    background-color: #3A6A81;
+}
+
+.xeninfo {
+    background-color: #3E4E57;
+}
+
+.java {
+    background-color: #007396;
+}
+
+.apple-script {
+    background-color: #D9D9D9;
+}
+
+.spotify {
+    background-color: #1DB954;
+}
+
+.nodejs {
+    background-color: #339933;
+}
+
+.rancher {
+    background-color: #0075A8;
+}
+
+.azure-devops {
+    background-color: #0078D7;
+}
+
+.mongodb {
+    background-color: #47A248;
+}
+
+.mssql {
+    background-color: #CC2927;
+}
diff --git a/src/components/project-card/ProjectCard.tsx b/src/components/project-card/ProjectCard.tsx
new file mode 100644
index 0000000..0913df3
--- /dev/null
+++ b/src/components/project-card/ProjectCard.tsx
@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+import "./ProjectCard.css";
+import ProjectCardProps from "../../types/ProjectCardProps";
+import Modal from "react-modal";
+
+export default function ProjectCard(props: {info: ProjectCardProps}) {
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    return (
+        <div className={"project-card col-md-4 p-2"}>
+            <div className={"project-card-int pb-2"} style={{backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, .60) 50%, rgba(0, 0, 0, 0.75) 100%), url(\""+props.info.imageUrl+"\")"}} onClick={()=>{setModalOpen(true)}}>
+                <h3>{props.info.title}</h3>
+                <p>{props.info.shortDescription}</p>
+                <div>
+                    <div className={"row"} style={{fontFamily: "monospace"}}>
+                        {props.info.techUsed.slice(0, 3).map(s =>
+                            <div className={"col-md-4 col-12 mt-2"}>
+                                <div className={"lang-card "+s.toLowerCase().replace(" ", "")}>
+                                    <p  style={{fontSize: 16, margin: 0}}>{s}</p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <Modal className={"project-card-modal"} isOpen={isModalOpen}>
+                <p className={"back-button"} onClick={()=>{setModalOpen(false)}}>Back</p>
+                <h1>{props.info.title}</h1>
+                <a href={props.info.link}>{props.info.linkTitle}</a>
+                <p>{props.info.description}</p>
+                <h3>All technologies used:</h3>
+                <div className={"d-flex flex-wrap mw-100"}>
+                    {props.info.techUsed.map(s =>
+                        <div className={""}>
+                            <div className={"lang-card-modal "+s.toLowerCase().replace(" ", "")}>
+                                <p  style={{fontSize: 16, margin: 0}}>{s}</p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </Modal>
+        </div>
+    );
+}
diff --git a/src/components/projects/Projects.tsx b/src/components/projects/Projects.tsx
index de52921..1e5deb5 100644
--- a/src/components/projects/Projects.tsx
+++ b/src/components/projects/Projects.tsx
@@ -3,6 +3,7 @@ import InfoCard from "../info-card/InfoCard";
 import React, {useState} from "react";
 import {AllHobbies} from "../../static/data/Hobbies";
 import {Carousel} from "react-bootstrap";
+import ProjectCard from "../project-card/ProjectCard";
 
 export default function Projects() {
     const [cur, setCur] = useState(1);
@@ -19,28 +20,14 @@ export default function Projects() {
                 alignItems: "center"
             }}>
 
-                <div className={"align-content-center d-md-block d-none"}>
+                <div className={"align-content-center"}>
                     <h1>Projects</h1>
-                    <p>(writing code is my biggest hobby)</p>
-                    <div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
-                        {AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
-                                                                info={project}/>)}
+                    <p>Click to learn more about each project</p>
+                    <div className={"row m-0"} style={{justifyContent: "center", padding: 50}}>
+                        {AllProjects.map((project) => <ProjectCard  info={project}/>)}
                     </div>
                     <a href={"https://github.com/nickorlow"}>More on GitHub</a>
                 </div>
-                <div className={"align-content-center d-md-none"}>
-                    <h1 className={"mb-4"}>Projects</h1>
-                    <p>{cur}/{AllProjects.length}</p>
-                    <Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
-                        {AllProjects.map((project, i) =>
-                            <Carousel.Item>
-                                <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
-                                          info={project}/>
-                            </Carousel.Item>
-                        )}
-                    </Carousel>
-
-                </div>
             </div>
         </div>
     )
diff --git a/src/pages/SingleBlog.tsx b/src/pages/SingleBlog.tsx
index fdbf601..f9f57a9 100644
--- a/src/pages/SingleBlog.tsx
+++ b/src/pages/SingleBlog.tsx
@@ -26,12 +26,36 @@ function SingleBlog() {
         })
 
     return (
-        <div className="Blog" style={{padding: 20}}>
+        <div className="Blog" style={{paddingTop: 30}}>
             <h1>{AllBlogs[blogId].title}</h1>
             <p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
             <p><Link to={"/blogs"}>Back</Link></p>
             <div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
-                <div style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
+                <div className={"d-md-none d-block"}  style={{textAlign: "left", margin: 20}}>
+                    <ReactMarkdown
+                        components={{
+                            code({node, inline, className, children, ...props}) {
+                                const match = /language-(\w+)/.exec(className || '')
+                                return !inline && match ? (
+                                    <SyntaxHighlighter
+                                        children={String(children).replace(/\n$/, '')}
+                                        style={theme}
+                                        language={match[1]}
+                                        PreTag="div"
+                                        {...props}
+                                    />
+                                ) : (
+                                    <code className={className} {...props}>
+                                        {children}
+                                    </code>
+                                )
+                            }
+                        }}
+                    >
+                        {blog}
+                    </ReactMarkdown>
+                </div>
+                <div className={"d-none d-md-block"} style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
                     <ReactMarkdown
                         components={{
                             code({node, inline, className, children, ...props}) {
diff --git a/src/static/data/Blogs.ts b/src/static/data/Blogs.ts
index fbda4d2..355870a 100644
--- a/src/static/data/Blogs.ts
+++ b/src/static/data/Blogs.ts
@@ -5,6 +5,7 @@ import TAB from "./blogs/there-is-a-blog.md";
 import HID from "./blogs/hidden-blog.md";
 import NWSSSL from "./blogs/nws-how-to-do-ssl.md";
 import SP2023 from "./blogs/spring-break-projects-2023.md";
+import SPLG1 from "./blogs/side-project-log-3-20-2023.md";
 
 const CSharpBlog: Blog = {
     title: "Doing C assignments in C#",
@@ -47,5 +48,14 @@ const SpringBreak2023Blog: Blog = {
 }
 
 
-export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog, NWSSSLBlog, SpringBreak2023Blog];
+const SideProjectLogOne: Blog = {
+    title: "Side Project Log 3/20/23",
+    date: new Date(2023, 2, 20, 12, 0, 0),
+    image: VrboImage,
+    mdfile: SPLG1,
+    private: false
+}
+
+
+export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog, NWSSSLBlog, SpringBreak2023Blog, SideProjectLogOne];
 
diff --git a/src/static/data/Projects.ts b/src/static/data/Projects.ts
index 1d7a777..0da2b8f 100644
--- a/src/static/data/Projects.ts
+++ b/src/static/data/Projects.ts
@@ -1,49 +1,65 @@
 import InfoCardProps from "../../types/InfoCardProps";
+import ProjectCardProps from "../../types/ProjectCardProps";
 
-const WebsiteProject: InfoCardProps = {
-    title: "personal-site (this website)",
-    description: "As a primairly backend guy, I wrote my last website as a JSON file (imitating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself! The backend is run in a homemade datacenter (a few Dell Poweredges on a rack) running on Kubernetes.",
-    listTitle: "Technologies & Resources used",
-    list:["React", "Typescript", "Bootstrap", "NWS", "Docker", "Kubernetes"],
+const WebsiteProject: ProjectCardProps = {
+    title: "Personal Site",
+    description: "As a primarily backend guy, I wrote my last website as a JSON file (imitating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself! The backend is run in a homemade datacenter (a few Dell Poweredges on a rack) running on Kubernetes.",
+    shortDescription: "My personal website.",
+    techUsed:["React", "Typescript", "Bootstrap", "NWS", "Docker", "Kubernetes"],
     link: "https://github.com/nickorlow/personal-site",
-    linkTitle: "GitHub Repo"
+    linkTitle: "GitHub Repo",
+    imageUrl: ""
 }
 
-const RoomyProject: InfoCardProps = {
-    title: "roomy-sentry",
+const RoomyProject: ProjectCardProps = {
+    title: "Roomy Sentry",
     description: "Built software to monitor the presence of a person based on sniffing the wi-fi packets of their mobile devices. Practically used in order to tell if my roommate is home.",
-    listTitle: "Technologies Used",
-    list: ["C#", ".NET 6", "NoSQL", "Docker", "nginx", "React Native", "Cloudflare"],
+    shortDescription: "Find out when your roommate is home",
+    techUsed: ["C#", ".NET 6", "NoSQL", "Docker", "nginx", "React Native", "Cloudflare"],
     link: "https://github.com/nickorlow/roomy-sentry",
-    linkTitle: "Github Repo"
+    linkTitle: "Github Repo",
+    imageUrl: ""
 }
 
-const CavCashProject: InfoCardProps = {
-    title: "cavcash",
+const CavCashProject: ProjectCardProps = {
+    title: "CavCash",
     description: "CavCash started as a project in 2017 as a way to pay with flashdrives. After recruiting a few friends to help me, we build ourselves into a PayPal competitor but shutdown due to funding. I continued to re-write the platform as a cryptocurrency.",
-    listTitle: "Technologies Used",
-    list: ["C#", ".NET 5", "MSSQL", "mongoDB", "Kubernetes", "Docker", "nginx", "Azure DevOps", "React", "Cloudflare"],
+    shortDescription: "Functional Venmo-like service",
+    techUsed: ["C#", "Kubernetes", "mongoDB", "MSSQL", "Docker", "nginx", "Azure DevOps", "React", "Cloudflare"],
     link: "https://cavcash.com",
-    linkTitle: "Project Website"
+    linkTitle: "Project Website",
+    imageUrl: ""
 }
 
-const XenMapProject: InfoCardProps = {
-    title: "xenmap",
+const XenMapProject: ProjectCardProps = {
+    title: "XenMap",
     description: "I wanted to use an old iPad as a HUD in my car similar to tesla and it needed a map to complete it. I made this widget to show your current location as a XenHTML widget.",
-    listTitle: "Technologies Used",
-    list: ["HTML", "JavaScript", "CSS", "XenHTML Framework", "XenInfo API"],
+    shortDescription: "Your live location as an iPhone wallpaper",
+    techUsed: ["HTML", "JavaScript", "CSS", "XenHTML Framework", "XenInfo API"],
     link: "https://github.com/nickorlow/MapXenHTML",
-    linkTitle: "GitHub Repo"
+    linkTitle: "GitHub Repo",
+    imageUrl: ""
 }
 
-const SPONODEProject: InfoCardProps = {
-    title: "sponode",
+const SPONODEProject: ProjectCardProps = {
+    title: "SPONODE",
     description: "App for Android & macOS that added songs people sent you to a playlist. Made so we could have a jukebox type setup during track workouts.",
-    listTitle: "Technologies Used",
-    list: ["Java", "Apple Script", "Spotify API", "node.js"],
+    shortDescription: "Spotify queue management via iMessage",
+    techUsed: ["Java", "Apple Script", "Spotify API", "node.js"],
     link: "https://github.com/nickorlow/sponode",
-    linkTitle: "GitHub Repo"
+    linkTitle: "GitHub Repo",
+    imageUrl: ""
 }
 
-export const AllProjects: InfoCardProps[] = [WebsiteProject, RoomyProject, XenMapProject, SPONODEProject];
+const NWSProject: ProjectCardProps = {
+    title: "Nick Web Services",
+    description: "App for Android & macOS that added songs people sent you to a playlist. Made so we could have a jukebox type setup during track workouts.",
+    shortDescription: "My own cloud provider",
+    techUsed: ["Kubernetes", "Rancher", "C#"],
+    link: "https://nws.nickorlow.com",
+    linkTitle: "Project Website",
+    imageUrl: ""
+}
+
+export const AllProjects: ProjectCardProps[] = [WebsiteProject, NWSProject, RoomyProject, XenMapProject, CavCashProject, SPONODEProject];
 
diff --git a/src/static/data/blogs/side-project-log-3-20-2023.md b/src/static/data/blogs/side-project-log-3-20-2023.md
new file mode 100644
index 0000000..37ce997
--- /dev/null
+++ b/src/static/data/blogs/side-project-log-3-20-2023.md
@@ -0,0 +1,28 @@
+Spring break just wrapped up. I wrote a [blog]() last week about the side projects that I was planning on 
+doing. I wanted to provide an update on what I got done, and figured I'd turn it into a recurring thing.
+
+This side project log covers work done from 3/13/2023 - 3/20/2023
+
+## Personal Website Facelift
+
+I managed to move my website over to tab-based navigation pretty early on in the break. It just involved setting
+up a navbar component and then using react-navigation to navigate between pages. I also managed to 
+update my projects page to be more compact and readable. 
+
+There is still work to be done on making it look better, but I mostly believe that
+it's just going to be somewhat minor tweaks.
+
+## Mahantongo
+
+I managed to finish this one. I learned a lot about Rust and I've gained an appreciation for
+Rust's enforcement of good programming habits, and I really like how error handling is done.
+
+
+Working with Serenity was pretty easy as it mirrored some of the other Discord SDKs I've used
+before.
+
+---
+
+**The below projects had minimal/no work done on them:** RingGold, NWS Container Deployment Service, and VerifiedBot 
+
+
diff --git a/src/types/ProjectCardProps.ts b/src/types/ProjectCardProps.ts
new file mode 100644
index 0000000..bba32bd
--- /dev/null
+++ b/src/types/ProjectCardProps.ts
@@ -0,0 +1,9 @@
+export default interface ProjectCardProps {
+    title: string,
+    description: string,
+    shortDescription: string,
+    techUsed: string[],
+    linkTitle?: string,
+    link?: string,
+    imageUrl: string
+}