248 lines
13 KiB
HTML
248 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="\">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>sori.studio</title>
|
|
<meta name="description" content="소리스튜디오: 인프라 상태 모니터링 및 개인용 웹 서비스 대시보드입니다.">
|
|
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="preload" href="./font/NovaBySoristudio-Regular.otf" as="font" type="font/otf" crossorigin>
|
|
<link rel="preload" href="./font/Solaris-3-Script.otf" as="font" type="font/otf" crossorigin>
|
|
|
|
<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.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.3" />
|
|
</noscript>
|
|
|
|
<link rel="dns-prefetch" href="https://npm.sori.studio">
|
|
<link rel="dns-prefetch" href="https://git.sori.studio">
|
|
</head>
|
|
|
|
<body class="semi-nova m-0 p-0 flex flex-column align-center keep-all">
|
|
<header class="flex align-center h-20 pt-20 px-4 pb-12 text-center">
|
|
<h1 class="header-title m-0 p-0">sori<span class="dot-point">.</span>studio</h1>
|
|
<div class="theme-toggle-wrapper">
|
|
<button class="theme-toggle-btn" aria-label="테마 변경">
|
|
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
|
|
<path d="M12 2 A10 10 0 0 1 12 22" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
<div class="theme-options">
|
|
<button class="theme-option" data-theme="dark">
|
|
<span class="theme-option-icon">●</span>
|
|
<span class="theme-option-label">Dark</span>
|
|
</button>
|
|
<button class="theme-option" data-theme="light">
|
|
<span class="theme-option-icon">○</span>
|
|
<span class="theme-option-label">Light</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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">Web 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">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<div class="card__body">
|
|
<div class="card__meta--url">npm.sori.studio</div>
|
|
<p class="card__desc" data-lang="ko">리버스 프록시 관리자</p>
|
|
<p class="card__desc" data-lang="en">Reverse proxy manager</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- gitea -->
|
|
<a href="https://git.sori.studio" class="card" data-url="https://git.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>
|
|
|
|
<!-- 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">Gitea</div>
|
|
<div class="card__subtitle">Gitea</div>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="card__body">
|
|
<div class="card__meta--url">git.sori.studio</div>
|
|
<p class="card__desc" data-lang="ko">개발 리소스 저장소</p>
|
|
<p class="card__desc" data-lang="en">Development resource repository</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Pocket Base -->
|
|
<a href="https://api.sori.studio" class="card" data-url="https://api.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">Pocket Base</div>
|
|
<div class="card__subtitle">Pocket Base</div>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="card__body">
|
|
<div class="card__meta--url">api.sori.studio</div>
|
|
<p class="card__desc" data-lang="ko">개인화 API 서버</p>
|
|
<p class="card__desc" data-lang="en">Custom API Server</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
</main>
|
|
<footer class="text-center p-4">
|
|
<p>© 2025 sori.studio</p>
|
|
</footer>
|
|
<script src="script.js?v=1.0.3" defer></script>
|
|
</body>
|
|
|
|
</html> |