feat: Add profile card for codeUser073

contributors.json

@@ -61,5 +61,14 @@
     "github_profile_url": "https://github.com/seobysoumik",
     "project_netlify_link": "https://soumik-profile-card.netlify.app/",
     "tags": ["animated", "light-theme"]
+  },
+  {
+    "name": "Sara",
+    "occupation": "Student",
+    "place": "Europe",
+    "bio": "Pationate about learning new things and exploring the world of computer science.",
+    "github_profile_url": "https://github.com/codeUser073",
+    "project_netlify_link": "https://profile-card-073.netlify.app/",
+    "tags": ["minimalist", "animation", "dark-theme", "light-theme","pixel"]
   }
 ]

profiles/codeUser073/css/style.css

@@ -0,0 +1,253 @@
+/* ===== design tokens ===== */
+:root{
+    --paper:#f7f7f7;
+    --ink:#111;
+    --muted:#666;
+    --card:#fff;
+    --accent:#ff6b00;
+    --accent-2:#0ad35e;
+    --border:#111;
+    --shadow:#111;
+    --elev-shadow: rgba(0,0,0,0.95); /* shadow used for elevated elements (buttons/cards) */
+    --elev-shadow-strong: rgba(0,0,0,0.95); /* stronger variant (fallback for light mode) */
+    --radius:10px; /* small, pixel-ish */
+    --mx:10px;
+    --my:10px;
+    /* background/grid / noise / ripple tokens */
+    --bg-base: #caa5e8; /* main background base color */
+    --bg-grid-color: rgba(239,246,239,0.7); /* grid lines used in .bg */
+    --noise-opacity: .04; /* opacity of the noise overlay */
+    --ripple-color: rgba(255,255,255,0.47); /* button ripple color */
+    color-scheme: light;
+}
+@media (prefers-color-scheme: dark){
+    :root{
+        --paper:#0f1115;
+        --ink:#e9eef6;
+        --muted:#9aa4b2;
+        --card:#12151c;
+        --accent:#ff8f3a;
+        --accent-2:#25e073;
+        --border:#e9eef6;
+        --shadow:#000;
+        --elev-shadow: rgba(255,255,255,0.08); /* light/white-ish shadow in dark mode */
+        --elev-shadow-strong: rgba(255,255,255,0.14); /* stronger white for important controls */
+        color-scheme: dark;
+    }
+}
+
+/* bitmap-style font for headings */
+@font-face{
+    font-family:"Pixel";
+    src: local("Press Start 2P"),
+    url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivY.woff2") format("woff2");
+    font-display: swap;
+}
+
+/* ===== page ===== */
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+    margin:0;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
+    color:var(--ink);
+    background:var(--paper);
+}
+
+/* graph-paper background + faint vignette */
+.site{
+    position:relative;
+    min-height:100%;
+    display:grid;
+    place-items:center;
+    padding:40px 18px;
+}
+.bg{
+    position:fixed; inset:0; z-index:-2;
+    background: var(--bg-base);
+    background-image: linear-gradient(var(--bg-grid-color) .1em, transparent .1em), linear-gradient(90deg, var(--bg-grid-color) .1em, transparent .1em);
+    background-size: 3em 3em;
+    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
+    transition: transform .06s linear;
+}
+.noise{
+    position:fixed; inset:0; z-index:-1; pointer-events:none;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.8'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+    background-size:110px 110px;
+    opacity: var(--noise-opacity);
+}
+
+/* ===== card ===== */
+.card{
+    position:relative;
+    width:min(720px, 92vw);
+    padding:24px clamp(18px, 4vw, 28px);
+    background:var(--card);
+    border:2px solid var(--border);
+    border-radius:var(--radius);
+    /* chunky pixel shadow */
+    box-shadow:
+            0 0 0 2px var(--border) inset,
+            0 0 0 0 var(--elev-shadow),
+            6px 6px 0 0 var(--elev-shadow);
+}
+
+/* pixel corner “brackets” */
+.ring{
+    pointer-events:none;
+}
+.card::before,
+.card::after{
+    content:"";
+    position:absolute;
+    width:16px; height:16px; border:2px solid var(--accent);
+}
+.card::before{ left:10px; top:10px; border-right:none; border-bottom:none; }
+.card::after{ right:10px; bottom:10px; border-left:none; border-top:none; }
+
+/* header */
+.id{
+    display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center;
+}
+.avatar-wrap{ width:84px; height:84px; position:relative }
+.avatar{
+    width:84px; height:84px; border-radius:6px; image-rendering:pixelated;
+    object-fit:cover; border:2px solid var(--border);
+    box-shadow:4px 4px 0 0 var(--elev-shadow);
+}
+
+/* tiny “online” LED */
+
+
+
+.name{
+    margin:0; font-family:"Pixel", monospace;
+    font-size: clamp(18px, 3.8vw, 24px);
+    letter-spacing:.04em;
+}
+.title{ margin:4px 0 0; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:12px }
+.meta{ margin:6px 0 0; color:var(--muted); display:flex; gap:8px; align-items:center }
+
+/* actions */
+.actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px }
+.btn{
+    --rx:50%; --ry:50%;
+    position:relative; display:inline-flex; align-items:center; gap:10px;
+    padding:10px 14px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
+    border:2px solid var(--border); background:var(--card); color:var(--ink);
+    border-radius:8px; text-decoration:none; cursor:pointer;
+    box-shadow:4px 4px 0 0 var(--elev-shadow);
+    transition: transform .06s ease;
+}
+.btn:active{ transform: translate(2px,2px); box-shadow:2px 2px 0 0 var(--elev-shadow) }
+.btn.primary{ background:var(--accent); color:#fff; border-color:var(--border) }
+.btn.icon{ width:42px; height:42px; justify-content:center; padding:0 }
+
+/* pixel ripple using radial gradient positioned by --rx/--ry */
+.btn::after{
+    content:""; position:absolute; inset:0; pointer-events:none;
+    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), var(--ripple-color) 0, transparent 48%);
+    opacity:0; transform:scale(.9);
+    transition: opacity .18s ease, transform .18s ease;
+}
+.btn.is-rippling::after{ opacity:1; transform:scale(1) }
+
+/* socials */
+.socials{ list-style:none; padding:0; margin:8px 0 0; display:flex; gap:10px }
+.socials a{
+    width:42px; height:42px; display:grid; place-items:center;
+    border:2px solid var(--border); background:var(--card); color:var(--ink);
+    border-radius:8px; text-decoration:none;
+    box-shadow:4px 4px 0 0 var(--elev-shadow);
+    transition: transform .06s ease;
+}
+.socials a:active{ transform: translate(2px,2px); box-shadow:2px 2px 0 0 var(--elev-shadow) }
+
+/* CRT scanlines overlay for nerd points */
+.card > .scanlines{ display:none } /* reserved */
+.card::marker{ content:"" }
+
+/* focus */
+.btn:focus-visible, .socials a:focus-visible{
+    outline:3px dashed var(--accent);
+    outline-offset:2px;
+}
+
+/* smooth theme transitions for key UI elements */
+body, .bg, .card, .btn, .btn.primary, .socials a {
+    transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
+}
+
+/* responsive */
+@media (max-width:520px){
+    .id{ grid-template-columns:1fr; text-align:center }
+    .avatar-wrap{ margin-inline:auto }
+}
+
+/* --- Explicit theme overrides (put at END of file) --- */
+html[data-theme="light"]{
+    color-scheme: light;
+    --paper:#f7f7f7;
+    --ink:#111;
+    --muted:#666;
+    --card:#fff;
+    --accent:#ff6b00;
+    --accent-2:#0ad35e;
+    --border:#111;
+    --shadow:#111;
+
+    --bg-base: #caa5e8;
+    --bg-grid-color: rgba(239,246,239,0.7);
+    --noise-opacity: .04;
+    --ripple-color: rgba(255,255,255,0.47);
+}
+
+html[data-theme="dark"]{
+    color-scheme: dark;
+    --paper: rgba(15, 17, 21, 0.46);
+    --ink:#e9eef6;
+    --muted:#9aa4b2;
+    --card:#12151c;
+    --accent: #6a0bdd;
+    --accent-2:#25e073;
+    --border:#e9eef6;
+    --shadow:#000;
+    /* background tokens for dark theme */
+    --bg-base: #0c1523; /* slightly darker base for the gradient */
+    --bg-grid-color: #0b2edd; /* very subtle grid lines in dark */
+    --noise-opacity: .06; /* a touch stronger noise in dark */
+    --ripple-color: rgba(0,0,0,0.35); /* dark ripple to contrast bright buttons */
+    --elev-shadow-strong: rgba(255, 255, 255, 0.94);
+}
+
+/* specific stronger highlight for theme-toggle in dark mode */
+html[data-theme="dark"] #theme-toggle{
+
+    position: absolute;
+    right: 18px;
+    top: 18px;
+    z-index: 9999; /* sit above background elements so shadow is visible */
+
+    /* pixel offset shadow plus a soft white glow for visibility */
+    box-shadow:
+            6px 6px 0 0 var(--elev-shadow-strong),
+            0 10px 24px rgba(255,255,255,0.10);
+
+    transition: box-shadow .22s ease, transform .12s ease;
+}
+
+html[data-theme="light"] #theme-toggle{
+
+    position: absolute;
+    right: 18px;
+    top: 18px;
+    z-index: 9999; /* sit above background elements so shadow is visible */
+
+    /* pixel offset shadow plus a soft white glow for visibility */
+    box-shadow:
+            6px 6px 0 0 var(--elev-shadow-strong),
+            0 10px 24px rgba(255,255,255,0.10);
+
+    transition: box-shadow .22s ease, transform .12s ease;
+}
+