localhost433.github.io/index.html at main · localhost433/localhost433.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>
    <script>
        (function () {
            var stored = localStorage.getItem('theme');
            var prefers = window.matchMedia('(prefers-color-scheme:dark)').matches;
            if (stored === 'dark' || (!stored && prefers)) {
                document.documentElement.classList.add('dark-mode');
            }
        })();
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Robin's projects, writing, and course notes." />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <title>Robin's Site</title>
    <template id="meta-include" data-src="components/meta-tags.html"></template>
    <link rel="stylesheet" href="css/shared.css" />
    <link rel="stylesheet" href="css/home.css" />
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' https://cdn.jsdelivr.net;
        connect-src 'self' https://cdn.jsdelivr.net;
        style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
        font-src 'self' https://cdn.jsdelivr.net;
        img-src data:;" charset="UTF-8">
</head>

<body>
    <header id="header-placeholder"></header>
    <main>
        <article>
            <h1>Hello, I'm Robin.</h1>
            <p>
                I'm a junior at NYU, majoring in Mathematics and Computer Science, and I'm also interested in linguistics. I use this
                site to keep track of things I have made, questions I have followed, and notes I want to find again.
                It is deliberately broader than a portfolio or journal: schoolwork, technical experiments, and
                personal writing can all live here.
            </p>
            <p>
                Posts and course notes are written in Markdown and rendered in the browser. The site therefore still
                has limited support for text-only browsers and for browsing with JavaScript disabled.
            </p>

            <h2>What You Might Find Here</h2>
            <ul>
                <li>Posts about technical questions, school, and random everyday observations.</li>
                <li>Small projects and experiments, including unfinished ones.</li>
                <li>Course notes and study materials.</li>
                <li>Personal reflections that I want to keep somewhere.</li>
            </ul>

            <h2>Features</h2>
            <ul>
                <li>Blog: Posts about various topics, including school, life, and random ideas.</li>
                <li>Projects: A showcase of personal projects and experiments.</li>
                <li>Comments: Visitors can leave comments on posts, with support for author names and timestamps.</li>
                <li>Dark Mode: Toggle between light and dark themes.</li>
                <li>Math Support: Render mathematical expressions using MathJax.</li>
                <li>Markdown Parsing: Blog posts are written in Markdown and rendered dynamically.</li>
                <li>Notes: Course notes rendered from Markdown (with front-matter), featuring MathJax support and an
                    auto-generated table of contents.</li>
                <li>Pagination &amp; Filtering: Browse blog posts by tag or search with pagination.</li>
            </ul>

            <h2>Connect with Me</h2>
            <p>
                You can find me here:
            </p>
            <ul>
                <li><a href="https://github.com/localhost433" target="_blank" rel="noopener noreferrer">GitHub</a></li>
                <li><a href="https://www.linkedin.com/in/robin-chen-a494542b7/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            </ul>
            <p>
                Or you can email me at <a href="mailto:robinchen@nyu.edu">robinchen@nyu.edu</a>.
            </p>

            <h2>Tech Stack</h2>
            <p>
                This site is built with vanilla HTML, CSS, and JavaScript. I'm trying to use minimal dependencies to
                stay lightweight, the ones being used including:
            </p>
            <ul>
                <li><code>js-yaml</code> - parse front-matter in notes</li>
                <li><code>DOMPurify</code> - sanitize rendered HTML</li>
                <li><code>MathJax</code> - render LaTeX/math expressions</li>
                <li><code>marked.js</code> - Markdown -> HTML parsing</li>
                <li><code>node-fetch</code> - HTTP client for serverless functions</li>
                <li><code>sanitize-html</code> - clean user input in comments</li>
                <li><code>@upstash/redis</code> - serverless KV caching</li>
                <li><code>pg</code> - Neon serverless PostgreSQL driver</li>
            </ul>

            <h2>What I'm Working On</h2>
            <p>
                The site changes as I use it. The current maintenance list is short:
            </p>
            <ul>
                <li>Move older course notes into the browsable notes archive.</li>
                <li>Add site-wide search across posts, projects, and notes.</li>
                <li>Improve the non-JavaScript and text-browser experience.</li>
                <li>Keep older links, metadata, and project descriptions current.</li>
            </ul>
        </article>
    </main>

    <footer id="footer-placeholder"></footer>

    <script type="module" src="js/header-footer.js"></script>
    <script defer src="/_vercel/insights/script.js"></script>
</body>

</html>