Spaces:

praneeth232
/

Portfolio

Sleeping

App Files Files Community

praneeth232 commited on Aug 26, 2025

Commit

9201528

verified ·

1 Parent(s): ce927b5

Upload 7 files

Browse files

Files changed (8) hide show

.gitattributes +1 -0
app.py +36 -0
index.html +248 -0
requirements.txt +1 -3
resume/Praneeth-Kumar-Resume.pdf +3 -0
resume/README.txt +3 -0
script.js +89 -0
styles.css +140 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+resume/Praneeth-Kumar-Resume.pdf filter=lfs diff=lfs merge=lfs -text

app.py ADDED Viewed

	@@ -0,0 +1,36 @@

+import streamlit as st
+from pathlib import Path
+st.set_page_config(
+    page_title="Pinni Praneeth Kumar | Portfolio",
+    page_icon="🌐",
+    layout="wide",
+)
+base_dir = Path(__file__).parent
+html_path = base_dir / "index.html"
+css_path = base_dir / "styles.css"
+js_path = base_dir / "script.js"
+# Read assets
+html = html_path.read_text(encoding="utf-8") if html_path.exists() else "<h1>index.html not found</h1>"
+css = css_path.read_text(encoding="utf-8") if css_path.exists() else ""
+js = js_path.read_text(encoding="utf-8") if js_path.exists() else ""
+# Inline CSS and JS by replacing the link/script tags in index.html
+html_inlined = html
+if css:
+    html_inlined = html_inlined.replace(
+        '<link rel="stylesheet" href="./styles.css" />', f"<style>{css}</style>"
+    )
+if js:
+    html_inlined = html_inlined.replace(
+        '<script src="./script.js"></script>', f"<script>{js}</script>"
+    )
+# Render full HTML document inside Streamlit
+# Use components to allow JS execution and custom styles
+st.components.v1.html(html_inlined, height=900, scrolling=True)
+# Optional footer in Streamlit (outside the embedded app)
+st.caption("Hosted with Streamlit on Hugging Face Spaces")

index.html ADDED Viewed

	@@ -0,0 +1,248 @@

+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Pinni Praneeth Kumar – Data/ML Engineer Portfolio and Resume" />
+    <title>Pinni Praneeth Kumar | Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header class="site-header" data-reveal>
+      <div class="container header-inner">
+        <a href="#home" class="brand">Pinni Praneeth Kumar</a>
+        <nav class="nav" id="primary-nav">
+          <button class="nav-toggle" id="nav-toggle" aria-label="Open menu" aria-expanded="false">☰</button>
+          <ul class="nav-list" id="nav-list">
+            <li><a href="#about">About</a></li>
+            <li><a href="#skills">Skills</a></li>
+            <li><a href="#projects">Projects</a></li>
+            <li><a href="#experience">Experience</a></li>
+            <li><a href="#education">Education</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </nav>
+        <button id="theme-toggle" class="btn btn-ghost" aria-label="Toggle dark mode" title="Toggle theme">🌙</button>
+      </div>
+    </header>
+    <main id="home">
+      <section class="hero" data-reveal>
+        <div class="container hero-inner">
+          <div class="hero-copy">
+            <h1>Hi, I'm <span class="accent">Pinni Praneeth Kumar</span>.</h1>
+            <p class="lead">Senior Data Engineer building ML pipelines and GenAI solutions.</p>
+            <div class="cta-group">
+              <a href="#projects" class="btn btn-primary">View Projects</a>
+              <a href="#contact" class="btn">Contact Me</a>
+            </div>
+            <div class="meta">
+              <span>Based in India • Open to roles</span>
+            </div>
+          </div>
+          <div class="hero-photo" aria-hidden="true">
+            <div class="avatar">PP</div>
+          </div>
+        </div>
+      </section>
+      <section id="about" class="section" data-reveal>
+        <div class="container">
+          <h2>About</h2>
+          <p>
+            Senior Data Engineer with 3.10+ years of experience architecting and deploying scalable ML pipelines on AWS and Azure,
+            accelerating the ML lifecycle from data ingestion to production deployment. Skilled in automating end-to-end ML pipelines.
+            Proficient in Python, SQL, CI/CD, Docker, and model deployment at scale. Experienced in GenAI, LLMs, and prompt engineering
+            to drive intelligent automation.
+          </p>
+          <ul class="highlights">
+            <li>Proficient: Python, SQL, CI/CD, Docker, model deployment</li>
+            <li>Experienced: Generative AI, LLMs, RAG, Prompt Engineering</li>
+            <li>Cloud: AWS and Azure for scalable data/ML systems</li>
+          </ul>
+        </div>
+      </section>
+      <section id="skills" class="section" data-reveal>
+        <div class="container">
+          <h2>Skills</h2>
+          <div class="skills-scroll">
+            <button class="scroll-arrow" id="skills-left" aria-label="Scroll left">←</button>
+            <div class="scroll-container" id="skills-container">
+              <div class="skills-groups">
+                <div class="skill-group">
+                  <h3>Programming Languages</h3>
+                  <div class="chips">
+                    <span class="chip">SQL</span>
+                    <span class="chip">Python</span>
+                  </div>
+                </div>
+                <div class="skill-group">
+                  <h3>Tools</h3>
+                  <div class="chips">
+                    <span class="chip">MySQL</span>
+                    <span class="chip">Oracle SQL Developer</span>
+                    <span class="chip">MongoDB</span>
+                    <span class="chip">Cloud (AWS, Azure)</span>
+                    <span class="chip">Tableau</span>
+                    <span class="chip">GitHub</span>
+                    <span class="chip">MLFlow (Model Tracking)</span>
+                    <span class="chip">SageMaker</span>
+                    <span class="chip">Azure ML Studio</span>
+                    <span class="chip">Vertex AI</span>
+                  </div>
+                </div>
+                <div class="skill-group">
+                  <h3>Others</h3>
+                  <div class="chips">
+                    <span class="chip">MLOps</span>
+                    <span class="chip">CICD</span>
+                    <span class="chip">Model Monitoring</span>
+                    <span class="chip">Deep Learning</span>
+                    <span class="chip">Generative AI</span>
+                    <span class="chip">LLMs</span>
+                    <span class="chip">RAG</span>
+                    <span class="chip">Agents</span>
+                    <span class="chip">Prompt Engineering</span>
+                    <span class="chip">Big Data</span>
+                    <span class="chip">Data Analytics</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button class="scroll-arrow" id="skills-right" aria-label="Scroll right">→</button>
+          </div>
+        </div>
+      </section>
+      <section id="projects" class="section" data-reveal>
+        <div class="container">
+          <h2>Projects</h2>
+          <div class="grid projects-grid">
+            <article class="card">
+              <div class="card-body">
+                <h3>Streamlining Auto Vehicle Pricing through MLOps <span class="muted">(June 2024 – September 2024)</span></h3>
+                <details>
+                  <summary class="btn btn-sm">Know more</summary>
+                  <ul>
+                    <li><strong>Built and deployed</strong> an end-to-end MLOps pipeline on Azure ML using GitHub Actions and Python, automating data processing, model training, evaluation, and CI/CD — <strong>reducing model deployment time by 60%</strong> and enabling <strong>weekly retraining cycles</strong> for dynamic vehicle pricing.</li>
+                    <li><strong>Developed a scalable pricing model</strong> by integrating <strong>over 1 million records</strong> from multiple data sources using SQL, enabling <strong>real-time pricing updates</strong> that reflected evolving market trends.</li>
+                    <li><strong>Improved pricing accuracy by 25%</strong> and cut manual processing time by <strong>70%</strong> through workflow automation, significantly enhancing operational decision-making speed.</li>
+                    <li><strong>Implemented a unified MLOps-driven system</strong> with scalable endpoint deployment, supporting <strong>24/7 availability</strong> and handling <strong>1000+ pricing requests per day</strong> with <strong><200ms inference latency</strong>.</li>
+                    <li><strong>Delivered a production-ready pricing solution</strong> that increased dealership revenue by <strong>4.8%</strong>, improved customer trust scores by <strong>15%</strong>, and strengthened cross-functional team collaboration.</li>
+                  </ul>
+                </details>
+                <ul class="tags">
+                  <li>Azure ML</li><li>GitHub Actions</li><li>Python</li><li>SQL</li><li>MLOps</li>
+                </ul>
+              </div>
+            </article>
+            <article class="card">
+              <div class="card-body">
+                <h3>Intelligent Reporting on Azure <span class="muted">(January 2023 – March 2023)</span></h3>
+                <details>
+                  <summary class="btn btn-sm">Know more</summary>
+                  <ul>
+                    <li>Developed an automated analytical pipeline using <strong>Python, SQL, and Azure ML</strong> to preprocess trip data, ensuring data consistency and accuracy for further analysis.</li>
+                    <li>Created <strong>interactive dashboards</strong> with Streamlit, hosted on Hugging Face Spaces, to visualize key business metrics like total revenue and trip categories, improving data accessibility and decision-making.</li>
+                    <li>Implemented an <strong>email alert system</strong> using automation scripts, enabling real-time notifications with summaries of insights and dashboard links, enhancing stakeholder communication and decision-making efficiency.</li>
+                    <li>Streamlined data workflows by <strong>integrating Azure ML</strong> for data storage, preprocessing, and pipeline management, improving collaboration, scalability, and operational efficiency.</li>
+                  </ul>
+                </details>
+                <ul class="tags">
+                  <li>Azure ML</li><li>Python</li><li>SQL</li><li>Streamlit</li><li>Hugging Face Spaces</li>
+                </ul>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section id="experience" class="section" data-reveal>
+        <div class="container">
+          <h2>Experience</h2>
+          <div class="timeline">
+            <div class="timeline-item">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <h3>Senior Data Engineer • Great Learning <span class="muted">Bangalore Urban</span></h3>
+                <span class="muted">Jan 2022 — Present</span>
+                <details>
+                  <summary class="btn btn-sm">Know more</summary>
+                  <ul>
+                    <li>Led end-to-end development of scalable machine learning solutions, driving business impact by transforming raw data into actionable insights across product, marketing, and operations teams.</li>
+                    <li>Designed and deployed advanced predictive models and statistical frameworks using Python, SQL, and cloud platforms (AWS/Azure/GCP), resulting in measurable improvements in customer retention, conversion, or efficiency.</li>
+                    <li>Mentored junior data scientists and analysts, fostering a culture of experimentation, code quality, and reproducible research through peer reviews, knowledge sharing, and hands-on guidance.</li>
+                    <li>Led the design and delivery of 5 successful AI/ML-powered products, driving innovation across data science, machine learning, and automation use cases—contributing to a <strong>5% increase</strong> in overall company revenue and operational growth.</li>
+                  </ul>
+                </details>
+              </div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <h3>Data Analyst • FSP Solutions Pvt Ltd <span class="muted">Noida, Delhi</span></h3>
+                <span class="muted">Jun 2021 — Oct 2021</span>
+                <details>
+                  <summary class="btn btn-sm">Know more</summary>
+                  <ul>
+                    <li>Partnered with development teams to deliver groundbreaking solutions, providing expert consultation and driving execution to achieve tangible impact.</li>
+                    <li>Transformed existing information architectures through in-depth analysis and innovative design, developing optimized solutions that elevate data management.</li>
+                  </ul>
+                </details>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="education" class="section" data-reveal>
+        <div class="container">
+          <h2>Education</h2>
+          <ul class="edu-list">
+            <li>
+              <h3>Grandhi Varalakshmi Venkatarama Institute of Technology • 81.4%</h3>
+              <span class="muted">B.Tech in Mechanical Engineering • Bhimavaram, AP • 2020</span>
+              <div class="muted">Honors: Academic Merit Award • Projects: Go‑Kart (Open type wheel car)</div>
+            </li>
+            <li>
+              <h3>Grandhi Varalakshmi Venkatarama Institute of Technology • 82.07%</h3>
+              <span class="muted">Diploma in Mechanical Engineering • Bhimavaram, AP • 2017</span>
+              <div class="muted">Projects: Dual Tone Multi Frequency Robot</div>
+            </li>
+          </ul>
+        </div>
+      </section>
+      <section id="contact" class="section" data-reveal>
+        <div class="container">
+          <h2>Contact</h2>
+          <p>
+            Feel free to reach out for roles, collaborations, or just to say hi.
+          </p>
+          <div class="cta-group">
+            <a class="btn btn-primary" href="mailto:praneethsanthosh555@gmail.com">Email Me</a>
+            <a class="btn" href="./resume/Praneeth-Kumar-Resume.pdf" download>Download Resume</a>
+            <a class="btn btn-ghost" href="https://www.linkedin.com/in/praneeth88/" target="_blank" rel="noopener">LinkedIn</a>
+            <a class="btn btn-ghost" href="https://github.com/praneeth300" target="_blank" rel="noopener">GitHub</a>
+            <span class="muted">Ph: 8309116050</span>
+          </div>
+        </div>
+      </section>
+    </main>
+    <a href="#contact" class="fab" aria-label="Contact">✉️</a>
+    <button id="back-to-top" class="back-to-top" aria-label="Back to top">↑</button>
+    <footer class="site-footer">
+      <div class="container">
+        <span>© <span id="year"></span> Pinni Praneeth Kumar. All rights reserved.</span>
+      </div>
+    </footer>
+    <script src="./script.js"></script>
+  </body>
+</html>

requirements.txt CHANGED Viewed

@@ -1,3 +1 @@
-altair
-pandas
-streamlit


1	+ streamlit==1.36.0

resume/Praneeth-Kumar-Resume.pdf ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:aeef4f2bc908ed0464415dd069916b8147adbeaf40a0cc6ca917b412263de285
+size 123877

resume/README.txt ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ Place your resume PDF here as `Praneeth_Resume.pdf`.
2	+
3	+ Example: C:\Users\Praneeth\Desktop\Gen AI\2- Developement\resume\Praneeth_Resume.pdf

script.js ADDED Viewed

	@@ -0,0 +1,89 @@

+(function () {
+  var root = document.documentElement;
+  var themeToggle = document.getElementById('theme-toggle');
+  var navToggle = document.getElementById('nav-toggle');
+  var navList = document.getElementById('nav-list');
+  var year = document.getElementById('year');
+  try {
+    var saved = localStorage.getItem('theme');
+    if (saved) {
+      root.setAttribute('data-theme', saved);
+      if (saved === 'dark') themeToggle.textContent = '☀️';
+    } else {
+      var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      root.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+      themeToggle.textContent = prefersDark ? '☀️' : '🌙';
+    }
+  } catch (e) {}
+  if (themeToggle) {
+    themeToggle.addEventListener('click', function () {
+      var current = root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+      var next = current === 'dark' ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      themeToggle.textContent = next === 'dark' ? '☀️' : '🌙';
+      try { localStorage.setItem('theme', next); } catch (e) {}
+    });
+  }
+  if (navToggle && navList) {
+    navToggle.addEventListener('click', function () {
+      var isOpen = navList.classList.contains('open');
+      navList.classList.toggle('open');
+      navToggle.setAttribute('aria-expanded', String(!isOpen));
+    });
+    navList.querySelectorAll('a').forEach(function (a) {
+      a.addEventListener('click', function () { navList.classList.remove('open'); navToggle.setAttribute('aria-expanded', 'false'); });
+    });
+  }
+  if (year) {
+    year.textContent = String(new Date().getFullYear());
+  }
+  // Smooth scroll for in-page anchors
+  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
+    a.addEventListener('click', function (e) {
+      var id = a.getAttribute('href');
+      if (id.length > 1) {
+        var el = document.querySelector(id);
+        if (el) {
+          e.preventDefault();
+          el.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+    });
+  });
+  // Reveal-on-scroll
+  var observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('[data-reveal]').forEach(function (el) { observer.observe(el); });
+  // Skills horizontal scroll with arrows
+  var skillsContainer = document.getElementById('skills-container');
+  var left = document.getElementById('skills-left');
+  var right = document.getElementById('skills-right');
+  function scrollByAmount(amount) {
+    if (!skillsContainer) return;
+    skillsContainer.scrollBy({ left: amount, behavior: 'smooth' });
+  }
+  if (left) left.addEventListener('click', function () { scrollByAmount(-300); });
+  if (right) right.addEventListener('click', function () { scrollByAmount(300); });
+  // Back to top button
+  var backToTop = document.getElementById('back-to-top');
+  if (backToTop) {
+    window.addEventListener('scroll', function () {
+      if (window.scrollY > 600) backToTop.classList.add('show'); else backToTop.classList.remove('show');
+    });
+    backToTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
+  }
+})();

styles.css ADDED Viewed

	@@ -0,0 +1,140 @@

+:root {
+  --bg: #ffffff;
+  --fg: #0f172a;
+  --muted: #64748b;
+  --accent: #2563eb;
+  --card: #f8fafc;
+  --border: #e2e8f0;
+  --chip: #eef2ff;
+}
+html[data-theme="dark"] {
+  --bg: #0b1220;
+  --fg: #e5e7eb;
+  --muted: #9aa3b2;
+  --accent: #60a5fa;
+  --card: #111827;
+  --border: #1f2937;
+  --chip: #111827;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  color: var(--fg);
+  background: var(--bg);
+  line-height: 1.6;
+}
+img { max-width: 100%; display: block; }
+.container {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+.brand { font-weight: 700; font-size: 20px; color: var(--fg); text-decoration: none; }
+.nav-toggle { display: none; }
+.nav-list { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
+.nav-list a { color: var(--fg); text-decoration: none; opacity: 0.9; }
+.nav-list a:hover { color: var(--accent); }
+.btn { border: 1px solid var(--border); background: transparent; color: var(--fg); padding: 10px 14px; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+.btn:hover { border-color: var(--accent); }
+.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
+.btn-ghost { background: transparent; border-color: transparent; }
+.btn-sm { padding: 6px 10px; border-radius: 8px; font-size: 14px; }
+.hero { padding: 64px 0; }
+.hero-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; }
+.hero h1 { font-size: 42px; margin: 0 0 12px; }
+.lead { font-size: 18px; opacity: 0.9; }
+.accent { color: var(--accent); }
+.meta { margin-top: 10px; color: var(--muted); font-size: 14px; }
+.avatar { height: 140px; width: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #9333ea); color: white; display: grid; place-items: center; font-weight: 700; font-size: 40px; margin: 0 0 0 auto; }
+.section { padding: 56px 0; border-top: 1px solid var(--border); }
+.section h2 { margin: 0 0 16px; font-size: 28px; }
+.highlights { margin: 10px 0 0; padding-left: 20px; }
+.chips { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip { background: var(--chip); border: 1px solid var(--border); color: var(--fg); padding: 8px 10px; border-radius: 999px; font-size: 14px; }
+.grid { display: grid; gap: 16px; }
+.projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
+.card-body { padding: 16px; display: grid; gap: 8px; }
+.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
+.tags li { background: var(--chip); border: 1px solid var(--border); padding: 4px 8px; border-radius: 999px; font-size: 12px; }
+.card-actions { display: flex; gap: 8px; margin-top: 4px; }
+.timeline { display: grid; gap: 16px; border-left: none; padding-left: 0; }
+.timeline-item { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
+.timeline-dot { display: none; }
+.timeline-content h3 { margin: 0 0 6px; font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
+.timeline-content .muted { display: block; margin-bottom: 8px; }
+.card summary.btn { background: transparent; border-color: var(--border); color: var(--fg); }
+.card summary.btn:hover { background: transparent; border-color: var(--accent); }
+.edu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
+.site-footer { padding: 24px 0 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
+.cta-group { display: flex; gap: 12px; flex-wrap: wrap; }
+.skills-groups { display: grid; gap: 20px; }
+.skill-group h3 { margin: 0 0 8px; font-size: 16px; color: var(--muted); }
+.scroll-container { overflow-x: auto; scroll-behavior: smooth; }
+.skills-scroll { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
+.scroll-arrow { border: 1px solid var(--border); background: var(--card); color: var(--fg); height: 36px; width: 36px; border-radius: 8px; }
+.scroll-arrow:hover { border-color: var(--accent); }
+.card details { margin-top: 6px; }
+.card details[open] summary { color: var(--accent); }
+.card summary { cursor: pointer; list-style: none; }
+.card summary::-webkit-details-marker { display: none; }
+[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
+[data-reveal].visible { opacity: 1; transform: translateY(0); }
+.fab { position: fixed; right: 18px; bottom: 18px; height: 52px; width: 52px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 60; }
+.back-to-top { position: fixed; right: 18px; bottom: 80px; height: 40px; width: 40px; border-radius: 10px; background: var(--card); color: var(--fg); border: 1px solid var(--border); display: none; z-index: 60; }
+.back-to-top.show { display: inline-grid; place-items: center; }
+@media (max-width: 900px) {
+  .hero-inner { grid-template-columns: 1fr; }
+  .avatar { margin: 0; }
+  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; border: 1px solid var(--border); background: transparent; border-radius: 10px; }
+  .nav-list { display: none; position: absolute; right: 16px; top: 64px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px; flex-direction: column; gap: 10px; }
+  .nav-list.open { display: flex; }
+  .projects-grid { grid-template-columns: 1fr; }
+}