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
116
117
118
119
<!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" />
    <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>
                A little bit of self intro, I'm a <del>freshman</del> sophomore at the NYU studying Mathematics and
                Computer Science. (Planning on getting a minor in linguistics) This site serves as a platform for me
                to document my thoughts, projects, and anything else I find worth sharing. I share random ideas and
                stuff I created about school, life, etc. (Not any type of category that I want to fall into, journal,
                diary, because it would feel kind of restrictive on 'how'/'what' should I write about anything.)
                <br><br>
                If you are viewing this using a text based browser, unfortunately, you won't be able to see most of
                the content here as I heavily rely on JavaScript to render the content dynamically, and I'm too lazy
                to add a static fallback. (I found out this problem when I was trying to use Lynx to view my site
                yesterday. Why did I try to do that? Good question.)
            </p>

            <h2>What You Might Find Here</h2>
            <p>
                - Posts about random topics I find interesting.<br>
                - Small projects, experiments, and creations.<br>
                - Thoughts on academic topics, especially from school work.<br>
                - Personal reflections or ideas that I simply want to document.
            </p>

            <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 & 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">GitHub</a></li>
                <li><a href="https://www.linkedin.com/in/robin-chen-a494542b7/" target="_blank">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>Future Plans</h2>
            <p>
                I plan to add more features and improve the design over time. Email me if you have suggestions!
                Currently, some ideas include:
            </p>
            <ul>
                <li><del>Improving the comment system</del> (Done)</li>
                <li><u>Converting all my course notes into markdown</u> (Done partial, in progress)</li>
                <li><u>Organizing stuff I wrote during the summer into blog posts</u> (In progress)</li>
                <li>Adding a search feature for easier navigation</li>
                <li><del>Enhance the overall design and responsiveness</del> (Done)</li>
                <li><u>Supporting more Markdown features</u> (In progress for parsing in general)</li>
                <li>Notifying users of new posts or updates</li>
        </article>
    </main>

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

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script type="module" src="js/header-footer.js"></script>
    <script defer src="/_vercel/insights/script.js"></script>
</body>

</html>