kyoyacchi.github.io/index.html at master · kyoyacchi/kyoyacchi.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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Kyo's personal space - Web developer, anime enthusiast, and devoted DDLC fan. Just Monika.">
    <meta name="author" content="Kyoya">
    <meta name="keywords" content="Kyoya, kyoyacchi, Monika, DDLC, Doki Doki Literature Club, Just Monika, web developer, portfolio, anime, visual novel">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#50C878">
    <meta name="color-scheme" content="dark">

    <meta property="og:type" content="website">
    <meta property="og:title" content="Kyo's Website - Just Monika">
    <meta property="og:description" content="Website dedicated to Monika. Just Monika.">
    <meta property="og:url" content="https://kyoya.is-a.dev/">
    <meta property="og:image" content="https://cdn.myanimelist.net/images/userimages/11524769.jpg">
    <meta property="og:site_name" content="Kyo's Website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Kyo's Website - Just Monika">
    <meta name="twitter:description" content="Website dedicated to Monika. Just Monika.">
    <meta name="twitter:image" content="https://cdn.myanimelist.net/images/userimages/11524769.jpg">
    <meta name="twitter:site" content="@kyoyacchi">
    <meta name="twitter:creator" content="@kyoyacchi">

    <title>Kyo's Website - Just Monika</title>
    <link rel="icon" type="image/png" href="https://avatars.githubusercontent.com/u/63583961">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link rel="preload" href="RifficFree-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <link href="./dist/output.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">


</head>
<body class="selection:bg-kyo-emerald selection:text-black min-h-screen flex flex-col">
    <span style="font-family: 'Riffic'; position: absolute; opacity: 0; pointer-events: none;">.</span>

    <header class="absolute w-full top-0 left-0 p-8 flex justify-start items-center z-50 mix-blend-difference">
        <span id="site-logo" class="text-base md:text-lg font-mono tracking-widest text-white/60 transition-all duration-300 flex items-center gap-2 cursor-pointer">
            Just Monika.
            <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f380.svg"
                 style="width: 18px; height: 18px; filter: brightness(0) invert(1);"
                 alt="🎀">
        </span>
    </header>

    <div id="corruption-flash"></div>

    <div id="monika-dialogue" class="hidden">
        <div id="monika-dialogue-box">
            <div id="monika-dialogue-name">Monika</div>
            <p id="monika-dialogue-text"><span id="monika-dialogue-typed"></span><span class="cursor"></span></p>
            <div id="monika-dialogue-hint">click to continue</div>
        </div>
    </div>

    <main class="flex-grow flex flex-col items-center justify-start pt-16 pb-10 relative z-10 w-full">

        <div class="w-full max-w-7xl mx-auto text-center mb-6 px-6 z-10">
            <div id="discord-profile" class="discord-card w-full max-w-[90vw]
                md:max-w-[500px] min-h-[8rem] md:min-h-[10rem] py-4 rounded-3xl flex items-center px-6
                md:px-8 gap-6 mx-auto border border-kyo-emerald/20 relative overflow-hidden
                group cursor-default">

                <video id="d-bg-video" loop muted autoplay playsinline class="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-50 transition-opacity hidden"></video>
                <img id="d-bg-image" src="" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-50 transition-opacity hidden" alt="Banner">
                <div class="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-transparent z-0"></div>

                <div class="relative z-10 shrink-0">
                    <div class="relative flex items-center justify-center">
                        <img id="d-avatar" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="Avatar" loading="lazy" decoding="async" class="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-[#1e1f22] bg-black shadow-2xl relative z-10">
                        <img id="d-avatar-decoration" src="" alt="Decoration" class="hidden absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[125%] h-[125%] max-w-none pointer-events-none z-20 select-none">
                        <div id="d-status-indicator" class="status-indicator status-offline"></div>
                    </div>
                </div>

                <div class="relative z-10 text-left flex flex-col justify-center h-full py-2 min-w-0 flex-1">
                    <span id="d-global-name" class="text-white font-bold font-header text-2xl md:text-3xl tracking-tight truncate">Loading...</span>
                    <span id="d-username" class="text-gray-400 text-sm md:text-base font-mono font-medium tracking-wide">@kyomoe</span>

                    <div class="mt-3 flex items-center">
                        <span id="d-activity" class="text-white text-[10px] md:text-xs font-bold tracking-widest uppercase px-3 py-2 rounded-xl bg-white/10 border border-white/5 backdrop-blur-md whitespace-normal break-words w-fit max-w-full leading-relaxed">
                            OFFLINE
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-full max-w-4xl mx-auto px-6 mb-12 md:mb-16 z-10">
            <div class="text-center space-y-4">
                <div id="identity-tags" class="flex justify-center items-center gap-3 text-gray-400 font-mono text-xs md:text-sm tracking-widest">
                    <span>ANIME</span>
                    <span class="text-kyo-emerald opacity-50">✦</span>
                    <span>WEB DEV</span>
                    <span class="text-kyo-emerald opacity-50">✦</span>
                    <span>VN FAN</span>
                </div>
                <div id="skill-tags" class="flex flex-wrap justify-center items-center gap-3 md:gap-4 mt-3">
                    <span class="skill-tag px-5 py-2.5 bg-white/5 rounded-full border border-white/10 text-gray-400 font-medium text-sm transition-all duration-200 ease-out hover:-translate-y-[2px] hover:border-kyo-emerald hover:text-kyo-emerald hover:bg-kyo-emerald/10 hover:shadow-[0_0_15px_rgba(80,200,120,0.2)] cursor-default">
                        JavaScript
                    </span>
                    <span class="skill-tag px-5 py-2.5 bg-white/5 rounded-full border border-white/10 text-gray-400 font-medium text-sm transition-all duration-200 ease-out hover:-translate-y-[2px] hover:border-kyo-emerald hover:text-kyo-emerald hover:bg-kyo-emerald/10 hover:shadow-[0_0_15px_rgba(80,200,120,0.2)] cursor-default">
                        UI Design
                    </span>
                    <span class="skill-tag px-5 py-2.5 bg-white/5 rounded-full border border-white/10 text-gray-400 font-medium text-sm transition-all duration-200 ease-out hover:-translate-y-[2px] hover:border-kyo-emerald hover:text-kyo-emerald hover:bg-kyo-emerald/10 hover:shadow-[0_0_15px_rgba(80,200,120,0.2)] cursor-default">
                        Localization
                    </span>
                </div>
            </div>
        </div>

<div id="monika-hero-container" class="w-full z-10 transition-all duration-500">
    <div id="monika-hero" class="relative w-full max-w-4xl mx-auto h-[200px] md:h-[350px] lg:h-[400px] overflow-hidden rounded-3xl border border-white/10 shadow-2xl z-10 group cursor-pointer bg-white/5 backdrop-blur-md">

                <img src="./assets/monika-bg.webp" fetchpriority="high" decoding="async" class="absolute inset-0 w-full h-full object-cover object-[center_20%] opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 ease-out" alt="Monika" draggable="false">

                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-40 transition-opacity duration-700"></div>

            </div>
        </div>
        <div id="just-monika-text" class="hidden flex-col items-center justify-center w-full my-12 transition-all duration-500 select-none">
            <h2 class="text-5xl md:text-7xl font-header text-black tracking-widest" style="text-shadow: 3px 3px 0px #ffbde1, 6px 6px 0px white;">JUST MONIKA.</h2>
        </div>

        <div id="quote-container" class="w-full px-6 flex flex-col items-center justify-center transition-all duration-500" style="margin-top: 3rem;">
    <p class="text-kyo-emerald font-body text-sm md:text-xl tracking-[0.1em] italic leading-relaxed text-center opacity-80 transition-opacity drop-shadow-md">
                "<span id="typed-quote" class="cursor"></span>"
            </p>
            <div class="w-11/12 max-w-4xl h-[1px] animated-divider" style="margin-top: 3rem; margin-bottom: 3rem;"></div>
        </div>

    </main>

    <footer class="pt-0 pb-12 bg-transparent z-10 relative transition-all duration-500 font-mono">
        <div class="text-center flex flex-col items-center justify-center space-y-4">

            <div id="sns-links" class="flex justify-center gap-8 text-xl">
                <a href="https://github.com/kyoyacchi" target="_blank"
                rel="noopener noreferrer" aria-label="GitHub"
                class="text-zinc-400 hover:text-[#50C878] transition-all
                duration-300"><i class="fa-brands fa-github"></i></a>
                <a href="https://x.com/kyoyacchi" target="_blank" rel="noopener
                noreferrer" aria-label="X (Twitter)" class="text-zinc-400
                hover:text-[#50C878] transition-all duration-300"><i
                class="fa-brands fa-x-twitter"></i></a>
                <a href="https://youtube.com/@Kyoya26" target="_blank"
                rel="noopener noreferrer" aria-label="YouTube"
                class="text-zinc-400 hover:text-[#50C878] transition-all
                duration-300"><i class="fa-brands fa-youtube"></i></a>
            </div>

            <div class="text-gray-400 text-sm">
                Made with <i id="footer-heart" class="fa-solid fa-heart text-kyo-emerald transition-all duration-500"></i> by
                <span id="footer-kyo" class="hover:text-kyo-emerald transition-colors font-bold cursor-pointer">@Kyo</span>
                <span id="footer-monika" class="hidden text-[#ff69b4] font-bold tracking-wide">Monika</span>
            </div>

<p class="text-[11px] text-zinc-400 italic opacity-60 hover:opacity-100 transition-opacity mt-2">
    © <span id="year"></span> • Unofficial & non-commercial fan work. Assets © Team Salvato.
</p>


        </div>
    </footer>

<div id="monika-popup">
    <div id="monika-popup-content" class="transform transition-all duration-200">
        <h3 class="font-header text-black tracking-wide">Just Monika.</h3>
        <button id="monika-ok-btn" class="font-riffic font-bold text-white transition-transform duration-100">
            OK
        </button>
    </div>
</div>

    <script src="script.js" defer></script>

</body>
</html>