feat(): rework discord profile, add some easter-eggs

src/components/Header.tsx

@@ -11,6 +11,7 @@ export const Header = () => {
     const { t, i18n: { changeLanguage, language } } = useTranslation();
     const [currentLanguage, setCurrentLanguage] = useState(language);
     const [clock, setClock] = useState(getTimeFormat(currentLanguage));
+    const [clickCount, setClickCount] = useState(0);
 
     useEffect(() => {
         setClock(getTimeFormat(currentLanguage));
@@ -18,6 +19,14 @@ export const Header = () => {
         return () => clearInterval(_);
     }, [currentLanguage]);
 
+    useEffect(() => {
+        if (clickCount > 4) {
+            setClickCount(0);
+            setCurrentLanguage('sigma');
+            changeLanguage('sigma');
+        }
+    }, [clickCount, changeLanguage]);
+
 
     const handleChangeLanguage = () => {
         const newLanguage = currentLanguage === "en" ? "pl" : "en";
@@ -25,9 +34,13 @@ export const Header = () => {
         changeLanguage(newLanguage);
     }
 
+    const easterEgg = () => {
+        setClickCount(prev => prev+1);
+    }
+
     return <div className='sticky flex flex-col gap-24 top-4 select-none'>
         <div className='p-4 border-1 border-[#757575] rounded-xl flex flex-col md:flex-row grow justify-around bg-[#1C1C1C]'>
-            <h1 className='text-white'>{t('header.home')}</h1>
+            <h1 className='text-white' onClick={easterEgg}>{t('header.home')}</h1>
 
             <h1 className='text-white'>{clock}</h1>
             <h1 className='text-white'>

src/components/Whoami.tsx

@@ -1,12 +1,40 @@
 import { useTranslation } from 'react-i18next'
-import { useLanyardWS } from 'use-lanyard';
+import { useLanyardWS, Activity as TActivity } from 'use-lanyard';
+import { DiscordWhoamiIcon, GameWhoamiIcon, SpotifyWhoamiIcon, StatusDoNotDisturb, StatusIdle, StatusOffline, StatusOnline, VscodeWhoamiIcon } from './Icons.tsx';
 // import data from '../data.ts';
 
 const colors = {
-    online: 'text-green-600',
-    idle: 'text-yellow-500',
-    dnd: 'text-red-500',
-    offline: 'text-gray-500',
+    online: StatusOnline,
+    idle: StatusIdle,
+    dnd: StatusDoNotDisturb,
+    offline: StatusOffline,
+}
+
+const code = ['Code', 'Intellij', 'Jetbrains']
+
+const Activity = ({ data }: { data: TActivity }) => {
+    if (code.some(x => data.name.includes(x)))
+        return <div className="flex flex-row">
+            <div className="flex flex-col justify-center pr-4">
+                <VscodeWhoamiIcon />
+            </div>
+            <div className="flex flex-col justify-center">
+                <h1 className='text-lg font-light'>{data.name}</h1>
+                {data.state && <p className='text-sm font-light text-zinc-300'>{data.state}</p>}
+                {data.details && <p className='text-sm font-light text-zinc-300'>{data.details}</p>}
+            </div>
+        </div>
+
+    return <div className="flex flex-row">
+        <div className="flex flex-col justify-center pr-4">
+            <GameWhoamiIcon />
+        </div>
+        <div className="flex flex-col justify-center">
+            <h1 className='text-lg font-light'>{data.name}</h1>
+            {data.state && <p className='text-sm font-light text-zinc-300'>{data.state}</p>}
+            {data.details && <p className='text-sm font-light text-zinc-300'>{data.details}</p>}
+        </div>
+    </div>;
 }
 
 export const Whoami = () => {
@@ -17,46 +45,62 @@ export const Whoami = () => {
     });
 
     const customStatus = data && data.activities.find(x => x.id === 'custom');
+    const StatusActivity = data && colors[data.discord_status];
 
-
-
-    return <div className="flex flex-col md:flex-row gap-4 ">
-        <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
-            <h1 className='text-xl font-bold'>{t('landing.title')}</h1>
-
-            <p className='font-light'>{t('landing.whoami')}</p>
+    return <div className="flex flex-col md:flex-row gap-4">
+        <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-3xs'>
+            <h1 className='font-bold text-xl'>{t('landing.title')}</h1>
+            <p className='font-light'>{t('landing.desc1')}</p>
+            <p className='font-light'>{t('landing.desc2')}</p>
+            <p className='font-light'>{t('landing.desc3')}</p>
         </div>
 
-        { data && <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
+        {data && <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
             <div className="flex flex-row gap-6">
-                <div className="flex-col justify-center hidden md:flex">
-                    <img src="https://www.alekswilc.dev/avatar.jpg" alt="avatar" className='max-w-42 rounded-xl' />
-                </div>
-                 <div className='flex flex-col justify-center'>
-                    <h1 className='text-xl font-bold'>{data.discord_user.global_name} - <span className={colors[data.discord_status]}>{t(`landing.discord.status.${data.discord_status}`)}</span></h1>
+                <div className="flex flex-row w-full">
+                    <div className="flex-col justify-center hidden md:flex pr-6">
+                        <img src="https://www.alekswilc.dev/avatar.jpg" alt="avatar" className='max-w-24 rounded-xl' />
+                    </div>
+                    <div className='flex flex-col justify-center'>
+                        <div className="flex flex-row">
+                            <h1 className='text-xl font-bold'>{data.discord_user.global_name}</h1>
+                            <div className="flex flex-col justify-center pl-2">
+                                {StatusActivity && <StatusActivity />}
+                            </div>
+                        </div>
+                        {customStatus && <p className='font-extralight text-zinc-300'>{customStatus.state}</p>}
+                    </div>
 
-                    <div className="flex flex-col justify-center">
-
-                        { customStatus && <p className='font-extralight text-zinc-300'>{customStatus.state}</p> }
-                        
-                        {
-                            data.spotify &&
-                            <>
-                                <p className='font-bold'>{t("landing.discord.listening")}</p>
-                                <p className='font-light'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
-                            </>
-                        }
-                        {
-                            data.activities.filter(x => x.name !== 'Spotify' && x.id !== 'custom').sort((a, b) => a.state ? b.state ? 1 : -1 : -1).map((activity) =>
-                                <>
-                                    <p className='font-bold'>{t("landing.discord.playing", { app: `${activity.name}${activity.state ? ':' : ''}` })}</p>
-                                    {activity.details && <p className='font-light'>{activity.state ? `${activity.state} - ${activity.details}` : activity.details }</p>}
-                                </>
-                            )
-                        }
+                    <div className="flex ml-auto mb-auto">
+                        <DiscordWhoamiIcon />
                     </div>
                 </div>
             </div>
-        </div> }
+            <div className='border-t-1 border-t-[#757575] w-full mt-4 mb-4' />
+            {data.discord_status === 'offline' && <div className="flex flex-col justify-center text-center items-center">
+                <h1>{t('landing.discord.offline')}</h1>
+            </div>}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-2 pb-2 ">
+                {
+                    data.spotify &&
+                    <div className="flex flex-row">
+                        <div className="flex flex-col justify-center pr-4">
+                            <SpotifyWhoamiIcon />
+                        </div>
+                        <div className="flex flex-col justify-center">
+                            <h1 className='text-lg font-light'>{t("landing.discord.listening")}</h1>
+                            <p className='text-sm font-light text-zinc-300'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
+                        </div>
+                    </div>
+                }
+                {
+                    data.activities.filter(x => x.name !== 'Spotify' && x.id !== 'custom').sort((a, b) => a.state ? b.state ? 1 : -1 : -1).map((activity, i) =>
+                        <Activity data={activity} key={i} />
+                    )
+                }
+
+
+            </div>
+        </div>}
     </div>;
 }

src/i18n/en.json

@@ -4,7 +4,9 @@
     },
     "landing": {
         "title": "Hi 👋 I’m Aleksander Wilczyński",
-        "whoami": "I am an IT administrator with experience in network infrastructure management and full-stack web application development. I create tools for Windows and Linux systems, as well as scripts for games. My interests include military, firearms, and emergency medical rescue.",
+        "desc1": "I'm an IT admin with a battle-tested background in network infrastructure and full-stack web dev. I roll deep in Windows and Linux environments, building custom tools and automations — from hardcore sys stuff to slick game-side scripts.",
+        "desc2": "I code in TypeScript, JavaScript, Go, and straight-up C when I need full control and raw performance. I’ve wrangled servers, spun up containers, lived in Git, and locked down networks like a digital fortress.",
+        "desc3": "When I’m not in the console, I’m into military gear, firearms, and tactical combat care. Studying TCCC, survival tactics, and crisis response — staying mission-ready on all fronts. I bring the same precision and mindset to IT as I do to real-world ops: fast, reliable, and no room for failure.",
         "skills": {
             "title": "My Skills 🎓",
             "languages": "Languages:",
@@ -38,16 +40,9 @@
             "support": "Contact support: support@alekswilc.dev"
         },
         "discord": {
-            "profile": "Discord Profile",
-            "listening": "Listening to:",
+            "listening": "Listening to",
             "song": "{{song}} by {{artist}}",
-            "playing": "Playing {{app}}",
-            "status": {
-                "online": "Online",
-                "idle": "Idle",
-                "dnd": "Do not disturb",
-                "offline": "Offline"
-            }
+            "offline": "Offline..."
         }
     }
 }

src/i18n/i18n.ts

@@ -4,6 +4,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
 
 import en from './en.json';
 import pl from './pl.json';
+import sigma from './sigma.json';
 
 
 i18n
@@ -16,6 +17,9 @@ i18n
             },
             en: {
                 "_": en,
+            },
+            sigma: {
+                "_": sigma,
             }
         },
         debug: false,

src/i18n/pl.json

@@ -4,7 +4,10 @@
     },
     "landing": {
         "title": "Hej 👋 jestem Aleksander Wilczyński",
-        "whoami": "Jestem administratorem IT z doświadczeniem w zarządzaniu infrastrukturą sieciową oraz programowaniu aplikacji webowych w zakresie full stack. Tworzę narzędzia dla systemów Windows i Linux, a także skrypty do gier. Moje zainteresowania obejmują tematykę militarną, broń oraz ratownictwo medyczne.",
+        "desc1": "Jestem administratorem IT z doświadczeniem w zarządzaniu infrastrukturą sieciową oraz tworzeniu full-stackowych aplikacji webowych. Pracuję na systemach Windows i Linux, tworzę narzędzia systemowe oraz automatyzacje, zarówno użytkowe, jak i do zastosowań gamingowych.",
+        "desc2": "Specjalizuję się w programowaniu w języku TypeScript, JavaScript, GO czy C, szczególnie tam, gdzie liczy się wydajność i niskopoziomowy dostęp do systemu. Mam doświadczenie z serwerami, konteneryzacją, Gitem oraz zagadnieniami związanymi z bezpieczeństwem sieci i systemów.",
+        "desc3": "Po godzinach pasjonuję się tematyką militarną, strzelectwem i ratownictwem taktycznym. Zgłębiam procedury TCCC, techniki przetrwania i reagowania w sytuacjach kryzysowych. Staram się łączyć techniczne myślenie z praktycznym podejściem do działania — zarówno w świecie IT, jak i poza nim.",
+        
         "skills": {
             "title": "Moje umiejętności 🎓",
             "languages": "Języki:",
@@ -38,16 +41,9 @@
             "support": "Skontaktuj się z supportem: support@alekswilc.dev"
         },
         "discord": {
-            "profile": "Profil Discord",
-            "listening": "Słucham:",
+            "listening": "Słucham",
             "song": "{{song}} od {{artist}}",
-            "playing": "Gram w {{app}}",
-            "status": {
-                "online": "Online",
-                "idle": "Zaraz wracam",
-                "dnd": "Nie przeszkadzać",
-                "offline": "Offline"
-            }
+            "offline": "Niedostępny..."
         }
     }
 }

src/i18n/sigma.json

@@ -0,0 +1,48 @@
+{
+    "header": {
+        "home": "SIGMA MODE"
+    },
+    "landing": {
+        "title": "Yo 👊 I’m Aleksander Wilczyński",
+        "desc1": "I run IT like an operator — built tough through real-world network battles and full-stack deployments. Windows, Linux, you name it — I build tools that do work, no fluff, no excuses. From backend beasts to scripts that power the game.",
+        "desc2": "I code in TypeScript, JavaScript, Go, and raw C when performance needs muscle. Servers? Tamed. Containers? Deployed. Git? Mastered. Security? Locked down like a vault. I don’t just write code — I dominate systems.",
+        "desc3": "Outside the digital trenches, I train for real-world chaos — firearms, tactical gear, TCCC, survival. Crisis? I don’t freeze. I respond. Same mindset in code and life: precise, prepared, unfazed. Always in control.",
+        "skills": {
+            "title": "My Arsenal 🎯",
+            "languages": "Battle-tested languages:",
+            "tools": "Tools of the trade:",
+            "softskills": {
+                "title": "Operator traits:",
+                "adaptability": "Unshakable Adaptability",
+                "problem_solving": "Strategic Problem Solving",
+                "creativity": "Tactical Creativity",
+                "time_managment": "Time Under Control",
+                "hard_work": "Relentless Work Ethic"
+            },
+            "more": "... and more firepower"
+        },
+        "projects": {
+            "title": "Ops I've Run",
+            "projects": {
+                "simrailpro": {
+                    "title": "simrail.pro",
+                    "descripton": "SimRail Stats – the top-tier intel hub for SimRail logs and stats. No BS, just data."
+                },
+                "cocorp": {
+                    "title": "CoCoRP",
+                    "descripton": "FiveM RP server — built for immersion, run like a unit."
+                }
+            }
+        },
+        "contact": {
+            "title": "Reach Out",
+            "email": "Drop the line: aleks@wilczynski.me",
+            "support": "Hit up support: support@alekswilc.dev"
+        },
+        "discord": {
+            "listening": "Locked in to",
+            "song": "{{song}} by {{artist}}",
+            "offline": "Off Grid... probably out rizzing while patching firewalls."
+        }
+    }
+}