Somtimes You have to Look into the eyes of tablet users ALso

PrashantUnity · PrashantUnity · commit 49c4aacb98d0 · 2026-05-17T19:15:35.000+05:30
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Static site for [codefrydev.in](https://codefrydev.in/) — free online tools, g
 ## Features
 
 - **Modern homepage** — category grids, search palette, scroll sections, dark/light theme
-- **Browse** — `/browse/` index plus category pages (`creative-assets`, `tools-utilities`, `games-fun`, `site-links`)
+- **Browse** — `/browse/` index plus category pages (`creative-assets`, `tools-utilities`, `games-fun`, `site-links`, `containers-packages`)
 - **Hubs** — Games, AI, Design Lab, Store, Search
 - **CFDDC** — year-by-year “developer conference” pages at `/cfddc/` fed from [`data/history.yaml`](data/history.yaml)
 - **History timeline** — `/history/`
diff --git a/assets/css/tailwind-input.css b/assets/css/tailwind-input.css
@@ -610,7 +610,7 @@
   }
 
   .browse-category__grid {
-    @apply mt-2;
+    @apply mt-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6;
   }
 
   /* About us (/about-us/) */
diff --git a/content/browse/containers-packages/_index.md b/content/browse/containers-packages/_index.md
@@ -0,0 +1,7 @@
+---
+title: "Containers & Packages"
+category_slug: containers-packages
+layout: category
+description: "Official CodeFryDev Docker images and npm packages — pull, install, and ship."
+keywords: ["docker", "npm", "codefrydev packages", "website profiling", "svg engine"]
+---
diff --git a/data/faq.yaml b/data/faq.yaml
@@ -3,7 +3,7 @@ faqs:
     answer: "This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more... We offer free tools, games, and AI apps in your browser—no signup required."
   
   - question: "What types of tools does CodeFryDev offer?"
-    answer: "CodeFryDev offers four main categories: Creative & Assets (art, text tools, wallpapers, 3D models), Tools & Utilities (AI tools, CSV tools, JSON formatters, meta tag generators), Games & Fun (various games including Chain Reaction, Wordle, Snake), and Site & External Links (about, timeline, store, privacy)."
+    answer: "CodeFryDev offers five main categories: Creative & Assets (art, text tools, wallpapers, 3D models), Tools & Utilities (AI tools, CSV tools, JSON formatters, meta tag generators), Games & Fun (various games including Chain Reaction, Wordle, Snake), Site & External Links (about, timeline, store, privacy), and Containers & Packages (Docker images and npm packages)."
   
   - question: "Are the tools and games free to use?"
     answer: "Most of our web-based tools and games are free to use. Some premium features or mobile apps may have different pricing models. Check individual tool pages for specific details."
diff --git a/data/history.yaml b/data/history.yaml
@@ -1,4 +1,9 @@
 history:
+  - date: "17 May 2026"
+    title: "Containers & Packages"
+    description: "New homepage and browse category for official distributions—Website Profiling on Docker Hub (codefrydev/website-profiling) and @codefrydev/svg-engine on npm—with dedicated card icons at /browse/containers-packages/."
+    link: "/browse/containers-packages/"
+    accent_color: "#2496ED"
   - date: "17 May 2026"
     title: "Homepage redesign & legacy migration"
     description: "Launched the new CodeFryDev homepage—modern layout, improved navigation, search palette, and refreshed footer. The previous design remains available at archived.codefrydev.in (linked as Legacy in the site footer) so existing bookmarks and workflows still work during the transition."
diff --git a/data/home.yaml b/data/home.yaml
@@ -587,3 +587,26 @@ categories:
         phosphorIcon: book
         featured: false
         external: true
+  - name: Containers & Packages
+    slug: containers-packages
+    subtitle: Docker images & npm packages
+    seeAllUrl: /browse/containers-packages/
+    previewCount: 12
+    phosphorIcon: package
+    items:
+      - name: Website Profiling
+        icon: cfd-website-profiling
+        url: https://hub.docker.com/r/codefrydev/website-profiling
+        description: Docker image for website performance profiling and analysis.
+        date: "2026-05-16"
+        phosphorIcon: chart-line
+        featured: true
+        external: true
+      - name: SVG Engine (npm)
+        icon: cfd-svg-engine-npm
+        url: https://www.npmjs.com/package/@codefrydev/svg-engine
+        description: "@codefrydev/svg-engine — SVG creation and manipulation for Node and the browser."
+        date: "2026-05-16"
+        phosphorIcon: pen-nib
+        featured: true
+        external: true
diff --git a/data/homepage.yaml b/data/homepage.yaml
@@ -79,6 +79,10 @@ categoryBanners:
     image: "/images/banners/site-links.jpg"
     title: "Site & Resources"
     description: "About, updates, store, privacy, and external links."
+  containers-packages:
+    image: "/images/banners/containers-packages.jpg"
+    title: "Containers & Packages"
+    description: "Official Docker images and npm packages from CodeFryDev."
 
 hero:
   badge: "Free tools — no signup"
diff --git a/layouts/partials/home/browse-category.html b/layouts/partials/home/browse-category.html
@@ -29,7 +29,7 @@
     </div>
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 browse-category__grid">
+  <div class="browse-category__grid">
     {{- range $items -}}
       {{ partial "home/tool-card.html" (dict "item" . "defaultPhosphorIcon" $defaultIcon "categoryName" $cat.name "headingLevel" 2 "source" (printf "browse_%s" $slug)) }}
     {{- end -}}
diff --git a/layouts/partials/home/category-section.html b/layouts/partials/home/category-section.html
@@ -33,7 +33,7 @@ <h2 id="{{ $headingId }}" class="text-3xl font-bold text-slate-900 mb-2 m-0">{{
       </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 flex-1 min-h-0 items-start md:content-center">
+    <div class="browse-category__grid flex-1 min-h-0 items-start md:content-center">
       {{- range $i, $item := $previewItems -}}
       <div class="{{ if ge $i 6 }}hidden md:block{{ end }} min-h-0">
         {{ partial "home/tool-card.html" (dict "item" $item "defaultPhosphorIcon" $defaultIcon "categoryName" $cat.name "source" (printf "home_%s" $slug)) }}
diff --git a/layouts/partials/home/hub-page.html b/layouts/partials/home/hub-page.html
@@ -51,7 +51,7 @@ <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2 m-0">{{ $title }}<
       {{- end -}}
 
       {{- if gt (len $items) 0 -}}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 browse-category__grid">
+      <div class="browse-category__grid">
         {{- range $items -}}
           {{- $item := . -}}
           {{- range $homeItems -}}
diff --git a/static/css/home-tailwind.css b/static/css/home-tailwind.css
diff --git a/static/images/banners/containers-packages.jpg b/static/images/banners/containers-packages.jpg
diff --git a/static/images/home/cfd-svg-engine-npm.svg b/static/images/home/cfd-svg-engine-npm.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="90" fill="#020617"/>
+
+  <!-- Terminal window -->
+  <rect x="70" y="110" width="372" height="292" rx="34" fill="#111827"/>
+
+  <!-- Prompt chevron -->
+  <path fill="#38bdf8" d="M110 200 L150 230 L110 260 Z"/>
+
+  <!-- Code lines (SVG paths, no fonts) -->
+  <rect x="170" y="188" width="180" height="16" rx="8" fill="#ffffff"/>
+  <rect x="170" y="228" width="140" height="16" rx="8" fill="#94a3b8"/>
+  <rect x="170" y="268" width="200" height="16" rx="8" fill="#ffffff"/>
+  <rect x="170" y="308" width="120" height="16" rx="8" fill="#94a3b8"/>
+
+  <!-- Cursor -->
+  <rect x="310" y="262" width="18" height="52" fill="#38bdf8">
+    <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
+  </rect>
+
+  <!-- npm badge -->
+  <rect x="318" y="56" width="128" height="72" rx="14" fill="#CB3837"/>
+  <rect x="334" y="72" width="96" height="40" rx="8" fill="#ffffff"/>
+  <text x="382" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="28" font-weight="800" fill="#CB3837">npm</text>
+</svg>
diff --git a/static/images/home/cfd-website-profiling.svg b/static/images/home/cfd-website-profiling.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="90" fill="#020617"/>
+  <rect x="56" y="56" width="400" height="400" rx="48" fill="#0f172a"/>
+
+  <!-- Docker whale body -->
+  <path fill="#2496ED" d="M128 300c0-72 48-120 128-120s128 48 128 120v24H128v-24z"/>
+  <ellipse cx="256" cy="188" rx="88" ry="52" fill="#2496ED"/>
+  <rect x="168" y="300" width="176" height="56" rx="12" fill="#1d4ed8"/>
+
+  <!-- Container blocks on whale -->
+  <rect x="176" y="248" width="44" height="36" rx="6" fill="#38bdf8"/>
+  <rect x="234" y="248" width="44" height="36" rx="6" fill="#38bdf8"/>
+  <rect x="292" y="248" width="44" height="36" rx="6" fill="#38bdf8"/>
+
+  <!-- Profiling chart -->
+  <rect x="96" y="372" width="320" height="72" rx="16" fill="#111827"/>
+  <polyline points="120,420 168,388 216,408 264,360 312,376 360,332 392,348"
+            fill="none" stroke="#22c55e" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="392" cy="348" r="10" fill="#22c55e"/>
+</svg>
diff --git a/static/llms-full.txt b/static/llms-full.txt
@@ -20,14 +20,15 @@ CodeFryDev offers free online tools, games, and AI apps—no signup required. We
 ### Main Sections
 
 #### 1. Home (/)
-The main landing page featuring categorized tools and resources organized into four browse categories, with search, hero carousel, and featured tools.
+The main landing page featuring categorized tools and resources organized into five browse categories, with search, hero carousel, and featured tools.
 
 #### 2. Browse (/browse/)
 Hub to explore all tools by category:
 - Creative & Assets: /browse/creative-assets/
 - Tools & Utilities: /browse/tools-utilities/
 - Games & Fun: /browse/games-fun/
 - Site & External Links: /browse/site-links/
+- Containers & Packages: /browse/containers-packages/
 
 #### 3. About us (/about-us)
 Mission, team, and technology stack. Aliases: /about, /about/
@@ -154,6 +155,13 @@ Terms of use, privacy policy, and contact details.
 | Agurutwa | https://agurutwa.github.io/ | External community resources |
 | Pathsala | https://agurutwa.github.io/Pathsala/ | Educational paths and learning |
 
+### Category 5: Containers & Packages (/browse/containers-packages/)
+
+| Package | URL | Description |
+|---------|-----|-------------|
+| Website Profiling | https://hub.docker.com/r/codefrydev/website-profiling | Docker image for website performance profiling |
+| SVG Engine (npm) | https://www.npmjs.com/package/@codefrydev/svg-engine | @codefrydev/svg-engine — SVG creation and manipulation |
+
 ## AI Tools (/ai)
 
 1. **AI SocialSnap** (https://socialsnap.codefrydev.in/): AI-powered social content and caption generator
@@ -240,7 +248,7 @@ See /history for the full timeline back to March 2024 (Crispy Launch).
 This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more... We offer free tools, games, and AI apps in your browser—no signup required.
 
 **What types of tools does CodeFryDev offer?**
-Four browse categories: Creative & Assets, Tools & Utilities, Games & Fun, and Site & External Links—plus dedicated hubs for AI, Games, Design Lab, and Store.
+Five browse categories: Creative & Assets, Tools & Utilities, Games & Fun, Site & External Links, and Containers & Packages—plus dedicated hubs for AI, Games, Design Lab, and Store.
 
 **Are the tools and games free to use?**
 Most web-based tools and games are free. Some mobile apps may differ; check individual listings.
diff --git a/static/llms.txt b/static/llms.txt
@@ -12,7 +12,7 @@ CodeFryDev offers free online tools, games, and AI apps—no signup required. We
 - Full documentation: https://codefrydev.in/llms-full.txt
 
 ## Main Sections
-- Home (/): Categorized tools and resources across four browse categories
+- Home (/): Categorized tools and resources across five browse categories
 - Browse (/browse/): All tools organized by category
 - About us (/about-us): Mission, team, and contributors (alias: /about)
 - AI (/ai): Free AI-powered tools—memes, summarizers, chat, visual notes
@@ -30,6 +30,7 @@ CodeFryDev offers free online tools, games, and AI apps—no signup required. We
 2. **Tools & Utilities** (/browse/tools-utilities/): JSON Playground, JS LIDE, Web SEO, Prompt Library, CSV, meta tags, weather, tier lists, and more
 3. **Games & Fun** (/browse/games-fun/): Wordle, Snake, Chain Reaction, WordDice, 2048, Ludo, Carrom, Overdose, and more
 4. **Site & External Links** (/browse/site-links/): About, timeline, CFDDC, store, privacy, and external education links
+5. **Containers & Packages** (/browse/containers-packages/): Website Profiling Docker image, @codefrydev/svg-engine on npm
 
 ## AI Tools (featured)
 - AI SocialSnap: https://socialsnap.codefrydev.in/

Original file line number	Diff line number	Diff line change
`@@ -610,7 +610,7 @@`
`610`	`610`	`}`
`611`	`611`
`612`	`612`	`.browse-category__grid {`
`613`		`- @apply mt-2;`
	`613`	`+ @apply mt-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6;`
`614`	`614`	`}`
`615`	`615`
`616`	`616`	`/* About us (/about-us/) */`