adds new entries

index.html

@@ -38,6 +38,50 @@ <h3 class="intro" style="font-size: 2rem;">
         <a id="projects"></a>
         <h1 id="project" class="nav-section-title">Projects</h2>
         <div class="project-container">
+            <div class="flipper-card">
+                <div class="flipper-front">
+                    <img src="images/projectsThumbnail/magigram.png">
+                </div>
+                <div class="flipper-back">
+                    <h3><a href="https://magigram.us" rel="noopener noreferrer" target="_blank">
+                        RayTracer
+                    </a></h3>
+                    <p>
+                        A tool to help users create unique and meaningful pseudonyms. Inspired by Voldemort derived from the transformation of "Tom Marvolo Riddle" to "I am Lord Voldemort", I tried creating my own anagramatic pseudonym. It was a difficult and lengthy process. I created a tool to allow you to see all the valid word options, filter them, search through them, and select them. The product also includes a history section to allow users to explore multiple attempts simultaneously. Lastly, I created a transformer based inspired name generation algorithm to create a unique name constrained by the user's remaining letters. The model used is modifiable and users can weight different corpus to get a more Greek or Aztec inspired name for example.
+                    </p>
+                    <div class="tag-container">
+                        <a  class="tag lang">js</a>
+                        <a  class="tag lang">python</a>
+                        <a  class="tag library">React</a>
+                        <a  class="tag library">tailwind</a>
+                        <a  class="tag library">DaisyUI</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flipper-card">
+                <div class="flipper-front">
+                    <img src="images/projectsThumbnail/safeandslug.png">
+                </div>
+                <div class="flipper-back">
+                    <h3><a href="https://safeandslug.us" rel="noopener noreferrer" target="_blank">
+                        Safe and Slug
+                    </a></h3>
+                    <p>
+                        UC Santa Cruz Hackathon 2024 submission. A progressive web app to facilitate safe events. We wanted to protect people at big events by empowering users to report health issues, violence, SA, or other issues discretely. The reports will be seen and addressed by event organizers who then have access to the reporter's phone number and disclosed medical information. With multiple user roles, we allow event organizers to view an event dashboard with all reports, all users, and users capable of helping in emergency situations. While the PWA is built in Next.js, tailwind, and daisy UI, and hosted on Vercel, we handle realtime data on a different server. Since each event manager will be looking at the dashboard, we need a better way of sending up to date traffic. We solve this by having a dedicated socket server to minimize traffic to the vercel server and to allow the server to update the dashboard in real time when necessary. The architecture is designed to be scalable and secure. Please view the <a href="https://devpost.com/software/safe-and-slug">dev post</a> to see the design. To make the product easy to use, the website is responsive and downloadable as a PWA. We also made joining events seemless, by allowing users to scan a QR code with a link to the event that is generated on the event dashboard. There are a host of quality of life features as well, please reach out if you want to learn more.
+                    </p>
+                    <div class="tag-container">
+                        <a  class="tag lang">ts</a>
+                        <a  class="tag library">Prisma</a>
+                        <a  class="tag library">Next.js</a>
+                        <a  class="tag library">MongoDB Atlas</a>
+                        <a  class="tag library">tailwind</a>
+                        <a  class="tag library">DaisyUI</a>
+                        <a  class="tag library">Node.js</a>
+                    </div>
+                </div>
+            </div>
+
             <div class="flipper-card">
                 <div class="flipper-front">
                     <img src="images/projectsThumbnail/raytracer.png">