From ebc81f5d8e67916ab70711da58eba679ad56e86e Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Tue, 19 May 2026 07:57:14 +0200
Subject: [PATCH] Tuneup

---
 index.php | 32 +++++++++++++++++++++++++-------
 style.css | 41 ++++++++++++++++++++++++++++++-----------
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/index.php b/index.php
index 033dd81..7df41fb 100644
--- a/index.php
+++ b/index.php
@@ -12,7 +12,6 @@ $email_user     = "ciao";
 
 $about_text     = [
     "Full-stack developer focused on pragmatic architecture, observability and performance.",
-    //""
 ];
 
 $nav_links      = [
@@ -51,7 +50,11 @@ $cv_education = [
     [ "title" => "Master of Computer Science", "org" => "Technical University", "date" => "2014", "desc" => "" ]
 ];
 
-$cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis", "Linux", "Git"];
+$cv_skills = [
+    "Development" => ["PHP", "Go", "Rust", "TypeScript"],
+    "Cloud & Ops" => ["Docker", "Kubernetes", "Linux", "Git"],
+    "Storage" => ["PostgreSQL", "Redis"]
+];
 
 /**
  * Page design:
@@ -146,12 +149,27 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
             </label>
 
             <div class="cv-content">
-                <section class="cv-section skills hidden">
+                <?php $file_mod_time = filemtime(__FILE__); ?>
+                <p class="cv-modified">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
+
+                <section class="cv-section skills hidden"> 
                     <h2>Skills</h2>
-                    <div class="skill-tags">
-                        <?php foreach ($cv_skills as $i => $skill): ?>
-                            <span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
-                        <?php endforeach; ?>
+                    <div class="skill-categories"> 
+                    <?php 
+                    $global_i = 0;
+                    foreach ($cv_skills as $category => $skills): ?>
+                        <div class="skill-group">
+                            <h3><?= $category ?></h3>
+                            <div class="skill-tags">
+                                <?php foreach ($skills as $skill): 
+                                    $fontSize = 0.85 + (($global_i * 3) % 5) * 0.2; 
+                                    $opacity = 0.6 + (($global_i * 2) % 4) * 0.1;
+                                ?>
+                                    <span class="tag" style="transition-delay: <?= 0.6 + ($global_i * 0.05) ?>s; font-size: <?= $fontSize ?>rem; opacity: <?= $opacity ?>;"><?= $skill ?></span>
+                                <?php $global_i++; endforeach; ?>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
                     </div>
                 </section>
                 
diff --git a/style.css b/style.css
index 705c961..a3446c7 100644
--- a/style.css
+++ b/style.css
@@ -253,17 +253,42 @@ body {
     opacity: 0.9;
 }
 
+.cv-modified {
+    text-align: right;
+    font-size: 0.7rem;
+    opacity: 0.5;
+    margin-top: -10px;
+    margin-bottom: 1rem;
+    font-family: var(--mono-font);
+}
+
+.skill-categories {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 1rem 0;
+}
+
+.skill-group h3 {
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    opacity: 0.4;
+    letter-spacing: 3px;
+    margin-bottom: 0.75rem;
+    text-align: center;
+    color: var(--text-color);
+}
+
 .skill-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 0.5rem 1.5rem;
+    justify-content: center;
+    align-items: center;
 }
 
 .tag {
-    font-size: 0.7rem;
-    padding: 4px 8px;
-    background: rgba(0, 243, 255, 0.1);
-    border: 1px solid rgba(0, 243, 255, 0.3);
+    display: inline-block;
     opacity: 0;
     transform: translateX(-5px);
     transition: opacity 0.4s ease, transform 0.4s ease;
@@ -403,12 +428,6 @@ h2 {
     letter-spacing: 2px;
 }
 
-.link-grid a:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-left-color: var(--accent-color);
-    box-shadow: 0 0 15px var(--accent-color);
-}
-
 a { color: var(--link-color); text-decoration: none; }
 
 @media (max-width: 768px) {