You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
35
36
36
-
### 🔢 [Login](/src/pages/login.astro)
37
+
### 🔢 [Login]
37
38
38
39
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.
39
40
@@ -65,7 +66,7 @@ This is a js library that takes the screenshot of the page, it was implemented i
65
66
66
67
### 🗣️ Focus/Blur
67
68
68
-
Focus() and blur() are methods used to show and hide the keyboard. This is an useful and important feature for mobile and ipad users.
69
+
`focus()` and `blur()` are methods used to show and hide the keyboard. This is an useful and important feature for mobile and ipad users.
Copy file name to clipboardExpand all lines: src/content/blog/azmat-raza.md
+17-15Lines changed: 17 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,11 +3,15 @@ title: "Internship at RecursiveZero as a SDE intern"
3
3
description: "A deep dive into my two-month internship experience, working with Astro.js and growing as a frontend developer."
4
4
publishDate: 2025-07-21
5
5
author: "Azmat Raza"
6
+
image: "/assets/images/blog/blog-4.jpg"
6
7
---
7
8
8
-
## Internship Experience at RecursiveZero Pvt. Ltd.
9
+
## Internship Experience at RecursiveZero Pvt. Ltd
9
10
10
-
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.
11
+
My name is **Azmat Raza**, a frontend developer with interest in building cool and useful web apps.
12
+
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.
13
+
I worked on projects like **Crossword**, **Societree**, and **Journey Timeline**, and each one helped me grow in different ways.
14
+
I joined this internship to learn from real projects, and I ended up learning a lot more than expected.
11
15
12
16
## Frontend Adventures with Astro.js
13
17
@@ -32,32 +36,28 @@ A big part of my internship was frontend development. I created pages from scrat
32
36
33
37
### Why Astro.js?
34
38
35
-
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.
39
+
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.
40
+
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.
41
+
It’s great for content-heavy and design-focused pages like the ones I worked on.
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.
42
48
43
-
-**Crossword Page:** A game where kids can solve puzzles using keyboard and touch. I handled the full interaction logic and UI responsiveness.
49
+
-**[Crossword Page](/crossword)**: A game where kids can solve puzzles using keyboard and touch. I handled the full interaction logic and UI responsiveness.
44
50
45
-
-**Societree Page:** A dynamic, searchable listing for clans and families. The design was made print-ready and easy to navigate.
51
+
-**[Societree Page](/clan)**: A dynamic, searchable listing for clans and families. The design was made print-ready and easy to navigate.
46
52
47
53
-**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.
48
54
49
55
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:
**Solution:** Learn how to resolve conflicts using VS code inbuilt git support
61
61
62
62
**Problem:** Print layout breaking or getting cut across pages
63
63
**Solution:** Used `break-inside: avoid`, adjusted margins, and wrote custom media queries to handle layout on paper
@@ -75,8 +75,10 @@ All the pages were designed to be mobile-friendly, responsive, and usable across
75
75
76
76
## Beyond the Code: Growth and Learning
77
77
78
-
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.
78
+
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.
79
+
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.
79
80
80
81
## Conclusion
81
82
82
-
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.
83
+
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
84
+
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.
Copy file name to clipboardExpand all lines: src/content/blog/chhavi.md
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,7 @@
2
2
title: "🌟 My Internship Journey: What I’ve Learned So Far"
3
3
description: "Reflections on my journey as a Software Developer Trainee "
4
4
image: "/assets/images/blog/blog-5.png"
5
+
author: "Chhavi Sharma"
5
6
publishDate: "19 July 2025"
6
7
---
7
8
@@ -38,21 +39,21 @@ I developed a rich, multi-section learning space for learners. The **Varnmala**
38
39
39
40
This section focused on clean layouts, intuitive navigation, and accessibility for early learners.
40
41
41
-
### 🔤 [Alphabets Page](/alphabets/)
42
+
### 🔤 [Alphabets Page](/alphabets)
42
43
43
44
I developed a separate alphabets section with **animated SVG letter drawings** and **reset/play controls** — making learning fun and interactive.
44
45
45
-
### 🔢 [Numbers Page](/math/)
46
+
### 🔢 [Numbers Page](/math)
46
47
47
48
I created an interactive number page featuring content for English, Hindi, Morse code, and Roman numerals.
48
49
49
-
### 📚 [Glossary Page](/glossary/)
50
+
### 📚 [Glossary Page](/glossary)
50
51
51
52
I structured glossary terms across themes like **Months**, **Days**, and **Geometrical Shapes**, using **dynamic JSON rendering** and category-based filtering.
52
53
53
-
### 🔮 [Nakshatra Page](/nakshtra/)
54
+
### 🔮 [Nakshatra Page](/nakshtra)
54
55
55
-
I designed and developed a **visual representation of Nakshatras**, using reusable components and clean layouts for better scalability.
56
+
I designed and developed a **visual representation of Nakshatra**, using reusable components and clean layouts for better scalability.
Copy file name to clipboardExpand all lines: src/content/blog/prakash-raj.md
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
---
2
2
title: "My Internship Journey with RecursiveZero Pvt. Ltd"
3
3
description: "A transformative internship experience that shaped my frontend development career"
4
-
image: "/assets/images/blog/blog-4.png"
4
+
image: "/assets/images/blog/internship.png"
5
+
author: "Prakash Raj"
5
6
publishDate: "18 July 2025"
6
7
---
7
8
@@ -77,11 +78,11 @@ Under the exceptional guidance of **Mr. Keshav Mohta**, I discovered the true es
77
78
78
79
-**CSS Techniques**:
79
80
- Utilized CSS custom properties (variables) for theming and dynamic styling `(e.g. --item-width, --card-color, --t for transitions)`.
80
-
- Designed layouts using Flexbox and CSS Grid for responsive, adaptive interfaces `(e.g., gallery and capital page grids)`.
81
-
- Applied gradients, background-clip, and text-shadow for visually appealing headings and cards.
82
-
- Used object-fit, border-radius, and box-shadow to enhance image presentation and card aesthetics.
81
+
- Designed layouts using flexbox and CSS Grid for responsive, adaptive interfaces `(e.g., gallery and capital page grids)`.
82
+
- Applied gradients, `background-clip`, and `text-shadow` for visually appealing headings and cards.
83
+
- Used `object-fit`, `border-radius`, and `box-shadow` to enhance image presentation and card aesthetics.
83
84
- Leveraged transitions and transforms for smooth interactive effects `(e.g. hover/active states in gallery and draw controls)`.
84
-
- Learn about advanced CSS properties like object-fit for images, custom properties for dynamic sizing, and transitions/transforms for animated gallery navigation and item focus effects.
85
+
- 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.
85
86
86
87
### Git & Version Control Mastery
87
88
@@ -104,4 +105,4 @@ With hands-on practice and great support, I feel ready to take on new projects,
Copy file name to clipboardExpand all lines: src/content/blog/style-guide.md
+37-59Lines changed: 37 additions & 59 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,46 +14,29 @@ This document outlines the style guide we follow to maintain consistency and rea
14
14
## File Structure
15
15
16
16
- Use a clear and consistent folder structure.
17
-
- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `result-products.css` for `ResultProducts` component).
18
-
- Keep reusable styles in a `globals.css` file.
17
+
- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `common-product.css` for `COmmonProduct` component).
18
+
- Keep reusable styles in a `global.css` file.
19
+
- Keep common style in `common.css`
19
20
20
21
---
21
22
22
23
## CSS Naming Convention
23
24
24
-
- Use `kebab-case` for CSS class names.
25
+
- Use BEM for CSS class names.
25
26
Example: `card__image`, `container__card`
26
27
27
28
- For component-specific styles, use the format:
28
29
`componentName__element` (e.g., `card__image` for an image in the `Card` component)
29
30
30
-
- Use utility classes from Tailwind CSS wherever possible for common properties
31
-
(e.g., margins, padding, colors)
32
-
33
-
---
34
-
35
-
## Tailwind CSS Usage
36
-
37
-
- Use Tailwind utilities for common tasks like spacing, typography, and colors:
0 commit comments