Added coding projects & updated text

- Added new project to software development page.
- Replaced old project with new one on home page.
- Changed how headers look on the home page.
- Changed background image style on multiple project sections on the software development page.
- Changed text in small places to look better.

contact.html

@@ -156,7 +156,7 @@ <h1 class="text-center page-title, typing-anim-10" data-aos="fade" data-aos-dela
         <div class="container align-items-lg-center hero" style="min-height: 350px;max-height: 100vh;">
             <div class="row text-center justify-content-center" style="margin: 0px;">
                 <div class="col-md-8 col-lg-8 text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center" style="margin: 0px;">
-                    <p class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center" data-aos="fade" data-aos-delay="200" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;color: rgb(255, 255, 255);font-size: 20px;">You can contact me or browse through my work using the links below. (Compliments are very welcome) 🙂</p><!-- Start: Social Icons -->
+                    <p class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center" data-aos="fade" data-aos-delay="200" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;color: rgb(255, 255, 255);font-size: 20px;">You can contact me or browse through my work using the links below. (Compliments are very welcome) :D</p><!-- Start: Social Icons -->
                     <div class="social-icons" style="background: transparent;"><a href="https://twitter.com/lemonshandyou"><i class="icon ion-social-twitter" data-aos="fade" data-aos-delay="350" data-aos-once="true" style="color: rgb(255, 255, 255);background: rgb(0, 150, 255);border-style: none;box-shadow: 0px 0px 20px 6px rgb(0, 0, 0);"></i></a><a href="https://www.instagram.com/particleplayground/"><i class="icon ion-social-instagram" data-aos="fade" data-aos-delay="300" data-aos-once="true" style="background: var(--bs-pink);color: rgb(255, 255, 255);border-style: none;box-shadow: 0px 0px 20px 6px rgb(0, 0, 0);"></i></a><a href="https://github.com/WhenLifeHandsYouLemons"><i class="icon ion-social-github" data-aos="fade" data-aos-delay="250" data-aos-once="true" style="color: rgb(255, 255, 255);background: rgb(25, 25, 25);border-style: none;box-shadow: 0px 0px 20px 6px rgb(0, 0, 0);"></i></a><a href="https://www.youtube.com/@ParticlePlayground"><i class="icon ion-social-youtube" data-aos="fade" data-aos-delay="300" data-aos-once="true" style="border-style: none;background: rgb(255, 0, 0);color: rgb(255, 255, 255);box-shadow: 0px 0px 20px 6px rgb(0, 0, 0);"></i></a><a href="mailto:developer.soorajs@gmail.com"><i class="icon ion-android-mail" data-aos="fade" data-aos-delay="350" data-aos-once="true" style="border-style: none;background: rgb(255, 255, 255);color: rgb(0, 0, 0);box-shadow: 0px 0px 20px 6px rgb(0, 0, 0);"></i></a></div><!-- End: Social Icons -->
                 </div>
             </div>

index.html

@@ -162,15 +162,15 @@ <h1 class="text-center page-title, typing-anim-4" data-aos="fade" data-aos-delay
     <section class="d-flex justify-content-center" style="background: linear-gradient(rgba(25, 25, 25, 0.85) 49%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0);min-height: 100vh;margin: 0px;padding-bottom: 50px;padding-top: 50px;backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
         <div class="row text-center justify-content-center" style="width: 100%;margin: 0px;">
             <div class="col-md-8 col-lg-8 offset-md-2 offset-lg-2 d-flex d-xxl-flex flex-column justify-content-center align-items-center justify-content-xxl-center align-items-xxl-center" style="margin: 0px;">
-                <h1 class="text-break align-self-center align-self-sm-center align-self-md-center align-self-lg-center align-self-xl-center align-self-xxl-center page-heading" data-aos="fade" data-aos-delay="900" data-aos-once="true" style="color: rgb(32, 201, 151);font-family: 'JetBrains Mono', monospace;font-weight: bold;text-shadow: 0px 0px 5px rgb(32, 201, 151);">aboutMe()</h1><img class="rounded-circle img-fluid" data-aos="fade" data-aos-delay="1000" data-aos-once="true" style="background: rgb(0, 0, 0);border-style: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;margin-bottom: 75px;margin-top: 75px;box-shadow: 0px 0px 50px 20px rgb(0, 0, 0);" src="assets/img/others/profile_photo.jpg" width="200px" height="200px"><p class="font-family: 'JetBrains Mono', monospace;color: rgb(0, 200, 0);font-size: 30px;margin-bottom: 50px;"><span class="typed" data-typed-items="Designer, Developer, Freelancer, Photographer"></span></p>
+                <h1 class="text-break align-self-center align-self-sm-center align-self-md-center align-self-lg-center align-self-xl-center align-self-xxl-center page-heading" data-aos="fade" data-aos-delay="900" data-aos-once="true" style="color: rgb(32, 201, 151);font-family: 'JetBrains Mono', monospace;font-weight: bold;text-shadow: 0px 0px 5px rgb(32, 201, 151);">/* About Me */</h1><img class="rounded-circle img-fluid" data-aos="fade" data-aos-delay="1000" data-aos-once="true" style="background: rgb(0, 0, 0);border-style: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;margin-bottom: 75px;margin-top: 75px;box-shadow: 0px 0px 50px 20px rgb(0, 0, 0);" src="assets/img/others/profile_photo.jpg" width="200px" height="200px"><p class="font-family: 'JetBrains Mono', monospace;color: rgb(0, 200, 0);font-size: 30px;margin-bottom: 50px;"><span class="typed" data-typed-items="Designer, Developer, Freelancer, Photographer"></span></p>
                 <p class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center page-body-text" data-aos="fade" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;color: rgb(0, 200, 0);margin-bottom: 50px;">// I'm a student who is passionate about technology and software development. My hobbies include 3D modelling, coding, and <a href="projects.html">more</a>.</p><!-- Start: Buttons -->
                 <div data-aos="fade" data-aos-once="true" class="buttons"><a class="btn btn-primary page-body-text" role="button" data-aos="fade" data-aos-once="true" href="contact.html" style="color: rgb(255, 50, 50);font-family: 'JetBrains Mono', monospace;background: rgba(0, 0, 0, 0);border-width: 2px;border-color: rgb(150, 0, 0);">Contact Me</a></div><!-- End: Buttons -->
             </div>
         </div>
     </section><!-- End: About Me -->
     <!-- Start: Skills -->
     <section class="d-flex flex-column justify-content-center align-items-center" style="min-height: 100vh;padding-top: 25px;backdrop-filter: blur(25px);-webkit-backdrop-filter: blur(25px);background: rgba(0, 0, 0, 0);">
-        <h1 class="text-break page-heading" data-aos="fade" data-aos-once="true" style="color: rgb(13, 110, 253);font-family: 'JetBrains Mono', monospace;font-weight: bold;margin-bottom: 50px;text-shadow: 0px 0px 5px rgb(13, 110, 253);">skills()</h1><!-- Start: Cards -->
+        <h1 class="text-break page-heading" data-aos="fade" data-aos-once="true" style="color: rgb(13, 110, 253);font-family: 'JetBrains Mono', monospace;font-weight: bold;margin-bottom: 50px;text-shadow: 0px 0px 5px rgb(13, 110, 253);">/* Skills */</h1><!-- Start: Cards -->
         <div class="cards" style="width: 100%;height: 100%;">
             <div class="d-flex flex-row flex-grow-0 flex-fill justify-content-center align-items-center flex-wrap m-auto align-items-lg-center">
                 <!-- Start: Skills Cards -->
@@ -217,7 +217,7 @@ <h1 class="text-break page-heading" data-aos="fade" data-aos-once="true" style="
     </section><!-- End: Skills -->
     <!-- Start: Recent Projects -->
     <section class="justify-content-center" style="padding-top: 50px;background: linear-gradient(rgba(0, 0, 0, 0) 11%, rgba(10, 10, 10, 0.85));backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
-        <h1 class="text-break page-heading" style="font-family: 'JetBrains Mono', monospace;color: rgb(255, 100, 0);margin-bottom: 10px;text-align: center;margin-top: 0px;margin-right: 10px;margin-left: 10px;text-shadow: 0px 0px 5px;">recentProjects()</h1><!-- Start: Project Cards -->
+        <h1 class="text-break page-heading" style="font-family: 'JetBrains Mono', monospace;color: rgb(255, 100, 0);margin-bottom: 10px;text-align: center;margin-top: 0px;margin-right: 10px;margin-left: 10px;text-shadow: 0px 0px 5px;">/* Recent Projects */</h1><!-- Start: Project Cards -->
         <section class="d-flex flex-row flex-grow-0 flex-fill justify-content-center align-items-center flex-wrap m-auto align-items-lg-center">
             <!-- Start: Encryptext -->
             <section class="d-flex d-lg-flex align-items-center align-items-lg-center highlight-blue" style="background: rgb(10, 10, 10);border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
@@ -232,7 +232,7 @@ <h2 class="text-center page-body-text" data-aos="fade" data-aos-once="true" styl
                 </div>
             </section><!-- End: Encryptext -->
             <!-- Start: FastCalc -->
-            <section class="d-flex d-lg-flex align-items-center align-items-lg-center highlight-blue" style="background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 100%), url(&quot;assets/img/software_dev/fastcalc_app_icon.png&quot;) center / cover space;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
+            <section class="d-flex d-lg-flex align-items-center align-items-lg-center highlight-blue" style="background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) 100%), url(&quot;assets/img/software_dev/fastcalc_app_icon.jpg&quot;) center / 95% space;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
                 <div class="container" style="max-width: 960px;max-height: 280px;">
                     <!-- Start: Intro -->
                     <div class="intro">
@@ -244,7 +244,7 @@ <h2 class="text-center page-body-text" data-aos="fade" data-aos-once="true" styl
                 </div>
             </section><!-- End: FastCalc -->
             <!-- Start: Chef Chat -->
-            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) 99%), url(&quot;assets/img/software_dev/male_cook_emoji.png&quot;) center / contain space;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
+            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) 99%), url(&quot;assets/img/software_dev/male_cook_emoji.jpg&quot;) center / contain space;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
                 <div class="container" style="max-width: 960px;max-height: 280px;">
                     <!-- Start: Intro -->
                     <div class="intro">
@@ -255,20 +255,20 @@ <h2 class="text-center page-body-text" data-aos="fade" data-aos-once="true" styl
                     <div class="d-flex d-lg-flex justify-content-center align-items-center justify-content-lg-center align-items-lg-center buttons" data-aos="fade" data-aos-once="true" style="padding: 14px 24px;max-width: 500px;max-height: 60px;"><a class="btn btn-primary text-capitalize d-flex d-lg-flex align-items-center align-items-lg-center" role="button" data-aos="fade" data-aos-once="true" href="https://ai-personal-chef.streamlit.app/" style="color: rgb(0, 0, 0);font-family: 'JetBrains Mono', monospace;font-size: 18px;border-style: none;background: var(--bs-red);font-weight: bold;padding: 14px 24px;max-width: 172px;max-height: 48px;">Learn More</a></div><!-- End: Buttons -->
                 </div>
             </section><!-- End: Chef Chat -->
-            <!-- Start: Rubik's Cube Timer -->
-            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="background: rgb(255, 255, 255);border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
+            <!-- Start: GravityGrid -->
+            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(&quot;assets/img/software_dev/gravitygrid_website_icon.jpg&quot;) 0px -25px / 100% repeat-x, rgb(250, 252, 238);border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;">
                 <div class="container" style="max-width: 960px;max-height: 280px;">
                     <!-- Start: Intro -->
                     <div class="intro">
-                        <h2 class="text-center page-body-text" data-aos="fade" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;font-weight: bold;color: rgb(0, 0, 0);margin-bottom: 25px;max-width: 500px;">ChronoCube</h2>
-                        <p class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center" data-aos="fade" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;font-size: 22px;margin-bottom: 16px;color: rgb(100, 100, 100);max-width: 500px;">A Rubik's Cube timer that will give you all the information you'll ever need.</p>
+                        <h2 class="text-center page-body-text" data-aos="fade" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;font-weight: bold;color: rgb(255, 255, 255);margin-bottom: 25px;max-width: 500px;">GravityGrid</h2>
+                        <p class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center" data-aos="fade" data-aos-once="true" style="font-family: 'JetBrains Mono', monospace;font-size: 22px;margin-bottom: 16px;color: rgb(200, 200, 200);max-width: 500px;">An interactive, 2D, grid-based particle simulator.</p>
                     </div><!-- End: Intro -->
                     <!-- Start: Buttons -->
-                    <div class="d-flex d-lg-flex justify-content-center align-items-center justify-content-lg-center align-items-lg-center buttons" data-aos="fade" data-aos-once="true" style="padding: 14px 24px;max-width: 500px;max-height: 60px;"><a class="btn btn-primary text-capitalize d-flex d-lg-flex align-items-center align-items-lg-center" role="button" data-aos="fade" data-aos-once="true" href="https://chronocube.sooraj.dev" style="color: rgb(0, 0, 0);font-family: 'JetBrains Mono', monospace;font-size: 18px;border-style: none;background: var(--bs-red);font-weight: bold;padding: 14px 24px;max-width: 172px;max-height: 48px;">Learn More</a></div><!-- End: Buttons -->
+                    <div class="d-flex d-lg-flex justify-content-center align-items-center justify-content-lg-center align-items-lg-center buttons" data-aos="fade" data-aos-once="true" style="padding: 14px 24px;max-width: 500px;max-height: 60px;"><a class="btn btn-primary text-capitalize d-flex d-lg-flex align-items-center align-items-lg-center" role="button" data-aos="fade" data-aos-once="true" href="https://gravitygrid.sooraj.dev" style="color: rgb(0, 0, 0);font-family: 'JetBrains Mono', monospace;font-size: 18px;border-style: none;background: var(--bs-red);font-weight: bold;padding: 14px 24px;max-width: 172px;max-height: 48px;">Learn More</a></div><!-- End: Buttons -->
                 </div>
-            </section><!-- End: Rubik's Cube Timer -->
+            </section><!-- End: GravityGrid -->
             <!-- Start: LED Light Wall -->
-            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(&quot;assets/img/vfx/stylised/IMG_8552.jpg&quot;) center / cover no-repeat;">
+            <section class="d-flex d-lg-flex align-items-center align-items-lg-center" style="border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(&quot;assets/img/vfx/stylised/IMG_8552.jpg&quot;) center / 150% no-repeat;">
                 <div class="container" style="max-width: 960px;max-height: 280px;">
                     <!-- Start: Intro -->
                     <div class="intro">