Merge pull request #5 from SoGozo/website

Website by Sourav

Author: avinash201199

.github/workflows/placeholder

@@ -0,0 +1 @@
+# placeholder - no CI configured by the automated editor

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+node_modules/
+.env
+
+# Local server PID
+*.pid
+
+.vscode/
+.idea/

CONTRIBUTING.md

@@ -0,0 +1,20 @@
+# Contributing
+
+Thanks for your interest in contributing! Basic workflow:
+
+- Fork the repo, create a branch, make changes, open a PR.
+
+Previewing the website locally:
+
+1. From the repository root run:
+
+```bash
+python3 -m http.server 8000
+```
+
+2. Open http://localhost:8000/index.html
+
+Website deployment branch:
+
+- A branch named `website-pages` is used to host the static site for GitHub Pages. You can create a PR from this branch to `main` or configure Pages to publish from it directly.
+- To preview the site from that branch locally, check out the branch and run the simple HTTP server.

assets/og-image.svg

@@ -0,0 +1,124 @@
+:root{
+  --bg: #0f1720;
+  --card: #0b1220;
+  --muted: #93a3b5;
+  --accent: #7dd3fc;
+  --accent-2: #60a5fa;
+  --glass: rgba(255,255,255,0.03);
+  --radius: 12px;
+  --max-width: 980px;
+  --hf-left:#ff6a00; /* orange */
+  --hf-right:#8b5cf6; /* purple */
+  --bg-dark: #071126;
+}
+
+*{box-sizing:border-box}
+html,body,#content{height:100%;}
+body{
+  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  background: linear-gradient(180deg, #071126 0%, #071b2a 100%);
+  color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
+}
+
+.site{display:flex;min-height:100vh}
+
+/* Top navigation */
+.topnav{background:linear-gradient(90deg,var(--hf-left),var(--hf-right)); color:#fff; padding:12px 20px; position:sticky; top:0; z-index:60; box-shadow:0 6px 24px rgba(11,17,40,0.5)}
+.topnav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
+.topnav .brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px}
+.nav-links{display:flex;gap:18px}
+.nav-links a{color:rgba(255,255,255,0.95); text-decoration:none; padding:8px 10px; border-radius:8px; transition:background .18s ease}
+.nav-links a:hover{background:rgba(255,255,255,0.06)}
+.nav-actions{display:flex;align-items:center;gap:12px}
+.nav-btn{background:transparent;border:0;color:#fff;font-size:1.05rem;cursor:pointer}
+.nav-cta{background:#021025;color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none}
+
+/* Sidebar */
+.sidebar{
+  width:300px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+  border-right:1px solid rgba(255,255,255,0.03); padding:20px; display:flex; flex-direction:column; gap:16px;
+  transition: width .35s cubic-bezier(.2,.9,.2,1), transform .35s ease; position:sticky; top:0; height:100vh; overflow:auto;
+}
+.sidebar.collapsed{width:70px}
+.brand a{font-weight:700; font-size:18px; color:var(--accent); text-decoration:none}
+
+.search-wrapper{position:relative}
+.search-wrapper input{
+  width:100%; padding:10px 36px 10px 12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04);
+  color:var(--muted); border-radius:8px; outline:none; transition:box-shadow .2s ease, transform .12s ease;
+}
+.search-wrapper input:focus{box-shadow:0 6px 20px rgba(96,165,250,0.12); transform:translateY(-1px);}
+.search-ico{position:absolute; right:10px; top:8px; width:20px; height:20px; fill:var(--muted); opacity:.7}
+
+.toc{flex:1; overflow:auto}
+.toc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
+.toc-item a{display:block; padding:8px 10px; color:rgba(255,255,255,0.85); text-decoration:none; border-radius:8px; transition:background .15s ease, color .15s ease, transform .18s cubic-bezier(.2,.9,.2,1)}
+.toc-item a:hover{background:rgba(125,211,252,0.06); color:var(--accent); transform:translateX(4px)}
+.toc-item.toc-h1 a{font-weight:700}
+.toc-item.toc-h2 a{padding-left:14px}
+.toc-item.toc-h3 a{padding-left:26px; font-size:.95em}
+.toc-item.dim a{opacity:.45; transform:none}
+.toc-item a.active{background:linear-gradient(90deg,var(--hf-left),var(--hf-right)); color:#021025; font-weight:700; transform:translateX(2px) scale(1.01)}
+.toc-empty{color:var(--muted); font-style:italic}
+
+.toc-toggle{border:0; background:transparent; color:var(--muted); padding:8px; cursor:pointer}
+.sidebar-footer{display:flex; gap:8px; align-items:center}
+.sidebar-footer .btn{display:inline-block; padding:8px 12px; background:rgba(255,255,255,0.03); color:var(--accent-2); border-radius:8px; text-decoration:none}
+
+/* Content */
+.content{flex:1; padding:36px 48px; display:flex; justify-content:center}
+.content-inner{width:100%; max-width:var(--max-width); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:36px; border-radius:16px; box-shadow:0 10px 40px rgba(2,6,23,0.6); transition:box-shadow .36s ease, transform .36s ease;}
+.content-inner:hover{box-shadow:0 18px 60px rgba(2,6,23,0.7); transform:translateY(-2px)}
+
+/* Decorative background gradient blob */
+.bg-decor{position:absolute; left:50%; top:4%; width:720px; height:420px; transform:translateX(-50%); background:radial-gradient(circle at 20% 30%, rgba(125,211,252,0.06), transparent 25%), radial-gradient(circle at 80% 70%, rgba(96,165,250,0.05), transparent 30%); filter:blur(20px); pointer-events:none; z-index:0}
+.content-inner{position:relative; z-index:2}
+
+@media (max-width:900px){.bg-decor{display:none}}
+
+/* Animations */
+.fade-in{animation:fadeIn .6s ease both}
+@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
+@keyframes slideInLeft{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}
+.toc-item{animation:slideInLeft .36s ease both}
+
+/* Article styles */
+#article h1{font-size:28px; margin-top:0}
+#article h2{margin-top:28px}
+#article p{color:var(--muted); line-height:1.7}
+#article table{width:100%; border-collapse:collapse}
+#article table th, #article table td{border:1px solid rgba(255,255,255,0.04); padding:8px; color:var(--muted)}
+#article a{color:var(--accent); text-decoration:none}
+
+/* Code blocks */
+pre{border-radius:12px; overflow:auto; padding:16px; background:#010617; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
+code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:0.95em}
+
+/* Heading anchors */
+.heading-anchor{margin-left:8px; opacity:0; transform:translateY(-2px); transition:opacity .12s ease, transform .12s ease; color:var(--muted); text-decoration:none}
+#article h1:hover .heading-anchor, #article h2:hover .heading-anchor, #article h3:hover .heading-anchor{opacity:1; transform:none}
+
+/* Mark highlight for search */
+mark{background:linear-gradient(90deg, rgba(125,211,252,0.16), rgba(96,165,250,0.12)); padding:2px 4px; border-radius:4px}
+
+/* Responsive */
+@media (max-width:900px){
+  .sidebar{position:fixed; z-index:30; left:0; top:0; height:100vh; transform:translateX(0); background:linear-gradient(180deg, rgba(11,18,32,0.95), rgba(11,18,32,0.98));}
+  .sidebar.collapsed{transform:translateX(-100%)}
+  .content{padding:20px}
+  .sidebar.collapsed + .content{padding-left:20px}
+  .sidebar{transform:translateX(-8px); transition:transform .28s cubic-bezier(.2,.9,.2,1)}
+  .sidebar:not(.collapsed){transform:translateX(0)}
+  .topnav-inner{padding:0 8px}
+  .nav-links{display:none}
+}
+
+/* Logo blob animation */
+.logo-blob{display:inline-block; vertical-align:middle; width:12px; height:12px; margin-right:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #7dd3fc, #60a5fa); box-shadow:0 6px 18px rgba(96,165,250,0.12); animation:blob 3.6s infinite ease-in-out}
+@keyframes blob{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
+
+/* subtle header shadow */
+.content-inner{transition:box-shadow .36s ease, transform .36s ease}
+.content-inner:hover{box-shadow:0 18px 60px rgba(2,6,23,0.7); transform:translateY(-2px)}
+
+.error-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; color:var(--muted)}