clank3140.github.io/index.html at main · clank3140/clank3140.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quartu - Clank's works</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/cd72cba404.js" crossorigin="anonymous"></script>

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@clank3140_mo_de" />
  <meta property="og:url" content="https://clank.work/" />
  <meta property="og:title" content="Quartu - Clank's works" />
  <meta property="og:description" content="design / TRPG / VR etc..." />
  <meta property="og:image" content="https://clank.work/images/card.png" />

  <link rel="icon" href="images/favicon.ico">
</head>

<body>
  <video class="back-video" autoplay="" muted="" loop="" id="bg">
    <source src="video/portfolio_web.mp4" type="video/mp4">
  </video>
  <header class="header">
    <h1 class="site-title">Quartu - Clank's works</h1>
    <nav class="nav">
      <ul>
        <li><a href="#about"><i class="fa-solid fa-address-card"></i><span>about</span></a></li>
        <li><a href="#projects"><i class="fa-solid fa-folder-open"></i><span>portfolio</span></a></li>
        <li><a href="#other"><i class="fa-solid fa-bolt"></i><span>other</span></a></li>
      </ul>
    </nav>
  </header>

  <main class="content">
    <section id="about" class="about">
      <h2>about</h2>
      <div class="profile-container">
        <div class="profile-info">
          <img src="images/card.png" alt="clank" class="profile-avatar">
          <p class="profile-name">Clank</p>
          <p class="profile-description">くらんくと読みます。日曜創作男目指人間。<br>デザインしたりTRPG遊んだりVR潜ったり。</p>
        </div>
        <div class="social-links">
          <p>ご依頼や合作のお誘いはSNSのDMやメールでお気軽にどうぞ✉</p>
          <div class="social-icons">
            <a href="https://x.com/clank3140_mo_de" target="_blank" rel="noopener noreferrer" class="social-icon">
              <i class="fa-brands fa-x-twitter"></i>
              <span>@clank3140_mo_de</span>
            </a>
            <a href="https://bsky.app/profile/clank.bsky.social" target="_blank" rel="noopener noreferrer"
              class="social-icon">
              <i class="fa-brands fa-bluesky"></i>
              <span>clank.bsky.social</span>
            </a>
            <p class="social-icon">
              <i class="fas fa-envelope"></i>
              <span>clank3140.mo.de[at]gmail.com</span>
            </p>
          </div>
        </div>
      </div>
    </section>

    <section id="projects" class="projects">
      <h2>portfolio</h2>
      <div class="project-list">
        <div class="project-item">
          <img src="images/sixsenses.png" alt="six senses">
          <div class="project-title">
            <div class="title"><span>six senses<a href="https://www.clank.work/sixsenses/" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>VOCALOIDコンピアルバム(主催)</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/random-todo-notes.png" alt="Random ToDo Notes">
          <div class="project-title">
            <div class="title"><span>Random ToDo Notes<a
                  href="https://play.google.com/store/apps/details?id=net.mohyo.works.randomToDoNotes"
                  rel="noopener noreferrer" target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>スマホアプリ UIデザインした</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/youtube.png" alt="YouTube">
          <div class="project-title">
            <div class="title"><span>YouTube<a href="https://www.youtube.com/@clank3140" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>世に出しやすい動画はここに</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/kaichu-dokei.png" alt="manga">
          <div class="project-title">
            <div class="title"><span>manga<a href="https://x.com/clank3140_mo_de/status/1840062420087386158"
                  rel="noopener noreferrer" target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>マンガを作りました</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/vrc_booth.png" alt="BOOTH">
          <div class="project-title">
            <div class="title"><span>BOOTH<a href="https://clank.booth.pm/items/6185536" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>VRChatギミック開発</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/niconico_profile.png" alt="ニコニコ動画">
          <div class="project-title">
            <div class="title"><span>niconico<a href="https://www.nicovideo.jp/user/60412547/mylist"
                  rel="noopener noreferrer" target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>MAD・ボカロMVいろいろ作った</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/suzuri.png" alt="Tシャツ制作">
          <div class="project-title">
            <div class="title"><span>SUZURI<a href="https://suzuri.jp/FruorWorks" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>友達とTシャツなどを作っている</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/vrchat.png" alt="VR Chat">
          <div class="project-title">
            <div class="title"><span>VR Chat<a
                  href="https://vrchat.com/home/user/usr_96d22133-b5ea-4b56-b9f1-5ab136d31bbc" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>VRでもぶらぶらしている</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/trpg_booth.png" alt="Fruor Studio BOOTH">
          <div class="project-title">
            <div class="title"><span>Fruor Studio BOOTH<a href="https://fruor-studio.booth.pm" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>合作したTRPGシナリオ</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/trpg_talto.png" alt="TALTO">
          <div class="project-title">
            <div class="title"><span>TALTO<a href="https://talto.cc/users/NnACZXCGAUP7USJlLb1cKogWXnZ2"
                  rel="noopener noreferrer" target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>1人で書いたTRPGシナリオ</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/soundcloud.png" alt="SoundCloud">
          <div class="project-title">
            <div class="title"><span>SoundCloud<a href="https://soundcloud.com/clank3140" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>MASHUPに挑戦中</p>
          </div>
        </div>
        <div class="project-item">
          <img src="images/note.png" alt="note">
          <div class="project-title">
            <div class="title"><span>note<a href="https://note.com/clank3140" rel="noopener noreferrer"
                  target="_blank"><i class="fa-solid fa-link"></i></a></span></div>
            <p>だいたいTRPGのことを書いている</p>
          </div>
        </div>
      </div>
    </section>

    <section id="other" class="other">
      <h2>other</h2>
      <h3>TRPGが好き</h3>
      <p>時々TRPGをやってます。エモクロアメインです。</p>
      <p>制作したシナリオは、相方(？)のmohyoとの共同サークル「Fruor Studio」のBOOTHやTALTOにて公開中です！</p>
      <h3>VRChatにもいます</h3>
      <p>お気軽に「Clank - クランク」までフレンド申請してください。<br>NAGiSAにもよく出没してる。</p>
      <img class="vrc" src="images/vrc.png" alt="VRChat">
    </section>
  </main>

  <footer class="footer">
    <p>&copy; 2025 Clank</p>
  </footer>
</body>

</html>