chore: update about page content
This commit is contained in:
me
@@ -10,6 +10,7 @@ import {
|
||||
LockLaminatedIcon,
|
||||
LockOpenIcon,
|
||||
PasswordIcon,
|
||||
PeaceIcon,
|
||||
PersonArmsSpreadIcon,
|
||||
PersonIcon,
|
||||
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">
|
||||
S'more Specs
|
||||
</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">
|
||||
<Logo type={"inline"} /> uses{" "}
|
||||
<span className="text-accent font-mono">Zero Knowledge</span>{" "}
|
||||
@@ -230,31 +231,31 @@ function SpecsSection() {
|
||||
ncryption
|
||||
</span>
|
||||
</span>
|
||||
</span>{" "}
|
||||
with{" "}
|
||||
<span className="font-mono text-primary">Envelope Encryption</span>
|
||||
</span>{" "} for your letters, 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.
|
||||
</h2>
|
||||
<p className="text-sm md:text-xl leading-relaxed">
|
||||
This means, both the encryption and decryption runs on your device, in
|
||||
your browser.
|
||||
<br />
|
||||
Every letter has a{" "}
|
||||
This means, both the encryption and decryption runs on your device, in your browser.
|
||||
<ul className="list-decimal list-inside opacity-60 marker:text-primary marker:font-mono marker:text-base">
|
||||
<li>Every letter has a{" "}
|
||||
<span className="font-mono text-primary">unique key</span> which is
|
||||
derived from your original password.
|
||||
<br />
|
||||
Both the letter and the key are encrypted securely and sent to the
|
||||
derived from your original password.</li>
|
||||
<li>Both the letter and the key are encrypted securely and sent to the
|
||||
server.
|
||||
<br />
|
||||
</li>
|
||||
<li>
|
||||
Now, the server holds{" "}
|
||||
<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">another locked box</span>{" "}
|
||||
with a key inside that unseals your letter. But you,{" "}
|
||||
<span className="italic text-primary">only you</span>, hold the only
|
||||
thing that opens the box —{" "}
|
||||
<span className="text-primary font-bold">another locked box</span>—with a key inside that unseals your letter.
|
||||
</li>
|
||||
</ul>
|
||||
But you—
|
||||
<span className="italic">only you</span>—hold the very
|
||||
thing that opens that box,{" "}
|
||||
<span className="font-mono text-accent">your password</span>.
|
||||
</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.
|
||||
<br />
|
||||
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)}>
|
||||
<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>
|
||||
</Modal>
|
||||
|
||||
<p className="text-sm md:text-lg">
|
||||
This level of privacy comes with a catch.{" "}
|
||||
<span className="text-error font-bold">No password reset.</span>
|
||||
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> for you.
|
||||
</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
|
||||
on the server. Which means if it's lost, the letters stay sealed
|
||||
forever.
|
||||
on the server. Which means, if it's lost, the letters stay sealed
|
||||
foreeeeveer.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -314,7 +315,7 @@ function OSSSection() {
|
||||
</h1>
|
||||
<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">
|
||||
<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
|
||||
take anyone's word for it.
|
||||
</p>
|
||||
@@ -323,7 +324,7 @@ function OSSSection() {
|
||||
<span className="uppercase font-bold text-primary">Self-host</span>{" "}
|
||||
<Logo type={"inline"} /> in just 4 steps.
|
||||
</p>
|
||||
<div className="mockup-code w-full text-xs">
|
||||
<div className="mockup-code max-w-110 text-xs">
|
||||
<pre data-prefix="$">
|
||||
<code>git clone https://git.ramvignesh.dev/me/pi-ku.git</code>
|
||||
</pre>
|
||||
@@ -345,7 +346,7 @@ function OSSSection() {
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary"
|
||||
>
|
||||
View on GitHub
|
||||
View Source
|
||||
</a>
|
||||
<p className="text-xs md:text-base opacity-70">
|
||||
Found something to report or request?{" "}
|
||||
@@ -783,7 +784,7 @@ function AttributionSection() {
|
||||
<div className="flex flex-col items-center shrink-0">
|
||||
<div
|
||||
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.
|
||||
@@ -799,16 +800,18 @@ function AttributionSection() {
|
||||
>
|
||||
CS50W
|
||||
</a>{" "}
|
||||
capstone, one I kept postponing until I ran out of reasons not to.
|
||||
When I eventually sat down to build, I knew it had to be more than a
|
||||
deadline; it had to be something that outlasted the grade. I wanted
|
||||
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.
|
||||
capstone—one I kept postponing until I ran out of excuses.
|
||||
When I sat down to build it, it felt heavier than a typical assignment—not just because things were difficult. It had to be something that outlasted the grade.
|
||||
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—a Swan Song if you will.
|
||||
</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—the core philosophies, how it all works—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
|
||||
role="tooltip"
|
||||
className="cursor-default ul-wavy text-accent"
|
||||
@@ -838,34 +841,27 @@ function AttributionSection() {
|
||||
>
|
||||
The Lunchbox
|
||||
</a>{" "}
|
||||
—{" "}
|
||||
<span className="italic">
|
||||
one of the most subtle yet brilliant portrayals by Irrfan Khan
|
||||
</span>{" "}
|
||||
— 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.
|
||||
—
|
||||
brought to life with such subtle brilliance by Irrfan Khan <PeaceIcon className="inline text-accent" />
|
||||
—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—of letting the unsaid out—offered him a brief, yet necessary ease. I think about that a lot.
|
||||
</p>
|
||||
<p>
|
||||
There's a lot that goes{" "}
|
||||
<span className={"text-primary font-hand text-lg md:text-xl"}>
|
||||
unsaid
|
||||
</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
|
||||
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—a trapped one at that.
|
||||
<br />
|
||||
Maybe writing will help with that. Maybe something about putting
|
||||
words somewhere deliberate makes them feel less like something
|
||||
you're carrying.
|
||||
Maybe writing can/will help. Maybe putting
|
||||
words somewhere deliberate makes them feel less like a weight
|
||||
you're carrying alone.
|
||||
</p>
|
||||
<p>Or maybe it won't, but it's worth a try.</p>
|
||||
<p>Or maybe it won't—but it's worth a try.</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
|
||||
className={
|
||||
@@ -874,6 +870,9 @@ function AttributionSection() {
|
||||
>
|
||||
— Ram
|
||||
</p>
|
||||
<p className="text-xs md:text-sm opacity-75 italic">
|
||||
P.S. And just so we're clear—I wrote every word of this myself—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>
|
||||
<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."
|
||||
|
||||
Reference in New Issue
Block a user