Liam Andersson — Student CV Portfolio

<div class="st-shell">
  <aside class="st-side">
    <div class="st-profile" data-rv>
      <div class="st-av">LA</div>
      <h1>Liam Andersson</h1>
      <p class="st-role">Computer Science Student</p>
      <a class="st-dl" href="#" download>⬇ Download CV</a>
    </div>
    <div class="st-side-block" data-rv>
      <h3>Contact</h3>
      <ul class="st-contact">
        <li><span>✉</span> liam.andersson@uni.edu</li>
        <li><span>☎</span> +46 70 123 4567</li>
        <li><span>⌖</span> Stockholm, Sweden</li>
        <li><span>in</span> linkedin.com/in/liamand</li>
      </ul>
    </div>
    <div class="st-side-block" data-rv>
      <h3>Skills</h3>
      <div class="st-skill" data-bar><label>Python <span>Advanced</span></label><div class="st-track"><i data-w="88%"></i></div></div>
      <div class="st-skill" data-bar><label>Java <span>Intermediate</span></label><div class="st-track"><i data-w="72%"></i></div></div>
      <div class="st-skill" data-bar><label>SQL <span>Intermediate</span></label><div class="st-track"><i data-w="68%"></i></div></div>
      <div class="st-skill" data-bar><label>HTML / CSS <span>Advanced</span></label><div class="st-track"><i data-w="85%"></i></div></div>
    </div>
    <div class="st-side-block" data-rv>
      <h3>Languages</h3>
      <ul class="st-langs"><li>Swedish <b>Native</b></li><li>English <b>Fluent (C1)</b></li><li>German <b>Basic (A2)</b></li></ul>
    </div>
    <div class="st-side-block" data-rv>
      <h3>Interests</h3>
      <div class="st-chips"><span>Open source</span><span>Robotics</span><span>Chess</span><span>Hiking</span></div>
    </div>
  </aside>

  <main class="st-main">
    <section class="st-block" data-rv>
      <h2><span class="st-ico">👤</span> Profile</h2>
      <p>Third-year Computer Science student passionate about software engineering and data. Quick learner with hands-on experience from two internships and several university projects. Looking for a summer 2026 software internship where I can contribute and grow.</p>
    </section>

    <section class="st-block" data-rv>
      <h2><span class="st-ico">🎓</span> Education</h2>
      <div class="st-item"><div class="st-item-top"><b>BSc Computer Science</b><span>2023 — 2026 (expected)</span></div><em>KTH Royal Institute of Technology</em><p>GPA 4.6/5.0. Coursework: algorithms, databases, distributed systems, machine learning.</p></div>
      <div class="st-item"><div class="st-item-top"><b>Natural Sciences Diploma</b><span>2020 — 2023</span></div><em>Stockholm Science Gymnasium</em><p>Graduated top 5% of class. Led the school programming club.</p></div>
    </section>

    <section class="st-block" data-rv>
      <h2><span class="st-ico">💼</span> Internship experience</h2>
      <div class="st-item"><div class="st-item-top"><b>Software Engineering Intern</b><span>Summer 2025</span></div><em>Spotify · Stockholm</em><p>Built internal tooling in Python and React used by 40+ engineers. Shipped 3 features to production and wrote the test suite.</p></div>
      <div class="st-item"><div class="st-item-top"><b>Junior Developer (part-time)</b><span>2024 — 2025</span></div><em>Nordic Web Studio</em><p>Developed client websites and a booking widget. Learned Git workflows, code review and agile delivery.</p></div>
    </section>

    <section class="st-block" data-rv>
      <h2><span class="st-ico">🚀</span> University &amp; personal projects</h2>
      <div class="st-projects">
        <div class="st-proj"><h4>StudyBuddy</h4><p>A study-group matching app built with Flask &amp; PostgreSQL. Won 2nd place at KTH Hackathon 2025.</p><div class="st-proj-tags"><span>Python</span><span>Flask</span><span>PostgreSQL</span></div></div>
        <div class="st-proj"><h4>PathFinder visualizer</h4><p>Interactive A* &amp; Dijkstra visualizer in vanilla JS. 400+ GitHub stars.</p><div class="st-proj-tags"><span>JavaScript</span><span>Algorithms</span><span>Canvas</span></div></div>
        <div class="st-proj"><h4>Campus sensor net</h4><p>IoT temperature dashboard for the robotics lab using Raspberry Pi and a small REST API.</p><div class="st-proj-tags"><span>Python</span><span>IoT</span><span>REST</span></div></div>
      </div>
    </section>

    <section class="st-block" data-rv>
      <h2><span class="st-ico">📜</span> Certifications</h2>
      <ul class="st-certs">
        <li><b>Google Data Analytics</b> — Coursera · 2025</li>
        <li><b>AWS Cloud Practitioner</b> — Amazon · 2024</li>
        <li><b>Responsive Web Design</b> — freeCodeCamp · 2024</li>
      </ul>
    </section>

    <section class="st-block st-contact-cta" data-rv>
      <h2><span class="st-ico">📬</span> Get in touch</h2>
      <p>Open to summer 2026 internships and junior roles. I'd love to hear from you.</p>
      <div class="st-cta-row"><a class="st-btn" href="mailto:liam.andersson@uni.edu">Email me</a><a class="st-btn st-btn-out" href="#" download>Download CV</a></div>
    </section>

    <footer class="st-foot">© 2026 Liam Andersson · Made with <a href="https://convertatlas.org" target="_blank" rel="noopener">convertatlas.org</a></footer>
  </main>
</div>

*{box-sizing:border-box}
body{margin:0;background:#eef2f7;color:#1f2937;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6}
a{text-decoration:none;color:inherit}
.st-shell{max-width:1080px;margin:30px auto;display:grid;grid-template-columns:330px 1fr;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 70px rgba(31,41,55,.12)}
.st-side{background:linear-gradient(170deg,#1d4ed8,#1e3a8a);color:#dbe6fb;padding:36px 28px}
.st-profile{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.15)}
.st-av{width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:2.2rem;font-weight:800;color:#fff;margin:0 auto 16px}
.st-profile h1{font-size:1.5rem;margin:0 0 4px;color:#fff}
.st-role{color:#93c5fd;font-size:.95rem;margin:0 0 18px}
.st-dl{display:inline-block;background:#fff;color:#1d4ed8;font-weight:700;font-size:.88rem;padding:10px 20px;border-radius:10px;transition:.18s}
.st-dl:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.st-side-block{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.st-side-block:last-child{border-bottom:0}
.st-side-block h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#93c5fd;margin:0 0 14px}
.st-contact{list-style:none;padding:0;margin:0}
.st-contact li{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:.88rem}
.st-contact span{width:22px;text-align:center;color:#93c5fd;font-weight:700}
.st-skill{margin-bottom:14px}
.st-skill label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:6px}
.st-skill label span{color:#93c5fd;font-size:.78rem}
.st-track{height:6px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.st-track i{display:block;height:100%;width:0;background:#60a5fa;border-radius:3px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.st-langs{list-style:none;padding:0;margin:0}
.st-langs li{display:flex;justify-content:space-between;font-size:.88rem;padding:5px 0}
.st-langs b{color:#fff;font-weight:600}
.st-chips{display:flex;flex-wrap:wrap;gap:7px}
.st-chips span{background:rgba(255,255,255,.12);border-radius:8px;padding:5px 11px;font-size:.8rem}
.st-main{padding:42px 44px}
.st-block{margin-bottom:34px}
.st-block h2{display:flex;align-items:center;gap:10px;font-size:1.2rem;color:#1d4ed8;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid #eef2f7}
.st-ico{font-size:1.1rem}
.st-block>p{color:#52607a;margin:0}
.st-item{padding-left:18px;border-left:2px solid #dbe6fb;margin-bottom:18px;position:relative}
.st-item::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:#1d4ed8;border:3px solid #dbe6fb}
.st-item-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.st-item-top b{font-size:1.02rem}
.st-item-top span{color:#1d4ed8;font-size:.82rem;font-weight:600}
.st-item em{color:#2563eb;font-style:normal;font-size:.88rem}
.st-item p{color:#52607a;font-size:.9rem;margin:6px 0 0}
.st-projects{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-proj{background:#f6f9fc;border:1px solid #e4ebf3;border-radius:14px;padding:18px;transition:.2s}
.st-proj:hover{transform:translateY(-3px);border-color:#93c5fd;box-shadow:0 12px 28px rgba(29,78,216,.08)}
.st-proj h4{margin:0 0 6px;font-size:1rem}
.st-proj p{color:#52607a;font-size:.86rem;margin:0 0 10px}
.st-proj-tags{display:flex;flex-wrap:wrap;gap:6px}
.st-proj-tags span{background:#e0ecfd;color:#1d4ed8;border-radius:6px;padding:3px 9px;font-size:.74rem;font-weight:600}
.st-certs{list-style:none;padding:0;margin:0}
.st-certs li{padding:10px 14px;background:#f6f9fc;border:1px solid #e4ebf3;border-radius:10px;margin-bottom:8px;font-size:.9rem;color:#52607a}
.st-certs b{color:#1f2937}
.st-contact-cta{background:#f6f9fc;border-radius:16px;padding:26px}
.st-contact-cta h2{border:0;padding:0}
.st-contact-cta p{color:#52607a;margin:0 0 16px}
.st-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.st-btn{display:inline-block;background:#1d4ed8;color:#fff;font-weight:700;font-size:.88rem;padding:11px 22px;border-radius:10px;transition:.18s}
.st-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(29,78,216,.25)}
.st-btn-out{background:transparent;border:1.5px solid #1d4ed8;color:#1d4ed8}.st-btn-out:hover{background:#1d4ed8;color:#fff}
.st-foot{padding-top:20px;border-top:1px solid #eef2f7;color:#8b97a8;font-size:.83rem;text-align:center}
.st-foot a{color:#1d4ed8;font-weight:600}
@media(max-width:820px){.st-shell{grid-template-columns:1fr;margin:0;border-radius:0}.st-projects{grid-template-columns:1fr}.st-main{padding:32px 26px}}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');if(e.target.hasAttribute('data-bar')){e.target.querySelectorAll('[data-w]').forEach(function(b){b.style.width=b.getAttribute('data-w')})}if(e.target.hasAttribute('data-count')){var t=+e.target.getAttribute('data-count'),el=e.target,s=null;requestAnimationFrame(function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1500,1);el.firstChild.textContent=Math.floor((1-Math.pow(1-p,3))*t).toLocaleString();if(p<1)requestAnimationFrame(st)})}io.unobserve(e.target)}})},{threshold:.18});
document.querySelectorAll('[data-rv],[data-bar],[data-count]').forEach(function(el){io.observe(el)});