From fe94047f1858d25005df31cefd2f4df86eec7884 Mon Sep 17 00:00:00 2001 From: me Date: Thu, 7 May 2026 04:06:36 +0530 Subject: [PATCH] feat: update About page design and content --- frontend/src/components/Logo.tsx | 80 ++++---- frontend/src/index.css | 2 +- frontend/src/pages/About.tsx | 310 ++++++++++++++++++++----------- 3 files changed, 239 insertions(+), 153 deletions(-) diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx index 592ab9d..27151c5 100644 --- a/frontend/src/components/Logo.tsx +++ b/frontend/src/components/Logo.tsx @@ -2,51 +2,47 @@ import { DotIcon } from "@phosphor-icons/react"; import "@fontsource/knewave/400.css"; interface LogoProps { - scale?: number; - type?: "inline" | "mono" | "logo"; + scale?: number; + type?: "inline" | "mono" | "logo"; } export default function Logo({ scale = 1, type = "logo" }: LogoProps) { - if (type === "inline") { - return ( - - pi. ku - .  - - ); - } - - if (type === "mono") { - return ( - - pi. ku. - - ); - } - + if (type === "inline") { return ( -
- Pi - -  Ku - -
+ + pi. ku + .  + ); + } + + if (type === "mono") { + return ( + + pi. ku. + + ); + } + + return ( +
+ Pi + +  Ku + +
+ ); } diff --git a/frontend/src/index.css b/frontend/src/index.css index b3c90e9..ad4bb7c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -21,7 +21,7 @@ --color-accent: oklch(55% 0.06 325); --color-accent-content: oklch(18% 0.03 295); - --color-neutral: oklch(28% 0.02 45); + --color-neutral: oklch(38% 0.02 45); --color-neutral-content: oklch(80% 0.015 60); --color-info: oklch(60% 0.07 240); diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index bbf30d8..d84791c 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -4,8 +4,10 @@ import { ArrowBendDownRightIcon, ArrowRightIcon, CaretUpIcon, + DetectiveIcon, FlowerTulipIcon, GhostIcon, + GithubLogoIcon, InfoIcon, LockLaminatedIcon, LockOpenIcon, @@ -91,16 +93,17 @@ function PrivacySection() { weight="bold" /> -
+

Your letters.{" "} Nobody else's.

-

- When you write something here, it gets encrypted in your browser - before anything leaves your device. What reaches the server isn't your - letter. It's something unreadable — and the server has no way to - change that, because the key never left you. +

+ When you write or upload anything{" "} + (yes, even images) here, it gets + encrypted in your browser before anything leaves your device. What + reaches the server is something unreadable—and the server has no + way to change that, because the key never left you.

@@ -205,21 +208,23 @@ function SpecsSection() { return (
-

- S'more Specs +

+ S'more  + + Specs

-
+

uses{" "} Zero Knowledge{" "} - + E - nd  + nd— 2 -   + — E @@ -231,34 +236,66 @@ function SpecsSection() { ncryption - {" "} for your letters, with{" "} - Envelope Encryption for the keys. + {" "} + for your letters, with{" "} + + Envelope Encryption + {" "} + for the keys.

- This means, both the encryption and decryption runs on your device, in your browser. -

    -
  • Every letter has a{" "} - unique key which is - derived from your original password.
    • -
  • Both the letter and the key are encrypted securely and sent to the + This means, both the{" "} + encryption and{" "} + decryption runs on + your device, in your browser. +
      +
    • + Every letter has a{" "} + + unique key + {" "} + which is derived from your original password. +
      • +
    • + Both the letter and the key are encrypted securely and sent to the server.
    • Now, the server holds{" "} - the envelope,{" "} - the seal and{" "} - another locked box—with a key inside that unseals your letter. + the envelope,{" "} + the seal and{" "} + + another locked box + + —with a key inside that unseals your letter.
    But you— - only you—hold the very - thing that opens that box,{" "} + only you—hold the very thing + that opens that box,{" "} your password.

    - Nothing on the server is readable without your actual password. -
    - Even if someone were to breach in, all they'd find is encrypted noise. + + Nothing on the server is readable without your actual password. +
    + Even if someone were to breach in, all they'd find is encrypted + noise and ain't no way they crackin' it.{" "} + + (unless this happens) + +     +

    @@ -275,17 +312,23 @@ function SpecsSection() { setIsModalOpen(false)}>
    - pi ku e2e diagram + pi ku e2e diagram

    - Of course, this level of privacy comes with a catch.{" "} - No password reset for you. + Of course, this level of{" "} + privacy comes with a + catch. No password reset{" "} + for you.

    Your original password is never stored - on the server. Which means, if it's lost, the letters stay sealed + on the server. So, if it's forgotten, the letters stay sealed foreeeeveer.

@@ -301,30 +344,33 @@ function OSSSection() { "relative tracking-tighter text-4xl md:text-8xl text-neutral-content/80 font-extrabold italic font-serif text-center" } > - - only for -
- your letters - - - is{" "} - + + is{" "} +  private {" "} - open source ! + + only for +  your letters {" "} + + + + open source ! -
+

- is fully open source. Every claim about privacy - and encryption is publicly available in the code so you don't have to - take anyone's word for it. + is + ...uhhh... pretty + secure. Every claim + about privacy and encryption is publicly available in the code so you + don't have to take my word at it.

You can also{" "} - Self-host{" "} + Self-host{" "} in just 4 steps.

-
+ 
                         git clone https://git.ramvignesh.dev/me/pi-ku.git
@@ -344,10 +390,11 @@ function OSSSection() { href="https://git.ramvignesh.dev/me/pi-ku" target="_blank" rel="noopener noreferrer" - className="text-primary" + className="text-primary flex items-center gap-2" > - View Source + View Source + .

Found something to report or request?{" "} wouldn't exist without the work of people who chose to build in the open.

- +

a big thanks to

Web Crypto API - {" "} - — the backbone of everything promised. Browser-native - cryptography that runs entirely on your device. Without it, none of - the privacy here would be possible — or credible. + + : Browser-native cryptography that runs entirely on your device. The + backbone of everything secure—your letters, keys—here.

@@ -407,14 +453,14 @@ function OSSSection() { rel="noopener noreferrer" > Phosphor Icons - {" "} - — the beautiful work by others that let me focus on the core - experience. + + : The brilliant work by others that let me focus on the core + experience instead of re-inventing the wheel.

-

- Open source is what made this possible. It felt right to give it back - the same way. +

+ Open source is what made possible. It always + feels right to give it back the same way.

@@ -436,7 +482,7 @@ function StorySection() {
-
+
+
@@ -494,13 +540,14 @@ function StorySection() {

is an abbreviated transliteration of the Tamil word for{" "} - . - {" "} - — the thing you add after you've already signed your name, - what you write when you thought you were finished, but weren't. + {" "} + —the thing you add after you've already signed your name, what + you write when you thought you were finished, but weren't.

@@ -534,15 +581,16 @@ function StorySection() { It sits in drafts , in half-written notes, in the pause before we change the subject.
Those words{" "} - don't just disappear. They - {" "} - stay unsaid{" "} - — a quiet weight difficult to bear. + {" "} + stay unsaid + —a quiet weight difficult to bear.

And that's okay...

@@ -567,15 +615,15 @@ function ForWhoSection() { Who is
this for? -

+

wasn't built for one kind of person, but a - particular kind of feeling — + particular kind of feeling— {" "} the one that lingers very quietly {" "} - — fragile, yet never breaks. + —fragile, yet never breaks.

@@ -604,7 +652,7 @@ function ArchetypesSection() { > The Archetypes -
+

Not every letter is about distance. Sometimes you just need to - say something properly — without a text thread, without - the noise of a conversation already in motion. A letter slows it + say something properly—without a text thread, without the + noise of a conversation already in motion. A letter slows it down.

@@ -684,7 +732,7 @@ function ArchetypesSection() {

- Not a journal. Not a note-to-self. A proper letter — to + Not a journal. Not a note-to-self. A proper letter—to whoever you'll be in a year, or five, or ten.
Ask yourself of the healed wounds, forgotten fears, or the @@ -725,11 +773,14 @@ function ArchetypesSection() { 04

-
+
+
); @@ -754,7 +805,7 @@ function AttributionSection() { const navigate = useNavigate(); return ( -
+
{/* Saajan hover image */} {hover.visible && ( @@ -776,7 +827,7 @@ function AttributionSection() {

Honest Speak @@ -784,7 +835,7 @@ function AttributionSection() {
Hi. @@ -801,17 +852,31 @@ function AttributionSection() { CS50W {" "} 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. + 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. +

+

So, I gave it all I've got.

+

+ Of course, frustrations, id-exisi crises, crept in from time to + time. But helped me re-kindle the love for + the odd hours spent obsessing over the tiniest UX decisions and + endlessly polishing the UI{" "} + + (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) + + . I know I've shared the nuts and bolts of {" "} + here—the core philosophies, how it all works—but the + heart of it is really something you have to find by exploring it + yourself.

- So, I gave it all I've got. -

-

- Of course, frustrations, id-exisi crises, crept in from time to time. But helped me re-kindle the love for the odd hours spent obsessing over the tiniest UX decisions and endlessly polishing the UI (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). I know I've shared the nuts and bolts of here—the core philosophies, how it all works—but the heart of it is really something you have to find by exploring it yourself. -

-

- The "why" behind all of this didn't just appear out of nowhere. For a while, I kept coming back to{" "} + The "why" behind all of this didn't just appear out of nowhere. For + a while, I kept coming back to{" "} {" "} from{" "} The Lunchbox {" "} - — - brought to life with such subtle brilliance by Irrfan Khan - —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. + —brought to life with such subtle brilliance by{" "} + + Irrfan Khan + {" "} + + —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.

There's a lot that goes{" "} unsaid {" "} - 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 digitally, yet somehow the - things that actually matter most end up staying inside—a trapped one at that. + 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 digitally, yet + somehow the things that actually matter most end up staying + inside—a trapped one at that.
- Maybe writing can/will help. Maybe putting - words somewhere deliberate makes them feel less like a weight - you're carrying alone. + Maybe writing can/will help. Maybe putting words somewhere + deliberate makes them feel less like a weight you're carrying alone.

Or maybe it won't—but it's worth a try.

@@ -868,15 +948,25 @@ function AttributionSection() { "text-right font-hand text-base-content text-lg md:text-xl" } > - — Ram + —Ram

-

- P.S. And just so we're clear—I wrote every word of this myself—as I continue to back Em DASH. Why should AI get to have all the fun with 'em em dashes? (get it?) +

+ P.S. And just so we're clear—I wrote every word of this + myself—as I continue to back{" "} + + Em DASH + + . Why should AI get to have all the fun with 'em em dashes?{" "} + (get it?)

-
+
"I think we forget things if there is nobody to tell them." - + ~ Saajan Fernandes, The Lunchbox
@@ -885,7 +975,7 @@ function AttributionSection() {