Add notes & card styling

Signed-off-by: Hadi <hadi@example.com>

src/components/NoteGraph.svelte

@@ -269,6 +269,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y_no_interactive_element_to_noninteractive_role -->
 <canvas
   bind:this={canvas}
   height="190"

src/components/NoteVars.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
 
   interface Props {
     vars: string[];
@@ -8,7 +8,7 @@
   const { vars }: Props = $props();
 
   let values = $state<Record<string, string>>(
-    Object.fromEntries(vars.map((v) => [v, ""])),
+    untrack(() => Object.fromEntries(vars.map((v) => [v, ""]))),
   );
   let open = $state(false);
   let applied = $state(false);
@@ -71,12 +71,14 @@
           {#each vars as v}
             <div class="flex items-center gap-3">
               <label
+                for={`var-${v}`}
                 class="font-mono text-xs text-primary/70 w-36 shrink-0 truncate"
                 title={`$${v}`}
               >
                 ${v}
               </label>
               <input
+                id={`var-${v}`}
                 type="text"
                 bind:value={values[v]}
                 placeholder={`$${v}`}

src/content/notes/osint/information-gathering.md

@@ -0,0 +1,68 @@
+---
+title: "Information Gathering"
+description: "Essential cybersecurity cheatsheet for Information Gathering and Open Source Intelligence (OSINT). Discover data related to emails, domains, usernames, and images using both command line and online tools."
+tags: ["osint", "enumeration", "information-gathering"]
+publishDate: 2026-05-03
+---
+
+**Information Gathering**, often referred to as **Open Source Intelligence (OSINT)** in the context of ethical hacking, is the systematic collection and analysis of publicly available data about a target, providing the foundational knowledge necessary to identify potential vulnerabilities and craft targeted security assessments.
+
+## Command line tools
+
+| **From**  | **Use**                                                                                         |
+| --------- | ----------------------------------------------------------------------------------------------- |
+| Email     | `holehe $email`                                                                                 |
+|           | `ghunt email $email` (for google account)                                                       |
+|           | `github-recon $email` ([link](http://github.com/anotherhadi/github-recon/), for github account) |
+| Domain    | `theHarvester -d $domain -l 100`                                                                |
+|           | `theHarvester -d $domain -l 100 -b all` (full)                                                  |
+| Username  | `sherlock $username`                                                                            |
+| Image     | `exiftool $imagePath`                                                                           |
+| Instagram | `instaloader profile $username`                                                                 |
+| Github    | `trufflehog github --org=$usernameOrOrg`                                                        |
+|           | `github-recon $username` ([link](http://github.com/anotherhadi/github-recon/))                  |
+
+## Online tools
+
+| **For**    | **Use**                                                |
+| ---------- | ------------------------------------------------------ |
+| Visualiser | [OSINTracker](https://www.osintracker.com/)            |
+| IP         | [Shodan](https://www.shodan.io/)                       |
+|            | [Censys](https://search.censys.io/)                    |
+| Domain     | [Whois](https://www.whois.com/whois/)                  |
+| Name       | [Webmii](https://webmii.com/)                          |
+|            | [BreachDirectory](https://breachdirectory.org/)        |
+|            | [LeakLookup](https://leak-lookup.com/search)           |
+|            | [IntelX](https://intelx.io/)                           |
+|            | [Genealogic.review](https://genealogic.review/)        |
+| SSID       | [Wigle](https://wigle.net/)                            |
+| Image      | [PimEyes (faces)](https://pimeyes.com/)                |
+|            | [Lenso (faces)](https://lenso.ai)                      |
+|            | [TinEye](https://tineye.com)                           |
+|            | [Pic2Map (exif geolocation)](https://www.pic2map.com/) |
+| Username   | [DeHashed](https://dehashed.com/search)                |
+|            | [BreachDirectory](https://breachdirectory.org/)        |
+|            | [IntelX](https://intelx.io/)                           |
+|            | [LeakLookup](https://leak-lookup.com/search)           |
+|            | [Oathnet](https://oathnet.org/)                        |
+| Email      | [DeHashed](https://dehashed.com/search)                |
+|            | [Hunter](https://hunter.io/)                           |
+|            | [HaveIBeenPwned](https://haveibeenpwned.com/)          |
+|            | [BreachDirectory](https://breachdirectory.org/)        |
+|            | [LeakLookup](https://leak-lookup.com/search)           |
+|            | [IntelX](https://intelx.io/)                           |
+|            | [Oathnet](https://oathnet.org/)                        |
+| Phone      | [Epieos](https://epieos.com/)                          |
+| Instagram  | [Dumpor](https://dumpor.io/)                           |
+| Misc       | [Goosint](https://goosint.com/)                        |
+|            | [OSINT Framework](https://osintframework.com/)         |
+|            | [OSINT Dojo](https://osintdojo.com/)                   |
+
+## OSINT Aggregation Tool
+
+<a href="https://iknowyou.hadi.icu" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>IKnowYou</h4>
+    <p>Self-hosted OSINT aggregation platform: Run dozens of open-source intelligence tools against a single target in parallel; all from one clean web interface.</p>
+  </span>
+</a>

src/content/notes/osint/sock-puppets.md

@@ -0,0 +1,83 @@
+---
+title: "Sock Puppets"
+description: "Essential cheatsheet on creating and managing Sock Puppets (fake identities) for ethical security research and Open Source Intelligence (OSINT), focusing on maintaining separation from personal data and bypassing common verification."
+tags: ["osint", "sock-puppets"]
+publishDate: 2026-05-03
+---
+
+Sock puppets are fake identities use to gather information from a target.
+The sock puppet should have no link between your personal information and the fakes ones. (No ip address, mail, follow, etc..)
+
+## Information generation
+
+<a href="https://fakerjs.dev" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Faker</h4>
+    <p>Generate massive amounts of fake data</p>
+  </span>
+</a>
+
+<a href="https://fakenamegenerator.com/" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Fake Name</h4>
+    <p>Personal informations</p>
+  </span>
+</a>
+
+<a href="https://www.thispersondoesnotexist.com/" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>This Person Does Not Exist</h4>
+    <p>Generate fake image</p>
+  </span>
+</a>
+
+## Bypass phone verification
+
+<a href="https://www.smspool.net/" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>SMSPool</h4>
+    <p>Cheapest and Fastest Online SMS verification</p>
+  </span>
+</a>
+
+<a href="https://receive-sms-online.info" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Receive Sms Online</h4>
+    <p>Free SMS verification</p>
+  </span>
+</a>
+
+<a href="https://receivefreesms.net" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Receive Free Sms</h4>
+    <p>Free SMS verification</p>
+  </span>
+</a>
+
+<a href="https://receive-smss.com" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Receive Free Sms</h4>
+    <p>Free SMS verification</p>
+  </span>
+</a>
+
+<a href="https://onlinesim.io/" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Online Sim</h4>
+    <p>SMS verification with free tier</p>
+  </span>
+</a>
+
+<a href="https://sms4stats.com/" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Sms 4 Sats</h4>
+    <p>Paid SMS verification</p>
+  </span>
+</a>
+
+<a href="http://sms4sat6y7lkq4vscloomatwyj33cfeddukkvujo2hkdqtmyi465spid.onion" class="link-card not-prose" target="_blank">
+  <span>
+    <h4>Sms 4 Sats (Onion)</h4>
+    <p>Paid SMS verification. Tor version</p>
+  </span>
+</a>

src/content/notes/osint/tips.md

@@ -0,0 +1,25 @@
+---
+title: "Tips"
+description: "A cheatsheet of practical tips and unconventional methods for Open Source Intelligence (OSINT), focusing on advanced data visualization, information leakage detection, and utilizing web archives for historical data."
+tags: ["osint"]
+publishDate: 2026-05-03
+---
+
+## Visualisation
+
+Use [OSINTracker](https://app.osintracker.com/) to visualise your findings.
+It allows you to create a graph of your findings, which can help you see connections and relationships between different pieces of information.
+
+## Forgotten passwords
+
+To find email addresses and phone numbers associated with an account, you can click on "Forgot password?" on the login page of a website. Be careful, though, this creates notifications and can be detected by the target, and often gives your information away.
+
+## Archive Search
+
+- [Wayback Machine](https://web.archive.org) stores over 618 billion web captures
+- [Archive.ph](https://archive.ph) creates on-demand snapshots, including for JS-heavy sites, with both a functional page and screenshot version
+
+## Bookmarklets
+
+- [K2SOsint/Bookmarklets](https://github.com/K2SOsint/Bookmarklets)
+- [tools.myosint.training](https://tools.myosint.training/)

src/styles/global.css

@@ -39,3 +39,57 @@
 .btn:not(.btn-circle):not(.btn-square) {
   @apply rounded-lg;
 }
+
+@layer components {
+  .link-card {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.875rem;
+    border-radius: var(--radius-box);
+    border: 1px solid oklch(24% 0 0);
+    background: transparent;
+    color: var(--color-base-content);
+    text-decoration: none !important;
+    transition: background 0.15s ease, border-color 0.15s ease;
+    margin-block: 0.25rem;
+  }
+  .link-card::after {
+    content: "↗";
+    margin-left: auto;
+    padding-left: 0.75rem;
+    opacity: 0;
+    color: var(--color-primary);
+    font-size: 0.75rem;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    transform: translate(-4px, 4px);
+    flex-shrink: 0;
+  }
+  .link-card:hover {
+    background: var(--color-base-200);
+    border-color: var(--color-primary);
+  }
+  .link-card:hover::after {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  .link-card span {
+    display: flex;
+    flex-direction: column;
+  }
+  .link-card h4 {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin: 0 0 0.1rem;
+    line-height: 1.2;
+    transition: color 0.15s ease;
+  }
+  .link-card:hover h4 {
+    color: var(--color-primary);
+  }
+  .link-card p {
+    font-size: 0.75rem;
+    margin: 0;
+    line-height: 1.2;
+    color: oklch(52% 0 0);
+  }
+}