Enhance site structure and styling: add taxonomies to configuration, create new list templates for tags, projects, and about pages, and improve layout consistency across various HTML files.

hugo.toml

@@ -3,6 +3,9 @@ languageCode = 'en-us'
 title = 'codeskraps'
 description = 'Mobile development blog focused on Android, iOS, and cross-platform solutions with Kotlin Multiplatform'
 
+[taxonomies]
+  tag = "tags"
+
 [markup]
   [markup.goldmark]
     [markup.goldmark.renderer]

layouts/_default/list.html

@@ -0,0 +1,63 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    {{ with .Content }}
+    <div class="listContent">
+        {{- . -}}
+    </div>
+    {{ end }}
+
+    <div>
+        {{ range .Pages }}
+        <a class="postListLink" href="{{ .Permalink }}">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">{{ .Title }}</span>
+                    {{ $formattedDate := .Date.Format "2006-01-02" }}
+                    <time class="postDate" datetime="{{ $formattedDate }}">{{ .Date | time.Format ":date_long" }}</time>
+                </div>
+                <div class="postExcerpt">
+                    <p>{{ .Summary }}</p>
+                </div>
+            </div>
+        </a>
+        {{end}}
+    </div>
+</div>
+
+<style>
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tags-link {
+    text-decoration: none;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.tags-link:hover .highlight {
+    opacity: 0.8;
+}
+</style>
+{{ end }} 

layouts/about/list.html

@@ -0,0 +1,46 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    {{ with .Content }}
+    <div class="listContent">
+        {{- . -}}
+    </div>
+    {{ end }}
+</div>
+
+<style>
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tags-link {
+    text-decoration: none;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.tags-link:hover .highlight {
+    opacity: 0.8;
+}
+</style>
+{{ end }} 

layouts/about/single.html

@@ -1,29 +1,33 @@
-{{ define "title"}}
-About | {{ .Site.Params.author.name }}
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
 {{ end }}
 
 {{ define "main" }}
-  <article class="about-page">
-      <header>
-        <h1>
-          {{ .Title }}
-        </h1>
-      </header>
-      <div class="about-content">
-        {{ .Content }}
-      </div>
-  </article>
+<article class="content-padding about-content">
+    {{ .Content }}
+</article>
 
-  <style>
-    .about-page {
-      text-align: left;
-    }
-    .about-page h1, .about-page h2, .about-page h3, .about-page h4, .about-page h5, .about-page h6 {
-      text-align: center;
-    }
-    .about-page img {
-      display: block;
-      margin: 0 auto;
-    }
-  </style>
+<style>
+.content-padding {
+    padding-top: 2rem;
+}
+
+.about-content {
+    text-align: left;
+}
+
+.about-content h1,
+.about-content h2,
+.about-content h3,
+.about-content h4,
+.about-content h5,
+.about-content h6 {
+    text-align: center;
+}
+
+.about-content img {
+    display: block;
+    margin: 0 auto;
+}
+</style>
 {{ end }}

layouts/projects/list.html

@@ -0,0 +1,63 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    {{ with .Content }}
+    <div class="listContent">
+        {{- . -}}
+    </div>
+    {{ end }}
+
+    <div>
+        {{ range .Pages }}
+        <a class="postListLink" href="{{ .Permalink }}">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">{{ .Title }}</span>
+                    {{ $formattedDate := .Date.Format "2006-01-02" }}
+                    <time class="postDate" datetime="{{ $formattedDate }}">{{ .Date | time.Format ":date_long" }}</time>
+                </div>
+                <div class="postExcerpt">
+                    <p>{{ .Summary }}</p>
+                </div>
+            </div>
+        </a>
+        {{end}}
+    </div>
+</div>
+
+<style>
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tags-link {
+    text-decoration: none;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.tags-link:hover .highlight {
+    opacity: 0.8;
+}
+</style>
+{{ end }} 

layouts/projects/single.html

@@ -1,50 +1,48 @@
 {{ define "title"}}
-Projects | {{ .Site.Params.author.name }}
+{{ .Title }} | {{ .Site.Params.author.name }}
 {{ end }}
 
 {{ define "main" }}
-  <article>
-    <header>
-      <h1>
-        {{ .Title }}
-      </h1>
-    </header>
-    
-    <style>
-      .project-container {
-        margin-bottom: 4rem;
-      }
-      .project-layout {
-        display: flex;
-        gap: 2rem;
-        align-items: flex-start;
-      }
-      .project-image {
-        flex: 0 0 150px;
-      }
-      .project-image img {
-        width: 100%;
-        height: auto;
-      }
-      .project-content {
-        flex: 1;
-        text-align: left;
-      }
-      .project-content h1,
-      .project-content h2,
-      .project-content h3 {
-        margin-top: 0;
-      }
-      @media (max-width: 768px) {
-        .project-layout {
-          flex-direction: column;
-        }
-        .project-content {
-          width: 100%;
-        }
-      }
-    </style>
-
+<article class="content-padding">
     {{ .Content }}
-  </article>
+</article>
+
+<style>
+.content-padding {
+    padding-top: 2rem;
+}
+
+.project-container {
+    margin-bottom: 4rem;
+}
+.project-layout {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+}
+.project-image {
+    flex: 0 0 150px;
+}
+.project-image img {
+    width: 100%;
+    height: auto;
+}
+.project-content {
+    flex: 1;
+    text-align: left;
+}
+.project-content h1,
+.project-content h2,
+.project-content h3 {
+    margin-top: 0;
+}
+@media (max-width: 768px) {
+    .project-layout {
+        flex-direction: column;
+    }
+    .project-content {
+        width: 100%;
+    }
+}
+</style>
 {{ end }}

layouts/tags/list.html

@@ -0,0 +1,74 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        {{ range .Site.Taxonomies.tags.ByCount }}
+        {{ $fontSize := add 1 (mul 0.3 (math.Log .Count)) }}
+        <a href="{{ .Page.RelPermalink }}" class="tag" style="font-size: {{ $fontSize }}rem">
+            <span class="highlight">
+                {{ .Page.Title }}
+                <span class="tag-count">({{ .Count }})</span>
+            </span>
+        </a>
+        {{ end }}
+    </div>
+</div>
+
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px); /* Adjust for header and footer */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+/* Ensure tags wrap nicely on mobile */
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
+{{ end }} 

public/about/index.html

@@ -3,7 +3,7 @@
 
 <head>
     <title>
-About | codeskraps
+About Me | codeskraps
 </title>
 
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
@@ -79,14 +79,8 @@ About | codeskraps
         <div class="content">
             <main class="main">
                 
-  <article class="about-page">
-      <header>
-        <h1>
-          About Me
-        </h1>
-      </header>
-      <div class="about-content">
-        <p>
+<article class="content-padding about-content">
+    <p>
 
 
 
@@ -175,21 +169,31 @@ About | codeskraps
 <h2 id="education">Education</h2>
 <p>I hold a degree from Galway-Mayo Institute of Technology, where I built a strong foundation in computer science and software development that continues to inform my work today.</p>
 
-      </div>
-  </article>
-
-  <style>
-    .about-page {
-      text-align: left;
-    }
-    .about-page h1, .about-page h2, .about-page h3, .about-page h4, .about-page h5, .about-page h6 {
-      text-align: center;
-    }
-    .about-page img {
-      display: block;
-      margin: 0 auto;
-    }
-  </style>
+</article>
+
+<style>
+.content-padding {
+    padding-top: 2rem;
+}
+
+.about-content {
+    text-align: left;
+}
+
+.about-content h1,
+.about-content h2,
+.about-content h3,
+.about-content h4,
+.about-content h5,
+.about-content h6 {
+    text-align: center;
+}
+
+.about-content img {
+    display: block;
+    margin: 0 auto;
+}
+</style>
 
             </main>
         </div>

public/posts/index.html

@@ -81,19 +81,19 @@ Posts | codeskraps
         <div class="content">
             <main class="main">
                 
-
 <div>
     <div class="listHeader">
-        <h1>Posts</h1>
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
     </div>
 
     
 
     <div>
         
-
         <a class="postListLink" href="https://codeskraps.com/posts/2025/move_home_folder/">
-            
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">Move /home Folder</span>
@@ -105,12 +105,8 @@ Posts | codeskraps
                 </div>
             </div>
         </a>
-
-
         
-
         <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">React Native vs Kotlin Multiplatform</span>
@@ -123,12 +119,8 @@ Posts | codeskraps
                 </div>
             </div>
         </a>
-
-
         
-
         <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">Simplifying MVI Architecture</span>
@@ -140,12 +132,8 @@ Posts | codeskraps
                 </div>
             </div>
         </a>
-
-
         
-
         <a class="postListLink" href="https://codeskraps.com/posts/2024/gitignore_not_working/">
-            
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">When .gitignore Doesnt Seem to Work: A Quick Fix</span>
@@ -157,12 +145,8 @@ Posts | codeskraps
                 </div>
             </div>
         </a>
-
-
         
-
         <a class="postListLink" href="https://codeskraps.com/posts/2024/git_ssh_command/">
-            
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">Configuring SSH Keys for Individual Git Commands</span>
@@ -174,12 +158,35 @@ Posts | codeskraps
                 </div>
             </div>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tags-link {
+    text-decoration: none;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.tags-link:hover .highlight {
+    opacity: 0.8;
+}
+</style>
 
             </main>
         </div>

public/projects/index.html

@@ -79,48 +79,7 @@ Projects | codeskraps
         <div class="content">
             <main class="main">
                 
-  <article>
-    <header>
-      <h1>
-        Projects
-      </h1>
-    </header>
-    
-    <style>
-      .project-container {
-        margin-bottom: 4rem;
-      }
-      .project-layout {
-        display: flex;
-        gap: 2rem;
-        align-items: flex-start;
-      }
-      .project-image {
-        flex: 0 0 150px;
-      }
-      .project-image img {
-        width: 100%;
-        height: auto;
-      }
-      .project-content {
-        flex: 1;
-        text-align: left;
-      }
-      .project-content h1,
-      .project-content h2,
-      .project-content h3 {
-        margin-top: 0;
-      }
-      @media (max-width: 768px) {
-        .project-layout {
-          flex-direction: column;
-        }
-        .project-content {
-          width: 100%;
-        }
-      }
-    </style>
-
+<article class="content-padding">
     
 
 
@@ -186,7 +145,46 @@ Projects | codeskraps
   </div>
 </div> 
 
-  </article>
+</article>
+
+<style>
+.content-padding {
+    padding-top: 2rem;
+}
+
+.project-container {
+    margin-bottom: 4rem;
+}
+.project-layout {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+}
+.project-image {
+    flex: 0 0 150px;
+}
+.project-image img {
+    width: 100%;
+    height: auto;
+}
+.project-content {
+    flex: 1;
+    text-align: left;
+}
+.project-content h1,
+.project-content h2,
+.project-content h3 {
+    margin-top: 0;
+}
+@media (max-width: 768px) {
+    .project-layout {
+        flex-direction: column;
+    }
+    .project-content {
+        width: 100%;
+    }
+}
+</style>
 
             </main>
         </div>

public/sitemap.xml

@@ -63,8 +63,6 @@
   </url><url>
     <loc>https://codeskraps.com/tags/ssh/</loc>
     <lastmod>2024-04-17T16:56:53+02:00</lastmod>
-  </url><url>
-    <loc>https://codeskraps.com/categories/</loc>
   </url><url>
     <loc>https://codeskraps.com/projects/</loc>
   </url>

public/tags/android/index.html

@@ -81,54 +81,162 @@ Android | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Android</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><h2 id="introduction">Introduction</h2>
-<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/architecture/index.html

@@ -81,36 +81,162 @@ Architecture | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Architecture</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/git/index.html

@@ -81,53 +81,162 @@ Git | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Git</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/gitignore_not_working/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">When .gitignore Doesnt Seem to Work: A Quick Fix</span>
-                    
-                    <time class="postDate" datetime="2024-06-02">June 2, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>As developers, we&rsquo;ve all been there. You&rsquo;ve added a file or folder to your <code>.gitignore</code>, but Git keeps tracking it anyway. What gives? Let&rsquo;s dive into why this happens and how to fix it.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/git_ssh_command/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Configuring SSH Keys for Individual Git Commands</span>
-                    
-                    <time class="postDate" datetime="2024-04-17">April 17, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>When working with Git repositories, you often need to authenticate using SSH keys. While you can configure SSH settings globally, there are times when you need to use a specific SSH key for just one command. This is particularly useful when cloning a new repository or adding a submodule, where there isn&rsquo;t yet a local <code>.git/config</code> file to modify.</p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/index.html

@@ -81,223 +81,162 @@ Tags | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Tags</h1>
-    </div>
-
-    
-
-    <div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/linux/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Linux</span>
-                    
-                    <time class="postDate" datetime="2025-01-29">January 29, 2025</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/android/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Android</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/ios/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Ios</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Kmp</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/kotlin/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Kotlin</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/react-native/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React-Native</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/mvi/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Mvi</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/mvvm/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Mvvm</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/viewmodel/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Viewmodel</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/git/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Git</span>
-                    
-                    <time class="postDate" datetime="2024-06-02">June 2, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/tags/ssh/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Ssh</span>
-                    
-                    <time class="postDate" datetime="2024-04-17">April 17, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/ios/index.html

@@ -81,37 +81,162 @@ Ios | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Ios</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><h2 id="introduction">Introduction</h2>
-<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/kmp/index.html

@@ -81,54 +81,162 @@ Kmp | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Kmp</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><h2 id="introduction">Introduction</h2>
-<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/kotlin/index.html

@@ -81,54 +81,162 @@ Kotlin | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Kotlin</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><h2 id="introduction">Introduction</h2>
-<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
         </a>
-
-
         
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/linux/index.html

@@ -81,36 +81,162 @@ Linux | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Linux</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2025/move_home_folder/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Move /home Folder</span>
-                    
-                    <time class="postDate" datetime="2025-01-29">January 29, 2025</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>You can move the <code>/home</code> folder on Ubuntu, but you must do it carefully to avoid breaking your system. Below are the steps to safely move <code>/home</code> to a new location.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/mvi/index.html

@@ -81,36 +81,162 @@ Mvi | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Mvi</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/mvvm/index.html

@@ -81,36 +81,162 @@ Mvvm | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Mvvm</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/react-native/index.html

@@ -81,37 +81,162 @@ React-Native | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>React-Native</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
-                    
-                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><h2 id="introduction">Introduction</h2>
-<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/ssh/index.html

@@ -81,36 +81,162 @@ Ssh | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Ssh</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/git_ssh_command/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Configuring SSH Keys for Individual Git Commands</span>
-                    
-                    <time class="postDate" datetime="2024-04-17">April 17, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>When working with Git repositories, you often need to authenticate using SSH keys. While you can configure SSH settings globally, there are times when you need to use a specific SSH key for just one command. This is particularly useful when cloning a new repository or adding a submodule, where there isn&rsquo;t yet a local <code>.git/config</code> file to modify.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>

public/tags/viewmodel/index.html

@@ -81,36 +81,162 @@ Viewmodel | codeskraps
         <div class="content">
             <main class="main">
                 
-
-<div>
-    <div class="listHeader">
-        <h1>Viewmodel</h1>
-    </div>
-
-    
-
-    <div>
-        
-
-        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
-            
-            <div class="postListItem" role="listitem">
-                <div class="postHeader">
-                    <span class="postTitle">Simplifying MVI Architecture</span>
-                    
-                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
-                </div>
-                <div class="postExcerpt">
-                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
-                </div>
-            </div>
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        
+        
+        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Android
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Git
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kmp
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
+            <span class="highlight">
+                Kotlin
+                <span class="tag-count">(2)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Architecture
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ios
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Linux
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvi
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Mvvm
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                React-Native
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Ssh
+                <span class="tag-count">(1)</span>
+            </span>
+        </a>
+        
+        
+        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
+            <span class="highlight">
+                Viewmodel
+                <span class="tag-count">(1)</span>
+            </span>
         </a>
-
-
         
     </div>
 </div>
 
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+ 
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
 
             </main>
         </div>