Vitae — Résumé / CV One-Pager

<div class="vt-wrap">
  <aside class="vt-side">
    <div class="vt-av">CA</div>
    <h1>Rihards O.</h1>
    <p class="vt-role">Full-Stack Web Developer</p>
    <div class="vt-contact">
      <div><span>✉</span> hello@convertatlas.org</div>
      <div><span>🌐</span> convertatlas.org</div>
      <div><span>📍</span> Riga, Latvia</div>
    </div>
    <h3>Skills</h3>
    <div class="vt-skill" data-rv><label>PHP <b>95%</b></label><div class="vt-bar"><i style="--w:95%"></i></div></div>
    <div class="vt-skill" data-rv><label>JavaScript <b>90%</b></label><div class="vt-bar"><i style="--w:90%"></i></div></div>
    <div class="vt-skill" data-rv><label>SEO <b>88%</b></label><div class="vt-bar"><i style="--w:88%"></i></div></div>
    <div class="vt-skill" data-rv><label>UI / CSS <b>85%</b></label><div class="vt-bar"><i style="--w:85%"></i></div></div>
    <h3>Languages</h3>
    <p class="vt-lang">Latvian · Russian · English</p>
  </aside>
  <main class="vt-main">
    <section data-rv><h2>Profile</h2><p>Independent full-stack developer and maker of <strong>ConvertAtlas</strong> — a free platform of 60+ browser tools, 435+ UI snippets and 18 templates, all built on a custom database-free PHP MVC and operated solo end-to-end.</p></section>
    <section data-rv><h2>Experience</h2>
      <div class="vt-tl"><div class="vt-tl-head"><b>Maker, ConvertAtlas</b><span>2023 — now</span></div><em>convertatlas.org</em><p>Designed, built and operate the whole platform: architecture, 500+ content pages, schema.org SEO and AdSense monetization.</p></div>
      <div class="vt-tl"><div class="vt-tl-head"><b>Web Developer</b><span>2019 — 2023</span></div><em>Baltic Digital Agency</em><p>Delivered 30+ client sites and internal tools; led the move to component-driven front-ends.</p></div>
      <div class="vt-tl"><div class="vt-tl-head"><b>Junior Developer</b><span>2017 — 2019</span></div><em>StartupLab Riga</em><p>Built rapid prototypes and shipped under tight deadlines.</p></div>
    </section>
    <section data-rv><h2>Education</h2>
      <div class="vt-tl"><div class="vt-tl-head"><b>BSc Computer Science</b><span>2014 — 2017</span></div><em>University of Latvia</em></div>
    </section>
    <section data-rv><h2>Selected projects</h2>
      <div class="vt-proj"><b>ConvertAtlas Tools</b> — 60+ client-side converters &amp; utilities.</div>
      <div class="vt-proj"><b>Atlas Snippets</b> — 435+ Bootstrap 5 components with live previews.</div>
      <div class="vt-proj"><b>Atlas Templates</b> — 18 production-ready single-file designs.</div>
    </section>
  </main>
</div>
<footer class="vt-foot">Résumé template · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>

*{box-sizing:border-box}body{margin:0;background:#eef2f6;color:#1f2a37;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}a{text-decoration:none;color:#0c8fc4}
.vt-wrap{max-width:1000px;margin:30px auto;background:#fff;display:grid;grid-template-columns:300px 1fr;box-shadow:0 20px 60px rgba(15,35,75,.12);border-radius:16px;overflow:hidden}
.vt-side{background:#0e1726;color:#dbe4ee;padding:34px 26px;position:sticky;top:0;align-self:start}
.vt-av{width:84px;height:84px;border-radius:22px;background:linear-gradient(135deg,#0c8fc4,#5dd6ff);display:grid;place-items:center;font-weight:800;font-size:1.8rem;color:#fff;margin-bottom:16px}
.vt-side h1{font-size:1.5rem;margin:0 0 4px}.vt-role{color:#5dd6ff;font-size:.92rem;margin:0 0 22px}
.vt-contact div{font-size:.84rem;color:#aebccd;padding:5px 0}.vt-contact span{display:inline-block;width:20px}
.vt-side h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:#5dd6ff;margin:26px 0 12px}
.vt-skill label{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:5px;color:#ccd6e2}.vt-skill b{color:#fff}
.vt-bar{height:6px;background:#1e2b3d;border-radius:3px;overflow:hidden;margin-bottom:14px}
.vt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0c8fc4,#5dd6ff);border-radius:3px;transition:width 1s ease}
.vt-skill.in .vt-bar i{width:var(--w)}
.vt-lang{font-size:.86rem;color:#aebccd}
.vt-main{padding:38px 40px}
.vt-main section{margin-bottom:30px}
.vt-main h2{font-size:1.15rem;color:#0c8fc4;border-bottom:2px solid #eef2f6;padding-bottom:8px;margin:0 0 16px;letter-spacing:-.01em}
.vt-main p{color:#54616e;line-height:1.7;margin:0}
.vt-tl{padding-left:18px;border-left:2px solid #e4ebf1;margin-bottom:18px;position:relative}
.vt-tl::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:#0c8fc4;box-shadow:0 0 0 4px #eef6fb}
.vt-tl-head{display:flex;justify-content:space-between;flex-wrap:wrap}.vt-tl-head b{font-size:1.02rem}.vt-tl-head span{color:#8b97a3;font-size:.82rem}
.vt-tl em{color:#0c8fc4;font-size:.86rem;font-style:normal}.vt-tl p{margin:6px 0 0;font-size:.9rem}
.vt-proj{padding:8px 0;font-size:.92rem;color:#54616e}.vt-proj b{color:#1f2a37}
.vt-foot{text-align:center;padding:20px;color:#8b97a3;font-size:.82rem}
@media(max-width:760px){.vt-wrap{grid-template-columns:1fr;margin:0;border-radius:0}.vt-side{position:static}}
@media print{body{background:#fff}.vt-wrap{box-shadow:none;margin:0;max-width:100%}.vt-foot{display:none}}
[data-rv]{opacity:0;transform:translateY(24px);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');io.unobserve(e.target)}})},{threshold:.3});
document.querySelectorAll('[data-rv]').forEach(function(el){io.observe(el)});