Feature/rza 250143:Added Blogs

.github/actions/md-lint/action.yml

@@ -9,4 +9,5 @@ runs:
         --config './.markdownlint.json' \
         --ignore '.github/CONTRIBUTING.md' \
         --ignore '.github/CODE_OF_CONDUCT.md'\
-        --ignore 'CHANGELOG.md'
+        --ignore 'CHANGELOG.md'\
+        --ignore 'docs/README.md'

.vscode/dictionaries/project-words.txt

@@ -12,6 +12,7 @@ audiorec
 audiorecorder
 avgrah
 Barahkhadi
+betterauth
 Bhadrapada
 bincount
 BODYPART
@@ -28,6 +29,7 @@ dogri
 DPDP
 Dussehra
 ensurepip
+flexbox
 fontsource
 frontmatter
 Gandhar
@@ -37,6 +39,7 @@ heroicons
 hidenseek
 Holi
 hookform
+ICFAI
 imread
 imwrite
 Jaati

docs/README.md

@@ -120,11 +120,11 @@ npm run preview
 
 ## Home Page
 
-### Description
+> Description
 
 The landing page for abcdkbd, introducing the platform and its key features for interactive learning.
 
-### Screenshots
+> Screenshots
 
 - **Light Mode:** ![Home Light](/public/assets/images/screenshots/light/home.png)
 - **Dark Mode:** ![Home Dark](/public/assets/images/screenshots/dark/home.png)
@@ -133,21 +133,15 @@ The landing page for abcdkbd, introducing the platform and its key features for
 
 ## About Page
 
-### Description
-
 This page introduces the mission, team, and values behind abcdkbd. It provides an overview of the platform's goals, core values, and contact information for contributors and educators.
 
-### Screenshots
-
 - **Light Mode:** ![About Light](/public/assets/images/screenshots/light/about.png)
 - **Dark Mode:** ![About Dark](/public/assets/images/screenshots/dark/about.png)
 
 ---
 
 ## Varnmala Page
 
-### Description
-
 Explore the vowels and consonants of different Indian languages. Compare scripts and sounds across regions in a simple, visual way.
 
 ### Screenshots

src/assets/styles/index.css

@@ -5,7 +5,7 @@
   --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%);
   --card-red-text: #fff;
   --card-blue-text: #fff;
-  --card-yellow-text: #fff;
+  --card-yellow-text: #542929;
   --card-green-text: #fff;
   --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18);
   --hero-heading: #f3f4f6;
@@ -23,10 +23,6 @@
   --card-blue-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
   --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%);
   --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%);
-  --card-red-text: #fff;
-  --card-blue-text: #fff;
-  --card-yellow-text: #fff;
-  --card-green-text: #fff;
   --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18);
   --hero-heading: #f3f4f6;
   --section-divider: #23304a;
@@ -52,10 +48,6 @@
   --card-blue-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
   --card-yellow-bg: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%);
   --card-green-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-  --card-red-text: #fff;
-  --card-blue-text: #fff;
-  --card-yellow-text: #fff;
-  --card-green-text: #fff;
   --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.07);
   --section-divider: #e5e7eb;
   --section-bg: #ffffff;

src/assets/styles/menu.css

@@ -1,4 +1,4 @@
-@import url("https://unpkg.com/normalize.css") layer(normalize);
+/*@import url("https://unpkg.com/normalize.css") layer(normalize);*/
 @layer normalize, demo, base;
 
 @layer demo {

src/components/about/HeroSection.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import LogoImage from "/public/assets/images/ABCD.png";
+import LogoImage from "/public/assets/images/abcd.png";
 
 interface Props {
   appName: string;

src/components/home/ExploreLearnSection.astro

@@ -21,7 +21,7 @@ import "@/assets/styles/home/explore-learn-section.css";
       </a>
     </div>
     <div class="card yellow">
-      <h3>🤔 Language</h3>
+      <h3>📝Language</h3>
       <p>Indian Languages basics</p>
       <a href="/indic">
         <button class="button white">Start Learning</button>

src/content/blog/ayush.md

@@ -0,0 +1,89 @@
+---
+title: "My Internship Journey"
+description: "A summary of my learnings and contributions during my recent internship."
+image: "/assets/images/blog/blog-6.png"
+author: "Ayush Tyagi"
+publishDate: "20 July 2025"
+---
+
+## My Internship Journey
+
+I learnt a lot of new things during my time in the internship, both academically and professionally.
+It provided me with a practical glimpse into the corporate world. Our mentor was great, always there to help us out whenever we got stuck or had questions.
+
+---
+
+## 🏛️ Projects I Worked On
+
+I worked on the following things during the internship:
+
+### 🏠 [Panel](/panel)
+
+I designed and structured header of the panel page, and added new features.
+
+### 🗺️ [Canvas]
+
+The canvas section was broken down into two interactive sub-pages. Both designed for creating quotes with unique features:
+
+- [**Text**](/canvas/text) – This subpage allows users to create and display quotes, including the current time.
+- [**Quote**](/canvas/quote) – This subpage allows user to create, style, and download custom quotes.
+
+This section is feature rich and can be used to create cool designs!
+
+### 🔤 [HidenSeek](/hidenseek/grid)
+
+I improved the style and layout of the grid, index and kbd pages.My goal was to make them look a lot better and feel more polished.
+
+### 🔢 [Login]
+
+I created a login page complete with an image slider that gave users a glimpse of the website. I also created the front end for signup, forgot-password and dashboard.
+
+### 📚 [BetterAuth]
+
+I created a login where the user can authenticate themselves using their github account. Sqlite was used to track cookies and store the information of the user.
+
+### 📚 [Components]
+
+I added three common components- back, share and keyboard, and also ensured that they were integrated across all the different pages where they were needed.
+
+### 🔮 [Others]
+
+I worked on several other pages, fixing bugs and adding new components to them.
+
+---
+
+## ⚙️ Tech I Explored
+
+Things I learnt during this internship are:
+
+### 🚀 Astro Framework
+
+I learnt the implementation of astro framework and its need along with the benefits of using it.
+
+### 🗺️ Html2canvas
+
+This is a js library that takes the screenshot of the page, it was implemented in quote.astro page.
+
+### 🗣️ Focus/Blur
+
+`focus()` and `blur()` are methods used to show and hide the keyboard. This is an useful and important feature for mobile and ipad users.
+
+### 📚 BetterAuth
+
+BetterAuth is a full-stack authentication library designed to simplify common user authentication patterns in an application. I implemented login via github using betterauth.
+
+### 💻 Git & GitHub
+
+I learnt to configure git and github, and understood the working of branches, pull requests, and merging.
+
+### 💻 Visual Studio Code (VS Code)
+
+I used vscode as my primary development environment throughout the internship.
+Also used project manager extension, it made working on several projects easier.
+Used extensions like Prettier,ESLint, and Astro Language Tools to write clean and consistent code.
+
+---
+
+## 🙏 What I Took Away (And a Big Thanks!)
+
+This internship was a big help. I'm grateful for the chance to actually use what I've been learning in a real work setting. Our mentor was a huge help, and I really appreciate all the support and guidance I got from the team.

src/content/blog/azmat-raza.md

@@ -0,0 +1,84 @@
+---
+title: "Internship at RecursiveZero as a SDE intern"
+description: "A deep dive into my two-month internship experience, working with Astro.js and growing as a frontend developer."
+publishDate: 2025-07-21
+author: "Azmat Raza"
+image: "/assets/images/blog/blog-4.jpg"
+---
+
+## Internship Experience at RecursiveZero Pvt. Ltd
+
+My name is **Azmat Raza**, a frontend developer with interest in building cool and useful web apps.
+During my two-month internship at RecursiveZero Pvt. Ltd., I worked mainly with **Astro.js** to create interactive,responsive pages that focused on both functionality and user experience.
+I worked on projects like **Crossword**, **Societree**, and **Journey Timeline**, and each one helped me grow in different ways.
+I joined this internship to learn from real projects, and I ended up learning a lot more than expected.
+
+## Frontend Adventures with Astro.js
+
+A big part of my internship was frontend development. I created pages from scratch, improved performance, fixed layout bugs, and added features that users would enjoy. Astro.js made it possible to focus on speed and simplicity.
+
+### Key Accomplishments
+
+- **Crossword Puzzle Page:**  
+  I built a complete crossword puzzle interface using Astro and JavaScript. The puzzle supports mobile drag, keyboard shortcuts, clue highlighting, and even a help mode for users.
+
+- **Societree Page:**  
+  This page displays a printable list of family and clan cards. I implemented card expansion, dynamic layout for printing, search filtering, and smooth animations without using any frameworks like Tailwind.
+
+- **Journey Timeline Page:**  
+  I developed a life journey timeline app where users can add, edit, and delete events. I styled it with day/night themes, sun and moon graphics, hover-to-expand labels, and optimized print view with page breaks and responsive layout.
+
+- **Styling and Animations:**  
+  I added gradient borders, parallax backgrounds, shooting star animations, and theme-based color changes to make the apps visually appealing.
+
+- **Print Optimizations:**  
+  A lot of effort went into fixing print-related issues such as elements cutting off, page breaks after labels, and alignment of timeline lines with event labels.
+
+### Why Astro.js?
+
+Astro.js was something I hadn’t used before this internship, but it ended up being super helpful. It lets you build static sites that load really fast, and it doesn't add too much JavaScript unless you really need it.
+I could write plain HTML, CSS, and JS, and still make the pages look and work really well. Astro also makes it easy to split code into components and manage local data without extra complexity.
+It’s great for content-heavy and design-focused pages like the ones I worked on.
+
+**Technologies Used:** Astro.js, HTML, CSS, JavaScript
+
+## Project Spotlight: ABCD Learning Platform
+
+As part of the [ABCD](https://abcdkbd.com/) project, I worked on key frontend pages aimed at helping children learn in fun and interactive ways.
+
+- **[Crossword Page](/crossword)**: A game where kids can solve puzzles using keyboard and touch. I handled the full interaction logic and UI responsiveness.
+
+- **[Societree Page](/clan)**: A dynamic, searchable listing for clans and families. The design was made print-ready and easy to navigate.
+
+- **Journey Timeline:** A visual timeline where events could be added with descriptions and images. I styled it with animations, day/night background, and fixed printing issues.
+
+All the pages were designed to be mobile-friendly, responsive, and usable across devices. You can check out the live site and source code here:
+
+## Technical Challenges
+
+**Problem:** Merging Git branches
+**Solution:** Learn how to resolve conflicts using VS code inbuilt git support
+
+**Problem:** Print layout breaking or getting cut across pages  
+**Solution:** Used `break-inside: avoid`, adjusted margins, and wrote custom media queries to handle layout on paper
+
+**Problem:** Positioning dynamic elements in different screen sizes  
+**Solution:** Used CSS variables and spacing logic to manage height and alignment based on number of elements
+
+## Learning from Challenges
+
+- Learned how to properly work with **Git and GitHub** in a team setting, especially when dealing with frequent changes and print styles
+- Improved at writing CSS that is both responsive and print-friendly
+- Developed debugging habits, like isolating layout issues and testing on multiple browsers
+- Learned to plan UI structure before jumping into code, which saved time later
+- Got better at managing and organizing custom CSS without relying on utility libraries
+
+## Beyond the Code: Growth and Learning
+
+This internship also helped me improve soft skills. I got more confident in communicating with the team, asking for help, and explaining my work. I understood how to keep my code clean so others could understand it easily.
+Working on live projects gave me experience I couldn’t get from just tutorials or courses. I also explored open-source workflows and how small commits and good messages make a big difference in a team environment.
+
+## Conclusion
+
+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.