fixed typo and mobile splash issue and draw page select box issue; link color in about us

Author: recursivezero

.vscode/dictionaries/project-words.txt

@@ -14,6 +14,7 @@ avgrah
 Barahkhadi
 betterauth
 Bhadrapada
+bhartiya
 bincount
 BODYPART
 Chaitra

src/assets/styles/draw.css

@@ -200,10 +200,10 @@
 
 @media (max-width: 1024px) {
   .controls {
-    position: absolute;
-    right: 0.6rem !important;
+    position: fixed;
+    right: 0.6rem;
     top: 0;
-    margin-top: 11rem !important;
+    margin-top: 10rem;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.5rem 0;
@@ -350,7 +350,3 @@
 .controls {
   z-index: 100;
 }
-
-select {
-  color: white;
-}

src/assets/styles/footer.css

@@ -4,7 +4,7 @@
   --footer-text-secondary: #9ca3af;
   --footer-text-hover: #9ee0e7;
   --footer-brand-text: #ffffff;
-  --footer-brand-highlight: #fbbf24;
+  --footer-brand-highlight: #2ed729;
   --footer-social-hover: #0ea5e9;
   --footer-copyright-link: #9ca3af;
   --footer-copyright-link-hover: #0ea5e9;
@@ -30,7 +30,7 @@
   --footer-text-secondary: gray;
   --footer-text-hover: #eb5d9d;
   --footer-brand-text: #0f0f10;
-  --footer-brand-highlight: #fbbf24;
+  --footer-brand-highlight: #c13595;
   --footer-social-hover: #0ea5e9;
   --footer-copyright-link: #58250b;
   --footer-copyright-link-hover: #178bb9;
@@ -274,7 +274,7 @@
     transition: transform 0.2s ease-in-out;
   }
 
-  .footer__nav--item[open] > summary .fa-chevron-down {
+  .footer__nav--item[open]>summary .fa-chevron-down {
     transform: rotate(180deg);
   }
 
@@ -291,4 +291,4 @@
     margin-top: 1rem;
     font-size: 0.85rem;
   }
-}
+}

src/assets/styles/globals.css

@@ -100,6 +100,32 @@
     color: light-dark(#151414, white);
   }
 
+  @media (prefers-color-scheme: dark) {
+    html[data-theme="system"] {
+      select {
+        color: white;
+        background-color: #333;
+      }
+
+      a {
+        color: brown;
+      }
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    html[data-theme="system"] {
+      select {
+        color: black;
+        background-color: #fff;
+      }
+
+      a {
+        color: brown;
+      }
+    }
+  }
+
   h1 {
     font-size: 3rem;
     font-weight: 700;

src/assets/styles/mobile-splash.css

@@ -11,7 +11,6 @@
   padding: 1rem;
   transition: background-color 0.3s ease;
   display: none;
-  content-visibility: hidden;
 }
 
 @container splash (max-width: 768px) {

src/components/MobileSplash.astro

@@ -2,7 +2,7 @@
 import "@/assets/styles/mobile-splash.css";
 import { Image } from "astro:assets";
 import logoImage from "public/assets/images/abcd.png";
-const { stay } = Astro.props;
+const { stay = true } = Astro.props;
 ---
 
 <div id="mobile-splash-wrapper" class="container__splash">
@@ -13,15 +13,15 @@ const { stay } = Astro.props;
       Revisit on desktop to check out abcdkbd.com. We will optimize for mobile soon. Stay tuned…
     </p>
     <div class="container_splash_buttons">
-      <a id="continue-btn" class="container_splash_btn container_splash_btn_secondary" rel="noopener"
+      <a id="continue" class="container_splash_btn container_splash_btn_secondary" rel="noopener noreferrer"
         >📱 Continue on mobile</a
       >
     </div>
   </div>
 </div>
 <script define:vars={{ stay }} is:inline>
   const splashWrapper = document.getElementById("mobile-splash-wrapper");
-  const continueBtn = document.getElementById("continue-btn");
+  const continueBtn = document.getElementById("continue");
 
   if (window.innerWidth < 768) {
     const userHasConsent = localStorage.getItem("viewAsDesktop") === "true";
@@ -38,12 +38,7 @@ const { stay } = Astro.props;
 
     continueBtn?.addEventListener("click", () => {
       localStorage.setItem("viewAsDesktop", "true");
-
-      if (stay) {
-        window.location.href = "/";
-      } else {
-        splashWrapper.style.display = "none";
-      }
+      splashWrapper.style.display = "none";
     });
   }
 </script>

src/content/blog/azmat-raza.md

@@ -82,3 +82,5 @@ Working on live projects gave me experience I couldn’t get from just tutorials
 
 My internship at RecursiveZero was a great learning journey. I didn’t just write code — I learned to think about how things look, how they behave, and how users will interact with them. I'm thankful to **Keshav Sir** and the whole team for
 giving me the space to build, break, and fix real things. This experience has made me more confident as a frontend developer, and I’m excited to use what I’ve learned in future projects.
+
+> Azamt Raza

src/content/blog/chhavi.md

@@ -28,7 +28,7 @@ I designed and structured the home page to ensure a smooth user experience with
 
 ### 🪔 [Varnmala Page](/varnmala/)
 
-I developed a rich, multi-section learning space for learners. The **Varnmala** section was broken down into six interactive subpages:
+I developed a rich, multi-section learning space for learners. The **Varnmala** section was broken down into six interactive sub-pages:
 
 - [**Hindi**](/varnmala/hindi) – Displayed _स्वर_ and _व्यंजन_.
 - [**English**](/varnmala/english/) – Offered a comparative look at English alphabet letters.
@@ -133,3 +133,5 @@ The journey has just begun — and I’m loving every part of it!
 **Special Thanks**: Mr. Keshav Mohta and for making this journey memorable and enriching!
 
 **Thank you for reading!**
+
+> Chhavi Sharma

src/content/blog/prakash-raj.md

@@ -14,7 +14,7 @@ Under the exceptional guidance of **Mr. Keshav Mohta**, I discovered the true es
 
 ---
 
-## Projects I Worked On at [**`abcdkbd.com`**](abcdkbd.com)
+## Projects I Worked On at [**`abcdkbd.com`**](https://abcdkbd.com)
 
 ### [Draw Page](/draw) 🎨
 

src/content/blog/rupesh-rathore.md

@@ -8,66 +8,70 @@ publishDate: "23 July 2025"
 
 ## **From Zero to A Front-End Developer: My Internship Experience**
 
-My name is [Rupesh Rathore](https://www.linkedin.com/in/rupesh-rathore-881871326), currently a third-year B.Tech student at [ICFAI University, Jaipur](https://www.iujaipur.edu.in/), with a passion for coding , programming , web-development, designing , art and sketching.
+My name is [Rupesh Rathore](https://www.linkedin.com/in/rupesh-rathore-881871326), currently a third-year B.Tech student at [ICFAI University, Jaipur](https://www.iujaipur.edu.in/),
+with a passion for coding , programming , web-development, designing , art and sketching.
 For past two months, I’ve had the incredible opportunity to work as a Software Development Engineer (SDE) intern at RecursiveZero Pvt. Ltd.
 
 ---
 
 ## **Significance of this Internship**
 
-To me this was not just an Internship, it was a gamble, a desperately needed spark to ignite the flames I wanted to chase. To be honest with you all, I had **Zero** knowledge and experience in web-development 2 Monthes prior because I was working on programming and DSA.
+To me this was not just an Internship, it was a gamble, a desperately needed spark to ignite the flames I wanted to chase. To be honest with you all,
+I had **Zero** knowledge and experience in web development 2 months prior because I was working on programming and DSA.
 
-I wanted to learn and work on Web-development for past two years but couldn't. Then I saw an opportunity **a spark** that I could gamble on, either I would waste my 2 months and disappoint by Intership Instructor **Mr. Keshav Mohta** or I Would emerge anew and I did emerge anew.
+I wanted to learn and work on Web-development for past two years but couldn't. Then I saw an opportunity **a spark** that I could gamble on,
+either I would waste my 2 months and disappoint by Internship Instructor **Mr. Keshav Mohta** or I would emerge anew and I did emerge anew.
 
 I learned so much :
 
-- I learned HTML, CSS, JAVASCRIPT from scratch to creating whole working projects.
+- I learned HTML, CSS, JavaScript from scratch to creating whole working projects.
 - Astro from scratch to creating projects and many more that I will address later.
 
-## Projects I Worked On at [**`abcdkbd.com`**](abcdkbd.com)
+## Projects I Worked On at [**`abcdkbd.com`**](https://abcdkbd.com)
 
 ### [Akshar Page](/akshar) 🆎㊗️🈷️🕉️
 
 - This page was originally called `Kannada` page which allowed users to explore the vowels and consonants of Kannada and Hindi language, providing a simple and visual way to compare characters and their sounds of two languages.
 
-- I added many more languages to this page like Telugu, Tamil, Gujarati . Our Goal was to add all the most prominant languages of Bharat to it. After adding all possible languages we changed the name of the page to `Indic` but to set the Tone and make it sound Bharaty we changed it to `Akshar`.
+- I added many more languages to this page like Telugu, Tamil, Gujarati . Our Goal was to add all the most prominent languages of Bharat to it. After adding all possible languages we changed the name of the page to `Indic`
+  but to set the Tone and make it sound **bhartiya**, later renamed it to `Akshar`.
 
-- I developed its whole new UI with CSS, used many CSS features like Grid, color-gradients, CSS-animations, gradient animation and many more things. 
+- I developed its whole new UI with CSS, used many CSS features like Grid, color-gradients, CSS-animations, gradient animation and many more things.
 
 - Now it allows users to explore the vowels and consonants of various Indian languages, providing a simple and visual way to compare scripts and sounds across different regions.A comprehensive hub for learning and practicing alphabets, offering tools for reading and learning.
 
 ### [Vedic Page](/vedic) ⏳🕰️
 
-- A page dedicated to enables users to travel through India's rich heritage, knowledge and Time-sytem. This page represents Indian Time-System and units in such a way that engages users to learn and explore more about our culture.
+- A page dedicated to enables users to travel through India's rich heritage, knowledge and Time-system. This page represents Indian Time-System and units in such a way that engages users to learn and explore more about our culture.
 
 - I developed three separate tabs - `Tithi` , `Converter` and `Units`.
 
   - Tithi - Presents date-time :
     - English calender(English-format - `Thursday, July 24, 2025 at 03:56:52 at night GMT+5:30`).
     - English calender(Hindi-format - `गुरुवार, 24 जुलाई 2025 को 03:56:55 IST बजे`).
     - Hindu calender(hindi-format - `शक गुरुवार, नवमी श्रावण कृष्ण पक्ष १९४७ को रात ०३:५६:५८ बजे`).
-  - Conveter - A vedic unit converter which helps to convert one vedic time unit to another e.g. `लव`, `रेणु`.
+  - Converter - A vedic unit converter which helps to convert one vedic time unit to another e.g. `लव`, `रेणु`.
   - Units - A vedic time journey that allows user to travel and learn vedic time units with a stunning UI created using pure CSS.
 
-- Developed the logic to represent date-time in different formats took inspiration from [Waqt](https://github.com/xkeshav/waqt) by **Mr. Keshav Mohta**, improved existing logic to convert units , created whole UI and styling of the page from scratch.
+- Developed the logic to represent date-time in different formats took inspiration from [Waqt](https://github.com/xkeshav/waqt) by **Mr. Keshav Mohta**, improved existing logic to convert units ,
+  created whole UI and styling of the page from scratch.
 
 ### [Poems Page](/poems) 📚📜📃
 
-- Developed a section where children can read Poems across the world, making learning engaging and fun.
+- Developed a section where children can read poems across the world, making learning engaging and fun.
 
 - I developed this page by taking inspiration from my own project which uses Astro's in-built i18n feature to show the same content in multiple languages - `localization` & `internationalization`.
 
--
-  - I used `JSON` to store 50 poems and developed the logic to dynamically fetech the poems from the `JSON`.
+- - I used `JSON` to store 50 poems and developed the logic to dynamically fetch the poems from the `JSON`.
   - Developed a cute and engaging `grid-card` based layout using CSS.
   - Utilizes JavaScript's in-built `pop-over API` to show the card-modal.
-  - Utilized Emojies to give uniqueness to each `poem`.
+  - Utilized Emojis to give uniqueness to each `poem`.
 
 ### [Listen Page](/varnmala/listen) 💁‍♀️👂🔊
 
 - Refactored and updated the Listen section’s user interface for a cleaner, more readable, and visually appealing experience.
 
-- Removedd Bugs from the page like jumbled layout and positioning.
+- Removed Bugs from the page like jumbled layout and positioning.
 
 ### [Draw](/draw) 📝
 
@@ -77,11 +81,11 @@ I learned so much :
 
 ### Vedic Time Journey 🕉️⏳
 
-- Designed and implemented a scroll based Time journey which uses scroll based parallex effect to design cosmoic journey.
+- Designed and implemented a scroll based Time journey which uses scroll based parallax effect to design cosmic journey.
 
 ### Square Bubble 🟥🟧🟪🟩
 
-- Developed a custom component that can be used anywhere to represent the starting of the page. A stunning CSS animation and features based design which so engaging and plleasing to see.
+- Developed a custom component that can be used anywhere to represent the starting of the page. A stunning CSS animation and features based design which so engaging and pleasing to see.
 
 ## What I Learned 🧠
 
@@ -92,10 +96,11 @@ I learned so much :
   - Learned to use Astro's slot system for flexible component composition, enabling reusable layouts `(e.g. BaseLayout with header slots)`.
   - Utilized Astro's integration with Markdown and TypeScript for type-safe content and seamless data flow between content and UI.
   - Mastered Astro's Built-in Internationalization (I18n): Implemented robust multi-language support by configuring locales and a default language in `astro.config.mjs`.
-  Organized content and UI strings by language (e.g., `src/pages/[locale]/` for routing and `src/i18n/ui.ts` for translations).
-  Leveraged `astro:i18n` helper functions like `getRelativeLocaleUrl()` for accurate localized routing and `useTranslations()` for dynamic UI string translation, providing a truly global user experience.
+    Organized content and UI strings by language (e.g., `src/pages/[locale]/` for routing and `src/i18n/ui.ts` for translations).
+    Leveraged `astro:i18n` helper functions like `getRelativeLocaleUrl()` for accurate localized routing and `useTranslations()` for dynamic UI string translation, providing a truly global user experience.
 
 - **CSS Techniques**:
+
   - Utilized CSS custom properties (variables) for theming and dynamic styling (e.g., `--item-width`, `--card-color`, `--t` for transitions), enhancing maintainability and flexibility.
 
   - Designed layouts using Flexbox for one-dimensional alignment and CSS Grid for complex two-dimensional structures, ensuring responsive and adaptive interfaces (e.g., gallery and capital page grids).
@@ -106,7 +111,8 @@ I learned so much :
 
   - Leveraged `transition` and `transform` properties for smooth interactive effects (e.g., hover/active states in gallery and draw controls), improving user engagement.
 
-  - Explored advanced CSS 
+  - Explored advanced CSS
+
     - pseudo-classes (`:hover`, `:active`, `:focus`, `:nth-child`, `:first-child`, `:last-child`)
     - pseudo-elements (`::before`, `::after`, `::first-letter`, `::first-line`) for dynamic styling and content manipulation without altering HTML.
 
@@ -116,7 +122,7 @@ I learned so much :
 
 ### Git & Version Control Mastery
 
-Learn about branching strategies, merging, and conflict resolution and learned to work with multiple developers on the same codebase and Understand the commit messages, pull requests, and code with GitHub workflows and project organization.
+Learn about branching strategies, merging, and conflict resolution and learned to work with multiple developers on the same codebase and understand the significance of proper commit messages, pull requests, and code with GitHub workflows and project organization.
 
 ### VS Code - The Developer's Best Friend