diff --git a/.DS_Store b/.DS_Store
index 3e953fa..296504f 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/_posts/.DS_Store b/_posts/.DS_Store
deleted file mode 100644
index 70fb8c2..0000000
Binary files a/_posts/.DS_Store and /dev/null differ
diff --git a/_posts/2023-12-15-Project-#1-Personal-Site.md b/_posts/2023-12-15-Project-#1-Personal-Site.md
deleted file mode 100644
index 116df4e..0000000
--- a/_posts/2023-12-15-Project-#1-Personal-Site.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: post
-title: "Project #1: Personal Website"
-excerpt_separator: <!--more-->
----
-&nbsp;&nbsp;&nbsp;&nbsp;In November, I felt an urge to put my programming capabilities to the test and start developing. As I delved into other people’s personal projects to look for inspiration and guidance, I felt overwhelmed with where to start.  <!--more--> I would get discouraged by how advanced other people were, how many various platforms and languages they knew, and the amount of time many of my peers had already spent building their skills. It just felt like it was impossible to catch up - but everyone has to start somewhere. Instead of wallowing, I needed to create something that would encourage me to continue creating. I thought, “Everyone seems to have a personal site where they put their projects, which means that 1) I can create a site, and 2) it’ll look pretty dumb if there are no projects on it, so I’ll be forced to keep going.” 
-	
-&nbsp;&nbsp;&nbsp;&nbsp;And here's the final product - welcome to my site! Here’s a little bit about it. I’m hosting the site on Github Pages and used Github’s static site builder, Jekyll, for the general HTML format. I chose Jekyll because it’s meant to be used specifically for blog-style websites. I copied over the default CSS theme, “minima”, into my local folders and made edits from there to personalize the design. I tried to mimic the Apple iOS theme a bit with rounded edges, modern fonts, and a simple color scheme (with a pop of color!). I also got a custom domain name from CloudFlare.
-	
-&nbsp;&nbsp;&nbsp;&nbsp;I’m using Google Analytics to keep track of site data by copying a site tag onto each HTML page. From my analytics dashboard, I can view page-by-page insights on how many people are viewing the site. 
-	
-&nbsp;&nbsp;&nbsp;&nbsp;Pretty simple start, can’t wait to keep experimenting :)
\ No newline at end of file
diff --git a/_posts/2024-1-15-Project-#2-Recitation-Slides copy.md b/_posts/2024-1-15-Project-#2-Recitation-Slides copy.md
deleted file mode 100644
index 604a9a6..0000000
--- a/_posts/2024-1-15-Project-#2-Recitation-Slides copy.md	
+++ /dev/null
@@ -1,14 +0,0 @@
----
-layout: post
-title: "Project #2: Recitation Slides"
-excerpt_separator: <!--more-->
----
-&nbsp;&nbsp;&nbsp;&nbsp; One of my favorite experiences in college so far has been being a teaching assistant for the data structures and algorithms course at my school. This past semester, I spent many hours making 15 comprehensive slide decks for our weekly, TA-led recitation sections. <!--more--> This course is the largest course offered at Georgia Tech, and it runs heavily on the 50-60 TAs who work very hard to provide top-notch resources for students. Our team has created csvistool.com and endless exam preparation material. It's an inspiring group to be a part of, and so I was motivated to contribute something as well. 
-
-&nbsp;&nbsp;&nbsp;&nbsp; For years, the TAs have wondered why our course specifically has poor recitation enthusiasm among students. Many of our sections are cancelled or merged as the semester progresses because of low attendance, and this doesn't seem to happen as often in other courses. I noticed that our recitations lacked uniformity and quality assurance. In other courses, I've found a lot of my learning comes from the lab or studio associated with the course, led by TAs. Specifically, the slides are incredibly helpful as students are really good at simplifying content for their peers. I wanted to create the same system for our course. 
-	
-&nbsp;&nbsp;&nbsp;&nbsp; This semester, I set out to create a comprehensive set of slides for each week's recitation. Every slide covers two or three major concepts in our class (either a data structure or an algorithm) and uses the same format to explain each one. In the case of data structures, I try to first introduce the ADT the structure will implement, the motivation for why we would use this structure, and then the inner workings of three major operations: search, add, and remove. For algorithms, I first explain the problem goal or purpose of an algorithm, do a pseudocode analysis, and then perform a large diagramming example. After this, we talk about time complexity. Finally, the slides end with a couple coding questions for students to try on their own.  
-	
-&nbsp;&nbsp;&nbsp;&nbsp; These slides are made with the idea that students may reference them later without the help of a TA. Therefore, explanations and all the content must be present on the slides, but in a non-overwhelming and aesthetically pleasing (though this is just my preference) way. I think the common explanation structure helps organize the overwhelming amount of content for students so they "know what they have to know." In addition, I've peppered in prompting questions throughout the slides to increase interactivity. 
-
-&nbsp;&nbsp;&nbsp;&nbsp; The final collection is available on my public GitHub for computer science students anywhere to benefit from. Please reach out if you see errors! If they help even one person out there score an extra point on their exam, my time was well-spent :). 
\ No newline at end of file
diff --git a/_posts/2024-2-9-Project-#3-CodeGradr copy.md b/_posts/2024-2-9-Project-#3-CodeGradr copy.md
deleted file mode 100644
index efd2d5c..0000000
--- a/_posts/2024-2-9-Project-#3-CodeGradr copy.md	
+++ /dev/null
@@ -1,17 +0,0 @@
----
-layout: post
-title: "Project #3: CodeGradr"
-excerpt_separator: <!--more-->
----
-&nbsp;&nbsp;&nbsp;&nbsp; This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. <!--more--> As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition. 
-
-
-&nbsp;&nbsp;&nbsp;&nbsp; The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.
-
-![image](/assets/img/codegradr/index.png) ![image](/assets/img/codegradr/feedback.png) ![image](/assets/img/codegradr/waiting_for_gpt.png) ![image](/assets/img/codegradr/gpt_response.png)
-
-&nbsp;&nbsp;&nbsp;&nbsp; \>Copy and paste a student's code, then click "Generate Feedback" and receive a Chat-GPT generated response. The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were. 
-	
-&nbsp;&nbsp;&nbsp;&nbsp; We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript. 
-
-&nbsp;&nbsp;&nbsp;&nbsp; Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. 
diff --git a/_posts/2024-4-21-Project-#4-SpotifyWrapped.md b/_posts/2024-4-21-Project-#4-SpotifyWrapped.md
deleted file mode 100644
index edf34a3..0000000
--- a/_posts/2024-4-21-Project-#4-SpotifyWrapped.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: post
-title: "Project #4: Spotify Wrapped"
-excerpt_separator: <!--more-->
----
-&nbsp;&nbsp;&nbsp;&nbsp; In my Objects & Design course this semester, we were challenged with creating a mimic Spotify Wrapped application. Our team of seven spent 2 months following an Agile Scrum to build this application on Android Studio. <!--more--> If I'm being honest, when I heard about this assignment I was a bit scared. It was definitely the largest group and longest-term project I had ever worked on. Knowing that there had to be timely deliverables and that all of our individual components relied on each other was daunting, especially when working with strangers. However, this experience was extremely rewarding and I am truly proud of the final product. Here is the link to our [project website](https://tyagianaika.wixsite.com/spotify-wrapped) for a demo video and some more info on our team.
-
-&nbsp;&nbsp;&nbsp;&nbsp; When you enter the application, you are prompted to log in. Our app uses Firebase to host a database of user account information. You can create a new account, delete that account, and go to your profile to view your past wrapped summaries. Once you've logged in to our app, you'll be redirected to log in to Spotify itself. From there, we get an access token to your account that we can use as our Spotify API key. 
-	
-&nbsp;&nbsp;&nbsp;&nbsp; Once you've logged in, you can begin viewing your wrapped summaries. All information is taken from a short term, recent time period. Your wrapped summaries from today may be much different from what they are next week. The first page is a summary of your top playlists, the second is of your top genres, and the final is of your top songs and artists. The final screen displays a succinct graphic encompassing all of this information. 
-
-&nbsp;&nbsp;&nbsp;&nbsp; You'll notice that you are prompted to play a game. The game we created is a word search made of songs from the playlist of your choosing. You can even choose a difficulty level on a scale of 1 to 3!
-
-&nbsp;&nbsp;&nbsp;&nbsp; Building this entire application in Java on Android Studio was annoying, but me and the two other developers on my team rose to the challenge. Since running your app on Android Studio is incredibly time consuming and battery expensive, I learned a lot about making small, but significant changes to code. My test and debug skills grew exponentially, and for that I am thankful. Some aspects of our code that I'm proud of is the API Helper we created to easily extract information from the Spotify API and return it in a usable manner. This modularity allowed members of the team who weren't familiar with using APIs to still contribute to the code and make a substantial impact. In the same vein, I learned how to handle merge conflicts on Git and I will never start working on a collaborative project without pulling from the remote repo ever again. 
-
-&nbsp;&nbsp;&nbsp;&nbsp; Going forward, there are many changes I would like to make to the code design. A lot of the code is duplicated and there is a lot of repeated work being done on each page. It is no where near efficient, and this can be seen by the long delays it takes for information to load onto each of the summaries. I think the best approach would be to access and parse through all the information we need from the API when the user presses the 'Generate Summary' button. This data can than be passed throughout the various Activities through Intents, significantly smoothing out the flow of the app. The only delay would be after the 'Generate Summary' button is pressed.  
-
-
-&nbsp;&nbsp;&nbsp;&nbsp; Finally, one aspect of this project I enjoyed was the creativity I got to express on the design front. I tried to mimic the actual bold colors and fonts of the 2023 Spotify Wrapped and I think I was pretty successful! 
\ No newline at end of file
diff --git a/index.html b/index.html
index 2a51ca9..f6adef7 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,12 @@
             </table>
         </div>
 
+
+        <script defer src="/scripts/numberGame.js"></script>
+        <script defer src="/scripts/sillyStory.js"></script>
+        <script defer src="scripts/superHeroes.js"></script>
+        <script defer src="scripts/bouncingBalls.js"></script>
+
         <div class="bubble" id="experimentOne">
             <h1>Number Guessing Game</h1>
 
@@ -105,9 +111,8 @@ <h1>Silly Story</h1>
         </div>
 
         <div class="bubble" id="experimentThree">
-            <h1>SuperHeroes</h1>
-            
-            <p>This example requires you to enter commands in your browser's JavaScript console (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information).</p>
+            <h1>Superheroes</h1>
+
             <div class="superhero">
                 <header>
 
@@ -120,11 +125,13 @@ <h1>SuperHeroes</h1>
         </div>
 
         <div class="bubble" id="experimentFour">
-            <h1>Bouncing Balls</h1>
+            <div class="bouncing-balls">
+                <h1>Bouncing Balls</h1>
+
+                <canvas>
+    
+                </canvas>
+            </div>
             
         </div>
-
-    <script defer src="/scripts/numberGame.js"></script>
-    <script defer src="/scripts/sillyStory.js"></script>
-    <script defer src="scripts/superHeroes.js"></script>
 </html>
\ No newline at end of file
diff --git a/project-1-site.html b/project-1-site.html
new file mode 100644
index 0000000..95391a5
--- /dev/null
+++ b/project-1-site.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Indira Tatikola</title>
+        <link href="styles/minima.css" rel="stylesheet" />
+        <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="bubble" style="padding:0px 30px;">
+            <header class="site-header">
+                <a class="site-title" href="index.html">Indira Tatikola</a>
+                <nav class="site-nav">
+                    <div class="trigger">
+                        <a class="page-link" href="projects.html">Projects</a>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="bubble">
+            <h1>Project #1: Personal Website</h1>
+            <p style="color:lightgrey">2023-12-15</p>
+            <p>In November, I felt an urge to put my programming capabilities to the test and start developing. 
+                As I delved into other people’s personal projects to look for inspiration and guidance, I felt overwhelmed with where to start. 
+                I would get discouraged by how advanced other people were, how many various platforms and languages they knew, and the amount of time many of my peers had already spent building their skills. 
+                It just felt like it was impossible to catch up - but everyone has to start somewhere. Instead of wallowing, I needed to create something that would encourage me to continue creating. 
+                I thought, “Everyone seems to have a personal site where they put their projects, which means that 1) I can create a site, and 2) it’ll look pretty dumb if there are no projects on it, so I’ll be forced to keep going.”</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; When you enter the application, you are prompted to log in. Our app uses Firebase to host a database of user account information. 
+                You can create a new account, delete that account, and go to your profile to view your past wrapped summaries. 
+                Once you've logged in to our app, you'll be redirected to log in to Spotify itself. 
+                From there, we get an access token to your account that we can use as our Spotify API key.</p>
+                
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; And here's the final product - welcome to my site! Here’s a little bit about it. I’m hosting the site on Github Pages and used Github’s static site builder, Jekyll, for the general HTML format. 
+                I chose Jekyll because it’s meant to be used specifically for blog-style websites. I copied over the default CSS theme, “minima”, into my local folders and made edits from there to personalize the design. 
+                I tried to mimic the Apple iOS theme a bit with rounded edges, modern fonts, and a simple color scheme (with a pop of color!). I also got a custom domain name from CloudFlare.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; I’m using Google Analytics to keep track of site data by copying a site tag onto each HTML page. From my analytics dashboard, I can view page-by-page insights on how many people are viewing the site.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Pretty simple start, can’t wait to keep experimenting :)</p>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/project-2-codegradr.html b/project-2-codegradr.html
new file mode 100644
index 0000000..f86d4ea
--- /dev/null
+++ b/project-2-codegradr.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Indira Tatikola</title>
+        <link href="styles/minima.css" rel="stylesheet" />
+        <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="bubble" style="padding:0px 30px;">
+            <header class="site-header">
+                <a class="site-title" href="index.html">Indira Tatikola</a>
+                <nav class="site-nav">
+                    <div class="trigger">
+                        <a class="page-link" href="projects.html">Projects</a>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="bubble" id="post">
+            <h1>Project #2: CodeGradr</h1>
+            <p style="color:lightgrey">2024-02-09</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition.</p>
+                
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.</p>
+
+            <img src="assets/img/codegradr/index.png">
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Copy and paste a student's code, then click "Generate Feedback" and receive a Chat-GPT generated response.</p>
+            <div class="image-container">
+                <img src="assets/img/codegradr/feedback.png">
+                <img src="assets/img/codegradr/compiled_message.png">
+                <img src="assets/img/codegradr/waiting_for_gpt.png">
+                <img src="assets/img/codegradr/gpt_response.png">
+            </div>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript.</p>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. Take a look at our code <a href="https://github.com/amchelapurath2023/1332AI">here</a>.</p>
+        </div>
+    </body>
+
+    <script>
+        const parent = document.getElementById('post');
+        const images = document.querySelector('.image-container');
+        images.style.width = parent.offsetWidth; 
+    </script>
+</html>
\ No newline at end of file
diff --git a/project-3-wrapped.html b/project-3-wrapped.html
new file mode 100644
index 0000000..18ef4e0
--- /dev/null
+++ b/project-3-wrapped.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Indira Tatikola</title>
+        <link href="styles/minima.css" rel="stylesheet" />
+        <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="bubble" style="padding:0px 30px;">
+            <header class="site-header">
+                <a class="site-title" href="index.html">Indira Tatikola</a>
+                <nav class="site-nav">
+                    <div class="trigger">
+                        <a class="page-link" href="projects.html">Projects</a>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="bubble">
+            <h1>Project #3: Spotify Wrapped</h1>
+            <p style="color:lightgrey">2024-4-21</p>
+            <p>In my Objects & Design course this semester, we were challenged with creating a mimic Spotify Wrapped application. Our team of seven spent 2 months following an Agile Scrum to build this application on Android Studio. <!--more--> 
+                If I'm being honest, when I heard about this assignment I was a bit scared. It was definitely the largest group and longest-term project I had ever worked on. 
+                Knowing that there had to be timely deliverables and that all of our individual components relied on each other was daunting, especially when working with strangers.
+                 However, this experience was extremely rewarding and I am truly proud of the final product. Here is the link to our <a href="https://tyagianaika.wixsite.com/spotify-wrapped">project website</a> for a demo video and some more info on our team.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; When you enter the application, you are prompted to log in. Our app uses Firebase to host a database of user account information. 
+                You can create a new account, delete that account, and go to your profile to view your past wrapped summaries. 
+                Once you've logged in to our app, you'll be redirected to log in to Spotify itself. 
+                From there, we get an access token to your account that we can use as our Spotify API key.</p>
+                
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Once you've logged in, you can begin viewing your wrapped summaries. 
+                All information is taken from a short term, recent time period. 
+                Your wrapped summaries from today may be much different from what they are next week. 
+                The first page is a summary of your top playlists, the second is of your top genres, and the final is of your top songs and artists. 
+                The final screen displays a succinct graphic encompassing all of this information.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; You'll notice that you are prompted to play a game. The game we created is a word search made of songs from the playlist of your choosing. 
+                You can even choose a difficulty level on a scale of 1 to 3!</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Building this entire application in Java on Android Studio was annoying, but me and the two other developers on my team rose to the challenge. 
+                Since running your app on Android Studio is incredibly time consuming and battery expensive, I learned a lot about making small, but significant changes to code. My test and debug skills grew exponentially, and for that I am thankful. 
+                Some aspects of our code that I'm proud of is the API Helper we created to easily extract information from the Spotify API and return it in a usable manner. 
+                This modularity allowed members of the team who weren't familiar with using APIs to still contribute to the code and make a substantial impact. 
+                In the same vein, I learned how to handle merge conflicts on Git and I will never start working on a collaborative project without pulling from the remote repo ever again.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Going forward, there are many changes I would like to make to the code design. 
+                A lot of the code is duplicated and there is a lot of repeated work being done on each page. 
+                It is no where near efficient, and this can be seen by the long delays it takes for information to load onto each of the summaries. 
+                I think the best approach would be to access and parse through all the information we need from the API when the user presses the 'Generate Summary' button. 
+                This data can than be passed throughout the various Activities through Intents, significantly smoothing out the flow of the app. The only delay would be after the 'Generate Summary' button is pressed.</p>
+
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; Finally, one aspect of this project I enjoyed was the creativity I got to express on the design front. 
+                I tried to mimic the actual bold colors and fonts of the 2023 Spotify Wrapped and I think I was pretty successful!</p>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/project-4-slides.html b/project-4-slides.html
new file mode 100644
index 0000000..1f0e573
--- /dev/null
+++ b/project-4-slides.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Indira Tatikola</title>
+        <link href="styles/minima.css" rel="stylesheet" />
+        <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="bubble" style="padding:0px 30px;">
+            <header class="site-header">
+                <a class="site-title" href="index.html">Indira Tatikola</a>
+                <nav class="site-nav">
+                    <div class="trigger">
+                        <a class="page-link" href="projects.html">Projects</a>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="bubble">
+            <h1>Project #4: DSA Recitation Slides</h1>
+            <p style="color:lightgrey">2024-05-02</p>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; One of my favorite experiences in college so far has been being a teaching assistant for the data structures and algorithms course at my school. 
+                This past semester, I spent many hours making 15 comprehensive slide decks for our weekly, TA-led recitation sections. 
+                This course is the largest course offered at Georgia Tech, and it runs heavily on the 50-60 TAs who work very hard to provide top-notch resources for students. 
+                sOur team has created csvistool.com and endless exam preparation material. It's an inspiring group to be a part of, and so I was motivated to contribute something as well.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; For years, the TAs have wondered why our course specifically has poor recitation enthusiasm among students. 
+                Many of our sections are cancelled or merged as the semester progresses because of low attendance, and this doesn't seem to happen as often in other courses. 
+                I noticed that our recitations lacked uniformity and quality assurance. In other courses, I've found a lot of my learning comes from the lab or studio associated with the course, led by TAs. 
+                Specifically, the slides are incredibly helpful as students are really good at simplifying content for their peers. I wanted to create the same system for our course.</p>
+                
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; This semester, I set out to create a comprehensive set of slides for each week's recitation. 
+                Every slide covers two or three major concepts in our class (either a data structure or an algorithm) and uses the same format to explain each one. 
+                In the case of data structures, I try to first introduce the ADT the structure will implement, the motivation for why we would use this structure, and then the inner workings of three major operations: search, add, and remove. 
+                For algorithms, I first explain the problem goal or purpose of an algorithm, do a pseudocode analysis, and then perform a large diagramming example. After this, we talk about time complexity. 
+                Finally, the slides end with a couple coding questions for students to try on their own.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;These slides are made with the idea that students may reference them later without the help of a TA. Therefore, explanations and all the content must be present on the slides, 
+                but in a non-overwhelming and aesthetically pleasing (though this is just my preference) way. 
+                I think the common explanation structure helps organize the overwhelming amount of content for students so they "know what they have to know." 
+                In addition, I've peppered in prompting questions throughout the slides to increase interactivity.</p>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp; The final collection is available <a href="https://github.com/itatikola/dsa-recitation-slides">this public repo</a> for computer science students anywhere to benefit from. 
+                Please reach out if you see errors! If they help even one person out there score an extra point on their exam, my time was well-spent :).</p>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..c012cae
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Indira Tatikola</title>
+        <link href="styles/minima.css" rel="stylesheet" />
+        <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="bubble" style="padding:0px 30px;">
+            <header class="site-header">
+                <a class="site-title" href="index.html">Indira Tatikola</a>
+                <nav class="site-nav">
+                    <div class="trigger">
+                        <a class="page-link" href="projects.html">Projects</a>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="bubble">
+            <p>Below are some of my projects!</p>
+            <p>I try to make something every month or two.</p>
+            
+            <div class="project-list">
+
+            </div>
+            <!--div>
+                {% for post in site.posts %}
+                <a href="{{ post.url }}" style="color: grey; text-decoration: none;">
+                  <div class="post-thumbnail">
+                      <h2 style="color:black;">{{ post.title }}</h2>
+                      <p>{{ post.date | date_to_string: "ordinal", "US" }}</p>
+                      <p>{{ post.excerpt }}</p>
+                  </div>
+                </a>  
+                {% endfor %}
+            </div-->
+        </div>
+    </body>
+
+    <script src="scripts/projects.js"></script>
+        
+    <script>
+        console.log('inner script');
+        const projects = document.querySelector('.project-list');
+        
+        function addPost(href, title, date) {
+            var bubble = new PostBubble(href, title, date, "description");
+            projects.append(bubble.component); 
+        }
+        addPost('project-4-slides.html', 'Project #4: DSA Recitation Slides', '2024-5-2'); 
+        addPost('project-3-wrapped.html', 'Project #3: Spotify Wrapped', '2024-4-21');
+        addPost('project-2-codegradr.html', 'Project #2: Codegradr', '2024-2-9');
+        addPost('project-1-site.html', 'Project #1: Personal Website', '2023-12-15');
+    </script>
+
+
+</html>
\ No newline at end of file
diff --git a/projectts.html b/projectts.html
deleted file mode 100644
index 46f7fe6..0000000
--- a/projectts.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<h1>Hello World.</h1>
-<p>This is the test page.</p>
-
-<a href="/index.html">
-    <button id="backButton">BACK</button>
-</a>
\ No newline at end of file
diff --git a/scripts/bouncingBalls.js b/scripts/bouncingBalls.js
index e69de29..5b9ab50 100644
--- a/scripts/bouncingBalls.js
+++ b/scripts/bouncingBalls.js
@@ -0,0 +1,108 @@
+// setup canvas
+const parent = document.querySelector('.bouncing-balls');
+const canvas = parent.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+
+const width = (canvas.width = parent.offsetWidth);
+const height = (canvas.height = window.innerHeight);
+
+// function to generate random number
+
+function random(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// function to generate random color
+
+function randomRGB() {
+  return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`;
+}
+
+class Ball {
+    constructor(x, y, velX, velY, color, size) {
+      this.x = x;
+      this.y = y;
+      this.velX = velX;
+      this.velY = velY;
+      this.color = color;
+      this.size = size;
+    }
+
+    draw() {
+        ctx.beginPath();
+        ctx.fillStyle = this.color;
+        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+        ctx.fill();
+    }
+      
+    update() {
+        if ((this.x + this.size) >= width) {
+          this.velX = -(this.velX);
+        }
+      
+        if ((this.x - this.size) <= 0) {
+          this.velX = -(this.velX);
+        }
+      
+        if ((this.y + this.size) >= height) {
+          this.velY = -(this.velY);
+        }
+      
+        if ((this.y - this.size) <= 0) {
+          this.velY = -(this.velY);
+        }
+      
+        this.x += this.velX;
+        this.y += this.velY;
+    }
+
+
+    collisionDetect() {
+        for (const ball of balls) {
+            if (this !== ball) {
+                const dx = this.x - ball.x;
+                const dy = this.y - ball.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+        
+                if (distance < this.size + ball.size) {
+                ball.color = this.color = randomRGB();
+                }
+            }
+        }
+    }
+      
+}
+
+const balls = [];
+
+while (balls.length < 25) {
+  const size = random(10, 20);
+  const ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    random(0 + size, width - size),
+    random(0 + size, height - size),
+    random(-7, 7),
+    random(-7, 7),
+    randomRGB(),
+    size,
+  );
+
+  balls.push(ball);
+}
+
+function loop() {
+    ctx.fillStyle = "rgb(0 0 0 / 25%)";
+    ctx.fillRect(0, 0, width, height);
+  
+    for (const ball of balls) {
+      ball.draw();
+      ball.update();
+      ball.collisionDetect();
+    }
+  
+    requestAnimationFrame(loop);
+}
+  
+
+loop();
\ No newline at end of file
diff --git a/scripts/projects.js b/scripts/projects.js
new file mode 100644
index 0000000..dce7f15
--- /dev/null
+++ b/scripts/projects.js
@@ -0,0 +1,27 @@
+class PostBubble {
+    constructor(href, title, date, excerpt) {
+        this.href = href;
+        this.title = title;
+        this.date = date;
+        this.excerpt = excerpt;
+        this.component = document.createElement('div');
+        this.component.className = 'post-thumbnail';
+        this.populate();
+    }
+
+    populate() {
+        const link = document.createElement('a'); 
+        link.href = this.href;
+        this.component.appendChild(link); 
+
+        const postTitle = document.createElement('h2'); 
+        const postDate = document.createElement('p');
+        const postExcerpt = document.createElement('p');
+
+        postTitle.textContent = this.title;
+        postDate.textContent = this.date;
+        postExcerpt.textContent = this.excerpt;
+
+        link.append(postTitle, postDate, postExcerpt);
+    }
+}
\ No newline at end of file
diff --git a/scripts/superHeroes.js b/scripts/superHeroes.js
index 2959458..2beba4e 100644
--- a/scripts/superHeroes.js
+++ b/scripts/superHeroes.js
@@ -59,7 +59,7 @@ async function populate() {
 }  
 
 function populateHeader(obj) {
-    const header = document.querySelector("header");
+    const header = document.querySelector(".superhero").querySelector("header");
     const myH1 = document.createElement("h1");
     myH1.textContent = obj.squadName;
     header.appendChild(myH1);
diff --git a/styles/minima.css b/styles/minima.css
index 51626e4..8227d93 100644
--- a/styles/minima.css
+++ b/styles/minima.css
@@ -49,9 +49,9 @@ main {
 /**
  * Images
  */
-.main img {
+img {
+  display: block;
   width: 300px;
-  float: left;
   margin: 20px;
   border-radius: 30px;
 }
@@ -172,6 +172,7 @@ pre > code {
   }
 }
 
+/**
 .post-bubble {
   max-width: -webkit-calc(800px - (30px * 2));
   max-width: calc(800px - 30px * 2);
@@ -188,12 +189,16 @@ pre > code {
     padding-left: 15px;
   }
 }
+*/
 
+/**
+* POST THUMBNAIL STYLING
+*/
 .post-thumbnail {
   max-width: -webkit-calc(800px - (30px * 3));
   max-width: calc(800px - 30px * 3);
   margin: 20px;
-  padding-top: 10px;
+  padding: 20px;
   background-color: rgba(216, 213, 213, 0.8039215686);
   border-radius: 30px;
 }
@@ -206,6 +211,12 @@ pre > code {
   }
 }
 
+.post-thumbnail p {
+  color: rgb(174, 174, 174);
+}
+
+
+
 /**
  * Clearfix
  */
@@ -759,4 +770,22 @@ SUPERHERO EXPERIMENT
   font-size: 2.5rem;
   letter-spacing: -5px;
   margin-bottom: 10px;
+}
+
+/**
+BOUNCING BALLS EXPERIMENT
+*/
+
+.bouncing-balls div {
+  overflow: hidden;
+}
+
+.bouncing-balls h1 {
+  font-size: 2rem;
+  letter-spacing: -1px;
+  position: absolute;
+  margin: 0;
+
+  color: transparent;
+  text-shadow: 0 0 4px #f8d2d2;
 }
\ No newline at end of file