knotes/about.html at main · khushaank/knotes · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://cdn.jsdelivr.net https://cloudflareinsights.com https://static.cloudflareinsights.com; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://docs.google.com https://view.officeapps.live.com; form-action 'self'; upgrade-insecure-requests;" />
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <title>About - K. Notes</title>
    <meta name="description"
        content="Learn about K. Notes, our mission, and the community behind the platform. A high-signal space for tech news and intellectual discussion." />

    <meta property="og:type" content="website" />
    <meta property="og:title" content="About - K. Notes" />
    <meta property="og:description"
        content="Learn about K. Notes, our mission, and the community behind the platform. A high-signal space for tech news and intellectual discussion." />
    <meta property="og:image" content="assets/img/logo.png" />
    <meta property="og:url" content="about" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="About - K. Notes" />
    <meta property="twitter:description"
        content="Learn about K. Notes, our mission, and the community behind the platform. A high-signal space for tech news and intellectual discussion." />
    <meta property="twitter:image" content="assets/img/logo.png" />

    <link href="assets/css/styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="assets/img/logo.png" />
</head>

<body class="font-body-md text-body-md text-on-surface">
    <div class="max-w-[85%] mx-auto bg-surface-bright pb-8 mt-2">
        <header
            class="bg-[#ff6600] text-black  text-sm  rounded-none w-full flat no shadows flex items-center justify-between px-2 py-0.5 max-w-[85%] mx-auto"
            style="max-width: 100%;">
            <div class="flex items-center gap-1 w-full">
                <a href="home" class="font-bold text-black px-1 mr-2 hover:underline" title="K.Notes">K. Notes</a>
                <div class="flex flex-wrap items-center gap-1 text-black text-[13px]">
                    <a class="hover:underline" href="home">feed</a> |
                    <a class="hover:underline" href="comments">comments</a> |
                    <a class="hover:underline" href="ask">ask</a> |
                    <a class="hover:underline" href="show">show</a> |
                    <a class="hover:underline" href="submit">submit</a> |
                    <a class="hover:underline" href="leaderboard">leaders</a>
                </div>
                <div class="ml-auto text-black text-[13px] flex items-center gap-4"> <a
                        class="hover:underline text-black" href="login">login</a> </div>
            </div>
        </header>
        <main class="bg-[#f6f6ef] p-8 min-h-[50vh] text-[14px] text-gray-800 leading-relaxed">
            <h1 class="text-black text-2xl font-bold mb-6">About K. Notes</h1>

            <section class="mb-8">
                <h2 class="text-black text-lg font-bold mb-3">What is K. Notes?</h2>
                <p class="mb-4">
                    K. Notes is a community-driven news aggregator and discussion forum focused on technology, science,
                    computer science, and "anything that gratifies one's intellectual curiosity."
                </p>
                <p class="mb-4">
                    Inspired by the minimalist and functional design of Hacker News, K. Notes aims to provide a clean,
                    fast, and high-signal environment for developers, researchers, and lifelong learners to share and
                    discuss the most interesting content on the web.
                </p>
            </section>

            <section class="mb-8">
                <h2 class="text-black text-lg font-bold mb-3">Our Mission</h2>
                <p class="mb-4">
                    Our mission is to foster a community where curiosity is the primary driver of interaction. We value:
                </p>
                <ul class="list-disc ml-8 space-y-2 mb-4">
                    <li><b>Intellectual Curiosity:</b> Content that makes you think, learn, or see the world
                        differently.</li>
                    <li><b>Civil Discourse:</b> Respectful, substantive discussions that focus on ideas rather than
                        individuals.</li>
                    <li><b>Signal over Noise:</b> A focus on high-quality content over clickbait and sensationalism.
                    </li>
                </ul>
            </section>

            <section class="mb-12 p-6 bg-gray-50 border-l-4 border-[#ff6600]">
                <h2 class="text-black text-lg font-bold mb-2">Meet the Author</h2>
                <p class="mb-4">
                    K. Notes was created and is maintained by <b>Khushaank Gupta</b>. Want to know more about the person
                    behind the platform?
                </p>
                <a href="author" class="text-[#ff6600] font-bold hover:underline flex items-center gap-1">
                    Read more about Khushaank &rarr;
                </a>
            </section>

            <section class="mb-8">
                <h2 class="text-black text-lg font-bold mb-3">Technology</h2>
                <p class="mb-4">
                    K. Notes is built using modern web technologies to ensure speed and reliability:
                </p>
                <ul class="list-disc ml-8 space-y-2 mb-4">
                    <li><b>Frontend:</b> Vanilla HTML, Tailwind CSS for styling.</li>
                    <li><b>Backend:</b> Supabase for database and authentication.</li>
                    <li><b>Design:</b> A tribute to the classic Hacker News aesthetic with modern refinements.</li>
                </ul>
            </section>

            <div class="mt-12 p-6 bg-gray-100 rounded-lg border border-gray-200">
                <p class="text-center italic text-gray-600">
                    "The important thing is not to stop questioning. Curiosity has its own reason for existing." -
                    Albert Einstein
                </p>
            </div>
        </main>
        <footer
            class="bg-[#f6f6ef] dark:bg-stone-900 text-[#ff6600]  text-xs text-gray-600 rounded-none border-t-2 border-[#ff6600] mt-4 flat no shadows flex flex-col items-center gap-2 py-8 w-full max-w-[85%] mx-auto"
            style="max-width: 100%;">
            <div class="flex justify-center w-full mb-2">
                <span class="text-[10px] text-gray-500 font-normal">By Khushaank Gupta</span>
            </div>
            <div class="flex flex-wrap justify-center gap-2 text-gray-600 mb-4">
                <a class="hover:underline text-gray-600" href="guidelines">Guidelines</a> |
                <a class="hover:underline text-gray-600" href="faq">FAQ</a> |
                <a class="hover:underline text-gray-600" href="lists">Lists</a> |
                <a class="hover:underline text-gray-600" href="api">API</a> |
                <a class="hover:underline text-gray-600" href="security">Security</a> |
                <a class="hover:underline text-gray-600" href="legal">Legal</a> |
                <a class="hover:underline text-gray-600" href="about">About</a> |
                <a class="hover:underline text-gray-600" href="contact">Feedback</a>
            </div>
            <form id="footer-search-form" class="flex flex-col items-center gap-2"
                onsubmit="event.preventDefault(); window.location.href='search?search='+document.getElementById('footer-search-input').value;">
                <div class="flex items-center gap-2"><span class="text-gray-500 text-xs">Search:</span><input
                        type="text" id="footer-search-input"
                        class="border border-gray-400 px-2 py-0.5 text-xs rounded-sm focus:outline-none focus:border-[#ff6600] text-black w-48">
                </div>
                <div id="trending-searches" class="text-[10px] text-gray-400 flex gap-2"></div>
            </form>
        </footer>
    </div>
    <script defer src="assets/js/exit-interceptor.js"></script>
    <script type="module" src="assets/js/session.js"></script>
</body>

</html>