diff --git a/.github/actions/md-lint/action.yml b/.github/actions/md-lint/action.yml index 98ad500a..3d5f3f3b 100644 --- a/.github/actions/md-lint/action.yml +++ b/.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' diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt index 00c36478..8fee1df0 100755 --- a/.vscode/dictionaries/project-words.txt +++ b/.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 diff --git a/docs/README.md b/docs/README.md index e1f7ff10..b2c3f186 100755 --- a/docs/README.md +++ b/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,12 +133,8 @@ 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) @@ -146,8 +142,6 @@ This page introduces the mission, team, and values behind abcdkbd. It provides a ## Varnmala Page -### Description - Explore the vowels and consonants of different Indian languages. Compare scripts and sounds across regions in a simple, visual way. ### Screenshots diff --git a/public/assets/images/ABCD.png b/public/assets/images/ABCD.png deleted file mode 100644 index e2aabde3..00000000 Binary files a/public/assets/images/ABCD.png and /dev/null differ diff --git a/public/assets/images/blog/blog-4.jpg b/public/assets/images/blog/blog-4.jpg new file mode 100644 index 00000000..cbea3027 Binary files /dev/null and b/public/assets/images/blog/blog-4.jpg differ diff --git a/public/assets/images/blog/blog-5.png b/public/assets/images/blog/blog-5.png new file mode 100644 index 00000000..86cc124a Binary files /dev/null and b/public/assets/images/blog/blog-5.png differ diff --git a/public/assets/images/blog/blog-6.png b/public/assets/images/blog/blog-6.png new file mode 100644 index 00000000..131670c6 Binary files /dev/null and b/public/assets/images/blog/blog-6.png differ diff --git a/public/assets/images/blog/blog-7.png b/public/assets/images/blog/blog-7.png new file mode 100644 index 00000000..061659d0 Binary files /dev/null and b/public/assets/images/blog/blog-7.png differ diff --git a/public/assets/images/blog/blog-8.png b/public/assets/images/blog/blog-8.png new file mode 100644 index 00000000..02e59350 Binary files /dev/null and b/public/assets/images/blog/blog-8.png differ diff --git a/public/assets/images/blog/internship.png b/public/assets/images/blog/internship.png new file mode 100644 index 00000000..8489341d Binary files /dev/null and b/public/assets/images/blog/internship.png differ diff --git a/src/assets/styles/MobileSplash.css b/src/assets/styles/MobileSplash.css deleted file mode 100644 index 2234c6f2..00000000 --- a/src/assets/styles/MobileSplash.css +++ /dev/null @@ -1,96 +0,0 @@ -.container_splash { - display: none; -} - -@container (max-width: 768px) { - .container_splash { - display: flex; - position: fixed; - inset: 0; - z-index: 1000; - background-color: light-dark(#f4f4f2, #090808); - justify-content: center; - align-items: center; - padding: 1rem; - transition: background-color 0.3s ease; - } - - .container_splash_card { - background-color: light-dark(#ffffff, #0f172a); - padding: 2rem; - margin-bottom: 0.5vh; - border-radius: 1rem; - box-shadow: light-dark(0 10px 30px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3)); - text-align: center; - max-width: 400px; - width: 100%; - border: light-dark(none, 1px solid #404040); - transition: - background-color 0.3s ease, - box-shadow 0.3s ease; - } - - .container_splash_logo { - width: 60px; - margin-bottom: 1rem; - margin-left: 40%; - filter: light-dark(none, brightness(0.9)); - transition: filter 0.3s ease; - } - - .container_splash_heading { - font-size: 1.25rem; - margin-bottom: 1rem; - color: light-dark(#222222, #e0e0e0); - transition: color 0.3s ease; - } - - .container_splash_text { - font-size: 0.95rem; - color: light-dark(#555555, #b0b0b0); - margin-bottom: 1.5rem; - transition: color 0.3s ease; - } - - .container_splash_buttons { - display: flex; - flex-direction: column; - gap: 0.75rem; - } - - .container_splash_btn { - display: inline-block; - padding: 0.75rem 1rem; - text-decoration: none; - border-radius: 8px; - font-weight: bold; - text-align: center; - font-size: 0.95rem; - transition: all 0.3s ease; - } - - .container_splash_btn_primary { - background-color: light-dark(#0f172a, #3b82f6); - color: light-dark(#ffffff, #f0f0f0); - } - - .container_splash_btn_primary:hover { - background-color: light-dark(#0f172a, #3b82f6); - transform: translateY(-1px); - } - - .container_splash_btn_secondary { - border: 2px solid light-dark(#0f172a, #3b82f6); - color: light-dark(#0f172a, #3b82f6); - background-color: light-dark(#ffffff, transparent); - } - - .container_splash_btn_secondary:hover { - background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1)); - transform: translateY(-1px); - } - - .container_splash_btn:hover { - opacity: 0.9; - } -} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 3638c4d7..12dcf706 100644 --- a/src/assets/styles/index.css +++ b/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; diff --git a/src/assets/styles/menu.css b/src/assets/styles/menu.css index 1d62b39a..bdebb69e 100644 --- a/src/assets/styles/menu.css +++ b/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 { diff --git a/src/components/about/HeroSection.astro b/src/components/about/HeroSection.astro index 7dd50ab5..197a4522 100644 --- a/src/components/about/HeroSection.astro +++ b/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; diff --git a/src/components/home/ExploreLearnSection.astro b/src/components/home/ExploreLearnSection.astro index f24ab24d..a83982b5 100644 --- a/src/components/home/ExploreLearnSection.astro +++ b/src/components/home/ExploreLearnSection.astro @@ -21,7 +21,7 @@ import "@/assets/styles/home/explore-learn-section.css";
-

🤔 Language

+

📝Language

Indian Languages basics

diff --git a/src/content/blog/ayush.md b/src/content/blog/ayush.md new file mode 100644 index 00000000..df3ee052 --- /dev/null +++ b/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. diff --git a/src/content/blog/azmat-raza.md b/src/content/blog/azmat-raza.md new file mode 100644 index 00000000..ba17c6b2 --- /dev/null +++ b/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. diff --git a/src/content/blog/chhavi.md b/src/content/blog/chhavi.md new file mode 100644 index 00000000..baa06631 --- /dev/null +++ b/src/content/blog/chhavi.md @@ -0,0 +1,135 @@ +--- +title: "🌟 My Internship Journey: What I’ve Learned So Far" +description: "Reflections on my journey as a Software Developer Trainee " +image: "/assets/images/blog/blog-5.png" +author: "Chhavi Sharma" +publishDate: "19 July 2025" +--- + +## 🌟 My Internship Journey: What I’ve Learned So Far + +From student to developer, my recent internship experience has been nothing short of transformative. +I'm **Chhavi Sharma**, an enthusiastic web developer currently pursuing my B.Tech in Computer Science from **The ICFAI University, Jaipur**. +Over the past two months, I had the incredible opportunity to intern as a **Software Developer Trainee** at **RecursiveZero Pvt. Ltd**. + +This journey was far more than just writing code; it was a deep dive into modern frontend technologies, understanding the nuances of a corporate work environment, and embracing professional development practices. +Under the exceptional guidance of **Mr. Keshav Mohta**, I truly began to grasp the essence of frontend engineering. +This blog is a reflection of what I’ve worked on, the skills I’ve gained, and the lessons I’ll carry forward. + +--- + +## 🚧 Projects I Worked On + +I contributed to the following key pages and features for the **abcdkbd** project: + +### 🏠 [Home Page](/) + +I designed and structured the home page to ensure a smooth user experience with a responsive layout and clean navigation. + +### 🪔 [Varnmala Page](/varnmala/) + +I developed a rich, multi-section learning space for learners. The **Varnmala** section was broken down into six interactive subpages: + +- [**Hindi**](/varnmala/hindi) – Displayed _स्वर_ and _व्यंजन_. +- [**English**](/varnmala/english/) – Offered a comparative look at English alphabet letters. +- [**Barahkhadi**](/varnmala/barahkhadi/) – Showcased combinations of consonants and matras visually. +- [**Listen**](/varnmala/listen/) – Implemented **Text-to-Speech** functionality for hearing pronunciation. +- [**Write**](/varnmala/write/) – Guided users on how to write letters through animated stroke visuals. +- [**Play**](/varnmala/play/) – Created interactive games/activities to reinforce what users learned. + +This section focused on clean layouts, intuitive navigation, and accessibility for early learners. + +### 🔤 [Alphabets Page](/alphabets) + +I developed a separate alphabets section with **animated SVG letter drawings** and **reset/play controls** — making learning fun and interactive. + +### 🔢 [Numbers Page](/math) + +I created an interactive number page featuring content for English, Hindi, Morse code, and Roman numerals. + +### 📚 [Glossary Page](/glossary) + +I structured glossary terms across themes like **Months**, **Days**, and **Geometrical Shapes**, using **dynamic JSON rendering** and category-based filtering. + +### 🔮 [Nakshatra Page](/nakshtra) + +I designed and developed a **visual representation of Nakshatra**, using reusable components and clean layouts for better scalability. + +--- + +## ⚙️ Tech I Explored + +This internship introduced me to powerful tools and concepts that significantly improved my skills: + +### 🚀 Astro Framework + +I gained a solid understanding of Astro’s **component-based static site generation**. +I implemented **layouts, partial hydration, and slot usage**, building fast and **SEO-optimized** content-driven pages. + +### 🗺️ Dynamic Routing + +I used **file-based routing** in Astro for dynamic glossary and category pages, passing route parameters to generate content on-the-fly. + +### 🗣️ [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) + +I integrated **Text-to-Speech (TTS)** features using the Web Speech API, enabling **audio feedback** for alphabets — improving accessibility and user engagement. + +### 🎨 Modern CSS Features + +While working on UI/UX, I explored several modern CSS features, including: + +- **CSS Grid & Subgrid** – For complex, responsive layout designs. +- [**Container Queries**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) – Made components respond to container size. +- **CSS Variables (`--var`)** – Maintained design consistency and simplified theming. +- **Clamp Function (`clamp()`)** – Created fluid responsive typography and spacing. +- **Backdrop Filter** – Applied glassmorphism-style blur effects. +- **Scroll Snap** – Added smoother section-based scrolling on mobile. +- **Animations** using `@keyframes` & `transition` – For SVG letter drawings, button hovers, and more. +- [**Popover API**](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) – Learned to use the new native Popover API for creating lightweight contextual overlays without external libraries. + +### 💻 Git & GitHub + +I gained hands-on experience working with **branches**, **pull requests**, and **merge conflict resolution**. +I reviewed code, maintained readable commit messages, and collaborated using GitHub Issues, learning to document progress and communicate through version control. + +### 💻 Visual Studio Code (VS Code) + +I used **VS Code** as my primary development environment throughout the internship. +I utilized the **Project Manager** extension to quickly switch between different project folders and codebases. +I created and managed **VS Code Workspaces** to organize multiple related folders (e.g., components, i18n files, pages) for better context and navigation. +I also leveraged helpful extensions like **Prettier**, **ESLint**, and **Astro Language Tools** to write clean and consistent code. + +--- + +## 💡 What I Learned Beyond Code + +- **Communication** – I learned to share updates clearly, discuss blockers effectively, and contribute meaningfully to team decisions. +- **Problem-solving** – I sharpened my debugging skills by fixing layout bugs and animation sync issues, and gained experience working with modern Browser APIs. +- **Responsibility** – I delivered features independently and tracked my progress efficiently using GitHub project tools. + +--- + +## 🎯 Final Thoughts + +This internship has been a **transformative learning experience**. +From Astro and GitHub workflows to Speech APIs and modern CSS — I’ve picked up tools and practices that make me a better developer and collaborator. + +I now feel confident in: + +- Building **accessible**, **responsive** UIs from scratch. +- Creating **animated and interactive** web components. +- Using **modern CSS** for elegant and maintainable design. +- Collaborating on real-world projects using **GitHub**. + +--- + +## 🙏 Gratitude & Reflection + +I'm incredibly grateful for this opportunity and for the guidance I received throughout my internship. +The lessons learned, both technical and soft skills, have been invaluable. +This experience has solidified my passion for software development and I'm excited to apply this knowledge in future internships and personal projects. +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!** diff --git a/src/content/blog/i18n.md b/src/content/blog/i18n.md index 97ff6e1d..cce1a24c 100644 --- a/src/content/blog/i18n.md +++ b/src/content/blog/i18n.md @@ -3,6 +3,7 @@ title: "Implementing Internationalization (i18n) in Astro" description: "The full guide on how to implement internationalization (i18n) in Astro using built-in features." image: "/assets/images/blog/blog-3.png" publishDate: "11 July 2025" +author: "Rupesh Rathore" --- ## **Implementing Internationalization (i18n) in Astro Using Built-in Features** diff --git a/src/content/blog/prakash-raj.md b/src/content/blog/prakash-raj.md new file mode 100644 index 00000000..29f878ab --- /dev/null +++ b/src/content/blog/prakash-raj.md @@ -0,0 +1,108 @@ +--- +title: "My Internship Journey with RecursiveZero Pvt. Ltd" +description: "A transformative internship experience that shaped my frontend development career" +image: "/assets/images/blog/internship.png" +author: "Prakash Raj" +publishDate: "18 July 2025" +--- + +## **From Student to Developer: My Internship Experience** + +Over the past few months, I had the incredible opportunity to intern as a Frontend Developer at **RecursiveZero Pvt. Ltd**, where I embarked on a transformative journey of learning and growth. +This internship was not just about coding—it was a comprehensive exploration of modern frontend technologies, corporate working culture, and professional development practices. +Under the exceptional guidance of **Mr. Keshav Mohta**, I discovered the true essence of frontend engineering. + +--- + +## Projects I Worked On at [**`abcdkbd.com`**](abcdkbd.com) + +### [Draw Page](/draw) 🎨 + +- Create draw page that demonstrate the image corresponding to the letter user press with the help of keyboard. + +- You can customize the background, font style, and font color, toggle between uppercase and lowercase letters, and even hear the letter spoken aloud when it's pressed. + +### [Capital Page](/capital) 🏛️ + +- Refactored an capital page showcasing the states and union territories of India with their capitals + +- Applied CSS Grid and Flexbox to create responsive, visually appealing layouts for displaying state and capital information. + +### [Gallery Page](/gallery) 🖼️ + +- Built three distinct gallery modes `(Stack, Queue, Slider)` using reusable Astro components, demonstrating advanced component architecture. + +- Managed alphabet items and navigation logic with TypeScript interfaces, ensuring robust handling of dynamic lists and user actions. + +### [Stories Page](/stories) 📚 + +- Developed a section where children can read stories across various categories, making learning engaging and fun. + +- Utilized Astro’s content collections and dynamic routing to display stories based on user selection, ensuring scalability as more stories are added. + +- Implemented intuitive navigation and category filtering, allowing users to easily explore and discover new stories. + +### [About Us Page](/about) 👥 + +- Designed a dedicated page to present developer and team information, highlighting roles and contributions. + +- Crafted content that communicates the mission, vision, and values of the project, building trust with users. + +### [Blog](/blog) 📝 + +- Refactored and updated the blog section’s user interface for a cleaner, more readable, and visually appealing experience. + +- Astro’s integration with Markdown and content collections to manage blog posts efficiently and enable easy updates. + +- Improved accessibility and responsiveness, ensuring the blog is usable and attractive on all devices. + +## Other Development + +### Mobile Splash ✨ + +- Designed and implemented a mobile-optimized splash screen for abcdkbd.com to enhance first impressions and improve user experience on smaller devices. + +### 404 Page ⚠️ + +- Developed a custom 404 error page to guide users when they access an invalid or broken URL, improving navigation and maintaining brand consistency. + +## What I Learned 🧠 + +### Frontend Technologies + +- **Astro Framework**: + + - Learned to use Astro's slot system for flexible component composition, enabling reusable layouts `(e.g. BaseLayout with header slots)`. + - Explored Astro's content collections for dynamic page generation, such as mapping over blog posts or gallery items. + - Utilized Astro's integration with Markdown and TypeScript for type-safe content and seamless data flow between content and UI. + +- **CSS Techniques**: + - Utilized CSS custom properties (variables) for theming and dynamic styling `(e.g. --item-width, --card-color, --t for transitions)`. + - Designed layouts using flexbox and CSS Grid for responsive, adaptive interfaces `(e.g., gallery and capital page grids)`. + - Applied gradients, `background-clip`, and `text-shadow` for visually appealing headings and cards. + - Used `object-fit`, `border-radius`, and `box-shadow` to enhance image presentation and card aesthetics. + - Leveraged transitions and transforms for smooth interactive effects `(e.g. hover/active states in gallery and draw controls)`. + - Learn about advanced CSS properties like `object-fit` for images, custom properties for dynamic sizing, and `transition` , `transform` for animated gallery navigation and item focus effects. + +### 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. + +### VS Code - The Developer's Best Friend + +Discovered powerful extensions `(e.g. Project Manager, CSS Color Collector, ESLint, Prettier)` that transformed my coding experience and learned to use integrated debugging features for efficient troubleshooting and +learn to Organize projects efficiently with workspace settings and configurations also Created custom snippets and learned keyboard shortcuts for faster development. + +--- + +## Gratitude & Reflection 🙌 + +This internship gave me a clear picture of how real projects work. I learned to write clean, on-time code and understood how important the right tools and tech stack are. +It helped me build confidence in frontend development and taught me to face challenges with curiosity and a problem-solving mindset. +With hands-on practice and great support, I feel ready to take on new projects, work in teams, and keep growing as a developer. + +**Special Thanks**: Mr. Keshav Mohta and my team member for making this journey memorable and enriching! 🙏 + +**Thank you for reading!** + +> Prakash Raj diff --git a/src/content/blog/rupesh-rathore.md b/src/content/blog/rupesh-rathore.md new file mode 100644 index 00000000..d907f750 --- /dev/null +++ b/src/content/blog/rupesh-rathore.md @@ -0,0 +1,138 @@ +--- +title: "My Internship Journey from Zero to Something" +description: "A Moth who found his flames to chase! : A transformative internship experience that shaped my frontend development career" +image: "/assets/images/blog/blog-8.png" +author: "Rupesh Rathore" +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. +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. + +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 learned so much : + +- 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) + +### [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 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. + +- 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. `लव`, `रेणु`. + - 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. + +### [Poems Page](/poems) 📚📜📃 + +- 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`. + - 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`. + +### [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. + +### [Draw](/draw) 📝 + +- Refactored and updated the draw section’s user interface for a cleaner, more responsive, and visually appealing experience. + +## Other Development + +### Vedic Time Journey 🕉️⏳ + +- Designed and implemented a scroll based Time journey which uses scroll based parallex effect to design cosmoic 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. + +## What I Learned 🧠 + +### Frontend Technologies + +- **Astro Framework**: + + - 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. + +- **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). + + - Applied gradients, `background-clip` for text effects, and `text-shadow` for visually appealing headings and cards. + + - Used `object-fit` for controlling image sizing within their containers, `border-radius` for rounded corners, and `box-shadow` to enhance image presentation and card aesthetics. + + - 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 + - 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. + + - Understood `z-index` for managing stacking order of elements. + + - Utilized `@keyframes` and animation properties (`animation`, `animation-delay`, `animation-duration`, `animation-timing-function`) to create complex, smooth animations. + +### 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. + +### VS Code - The Developer's Best Friend + +Discovered powerful extensions `(e.g. Project Manager, CSS Color Collector, ESLint, Prettier)` that transformed my coding experience and learned to use integrated debugging features for efficient troubleshooting and +learn to Organize projects efficiently with workspace settings and configurations also Created custom snippets and learned keyboard shortcuts for faster development. + +--- + +## Gratitude & Reflection 🙌 + +This internship gave me a clear picture of how real projects work. I learned to write clean, on-time code and understood how important the right tools and tech stack are. +It helped me build confidence in frontend development and taught me to face challenges with curiosity and a problem-solving mindset. +With hands-on practice and great support, I feel ready to take on new projects, work in teams, and keep growing as a developer. + +**Special Thanks**: Mr. Keshav Mohta and my team member for making this journey memorable and enriching! 🙏 + +**Thank you for reading!** + +> Rupesh Rathore diff --git a/src/content/blog/style-guide.md b/src/content/blog/style-guide.md index 52e0919b..38db847e 100644 --- a/src/content/blog/style-guide.md +++ b/src/content/blog/style-guide.md @@ -14,46 +14,29 @@ This document outlines the style guide we follow to maintain consistency and rea ## File Structure - Use a clear and consistent folder structure. -- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `result-products.css` for `ResultProducts` component). -- Keep reusable styles in a `globals.css` file. +- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `common-product.css` for `COmmonProduct` component). +- Keep reusable styles in a `global.css` file. +- Keep common style in `common.css` --- ## CSS Naming Convention -- Use `kebab-case` for CSS class names. +- Use BEM for CSS class names. Example: `card__image`, `container__card` - For component-specific styles, use the format: `componentName__element` (e.g., `card__image` for an image in the `Card` component) -- Use utility classes from Tailwind CSS wherever possible for common properties - (e.g., margins, padding, colors) - ---- - -## Tailwind CSS Usage - -- Use Tailwind utilities for common tasks like spacing, typography, and colors: - - ```html -
- ``` - -- Avoid redundancy: Don't add CSS rules for properties already provided by Tailwind classes. -- Create custom styles only when: - - Tailwind utilities cannot achieve the desired layout or behavior. - - Styles are specific to a particular component. - --- ## Component-Specific CSS -- For each React component, create a corresponding CSS file if it requires custom styles. +- For each component, create a corresponding CSS file if it requires custom styles. - CSS file naming: Use the same name as the component, in lowercase and hyphen-separated. - Example: - - Component: `ResultProducts.tsx` - - CSS File: `result-products.css` + - Component: `CommonProduct.astro` + - CSS File: `common-product.css` - Limit the use of global styles to prevent style conflicts. --- @@ -71,46 +54,41 @@ This document outlines the style guide we follow to maintain consistency and rea --- -## JSX Structure - -- Keep JSX clean and readable: - - Use meaningful class names. - - Avoid inline styles unless absolutely necessary. -- Wrap component logic (e.g., filtering, sorting) in separate functions for clarity. - ---- - ## Example: Component and CSS Pair -- React Component (`ResultProducts.tsx`) - - ```tsx -
- - Product Image - - Product Name - - -
- ``` +### CommonProduct.astro -- CSS File (`result-products.css`) +```html +
+ + Product Image + + Product Name + + +
+``` + +- CSS File (`common-product.css`) ```css .container__card { - @apply rounded-lg border bg-white p-4 shadow-md; - } - - .card__base { - @apply flex flex-col items-center; - } - - .card__image { - @apply h-40 w-full rounded-md object-cover; - } - - .card__content { - @apply text-lg font-semibold text-gray-800; + container-size: inline-size; + container-name: card; + + & .card__base { + display: flex; + + & .card__image { + object-fit: cover; + height: 2rem; + } + } + + &.card__content { + font-size: large; + font-style: italic; + color: var(--text); + } } ``` diff --git a/src/content/blog/suresh-chelani.md b/src/content/blog/suresh-chelani.md new file mode 100644 index 00000000..d70f9ea4 --- /dev/null +++ b/src/content/blog/suresh-chelani.md @@ -0,0 +1,103 @@ +--- +title: "Internship at RecursiveZero as a SDE intern" +description: "A deep dive into my two-month internship experience, working with Astro.js and Hono.js, and growing as a full-stack developer." +publishDate: 2025-07-21 +author: "Suresh Chelani" +image: "/assets/images/blog/blog-7.png" +--- + +## Internship Experience at RecursiveZero Pvt. Ltd + +My name is [Suresh Chelani](https://www.linkedin.com/in/suresh-chelani-a34b6a248/), a third-year B.Tech student at [ICFAI University, Jaipur](https://www.iujaipur.edu.in/), with a passion for full-stack development and competitive programming. +For the past two months, I’ve had the incredible opportunity to work as a Software Development Engineer (SDE) intern at RecursiveZero Pvt. Ltd. +I joined this program to tackle real-world problems, learn to work effectively in a team, and master everything from debugging to time management. This experience gave me all of that and more. + +## Frontend Adventures with Astro.js + +A significant portion of my internship was dedicated to the frontend, where I primarily worked on an interactive [India Map page](https://abcdkbd.com/map). My goal was to create a highly engaging and performant user experience. + +### Frontend: Key Accomplishments + +- **Interactive Maps:** I built interactive maps of India and its states using SVGs, bringing a visual and dynamic element to the application. +- **Performance Optimization:** I focused heavily on optimizing load times. By leveraging efficient DOM manipulation, asynchronous programming, and making the interface fully responsive, I significantly improved the user experience. +- **CSS over JavaScript:** I implemented features like popups and popovers using modern CSS APIs, reducing our reliance on JavaScript and keeping the codebase lean. +- **Enhanced User Interaction:** I added keyboard shortcuts using plain JavaScript and Astro.js, making the site more accessible and user-friendly. +- **Keyboard Features:** I developed advanced keyboard navigation and shortcut features to improve accessibility and user experience across the site. +- **Debugging:** I actively debugged and resolved issues on several pages, ensuring smoother performance and reliability. +- **Mobile Message Popups:** I implemented a feature to display message popups specifically for mobile devices, enhancing user feedback and interaction on smaller screens. +- **Open Source Contributions:** You can see my contributions and code changes directly in our [project repository](https://github.com/recursivezero/abcd). + +### Why Astro.js? + +We chose [Astro.js](https://astro.build/) for its strength in building content-rich, static websites. It allowed us to build our core logic with standard HTML, CSS, and JavaScript, without being locked into a heavy framework. +Astro's architecture, which supports integrating multiple frameworks and using simple JSON files for data, was a perfect fit for our needs and future plans. + +**Technologies Used:** Astro.js, HTML, CSS, JavaScript, [TypeScript](https://www.typescriptlang.org/). + +## Backend Development with Hono.js + +I also had the opportunity to work on the backend for another project called "threadzip." This is where I dove into building robust and secure server-side applications. + +### Backend: Key Accomplishments + +- **API and Model Development:** I designed and implemented the `UserModel` and `SubscriptionModel`, complete with full CRUD (Create, Read, Update, Delete) operations. + This included endpoints for user management, follow/unfollow functionality and more. +- **Advanced Filtering:** I built sophisticated filtering capabilities for our APIs, including pagination, sorting, time-based searching, and date parsing. I also developed bulk APIs to handle large data operations efficiently. +- **Error Handling and Validation:** I implemented proper error handling and server-side validation (using [Zod](https://zod.dev/)) to ensure data integrity and gracefully handle edge cases and invalid inputs. +- **API Documentation:** I created clear and detailed API documentation using the [OpenAPI](https://www.openapis.org/) standard, making it easy for the team to understand and use the services I built. To further enhance the developer experience, + I integrated [Swagger UI](https://swagger.io/tools/swagger-ui/) as a visual interface, allowing the team to browse, test, and interact with the APIs directly from the browser. +- **Security:** I implemented protected routes using authorization middleware and custom headers to add an extra layer of security, ensuring that only authorized users could access sensitive endpoints. +- **Open Source Contributions:** You can see my contributions and code changes directly in our [project repository](https://github.com/recursivezero/abcd/tree/task/hono). +- **Data Storage:** I used MongoDB as the primary database for storing and managing user and subscription data. + +### Why Hono.js? + +[Hono.js](https://hono.dev/) was an excellent choice for this project. Its lightweight nature and first-class support for data streaming were particularly useful for our application, which involves generated data by using data models. +Hono’s simplicity allowed us to write less boilerplate code compared to traditional Node.js frameworks, and its ability to render JSX was an added bonus that fit our project's requirements perfectly. + +**Technologies Used:** [Hono.js](https://hono.dev/), [TypeScript](https://www.typescriptlang.org/), [Zod](https://zod.dev/), [OpenAPI](https://www.openapis.org/). + +## Project Spotlight: ABCD Learning Platform + +[ABCD](https://abcdkbd.com/) is an interactive learning pad for kids, designed to make learning fun and engaging. +The main goal of the project is to help children learn through play, making them comfortable with using the keyboard and digital interfaces. +The platform offers a variety of games, activities, and educational content, accessible via keyboard shortcuts and interactive UI elements. +It also leverages Progressive Web App (PWA) technology to provide a seamless experience as a website, webapp, and mobile app. The project is open source, and you can explore the codebase and contribute on [GitHub](https://github.com/recursivezero/abcd). + +- **Official Website:** [abcdkbd.com](https://abcdkbd.com/) +- **Project Repository:** [github.com/recursivezero/abcd](https://github.com/recursivezero/abcd) +- **Interactive Map Page:** [abcdkbd.com/map/](https://abcdkbd.com/map/) + +## Challenges Faced & Solutions + +### Technical Challenges + +**Problem:** Overlapping popover APIs causing conflicts +**Solution:** Separated code logic and created modular components for different use cases + +**Problem:** Backend edge cases in API endpoints +**Solution:** Identified and resolved edge case issues through manual testing and systematic debugging + +**Problem:** Initial difficulty understanding project requirements +**Solution:** Improved communication with team members and clarified requirements regularly + +### Learning from Challenges + +- Developed better debugging strategies through hands-on problem solving +- Learned to separate concerns when dealing with complex UI interactions +- Improved requirement gathering and clarification skills + +## Beyond the Code: Growth and Learning + +This internship was about more than just technology. It was a masterclass in the soft skills that are crucial for a successful career in tech. + +- **Communication:** I learned how to effectively participate in meetings, frame questions clearly, and articulate my ideas. +- **Teamwork:** I experienced firsthand how to collaborate within a team, use [Git](https://git-scm.com/) and [GitHub](https://github.com/) for version control on shared branches, and contribute to a collective goal. + This was a fantastic introduction to open-source workflows. +- **Working Smart:** I learned how to use VS Code shortcuts to speed up my workflow and navigate projects more efficiently. + +## Conclusion + +My internship at RecursiveZero was an incredibly impactful experience. It provided me with a clear window into the corporate world and taught me how development teams collaborate to build amazing products. +I am immensely grateful to [Keshav](https://www.linkedin.com/in/xkeshav/) sir, and the entire team for their guidance and support over these two months. I’ve learned a great deal, and I’m excited to apply these skills in my future endeavors. +I’ve learned a great deal and look forward to applying these skills in future endeavors. diff --git a/src/content/blog/technology-used.md b/src/content/blog/technology-used.md index bcc71418..5eb4c2e5 100644 --- a/src/content/blog/technology-used.md +++ b/src/content/blog/technology-used.md @@ -17,88 +17,13 @@ publishDate: "24 December 2024" - Supports server-side rendering (SSR) and static site generation (SSG). - Integrates seamlessly with other frameworks like React. -### React - -- **Purpose**: Used for creating interactive and dynamic components within the Astro.js framework. -- **Features**: - - Component-based architecture. - - State management and lifecycle methods. - ### Styling -#### Tailwind CSS - -- **Purpose**: A utility-first CSS framework used for styling. -- **Features**: - - Rapid prototyping with predefined classes. - - Highly customizable via a configuration file. - -### Component Library - -#### shadcn/ui - -- **Purpose**: A pre-built React-based component library for faster UI development. -- **Features**: - - Offers accessible and customizable components. - - Works seamlessly with Tailwind CSS. - -### Icons - -- **Purpose**: Used for visual enhancements and icons across the application. -- **Libraries**: - - Astro Icons: Icon library designed for use in Astro.js. - - React Icons: A collection of popular icon libraries for React. - - Lucide Icons: Modern, consistent, and open-source icon library. - -### State Management - -#### Zustand - -- **Purpose**: Lightweight state management library for handling global state in the frontend. -- **Features**: - - Minimal boilerplate. - - Simple and scalable API for managing state. - -### Data Validation +#### Vanilla CSS -#### Zod - -- **Purpose**: Schema-based data validation library. -- **Features**: - - Runtime validation for form data and API responses. - - TypeScript integration for type safety. - -## Backend - -### Node.js - -- **Purpose**: Backend runtime environment. -- **Features**: - - Non-blocking, event-driven architecture for handling asynchronous operations. - - Large ecosystem of libraries and tools. - -### Hono.js Framework - -- **Purpose**: Lightweight, high-performance framework for building backend APIs. -- **Features**: - - Minimalistic API design. - - Excellent for creating RESTful services. - -## Database - -### MongoDB - -- **Purpose**: NoSQL database used for storing application data. -- **Features**: - - Document-oriented storage. - - Scalable and flexible schema design. - -### Mongoose - -- **Purpose**: Object Relational Mapping (ORM) library for MongoDB. -- **Features**: - - Simplifies data modeling and validation. - - Provides built-in schema and middleware support. +- use CSS variables +- use BEM approach to define selectors +- use Nested CSS structure ## Other Tools diff --git a/src/content/PRIVACY.md b/src/content/privacy.md similarity index 99% rename from src/content/PRIVACY.md rename to src/content/privacy.md index c4b9834a..11433459 100644 --- a/src/content/PRIVACY.md +++ b/src/content/privacy.md @@ -1,6 +1,6 @@ # Privacy Policy -_Last Updated: July 16,2025_ +**Last Updated: July 16,2025** Welcome to **abcdkbd.com**! Your child’s privacy and safety are our highest priority. This Privacy Policy outlines how we handle personal data in compliance with the **Digital Personal Data Protection Act, 2023 (India)** and international child privacy standards. diff --git a/src/content/terms-and-conditions.md b/src/content/terms-and-conditions.md index ea589dc7..6ea4cc4e 100644 --- a/src/content/terms-and-conditions.md +++ b/src/content/terms-and-conditions.md @@ -1,6 +1,6 @@ # Terms & Conditions -_Last Updated: July 16,2025_ +**Last Updated: July 16,2025** Welcome to [**abcdkbd.com**](https://abcdkbd.com). By accessing or using our platform, you agree to comply with and be bound by the following Terms and Conditions. diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index b824f08f..e9ccbbed 100755 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -9,8 +9,7 @@ import Shortcut from "@/components/Shortcut.astro"; const { meta: { title, description = siteConfig.description, ogImage }, - sidebar = true, - meta + sidebar = true } = Astro.props; --- @@ -39,7 +38,7 @@ const { .getRegistrations() .then((registrations) => { // Unregister all existing service workers - const unregisterPromises = registrations.map((registration) => { + const unregisterPromises = registrations.map(async (registration) => { return registration.unregister().then((success) => { if (success) { console.log("Successfully unregistered service worker:", registration.scope); diff --git a/src/pages/alphabets/[alphabet]/playground.astro b/src/pages/alphabets/[alphabet]/playground.astro index 97fe2ac0..1d369c34 100644 --- a/src/pages/alphabets/[alphabet]/playground.astro +++ b/src/pages/alphabets/[alphabet]/playground.astro @@ -180,17 +180,20 @@ const meta = { } } else { // Default behavior for other alphabets (A-Z, 0-9) - const { key, keyCode } = e; - const isAlphabet = keyCode >= 65 && keyCode <= 90; - const isNumber = keyCode >= 48 && keyCode <= 57; + const { key } = e; + const isAlphabet = /^[A-Za-z]$/.test(key); + console.log({ isAlphabet }); + const isNumber = /^[0-9]$/.test(key); + console.log({ isNumber }); if (isAlphabet) { const keyCapital = key.toUpperCase(); const info = alphabetData.find((item) => item.letter.toUpperCase() === keyCapital || item.letter === key); if (info) drawInfo(info, random(colorBox)); - } else if (isNumber) { - const info = alphabetData.find((item) => item.letter === key); - if (info) drawInfo(info, random(colorBox)); } + //else if (isNumber) { + // const info = alphabetData.find((item) => item.letter === key); + // if (info) drawInfo(info, random(colorBox)); + //} } }, false diff --git a/src/pages/panel.astro b/src/pages/panel.astro index c4bfcb4d..ff7c7685 100644 --- a/src/pages/panel.astro +++ b/src/pages/panel.astro @@ -123,10 +123,10 @@ const meta = {