rainzhang05.github.io/index.html at main · rainzhang05/rainzhang05.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Rain Zhang — Computer Science Student & Full-Stack Developer</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- SEO -->
    <meta name="description" content="Rain Zhang — Computer Science student at Simon Fraser University. Full-stack developer building scalable web apps with Python, React, and TypeScript. Open to internships.">
    <link rel="canonical" href="https://rainzhang.me/">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://rainzhang.me/">
    <meta property="og:title" content="Rain Zhang — Full-Stack Developer & CS Student">
    <meta property="og:description" content="Computer Science student at SFU building scalable full-stack systems with Python, React, and TypeScript. Open to internship opportunities.">
    <meta property="og:image" content="https://rainzhang.me/images/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="Rain Zhang">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Rain Zhang — Full-Stack Developer & CS Student">
    <meta name="twitter:description" content="Computer Science student at SFU building scalable full-stack systems with Python, React, and TypeScript. Open to internship opportunities.">
    <meta name="twitter:image" content="https://rainzhang.me/images/og-image.png">
    <link rel="preload" href="fonts/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="fonts/Montserrat-Medium.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="fonts/Montserrat-Bold.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="stylesheet" href="css/main.css">
    <!-- JavaScript modules loaded in dependency order -->
    <script src="js/globals.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/modal.js"></script>
    <script src="js/preloader.js"></script>
    <script src="js/intro.js"></script>
    <script src="js/typewriter.js"></script>
    <script src="js/dock.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/navigation.js"></script>
    <script src="js/contact.js"></script>
    <script src="js/projects.js"></script>
    <script src="js/main.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body class="intro-prep is-preloading">
<script>
    (function () {
        if (
            typeof getStoredTheme === "function" &&
            typeof applyBodyFromMode === "function"
        ) {
            applyBodyFromMode(getStoredTheme())
        }
    })()
</script>

<!-- Layout (Navigation & Decorations) -->
<div id="layout-container"></div>

<div id="load-gate" class="load-gate" role="status" aria-live="polite" aria-label="Loading site content">
    <div class="load-gate__content">
        <div class="load-gate__spinner" aria-hidden="true"></div>
        <p class="load-gate__text">Loading</p>
    </div>
</div>

<!-- Main Content Sections -->
<div id="introduction-container"></div>
<div id="skills-container"></div>
<div id="experience-container"></div>
<div id="projects-container"></div>
<div id="education-container"></div>
<div id="contact-container"></div>
<div id="footer-container"></div>

<!-- Fallback for users with JavaScript disabled -->
<noscript>
    <div class="noscript-fallback">
        <div class="noscript-fallback__inner">
            <h1 class="noscript-fallback__name">Rain Zhang</h1>
            <p class="noscript-fallback__tagline">Computer Science · Simon Fraser University<br>Full-Stack &amp; Security-Focused Software Developer</p>
            <p class="noscript-fallback__bio">
                I am a Computer Science undergraduate at Simon Fraser University who builds full-stack systems
                across modern technology stacks, including Python, React, and TypeScript. I have delivered
                multiple end-to-end projects by rapidly learning new frameworks, integrating APIs, and turning
                ideas into products.
            </p>
            <p class="noscript-fallback__notice">
                This site requires JavaScript for full interactivity. Enable JavaScript to experience
                animations, project details, and the contact form.
            </p>
            <nav class="noscript-fallback__links" aria-label="Primary links (no-JS fallback)">
                <a href="Rain Zhang Resume.pdf">Resume (PDF)</a>
                <a href="mailto:rainzhang.zty@gmail.com">Email</a>
                <a href="https://github.com/rainzhang05" target="_blank" rel="noopener noreferrer">GitHub</a>
                <a href="https://www.linkedin.com/in/rainzhang05/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            </nav>
            <details class="noscript-fallback__sections">
                <summary>Browse sections without JavaScript</summary>
                <ul>
                    <li><a href="html/introduction.html">Introduction</a></li>
                    <li><a href="html/skills.html">Skills</a></li>
                    <li><a href="html/experience.html">Experience</a></li>
                    <li><a href="html/projects.html">Projects</a></li>
                    <li><a href="html/education.html">Education</a></li>
                    <li><a href="html/contact.html">Contact</a></li>
                </ul>
            </details>
        </div>
    </div>
</noscript>
</body>
</html>