dotdev/index.html at main · faetalize/dotdev · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="fae's portfolio and personal space.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link href="style.css" rel="stylesheet"/>
    <script src="script.ts"  type="module" defer></script>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <title>妖精</title>
  </head>
  <body>
    <div id="loading-screen">
      <div id="loading-bar">
        <div id="loading-progress"></div>
      </div>
      <p>Loading</p>
    </div>
    <!-- Landing -->
    <div id="landing-screen">
      <p id="landing-text">Embrace the Golden Order.</p>
    </div>
    <!-- Background Image -->
    <div id="bg">
      <img src="/media/bg.webp" fetchpriority="high" height="477" width="666" alt="Background image, loop of Maliketh in a pixel art style"/>
    </div>
    <!-- Header -->
    <div class="header" id="header-main">
      <div class="hbutton" id="btn-navigation-back">BACK</div>
    </div>
    <!-- Navigation -->
    <nav id="navigation" role="main">
      <div class="nav-item hbutton" id="aboutMe">About Me</div>
      <div class="nav-item hbutton" id="contact">Contact</div>
      <div class="nav-item hbutton" id="portfolio">Portfolio</div>
    </nav>
    <!-- Pages -->
    <div class="page" id="aboutme">
      <div class="bio content">
        <div class="pfp">
          <img loading="lazy" fetchpriority="low" alt="fae's profile picture, representation of a cat" src="https://avatars.githubusercontent.com/u/134988598?v=4" />
        </div>
        <p class="username">fætalize</p>
        <div class="chip-array">
          <span class="chip chip-intermediate">C#</span>
          <span class="chip chip-expert">Typescript</span>
          <span class="chip chip-beginner">C</span>
          <span class="chip chip-expert">HTML</span>
          <span class="chip chip-expert">CSS</span>
          <span class="chip chip-expert">Javascript</span>
          <span class="chip chip-intermediate">Angular</span>
          <span class="chip chip-intermediate">React</span>
          <span class="chip chip-intermediate">.NET</span>
          <span class="chip chip-intermediate">WPF</span>
        </div>
        <div class="description">
          <p>WIP~</p>
        </div>
      </div>
    </div>
    <div class="page" id="contact">
      <ul>
        <li>@faetalize on Discord</li>
        <li>@fae on X</li>
        <li>faetalize@pm.me</li>
      </ul>
    </div>
    <div class="page" id="portfolio">
      <div class="content">
        <p>WIP~</p>
      </div>
    </div>
    <div class="footer">
      <div class="footerItem hbutton" id="credits">Credits</div>
      <a
        class="footerItem hbutton"
        id=""
        href="https://github.com/faetalize/dotdev"
        >src</a
      >
    </div>
    <!-- Overlay -->
    <div class="overlay">
      <div class="header" id="header-overlay">
        <div class="hbutton" id="btn-overlay-close">CLOSE</div>
      </div>
      <div class="body">
        <ul>
          <li>
            background img:
            <a href="https://twitter.com/GoldenDogAKi">寻回犬AKi</a>
          </li>
          <li>
            fonts:
            <a href="https://fonts.google.com/specimen/Cinzel">Google Fonts</a>
          </li>
          <li>bgm: Roundtable Hold</li>
        </ul>
      </div>
    </div>
  </body>
</html>