add all modif in the portfolio git

2026-06-08 14:40:14 +02:00
parent 70fb6b82bd
commit 439a00ea76
13 changed files with 904 additions and 91 deletions
--- a/web/static/global.css
+++ b/web/static/global.css
@@ -0,0 +1,168 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --bg:         #07070e;
+    --bg-2:       #0e0c1a;
+    --bg-card:    #120f1e;
+    --accent:     #a855f7;
+    --accent-dim: rgba(168, 85, 247, 0.12);
+    --text:       #e2e2f0;
+    --text-muted: #6a6a8a;
+    --border:     #1e1a30;
+    --font-main:  'Space Grotesk', sans-serif;
+    --font-mono:  'JetBrains Mono', monospace;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: var(--font-main);
+    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ── Navbar ─────────────────────────────────────── */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 6%;
+    background: rgba(8, 8, 15, 0.85);
+    backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border);
+}
+
+.nav-brand {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--accent);
+    text-decoration: none;
+    letter-spacing: 0.06em;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 2.5rem;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.88rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    transition: color 0.2s;
+}
+
+.nav-links a:hover { color: var(--text); }
+.nav-links a.active { color: var(--accent); }
+
+/* ── Main ───────────────────────────────────────── */
+main {
+    flex: 1;
+    padding-top: 4.5rem;
+}
+
+/* ── Footer ─────────────────────────────────────── */
+.footer {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-family: var(--font-mono);
+    border-top: 1px solid var(--border);
+}
+
+.footer span { color: var(--accent); }
+
+/* ── Utilities ───────────────────────────────────── */
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 6%;
+}
+
+.section-title {
+    font-size: clamp(1.8rem, 4vw, 2.4rem);
+    font-weight: 700;
+    margin-bottom: 0.4rem;
+    letter-spacing: -0.02em;
+}
+
+.section-title span { color: var(--accent); }
+
+.section-subtitle {
+    color: var(--text-muted);
+    font-size: 0.93rem;
+    margin-bottom: 3.5rem;
+}
+
+.tag {
+    display: inline-block;
+    padding: 0.22rem 0.65rem;
+    background: var(--accent-dim);
+    color: var(--accent);
+    border-radius: 4px;
+    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-weight: 500;
+    letter-spacing: 0.03em;
+}
+
+/* ── Buttons ─────────────────────────────────────── */
+.btn-primary {
+    display: inline-block;
+    padding: 0.75rem 1.75rem;
+    background: var(--accent);
+    color: #ffffff;
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 0.88rem;
+    transition: opacity 0.2s, transform 0.2s;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-main);
+}
+
+.btn-primary:hover {
+    opacity: 0.82;
+    transform: translateY(-2px);
+}
+
+.btn-secondary {
+    display: inline-block;
+    padding: 0.75rem 1.75rem;
+    border: 1px solid var(--border);
+    color: var(--text);
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 0.88rem;
+    transition: border-color 0.2s, transform 0.2s;
+}
+
+.btn-secondary:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+
+/* ── Mobile nav ──────────────────────────────────── */
+@media (max-width: 600px) {
+    .navbar { flex-direction: column; gap: 1rem; padding: 1rem 6%; }
+    .nav-links { gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
+}