feat: adds gptuwu

index.html

@@ -78,13 +78,13 @@ <h4 class="key-title">Motivation</h4>
                 </p>
                 <h4 class="key-title">Key Challenges</h4>
                 <ul class="challenge-list small-card-text">
-                  <li>Implementing OAuth for Spotify and Youtube</li>
+                  <li>Handling OAuth flows for Spotify and Youtube</li>
                   <li>
-                    Optimizing algorithm for matching Youtube titles against
-                    Spotify track names
+                    Optimizing search algorithm used to match Youtube titles
+                    against Spotify track names
                   </li>
                   <li>
-                    Creating a reactive UI to ease modification of playlists
+                    Creating a reactive UI to simplify modification of playlists
                     with hundreds of songs
                   </li>
                 </ul>
@@ -115,34 +115,33 @@ <h4 class="key-title">Key Challenges</h4>
           <div class="card-info">
             <div class="card-content">
               <div class="card-title">
-                <h3 class="project-name">Spotitube</h3>
-                <span class="notice">Server Currently Offline</span>
+                <h3 class="project-name">GPTuwu</h3>
+                <!-- <span class="notice">Server Currently Offline</span> -->
               </div>
-              <p class="card-description">
-                Youtube to Spotify Playlist Converter
-              </p>
+              <p class="card-description">Makes ChatGPT a Little Cuter</p>
               <!-- Key Challenges Section -->
               <div class="key-challenges">
                 <h4 class="key-title">Motivation</h4>
                 <p class="small-card-text">
-                  I wanted to create a tool to help me migrate my Youtube
-                  playlists from the first 15 years of my life to Spotify: a
-                  task that would've taken forever
+                  Sometimes ChatGPT can be
+                  <span style="font-style: italic">incredibly</span> dumb.
+                  Putting a cute face on it makes it slightly more tolerable.
                 </p>
                 <h4 class="key-title">Key Challenges</h4>
                 <ul class="challenge-list small-card-text">
-                  <li>Implementing OAuth for Spotify and Youtube</li>
                   <li>
-                    Optimizing algorithm for matching Youtube titles against
-                    Spotify track names
+                    While you would assume this would be a simple chrome
+                    extension, there's a lot of weird DOM manipulation caused by
+                    all the web frameworks being used. This makes it challenging
+                    to add another listener modifying the DOM without
+                    conflicting with other listeners and causing bugs
                   </li>
-                  <li></li>
                 </ul>
               </div>
             </div>
             <!-- GitHub Link Section -->
             <div class="github-icon">
-              <a href="https://github.com/JosephKan3/spotitube" target="_blank">
+              <a href="https://github.com/JosephKan3/GPTuwu" target="_blank">
                 <svg
                   height="32"
                   width="32"

styles.css

@@ -1,5 +1,8 @@
-body {
+html {
   font-family: Arial, sans-serif;
+}
+
+body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -21,8 +24,7 @@ header {
 }
 
 section {
-  padding-right: 5rem;
-  padding-left: 5rem;
+  padding: 5rem;
 }
 
 .introduction-section {
@@ -68,7 +70,7 @@ section {
 
 .card-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
   padding: 20px 0;
 }
@@ -95,7 +97,7 @@ section {
 .card img {
   width: 100%;
   object-fit: cover;
-  height: 16rem;
+  height: 20rem;
   overflow: hidden;
   display: block;
 }
@@ -138,14 +140,13 @@ p.small-card-text {
 .card-description {
   font-size: 18px;
   line-height: 18px;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0rem;
+  margin-bottom: 0rem;
   color: #666;
+  height: 36px;
 }
 
 .key-challenges {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
 }
 
 .key-title {
@@ -156,7 +157,7 @@ p.small-card-text {
 .challenge-list {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
-  padding-left: 2rem;
+  padding-left: 1.5rem;
 }
 
 .cash-money {