From 68c99488442e5ec3bc2bd6a21aea11701ca1d376 Mon Sep 17 00:00:00 2001 From: Indira Tatikola Date: Fri, 7 Jun 2024 12:35:01 -0400 Subject: [PATCH] updated projects tab --- .DS_Store | Bin 8196 -> 6148 bytes _posts/.DS_Store | Bin 6148 -> 0 bytes _posts/2023-12-15-Project-#1-Personal-Site.md | 12 -- ...-1-15-Project-#2-Recitation-Slides copy.md | 14 --- _posts/2024-2-9-Project-#3-CodeGradr copy.md | 17 --- _posts/2024-4-21-Project-#4-SpotifyWrapped.md | 19 --- index.html | 23 ++-- project-1-site.html | 45 ++++++++ project-2-codegradr.html | 51 +++++++++ project-3-wrapped.html | 61 ++++++++++ project-4-slides.html | 50 ++++++++ projects.html | 60 ++++++++++ projectts.html | 6 - scripts/bouncingBalls.js | 108 ++++++++++++++++++ scripts/projects.js | 27 +++++ scripts/superHeroes.js | 2 +- styles/minima.css | 35 +++++- 17 files changed, 450 insertions(+), 80 deletions(-) delete mode 100644 _posts/.DS_Store delete mode 100644 _posts/2023-12-15-Project-#1-Personal-Site.md delete mode 100644 _posts/2024-1-15-Project-#2-Recitation-Slides copy.md delete mode 100644 _posts/2024-2-9-Project-#3-CodeGradr copy.md delete mode 100644 _posts/2024-4-21-Project-#4-SpotifyWrapped.md create mode 100644 project-1-site.html create mode 100644 project-2-codegradr.html create mode 100644 project-3-wrapped.html create mode 100644 project-4-slides.html create mode 100644 projects.html delete mode 100644 projectts.html create mode 100644 scripts/projects.js diff --git a/.DS_Store b/.DS_Store index 3e953fadc1fc77557da483ad0132f91c2408e8a2..296504f471eb7765f25b51e6d939a4d9390731c4 100644 GIT binary patch delta 115 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$jGxXU^g=(&tx8f_|2DvOPMCG z6Em4CBmR0~1IJ=^4h}(Ppkg2p;06+|AblGPzcWwfm+=Id!oUPE5o8I&=6Iet%mC`` B6s7V^?uPKv7Y4 z++KhUYkdso6VL=S0Zl*?I12z&_C%Q6=Rwyi5cra7A6RS$ATTMU{7$v~h?kQTOU2>@#U%#`rc)VWx z6h#Qwc zsp-_r?3^)YEEo^#dqKb6wYt5qW_9lKy*okR*+<)!eb;UE8<`6mf#0=Uzts@}*J;7! z!9CY^f_^RN`A#Ubb$P%@8|g-7WiVJT<+J8`F?X0X2jyZVYZmhBhlgon`SO)(JB@v> z?FVlpN*1LfT9W(6E!dGVqNnwa?*;xYdbuJEDlP~%$)g_lv?xr_*@okyLT8LZq4f3C zDP0^4a#^z?5arj_uw5!A8NHG;CNg?Go0VX=GFhO0%GJ07BsyLZ85SRUs7fRp@*<^(a~vQB=PA2RJYP z5=0zcY(OJmEIe5}PjCq^itiZ!Qz{EE1q4v3Qc6V4$-pQBa>Ax(BTMoGG>Zr7 zm`Z}!3~kVDx=y!fE1s05c>4OF1kxOBgKL`}Bbj;Qrh*vV#ke;n6AuB~r2Y6+h=;3s zm3fgWd6Ikv%^rToHhFOkdk@V=<<6GyFm!PCCr~x{FF#3%amFXPH0{t9dN=v_p=y(p zxYnh_{bBcfmT7t0D+{n&lfVC;&%x=t)&w+x6A@sk&H82yu17DkNflpfo2ZXadEtIT zX@vxhSdPPrTatLQs>Z diff --git a/_posts/.DS_Store b/_posts/.DS_Store deleted file mode 100644 index 70fb8c2ec643c44fadd185c0f3eec1810622d2c5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKJxc>Y5PhR50yZfv7X-TmW3WF$EbN5*0Znp+a^}E~{yKk-KT+R&C?2P+h0MUr z+kHE;%f8~~7Jw{Yc5`3?U`$uUtA?TJy86Hlf)OH}drUFMxy6e?_RoaYp0ehQzUb9Y zag9f`xJQjGp1F3y-IcA$KXGM`TQp?WxZ`?_86L2^YTE6lX*b+gFZD*By_<2AmI|Z- zsX!`_3Zw$sduih%$Bd~!Dv%0%DWKnnLRYK;J4gF;FxV4-I3jJvvArdTMG0aR*g2A+ ziI)<+RN{#tUQWJ5UKQ9mdO5^S=00(<#0y32bn?a0A(dmsR3H`TD{$!3iT3|X`Y-SQ zeo@X+fmGmMDIlZOdbQ-0qPGq%r@gk&Z|I-KTuW!LR!p>3%!#(*<8OII$6T)hJ4Y)g RZ{@`N5l~&yQh~ov-~*|6A;tgz 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: ---- -    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.” - -    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. - -    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. - -    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: ---- -     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. 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. - -     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. - -     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. - -     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. - -     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: ---- -     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. - - -     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) - -     \>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. - -     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. - -     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: ---- -     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. 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. - -     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. - -     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. - -     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! - -     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. - -     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. - - -     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 @@ + + + + + +

Number Guessing Game

@@ -105,9 +111,8 @@

Silly Story

-

SuperHeroes

- -

This example requires you to enter commands in your browser's JavaScript console (see What are browser developer tools for more information).

+

Superheroes

+
@@ -120,11 +125,13 @@

SuperHeroes

-

Bouncing Balls

+
+

Bouncing Balls

+ + + + +
- - - - \ 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 @@ + + + + + + Indira Tatikola + + + + +
+
+ Indira Tatikola + +
+
+ +
+

Project #1: Personal Website

+

2023-12-15

+

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.”

+ +

     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.

+ +

     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.

+ +

     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.

+ +

     Pretty simple start, can’t wait to keep experimenting :)

+
+ + \ 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 @@ + + + + + + Indira Tatikola + + + + +
+
+ Indira Tatikola + +
+
+ +
+

Project #2: CodeGradr

+

2024-02-09

+ +

     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.

+ +

    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.

+ + + +

     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.

+ +

     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.

+

     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 here.

+
+ + + + \ 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 @@ + + + + + + Indira Tatikola + + + + +
+
+ Indira Tatikola + +
+
+ +
+

Project #3: Spotify Wrapped

+

2024-4-21

+

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. + 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 for a demo video and some more info on our team.

+ +

     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.

+ +

     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.

+ +

     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!

+ +

     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.

+ +

     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.

+ + +

     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/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 @@ + + + + + + Indira Tatikola + + + + +
+
+ Indira Tatikola + +
+
+ +
+

Project #4: DSA Recitation Slides

+

2024-05-02

+

     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.

+ +

     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.

+ +

     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.

+ +

    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.

+ +

     The final collection is available this public repo 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/projects.html b/projects.html new file mode 100644 index 0000000..c012cae --- /dev/null +++ b/projects.html @@ -0,0 +1,60 @@ + + + + + + Indira Tatikola + + + + +
+
+ Indira Tatikola + +
+
+ +
+

Below are some of my projects!

+

I try to make something every month or two.

+ +
+ +
+ +
+ + + + + + + + \ 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 @@ -

Hello World.

-

This is the test page.

- - - - \ 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