(SP: 0.5) [Frontend] Logo icons svg

[ViktorSvertoka]

• Adds django, docker, kubernetes, aws, azure, devops to the category tabs.
• Adds icons from public/icons and styles so the tab button, accordion border, pagination (including current page), and page-size/per-page controls inherit the category accent.
• Improves AWS icon readability in dark mode by making the abbreviation white.

Closes #166

Summary by CodeRabbit

• New Features

  • Added six new technology categories (Django, Docker, Kubernetes, AWS, Azure, DevOps) with custom styling and visual configurations.

• Updates

  • Updated LinkedIn follower count display to 1.7k+.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored		Mar 1, 2026 0:28am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds six new technology categories (Django, Docker, Kubernetes, AWS, Azure, DevOps) to the category system with corresponding style configurations, and updates LinkedIn follower count defaults from 1.6k to 1.7k across multiple files.

Changes

Cohort / File(s)	Summary
LinkedIn Stats Updates frontend/components/about/HeroSection.tsx, frontend/lib/about/stats.ts	Updated default LinkedIn follower counts from 1600 (1.6k+) to 1700 (1.7k+).
Category Data & Styles frontend/data/category.ts, frontend/data/categoryStyles.ts	Added six new technology categories with complete style configurations including icons, colors, glows, and accents. AWS entry includes custom iconClassName field.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• (SP 1) [Frontend] UI improvements for About page - icons, mobile UX, and performance #281 — Modifies the same LinkedIn follower count and About-page UI details
• (SP: 3) [Frontend] Complete About Page redesign: add topics, sponsors, and updated stats #158 — Updates About page stats handling including LinkedIn follower defaults
• (SP: 2) [Frontend] Feat(Q&A): Add category & styles #336 — Adds new category entries and corresponding style configurations

Suggested labels

enhancement

Suggested reviewers

• AM1007

Poem

🐰 Six new tech friends hop into the fold,
Django, Docker, Kubernetes so bold,
AWS and Azure join the parade,
With DevOps magic, the toolkit's made,
And followers climb, 1.7k strong! 📈✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references adding SVG logo icons, which aligns with the PR objective to add SVG technology icons to the frontend.
Linked Issues check	✅ Passed	The PR adds new category data entries and styles for django, docker, kubernetes, aws, azure, and devops, supporting the objective to introduce SVG logo icons into frontend assets [#166].
Out of Scope Changes check	✅ Passed	All changes directly support adding SVG icon categories and updating LinkedIn follower count; minor LinkedIn stat updates align with maintaining frontend data consistency.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/ui-add-devops-cloud-category-icons

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/data/categoryStyles.ts (1)

119-125: Consider dark mode visibility for Django's dark accent color.

The Django accent #092E20 is extremely dark (nearly black). Unlike the next category which uses dark: variants and iconClassName: 'dark:invert' for better dark mode visibility, Django lacks similar handling. This may result in poor contrast against dark backgrounds.

💡 Potential approach (similar to next.js category)

 django: {
   icon: '/icons/django.svg',
   color:
-    'group-hover:border-[`#092E20`]/50 group-hover:bg-[`#092E20`]/10 data-[state=active]:border-[`#092E20`]/50 data-[state=active]:bg-[`#092E20`]/10',
+    'group-hover:border-[`#092E20`]/50 dark:group-hover:border-[`#44B78B`]/50 group-hover:bg-[`#092E20`]/10 dark:group-hover:bg-[`#44B78B`]/10 data-[state=active]:border-[`#092E20`]/50 dark:data-[state=active]:border-[`#44B78B`]/50 data-[state=active]:bg-[`#092E20`]/10 dark:data-[state=active]:bg-[`#44B78B`]/10',
   glow: 'bg-[`#092E20`]',
-  accent: '#092E20',
+  accent: '#44B78B', // Django's secondary green for better visibility
+  iconClassName: 'dark:invert dark:hue-rotate-180',
 },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/data/categoryStyles.ts` around lines 119 - 125, The Django category
uses a very dark accent (`#092E20`) which will be invisible in dark mode; update
the django entry (the 'django' object with properties color, glow, accent) to
include dark: variants for color and glow similar to the next category and add
an iconClassName like 'dark:invert' (or appropriate invert/brightness class) so
the icon and background maintain contrast in dark themes; follow the pattern
used in the 'next' category to pick matching dark:... utility classes and add
iconClassName to the django object.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/data/categoryStyles.ts`:
- Around line 119-125: The Django category uses a very dark accent (`#092E20`)
which will be invisible in dark mode; update the django entry (the 'django'
object with properties color, glow, accent) to include dark: variants for color
and glow similar to the next category and add an iconClassName like
'dark:invert' (or appropriate invert/brightness class) so the icon and
background maintain contrast in dark themes; follow the pattern used in the
'next' category to pick matching dark:... utility classes and add iconClassName
to the django object.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bf6d333 and d63d84e.

⛔ Files ignored due to path filters (6)

• frontend/public/icons/aws.svg is excluded by !**/*.svg
• frontend/public/icons/azure.svg is excluded by !**/*.svg
• frontend/public/icons/devops.svg is excluded by !**/*.svg
• frontend/public/icons/django.svg is excluded by !**/*.svg
• frontend/public/icons/docker.svg is excluded by !**/*.svg
• frontend/public/icons/kubernetes.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• frontend/components/about/HeroSection.tsx
• frontend/data/category.ts
• frontend/data/categoryStyles.ts
• frontend/lib/about/stats.ts