leonw.ong/index.html at main · l3ony2k/leonw.ong · 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
<!doctype html>
<html lang="en" data-theme="system">
    <head>
        <!-- Basic Meta Tags -->
        <meta charset="UTF-8" />
        <meta name="description" content="Welcome to my little corner of the internet! Check out my blog and social platforms." />

        <!-- Sets the status bar style to transparent -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <!-- Open Graph Meta Tags -->
        <meta property="og:title" content="Leon Wong" />
        <meta property="og:description" content="Welcome to my little corner of the internet! Check out my blog and social platforms." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="." />
        <meta property="og:image" content="assets/og-image.png" />
        <meta property="og:site_name" content="Leon Wong" />

        <!-- Twitter Card Meta Tags -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Leon Wong" />
        <meta name="twitter:description" content="Welcome to my little corner of the internet! Check out my blog and social platforms." />
        <meta name="twitter:image" content="assets/og-image.png" />

        <!-- favicon -->
        <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png" />
        <link rel="manifest" href="site.webmanifest" />
        <link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg" color="#282828" />
        <meta name="msapplication-TileColor" content="#282828" />
        <meta name="theme-color" content="#F0F0F0" media="(prefers-color-scheme: light)" />
        <meta name="theme-color" content="#1A1A1A" media="(prefers-color-scheme: dark)" />

        <link rel="me" href="https://rex.cat/@lok" />
        <link rel="me" href="https://github.com/l3ony2k" />
        <link rel="me" href="https://x.com/l3on_y2k" />
        <link rel="me" href="https://instagram.com/l3on_y2k" />
        <link rel="me" href="mailto:l3on@duck.com" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Leon Wong</title>

        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
        <video id="background-video" autoplay loop muted playsinline poster="images/poster_frame.jpg">
            <!-- Preferred: H.265/HEVC -->
            <source src="videos/output_720p_1.5x_grain_cq32.mp4" type="video/mp4; codecs=hvc1" />

            <!-- Fallback: H.264/AVC -->
            <source src="videos/output_720p_1.5x_grain_nvenc_h264.mp4" type="video/mp4" />

            <!-- Fallback text if video tag is not supported -->
            Your browser does not support the video tag.
        </video>

        <!-- The overlay element -->
        <div class="video-overlay"></div>

        <!-- Header with profile and theme toggle -->
        <div id="header" class="header">
            <div class="profile-section">
                <span class="profile-name">leonw.ong</span>
            </div>
            <div class="header-controls">
                <button id="theme-toggle" class="header-btn">system</button>
            </div>
        </div>

        <!-- Main Layout Container -->
        <div id="layout-container"></div>

        <!-- Mobile Layout -->
        <div id="mobile-layout" class="mobile-layout">
            <div class="mobile-tab-switcher">
                <button class="mobile-tab active" data-panel="about">About</button>
                <button class="mobile-tab" data-panel="social">Social</button>
                <button class="mobile-tab" data-panel="projects">Projects</button>
                <button class="mobile-tab" data-panel="blog">Blog</button>
                <button class="mobile-tab" data-panel="mail">Mail</button>
            </div>
            <div class="mobile-panel-container">
                <div id="mobile-about" class="mobile-panel active"></div>
                <div id="mobile-social" class="mobile-panel"></div>
                <div id="mobile-projects" class="mobile-panel"></div>
                <div id="mobile-blog" class="mobile-panel"></div>
                <div id="mobile-mail" class="mobile-panel"></div>
            </div>
        </div>

        <!-- Load configuration first, then main JS -->
        <script src="js/config.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>