[260120] 섹션 분류 변경

index.html

@@ -17,12 +17,12 @@
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap"
     media="print" onload="this.media='all'">
-  <link rel="stylesheet" href="style.css?v=1.0.2" media="print" onload="this.media='all'" />
+  <link rel="stylesheet" href="style.css?v=1.0.3" media="print" onload="this.media='all'" />
 
   <noscript>
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap">
-    <link rel="stylesheet" href="style.css?v=1.0.2" />
+    <link rel="stylesheet" href="style.css?v=1.0.3" />
   </noscript>
 
   <link rel="dns-prefetch" href="https://npm.sori.studio">
@@ -55,23 +55,138 @@
   <main>
     <section class="category-section mx-auto pt-5 px-0 pb-10">
 
-      <h2 class="section-title flex align-center h-6 pl-1 mb-6">Core Infrastructure</h2>
+      <h2 class="section-title flex align-center h-6 pl-1 mb-6">Web Services</h2>
       <div class="container w-full grid grid-col-3 gap-6">
 
-        <!-- Nginx Proxy Manager -->
+        <!-- union arena deck builder -->
-        <a href="https://npm.sori.studio" class="card" data-url="https://npm.sori.studio">
+        <a href="https://uniare.sori.studio" class="card" data-url="https://uniare.sori.studio">
+          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
+              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
+              class="card__decor card__decor--br"></span></div>
+
+          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
+            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">UNIARE</div>
+            <div class="card__subtitle">Union Arena Deck Builder</div>
+          </div>
+
+          <div class="card__body">
+            <div class="card__meta--url">uniare.sori.studio</div>
+            <p class="card__desc" data-lang="ko">반다이 남코의 TCG 'Union Arena'의 덱 빌더</p>
+            <p class="card__desc" data-lang="en">Deck builder for the TCG 'Union Arena' by Bandai Namco</p>
+          </div>
+        </a>
+
+        <!-- mastodon -->
+        <a href="https://sns.sori.studio" class="card" data-url="https://sns.sori.studio">
           <!-- Decorative Element -->
           <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
               class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
               class="card__decor card__decor--br"></span></div>
 
-          <!-- Card Title -->
+          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
+            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">Mastodon</div>
+            <div class="card__subtitle">Sori.Space Mastodon</div>
+          </div>
+
+          <div class="card__body">
+            <div class="card__meta--url">sns.sori.studio</div>
+            <p class="card__desc" data-lang="ko">소리 스튜디오(Sori Studio)의 공식 마스토돈 인스턴스.<br />운영자 zenn의 개인적인 기록과 소소한 이야기를
+              공유하는 독립적인 공간입니다.</p>
+            <p class="card__desc" data-lang="en">This is the official Mastodon instance of Sori Studio.<br />It is an
+              independent space where operator zenn shares his personal records and small stories.</p>
+          </div>
+        </a>
+
+      </div>
+    </section>
+
+    <section class="category-section mx-auto pt-5 px-0 pb-10">
+
+      <h2 class="section-title flex align-center pl-1 mb-6">Personal Utilities</h2>
+      <div class="container w-full grid grid-col-3 gap-6">
+
+        <!-- zenn Clock -->
+        <a href="https://sori.studio/clock" class="card" data-url="https://sori.studio/clock">
+          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
+              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
+              class="card__decor card__decor--br"></span></div>
+
+          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
+            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">zenn Clock</div>
+            <div class="card__subtitle">zenn Clock</div>
+          </div>
+
+          <div class="card__body">
+            <div class="card__meta--url">sori.studio/clock</div>
+            <p class="card__desc" data-lang="ko">한국어 인터페이스를 가진 미니멀리즘 디자인의 웹 시계.<br />다양한 색상 테마(밤의 고요함, 명료한 선언, 앵화난만
+              등)와 폰트 스타일, 시간 표시 형식(12/24시간제, 초 표시 유무) 등을 선택할 수 있습니다.</p>
+            <p class="card__desc" data-lang="en">A minimalist web clock with Korean interface.<br />Features various
+              color themes (Night Serenity, Clear Declaration, Cherry Blossoms, etc.), font styles, and time display
+              formats (12/24-hour, seconds toggle).</p>
+          </div>
+        </a>
+
+        <!-- sori days -->
+        <a href="https://sori.studio/soridays" class="card" data-url="https://sori.studio/soridays">
+          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
+              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
+              class="card__decor card__decor--br"></span></div>
+
+          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
+            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">sori.days</div>
+            <div class="card__subtitle">sori.days</div>
+          </div>
+
+          <div class="card__body">
+            <div class="card__meta--url">sori.studio/soridays</div>
+            <p class="card__desc" data-lang="ko">특정 날짜를 기준으로 D-Day를 계산하는 미니멀 웹 애플리케이션.<br />기준일과 제목을 자유롭게 설정할 수 있으며,
+              12가지 감성적인 색상 테마와 전체화면 모드를 지원합니다.</p>
+            <p class="card__desc" data-lang="en">A minimalist web application that calculates D-Day from a specific
+              date.<br />Allows custom base dates and titles, featuring 12 aesthetic color themes and fullscreen mode
+              support.</p>
+          </div>
+        </a>
+
+        <!-- bookmark divider -->
+        <a href="https://sori.studio/bdivider" class="card" data-url="https://sori.studio/bdivider">
+          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
+              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
+              class="card__decor card__decor--br"></span></div>
+
+          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
+            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">bdvider</div>
+            <div class="card__subtitle">Bookmark Divider</div>
+          </div>
+
+          <div class="card__body">
+            <div class="card__meta--url">sori.studio/bdivider</div>
+            <p class="card__desc" data-lang="ko">브라우저 북마크를 시각적으로 구분하기 위한 구분선 생성 도구.<br />가로/세로 라인, 삼각형 등 다양한 형태와 10가지
+              색상으로 북마크를 깔끔하게 정리할 수 있습니다.</p>
+            <p class="card__desc" data-lang="en">A bookmark divider generator for visually organizing browser
+              bookmarks.<br />Create clean bookmark sections with various shapes (horizontal/vertical lines, triangles)
+              in 10 different colors.</p>
+          </div>
+        </a>
+
+      </div>
+    </section>
+
+    <section class="category-section mx-auto pt-5 px-0 pb-10">
+
+      <h2 class="section-title flex align-center pl-1 mb-6">Infrastructure</h2>
+      <div class="container w-full grid grid-col-3 gap-6">
+
+        <!-- Nginx Proxy Manager -->
+        <a href="https://npm.sori.studio" class="card" data-url="https://npm.sori.studio">
+          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
+              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
+              class="card__decor card__decor--br"></span></div>
+
           <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
             <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">Proxy Manager</div>
             <div class="card__subtitle">Nginx Proxy Manager</div>
           </div>
 
-          <!-- Card Body -->
           <div class="card__body">
             <div class="card__meta--url">npm.sori.studio</div>
             <p class="card__desc" data-lang="ko">리버스 프록시 관리자</p>
@@ -81,7 +196,6 @@
 
         <!-- gitea -->
         <a href="https://git.sori.studio" class="card" data-url="https://git.sori.studio">
-          <!-- Decorative Element -->
           <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
               class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
               class="card__decor card__decor--br"></span></div>
@@ -122,73 +236,13 @@
         </a>
 
       </div>
-    </section>
-
-    <section class="category-section mx-auto pt-5 px-0 pb-10">
-
-      <h2 class="section-title flex align-center pl-1 mb-6">Public Services</h2>
-      <div class="container w-full grid grid-col-3 gap-6">
-
-        <!-- union arena deck builder -->
-        <a href="https://uniare.sori.studio" class="card" data-url="https://uniare.sori.studio">
-          <!-- Decorative Element -->
-          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
-              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
-              class="card__decor card__decor--br"></span></div>
-
-          <!-- Card Title -->
-          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
-            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">UNIARE</div>
-            <div class="card__subtitle">Union Arena Deck Builder</div>
-          </div>
-
-          <!-- Card Body -->
-          <div class="card__body">
-            <div class="card__meta--url">uniare.sori.studio</div>
-            <p class="card__desc" data-lang="ko">반다이 남코의 TCG 'Union Arena'의 덱 빌더</p>
-            <p class="card__desc" data-lang="en">Deck builder for the TCG 'Union Arena' by Bandai Namco</p>
-          </div>
-        </a>
-
-      </div>
-    </section>
-
-    <section class="category-section mx-auto pt-5 px-0 pb-10">
-
-      <h2 class="section-title flex align-center pl-1 mb-6">Personal Archive</h2>
-      <div class="container w-full grid grid-col-3 gap-6">
-
-        <!-- mastodon -->
-        <a href="https://sns.sori.studio" class="card" data-url="https://sns.sori.studio">
-          <!-- Decorative Element -->
-          <div class="card__decor-layer"><span class="card__decor card__decor--tl"></span><span
-              class="card__decor card__decor--tr"></span><span class="card__decor card__decor--bl"></span><span
-              class="card__decor card__decor--br"></span></div>
-
-          <!-- Card Title -->
-          <div class="card__header w-full min-w-0 flex flex-column justify-center align-center overflow-hidden">
-            <div class="card__title max-w-full min-w-0 mt-2 text-center text-ellipsis glyph">Mastodon</div>
-            <div class="card__subtitle">Sori.Space Mastodon</div>
-          </div>
-
-          <!-- Card Body -->
-          <div class="card__body">
-            <div class="card__meta--url">sns.sori.studio</div>
-            <p class="card__desc" data-lang="ko">소리 스튜디오(Sori Studio)의 공식 마스토돈 인스턴스입니다.<br />운영자 zenn의 개인적인 기록과 소소한 이야기를
-              공유하는 독립적인 공간입니다.</p>
-            <p class="card__desc" data-lang="en">This is the official Mastodon instance of Sori Studio.<br />It is an
-              independent space where operator zenn shares his personal records and small stories.</p>
-          </div>
-        </a>
-
-      </div>
 
     </section>
   </main>
   <footer class="text-center p-4">
     <p>&copy; 2025 sori.studio</p>
   </footer>
-  <script src="script.js?v=1.0.1" defer></script>
+  <script src="script.js?v=1.0.3" defer></script>
 </body>
 
 </html>