Update

src/components/data/timelineItem.astro

@@ -254,32 +254,12 @@ const itemColor = item.color || "#3B82F6";
                 <!-- 技能 -->
                 {item.skills && item.skills.length > 0 && (
                     <div class="mb-4">
-                        <div class="flex flex-wrap gap-1" data-skills-container>
+                        <div class="flex flex-wrap gap-1">
-                            {item.skills.slice(0, 3).map((skill) => (
+                            {item.skills.map((skill) => (
                                 <span class={`px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-sm ${sizeClasses.badge}`}>
                                     {skill}
                                 </span>
                             ))}
-                            {item.skills.length > 3 && (
-                                <>
-                                    {item.skills.slice(3).map((skill) => (
-                                        <span 
-                                            class={`hidden px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-sm ${sizeClasses.badge} skills-hidden`}
-                                            data-skill-hidden
-                                        >
-                                            {skill}
-                                        </span>
-                                    ))}
-                                    <button 
-                                        type="button"
-                                        class={`px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400 rounded-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors ${sizeClasses.badge}`}
-                                        data-skills-toggle
-                                        data-hidden-count={item.skills.length - 3}
-                                    >
-                                        +{item.skills.length - 3}
-                                    </button>
-                                </>
-                            )}
                         </div>
                     </div>
                 )}

src/content/projects/сертификаты-первых-онлайн-курсов.json

@@ -1,7 +1,7 @@
 {
-  "sourceCode": "https://github.com/StepanovPlaton/Certificates",
+  "sourceCode": "",
   "featured": false,
-  "liveDemo": "",
+  "liveDemo": "/albums/сертификаты-первых-онлайн-курсов-2016-2020/",
   "startDate": "2016-11-07T08:00:00.000+04:00",
   "techStack": [],
   "status": "completed",

src/content/timeline/самостоятельное-обучения-на-онлайн-курсах.json

@@ -16,7 +16,7 @@
     {
       "name": "Сертификаты",
       "type": "certificate",
-      "url": "https://github.com/StepanovPlaton/Certificates"
+      "url": "/albums/сертификаты-первых-онлайн-курсов-2016-2020/"
     }
   ],
   "type": "education",

src/pages/albums/[id]/index.astro

@@ -100,29 +100,54 @@ if (!album) {
     }
 
     .grid-layout[data-columns="2"] {
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-template-columns: repeat(2, 1fr);
     }
 
     .grid-layout[data-columns="3"] {
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-template-columns: repeat(3, 1fr);
     }
 
     .grid-layout[data-columns="4"] {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    @media (max-width: 768px) {
+        .grid-layout[data-columns="2"],
+        .grid-layout[data-columns="3"],
+        .grid-layout[data-columns="4"] {
+            grid-template-columns: repeat(1, 1fr);
+        }
+    }
+
+    @media (min-width: 769px) and (max-width: 1024px) {
+        .grid-layout[data-columns="3"],
+        .grid-layout[data-columns="4"] {
+            grid-template-columns: repeat(2, 1fr);
+        }
     }
 
     .masonry-layout {
-        columns: 2;
+        columns: 1;
         column-gap: 1rem;
     }
 
     @media (min-width: 768px) {
-        .masonry-layout {
+        .masonry-layout[data-columns="2"] {
+            columns: 2;
+        }
+        .masonry-layout[data-columns="3"],
+        .masonry-layout[data-columns="4"] {
             columns: 3;
         }
     }
 
     @media (min-width: 1280px) {
+        .masonry-layout[data-columns="2"] {
+            columns: 2;
+        }
+        .masonry-layout[data-columns="3"] {
+            columns: 3;
+        }
         .masonry-layout[data-columns="4"] {
             columns: 4;
         }
@@ -137,3 +162,4 @@ if (!album) {
         aspect-ratio: 1;
     }
 </style>
+</style>