me/pi-ku
1
0
Fork 0
Code Issues Pull Requests 1 Actions Projects Releases Wiki Activity

chore: update about page content
CI / Generate Certificates (push) Successful in 1m39s
Details
CI / Frontend CI (push) Successful in 1m11s
Details
CI / Backend CI (push) Successful in 1m18s
Details
CI / E2E Tests (push) Has been skipped
Details

Browse Source
This commit is contained in:
me
2026-05-07 02:17:26 +05:30
parent 3ec8bb2226
commit f5e1813ec3
1 changed files with 818 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/About.tsx
+51 -52
View File
@@ -10,6 +10,7 @@ import {
LockLaminatedIcon, LockLaminatedIcon,
LockOpenIcon, LockOpenIcon,
PasswordIcon, PasswordIcon,
PeaceIcon,
PersonArmsSpreadIcon, PersonArmsSpreadIcon,
PersonIcon, PersonIcon,
ScrollIcon, ScrollIcon,
@@ -207,7 +208,7 @@ function SpecsSection() {
<h1 className="relative tracking-tighter text-5xl md:text-8xl text-neutral-content/80 font-extrabold italic font-display z-10"> <h1 className="relative tracking-tighter text-5xl md:text-8xl text-neutral-content/80 font-extrabold italic font-display z-10">
S'more Specs S'more Specs
</h1> </h1>
<div className="flex flex-col items-start shrink-0 gap-6 max-w-11/12 w-200 mt-4 md:mt-12"> <div className="flex flex-col items-center shrink-0 gap-6 max-w-11/12 w-220 mt-4 md:mt-12">
<h2 className="text-xl md:text-3xl text-center mx-auto"> <h2 className="text-xl md:text-3xl text-center mx-auto">
<Logo type={"inline"} /> uses{" "} <Logo type={"inline"} /> uses{" "}
<span className="text-accent font-mono">Zero Knowledge</span>{" "} <span className="text-accent font-mono">Zero Knowledge</span>{" "}
@@ -230,31 +231,31 @@ function SpecsSection() {
ncryption ncryption
</span> </span>
</span> </span>
</span>{" "} </span>{" "} for your letters, with{" "}
with{" "} <a href="https://hackernoon.com/what-the-heck-is-envelope-encryption-in-cloud-security" target="_blank" rel="noopener noreferrer" className="font-mono text-primary">Envelope Encryption</a> for the keys.
<span className="font-mono text-primary">Envelope Encryption</span>
</h2> </h2>
<p className="text-sm md:text-xl leading-relaxed"> <p className="text-sm md:text-xl leading-relaxed">
This means, both the encryption and decryption runs on your device, in This means, both the encryption and decryption runs on your device, in your browser.
your browser. <ul className="list-decimal list-inside opacity-60 marker:text-primary marker:font-mono marker:text-base">
<br /> <li>Every letter has a{" "}
Every letter has a{" "}
<span className="font-mono text-primary">unique key</span> which is <span className="font-mono text-primary">unique key</span> which is
derived from your original password. derived from your original password.</li>
<br /> <li>Both the letter and the key are encrypted securely and sent to the
Both the letter and the key are encrypted securely and sent to the
server. server.
<br /> </li>
<li>
Now, the server holds{" "} Now, the server holds{" "}
<span className="text-primary font-bold">the envelope</span>,{" "} <span className="text-primary font-bold">the envelope</span>,{" "}
<span className="text-primary font-bold">the seal</span> and{" "} <span className="text-primary font-bold">the seal</span> and{" "}
<span className="text-primary font-bold">another locked box</span>{" "} <span className="text-primary font-bold">another locked box</span>&mdash;with a key inside that unseals your letter.
with a key inside that unseals your letter. But you,{" "} </li>
<span className="italic text-primary">only you</span>, hold the only </ul>
thing that opens the box &mdash;{" "} But you&mdash;
<span className="italic">only you</span>&mdash;hold the very
thing that opens that box,{" "}
<span className="font-mono text-accent">your password</span>. <span className="font-mono text-accent">your password</span>.
</p> </p>
<p className="text-sm md:text-xl text-right w-full flex items-center justify-end gap-4 leading-relaxed"> <p className="text-xs md:text-lg text-right w-full flex items-center justify-end gap-4 leading-relaxed text-neutral-content/80">
Nothing on the server is readable without your actual password. Nothing on the server is readable without your actual password.
<br /> <br />
Even if someone were to breach in, all they'd find is encrypted noise. Even if someone were to breach in, all they'd find is encrypted noise.
@@ -274,18 +275,18 @@ function SpecsSection() {
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}> <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<div className="w-full bg-paper rounded-md p-6"> <div className="w-full bg-paper rounded-md p-6">
<img src="/screenshots/e2e.svg" alt="pi ku e2e diagram" /> <img src="/screenshots/e2e.svg" width={"100%"} alt="pi ku e2e diagram" />
</div> </div>
</Modal> </Modal>
<p className="text-sm md:text-lg"> <p className="text-sm md:text-lg">
This level of privacy comes with a catch.{" "} Of course, this level of <span className="text-success font-bold">privacy</span> comes with a catch.{" "}
<span className="text-error font-bold">No password reset.</span> <span className="text-error font-bold">No password reset</span> for you.
</p> </p>
<p className="text-sm md:text-lg alert alert-warning font-semibold"> <p className="text-xs md:text-base alert alert-warning font-medium">
<InfoIcon weight="duotone" /> Your original password is never stored <InfoIcon weight="duotone" /> Your original password is never stored
on the server. Which means if it's lost, the letters stay sealed on the server. Which means, if it's lost, the letters stay sealed
forever. foreeeeveer.
</p> </p>
</div> </div>
</section> </section>
@@ -314,7 +315,7 @@ function OSSSection() {
</h1> </h1>
<div className="flex flex-col items-center shrink-0 max-w-11/12 w-200 gap-4 p-4 md:p-6"> <div className="flex flex-col items-center shrink-0 max-w-11/12 w-200 gap-4 p-4 md:p-6">
<p className="text-sm md:text-xl"> <p className="text-sm md:text-xl">
<Logo type={"mono"} /> is fully open source. Every claim about privacy <Logo type={"mono"} /> is fully <span className="text-success font-display">open source</span>. Every claim about privacy
and encryption is publicly available in the code so you don't have to and encryption is publicly available in the code so you don't have to
take anyone's word for it. take anyone's word for it.
</p> </p>
@@ -323,7 +324,7 @@ function OSSSection() {
<span className="uppercase font-bold text-primary">Self-host</span>{" "} <span className="uppercase font-bold text-primary">Self-host</span>{" "}
<Logo type={"inline"} /> in just 4 steps. <Logo type={"inline"} /> in just 4 steps.
</p> </p>
<div className="mockup-code w-full text-xs"> <div className="mockup-code max-w-110 text-xs">
<pre data-prefix="$"> <pre data-prefix="$">
<code>git clone https://git.ramvignesh.dev/me/pi-ku.git</code> <code>git clone https://git.ramvignesh.dev/me/pi-ku.git</code>
</pre> </pre>
@@ -345,7 +346,7 @@ function OSSSection() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-primary" className="text-primary"
> >
View on GitHub View Source
</a> </a>
<p className="text-xs md:text-base opacity-70"> <p className="text-xs md:text-base opacity-70">
Found something to report or request?{" "} Found something to report or request?{" "}
@@ -783,7 +784,7 @@ function AttributionSection() {
<div className="flex flex-col items-center shrink-0"> <div className="flex flex-col items-center shrink-0">
<div <div
className={ className={
"max-w-200 m-2 md:m-8 text-sm md:text-lg px-4 md:px-8 py-6 md:py-12 flex flex-col gap-4 md:gap-8 text-base-100 leading-relaxed bg-paper font-mono tracking-tight" "max-w-200 m-2 md:m-8 text-sm md:text-lg p-6 md:p-12 flex flex-col gap-4 md:gap-8 text-base-100 leading-relaxed bg-paper font-mono tracking-tight"
} }
> >
Hi. Hi.
@@ -799,16 +800,18 @@ function AttributionSection() {
> >
CS50W CS50W
</a>{" "} </a>{" "}
capstone, one I kept postponing until I ran out of reasons not to. capstone&mdash;one I kept postponing until I ran out of excuses.
When I eventually sat down to build, I knew it had to be more than a When I sat down to build it, it felt heavier than a typical assignment&mdash;not just because things were difficult. It had to be something that outlasted the grade.
deadline; it had to be something that outlasted the grade. I wanted I wanted to make this one count more than anything else I'd ever made. Something as close to perfect as I could get it. Something to be remembered for&mdash;a Swan Song if you will.
to create a space for the feelings we usually keep to ourselves and
every hour spent on it was worth it. I've shared the edges of{" "}
<Logo type={"inline"} /> here, but the heart of it is best found by
exploring it yourself.
</p> </p>
<p> <p>
I kept coming back to{" "} So, I gave it all I've got.
</p>
<p>
Of course, frustrations, id-exisi crises, crept in from time to time. But <Logo type="inline" /> helped me re-kindle the love for the odd hours spent obsessing over the tiniest UX decisions and endlessly polishing the UI <span className="font-hand">(only if I could've just made my mind up on one design system sooner, instead of paddling in a sea of muses, muses everywhere)</span>. I know I've shared the nuts and bolts of <Logo type={"inline"} /> here&mdash;the core philosophies, how it all works&mdash;but the heart of it is really something you have to find by exploring it yourself.
</p>
<p>
The "why" behind all of this didn't just appear out of nowhere. For a while, I kept coming back to{" "}
<span <span
role="tooltip" role="tooltip"
className="cursor-default ul-wavy text-accent" className="cursor-default ul-wavy text-accent"
@@ -838,34 +841,27 @@ function AttributionSection() {
> >
The Lunchbox The Lunchbox
</a>{" "} </a>{" "}
&mdash;{" "} &mdash;
<span className="italic"> brought to life with such subtle brilliance by Irrfan Khan <PeaceIcon className="inline text-accent" />
one of the most subtle yet brilliant portrayals by Irrfan Khan &mdash;the quiet emotional weight he carries through a lonely and mechanized life, right up until those letters arrive and something inside him finally loosens. The ending feels like a deep sigh of "it is what it is," but the simple act of writing&mdash;of letting the unsaid out&mdash;offered him a brief, yet necessary ease. I think about that a lot.
</span>{" "}
&mdash; the quiet emotional weight he carries throughout the film,
going through the motions of a lonely life, until those letters
arrive and something inside him finally loosens. Of course, the
ending felt like a deep sigh of "it is what it is". But something
about the act of writing and letting the unsaid out eased it, even
briefly. I think about that a lot.
</p> </p>
<p> <p>
There's a lot that goes{" "} There's a lot that goes{" "}
<span className={"text-primary font-hand text-lg md:text-xl"}> <span className={"text-primary font-hand text-lg md:text-xl"}>
unsaid unsaid
</span>{" "} </span>{" "}
now. Not that people feel less or for the lack of time, but because these days. Not for a lack of feeling, not for the lack of time, but because
the ways we reach each other have quietly changed. We're always the ways we reach each other have quietly changed. We're always
reachable <span className="italic">digitally,</span> yet somehow the reachable <span className="italic">digitally,</span> yet somehow the
things that matter most end up staying inside. things that actually matter most end up staying inside&mdash;a trapped one at that.
<br /> <br />
Maybe writing will help with that. Maybe something about putting Maybe writing can/will help. Maybe putting
words somewhere deliberate makes them feel less like something words somewhere deliberate makes them feel less like a weight
you're carrying. you're carrying alone.
</p> </p>
<p>Or maybe it won't, but it's worth a try.</p> <p>Or maybe it won't&mdash;but it's worth a try.</p>
<p> <p>
<Logo type={"inline"} /> is for that try. I hope it helps. <Logo type={"inline"} /> is for that try. I hope it helps. Really.
</p> </p>
<p <p
className={ className={
@@ -874,6 +870,9 @@ function AttributionSection() {
> >
&mdash; Ram &mdash; Ram
</p> </p>
<p className="text-xs md:text-sm opacity-75 italic">
P.S. And just so we're clear&mdash;I wrote every word of this myself&mdash;as I continue to back <a href="https://em-dash-appreciation.org/" target="_blank" rel="noopener noreferrer">Em DASH</a>. Why should AI get to have all the fun with 'em em dashes? <span className="font-hand">(get it?)</span>
</p>
</div> </div>
<blockquote className="text-primary/50 italic mt-8 md:mt-12 mx-auto border-l-primary/20 leading-relaxed border-l pl-4 max-w-11/12 text-lg"> <blockquote className="text-primary/50 italic mt-8 md:mt-12 mx-auto border-l-primary/20 leading-relaxed border-l pl-4 max-w-11/12 text-lg">
"I think we forget things if there is nobody to tell them." "I think we forget things if there is nobody to tell them."