Added new pages and updated design

- Added a new page for any algorithm experimentation projects. - Unhid the art section on the projects page. - Changed backgrounds to be slightly transparent and have the home page background style. - Added new contact me icons to other services and accounts. - Added new project to the recent projects section on the home page. - Changed the background style for the software development project sections. - Added sections to the different style of renders on the visual effects page. - Added new images for the project cards.
WhenLifeHandsYouLemons · Aug 28, 2024 · 629f121 · 629f121
1 parent 599a52a
commit 629f121
Show file tree

Hide file tree

Showing 19 changed files with 347 additions and 121 deletions.
diff --git a/Original Files/Website Photos/Software Development/boids.png b/Original Files/Website Photos/Software Development/boids.png
diff --git a/Original Files/Website Photos/Software Development/chronocube_logo.png b/Original Files/Website Photos/Software Development/chronocube_logo.png
diff --git a/Original Files/Website Photos/Software Development/gravitygrid.png b/Original Files/Website Photos/Software Development/gravitygrid.png
diff --git a/algorithm_playgrounds.html b/algorithm_playgrounds.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html data-bs-theme="auto" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>sooraj.dev</title>
+    <meta name="twitter:description" content="My personal website, portfolio, place to contact, and everything in between.">
+    <meta name="twitter:image" content="https://sooraj.dev/assets/img/others/profile_photo_blank_bg.jpg">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary">
+    <meta property="og:image" content="https://sooraj.dev/assets/img/others/profile_photo.jpg">
+    <meta name="twitter:title" content="sooraj.dev">
+    <script>
+        (function() {
+
+            // JavaScript snippet handling Dark/Light mode switching
+
+            const getStoredTheme = () => localStorage.getItem('theme');
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
+
+            const getPreferredTheme = () => {
+
+                if (forcedTheme) return forcedTheme;
+
+                const storedTheme = getStoredTheme();
+                if (storedTheme) {
+                    return storedTheme;
+                }
+
+                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
+
+                if (pageTheme) {
+                    return pageTheme;
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme);
+                }
+            }
+
+            setTheme(getPreferredTheme());
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
+
+                if (!themeSwitchers.length) return;
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active');
+                    element.setAttribute('aria-pressed', 'false');
+                });
+
+                for (const themeSwitcher of themeSwitchers) {
+
+                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
+
+                    if (btnToActivate) {
+                        btnToActivate.classList.add('active');
+                        btnToActivate.setAttribute('aria-pressed', 'true');
+                    }
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme();
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme());
+                }
+            });
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme());
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            const theme = toggle.getAttribute('data-bs-theme-value');
+                            setStoredTheme(theme);
+                            setTheme(theme);
+                            showActiveTheme(theme);
+                        })
+                    })
+            });
+        })();
+    </script>
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg">
+    <link rel="icon" type="image/jpeg" sizes="3024x3024" href="assets/img/others/profile_photo_blank_bg.jpg">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/JetBrains%20Mono.css">
+    <link rel="stylesheet" href="assets/css/bs-theme-overrides.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
+    <link rel="stylesheet" href="assets/css/Footer-Basic.css">
+    <link rel="stylesheet" href="assets/css/Header-Dark.css">
+    <link rel="stylesheet" href="assets/css/Highlight-Blue.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css" integrity="sha512-NVt7pmp5f+3eWRPO1h4A1gCf4opn4r5z2wS1mi7AaVcTzE9wDJ6RzMqSygjDzYHLp+mAJ2/qzXXDHar6IQwddQ==" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/Lightbox-Gallery.css">
+    <link rel="stylesheet" href="assets/css/Navigation-Clean.css">
+    <link rel="stylesheet" href="assets/css/Responsive-Image-Grid.css">
+    <link rel="stylesheet" href="assets/css/Responsive-Youtube-Embed.css">
+    <link rel="stylesheet" href="assets/css/Social-Icons.css">
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/typing_animation.css">
+</head>
+
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-K6TVV7PE2C"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-K6TVV7PE2C');
+</script>
+
+<body class="d-flex background-img">
+    <!-- Start: Header Dark -->
+    <header class="header-dark" style="background: linear-gradient(rgba(0, 0, 0, 1) 19%, rgba(25, 25, 25, 0.85)), rgba(0, 0, 0, 0);padding-bottom: 0px;backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
+        <!-- Start: Navigation Bar -->
+        <nav class="navbar navbar-expand-lg navigation-clean navbar-light">
+            <div class="container"><a class="navbar-brand" data-aos="fade" data-aos-once="true" href="index.html" style="font-family: 'JetBrains Mono', monospace;font-size: 30px;text-shadow: 0px 0px 20px rgb(255, 255, 255);">sooraj.dev</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-2" style="font-family: 'JetBrains Mono', monospace;filter: brightness(200%) contrast(0%);border-style: none;"><span class="visually-hidden" style="font-family: 'JetBrains Mono', monospace;">Toggle navigation</span><span class="navbar-toggler-icon" style="font-family: 'JetBrains Mono', monospace;"></span></button>
+                <div class="collapse navbar-collapse" id="navcol-2" style="font-family: 'JetBrains Mono', monospace;">
+                    <ul class="navbar-nav ms-auto" style="font-family: 'JetBrains Mono', monospace;">
+                        <li class="nav-item" style="font-family: 'JetBrains Mono', monospace;"><a class="nav-link" data-aos="fade" data-aos-once="true" href="index.html" style="font-family: 'JetBrains Mono', monospace;">Home</a></li>
+                        <li class="nav-item" style="font-family: 'JetBrains Mono', monospace;"><a class="nav-link" data-aos="fade" data-aos-once="true" href="projects.html" style="font-family: 'JetBrains Mono', monospace;">Projects</a></li>
+                        <li class="nav-item" style="font-family: 'JetBrains Mono', monospace;"><a class="nav-link" data-aos="fade" data-aos-once="true" href="contact.html" style="font-family: 'JetBrains Mono', monospace;">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav><!-- End: Navigation Bar -->
+        <div class="container hero">
+            <div class="row text-center">
+                <div class="col-md-8 offset-md-2 text-center typing-anim-container">
+                    <h1 class="text-center page-title, typing-anim-21" data-aos="fade" data-aos-delay="100" data-aos-once="true">Algorithm Playgrounds</h1>
+                </div>
+            </div>
+        </div>
+    </header><!-- End: Header Dark -->
+    <!-- Start: Main Section -->
+    <section class="flex-grow-1" style="padding-top: 50px;background: linear-gradient(rgba(25, 25, 25, 0.85) 0%, rgba(10, 10, 10, 0.5) 25%);backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
+        <h1 class="text-break page-heading" style="font-family: 'JetBrains Mono', monospace;color: rgb(32, 201, 151);margin-bottom: 10px;margin-top: 0px;margin-right: 10px;margin-left: 10px;text-shadow: 0px 0px 5px;font-weight: bold;text-align: center;">Websites</h1><!-- Start: Website 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: Boids -->
+            <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.75), rgba(0, 0, 0, 0.5)), url(&quot;assets/img/software_dev/boids.png&quot;) center / cover no-repeat;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;box-shadow: 0px 0px 20px 1px rgb(255, 255, 255);">
+                <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="color: rgb(50, 255, 0);font-family: 'JetBrains Mono', monospace;max-width: 500px;">Boids <span style="color: rgb(255, 15, 0);">Playground</span></h2>
+                        <p class="text-center" data-aos="fade" data-aos-once="true" style="color: rgb(200, 200, 200);font-family: 'JetBrains Mono', monospace;font-size: 22px;max-width: 500px;">A website for playing around with the boids flocking algorithm.</p>
+                    </div><!-- End: Intro -->
+                    <!-- Start: Buttons -->
+                    <div class="d-flex justify-content-center align-items-center buttons" data-aos="fade" data-aos-once="true" style="max-width: 500px;max-height: 60px;"><a class="btn btn-primary text-capitalize" role="button" data-aos="fade" data-aos-once="true" href="https://boids.sooraj.dev/" style="color: rgb(0, 0, 0);font-family: 'JetBrains Mono', monospace;font-size: 18px;border-style: none;background: rgb(220, 53, 69);font-weight: bold;">Visit</a></div><!-- End: Buttons -->
+                </div>
+            </section><!-- End: Boids -->
+            <!-- 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.75), rgba(0, 0, 0, 0.25) 99%), url(&quot;assets/img/software_dev/gravitygrid.png&quot;) left / cover no-repeat;border-radius: 50px;max-width: 425px;max-height: 380px;margin: 25px;padding: 25px 0px;min-width: 350px;min-height: 350px;box-shadow: 0px 0px 20px 1px rgb(255, 255, 255);">
+                <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(255, 255, 255);margin-bottom: 25px;max-width: 500px;"><span style="color: rgb(255, 217, 120);">Gravity</span><span style="color: rgb(104, 156, 255);">Grid</span></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://gravitygrid.sooraj.dev/" style="color: rgb(0, 0, 0);font-family: 'JetBrains Mono', monospace;font-size: 18px;border-style: none;background: rgb(220, 53, 69);font-weight: bold;padding: 14px 24px;max-width: 172px;max-height: 48px;">Visit</a></div><!-- End: Buttons -->
+                </div>
+            </section><!-- End: GravityGrid -->
+        </section><!-- End: Website Cards -->
+    </section><!-- End: Main Section -->
+    <!-- Start: Footer -->
+    <footer class="footer-basic" style="background: rgba(255, 255, 255, 0.75);backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
+        <h1 class="text-center" style="font-family: 'JetBrains Mono', monospace;font-weight: bold;text-shadow: 0px 0px 13px rgb(0, 0, 0);">sooraj.dev</h1><!-- Start: Links -->
+        <ul class="list-inline">
+            <li class="list-inline-item"><a href="index.html">Home</a></li>
+            <li class="list-inline-item"><a href="projects.html">Projects</a></li>
+            <li class="list-inline-item"><a href="contact.html">Contact</a></li>
+        </ul><!-- End: Links -->
+    </footer><!-- End: Footer -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script src="assets/js/bs-init.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js" integrity="sha512-7KzSt4AJ9bLchXCRllnyYUDjfhO2IFEWSa+a5/3kPGQbr+swRTorHQfyADAhSlVHCs1bpFdB1447ZRzFyiiXsg==" crossorigin="anonymous"></script>
+    <script src="assets/js/vendor/typed.js/typed.min.js"></script>
+</body>
+
+</html>
diff --git a/art.html b/art.html
@@ -127,9 +127,9 @@
   gtag('config', 'G-K6TVV7PE2C');
 </script>
 
-<body style="background: rgb(0, 0, 0);">
+<body class="background-img">
     <!-- Start: Header -->
-    <header class="header-dark" style="background: rgb(0, 0, 0);">
+    <header class="header-dark" style="background: linear-gradient(rgba(0, 0, 0, 1) 19%, rgba(25, 25, 25, 0.85)), rgba(0, 0, 0, 0);">
         <!-- Start: Navigation Bar -->
         <nav class="navbar navbar-expand-lg navigation-clean navbar-light">
             <div class="container"><a class="navbar-brand" data-aos="fade" data-aos-once="true" href="index.html" style="font-family: 'JetBrains Mono', monospace;font-size: 30px;text-shadow: 0px 0px 20px rgb(255, 255, 255);">sooraj.dev</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-2" style="font-family: 'JetBrains Mono', monospace;filter: brightness(200%) contrast(0%);border-style: none;"><span class="visually-hidden" style="font-family: 'JetBrains Mono', monospace;">Toggle navigation</span><span class="navbar-toggler-icon" style="font-family: 'JetBrains Mono', monospace;"></span></button>
@@ -152,7 +152,7 @@ <h1 class="text-break text-center page-title, typing-anim-3" data-aos="fade" dat
         </div><!-- End: Page Title -->
     </header><!-- End: Header -->
     <!-- Start: Art Gallery -->
-    <section class="photo-gallery" style="padding-top: 100px;">
+    <section class="photo-gallery" style="padding-top: 100px;background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);">
         <div class="container" style="padding: 0px;margin: 0px;max-width: 100%;">
             <!-- Start: Art Responsive Image Grid -->
             <div class="d-flex flex-row flex-wrap rig-row" style="padding: 20px;">

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -62,3 +62,11 @@ html {
   }
 }
 
+/* For auto-filling the screen height */
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
diff --git a/assets/css/typing_animation.css b/assets/css/typing_animation.css
@@ -53,6 +53,14 @@
   border-right: 3px solid;
 }
 
+.typing-anim-21 {
+  width: 22ch;
+  animation: typing 1.5s steps(22), blink .5s step-end infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 3px solid;
+}
+
 .typing-anim-14 {
   width: 15ch;
   animation: typing 1.5s steps(15), blink .5s step-end infinite alternate;

diff --git a/assets/img/software_dev/boids.png b/assets/img/software_dev/boids.png
diff --git a/assets/img/software_dev/chronocube_logo.png b/assets/img/software_dev/chronocube_logo.png
diff --git a/assets/img/software_dev/gravitygrid.png b/assets/img/software_dev/gravitygrid.png
diff --git a/assets/js/typing-effect.js b/assets/js/typing-effect.js