Folio — Developer Portfolio

<nav class="py-3 px-3 container d-flex align-items-center">
  <span class="fw-bold fo-mono">convertatlas.dev <span style="color:var(--fo-cyan)">~/</span></span>
  <div class="ms-auto d-none d-md-flex gap-4 small"><a class="text-decoration-none text-secondary" href="#work">Work</a><a class="text-decoration-none text-secondary" href="#about">About</a><a class="text-decoration-none text-secondary" href="#contact">Contact</a></div>
</nav>
<header class="container text-center py-5">
  <div class="fo-av mx-auto mb-3">CA</div>
  <span class="fo-chip"><span class="me-1" style="color:#22c55e">●</span>Available for freelance</span>
  <h1 class="fo-h1 mt-3 mb-2">I build ConvertAtlas —<br>tools developers love.</h1>
  <p class="text-secondary mx-auto mb-4" style="max-width:520px">Independent maker behind convertatlas.org: 60+ browser tools, 435+ UI snippets, 18 full templates and a growing library of guides — all free, all privacy-first, all built with a custom PHP MVC.</p>
  <div class="d-flex gap-2 justify-content-center mb-4"><a class="btn btn-fo" href="#work">See my work</a><a class="btn btn-fo2" href="#contact"><i class="bi bi-envelope me-1"></i>Get in touch</a></div>
  <div class="d-flex flex-wrap gap-2 justify-content-center"><span class="fo-chip">PHP</span><span class="fo-chip">TypeScript</span><span class="fo-chip">Vue</span><span class="fo-chip">PostgreSQL</span><span class="fo-chip">AWS</span><span class="fo-chip">Tailwind</span></div>
  <div class="row g-3 mt-4 text-center" style="max-width:620px;margin-inline:auto">
    <div class="col-3"><div class="h4 fw-bold mb-0" style="color:var(--fo-cyan)">60+</div><div class="small text-secondary">Tools</div></div>
    <div class="col-3"><div class="h4 fw-bold mb-0" style="color:var(--fo-cyan)">435+</div><div class="small text-secondary">Snippets</div></div>
    <div class="col-3"><div class="h4 fw-bold mb-0" style="color:var(--fo-cyan)">18</div><div class="small text-secondary">Templates</div></div>
    <div class="col-3"><div class="h4 fw-bold mb-0" style="color:var(--fo-cyan)">500+</div><div class="small text-secondary">Pages</div></div>
  </div>
</header>
<section id="work" class="container py-5">
  <div class="d-flex justify-content-between align-items-end mb-3"><h2 class="fw-bold mb-0">Selected work</h2><span class="fo-mono small text-secondary">2022 — 2026</span></div>
  <div class="row g-3">
    <div class="col-md-4"><a class="fo-card" href="#"><div class="fo-thumb" style="background:linear-gradient(135deg,#0c8fc4,#5dd6ff)"></div><div class="p-3"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-1">ConvertAtlas Tools</h6><i class="bi bi-arrow-up-right text-secondary"></i></div><p class="small text-secondary mb-2">60+ converters &amp; utilities: JSON, Base64, regex, colors, hashes.</p><span class="fo-mono small" style="color:var(--fo-cyan)">ApexCharts · Single-file</span></div></a></div>
    <div class="col-md-4"><a class="fo-card" href="#"><div class="fo-thumb" style="background:linear-gradient(135deg,#7c3aed,#ec4899)"></div><div class="p-3"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-1">Atlas Snippets</h6><i class="bi bi-arrow-up-right text-secondary"></i></div><p class="small text-secondary mb-2">435+ Bootstrap 5 &amp; vanilla components with live sandboxed previews.</p><span class="fo-mono small" style="color:var(--fo-cyan)">Bootstrap 5 · 28 JS libs</span></div></a></div>
    <div class="col-md-4"><a class="fo-card" href="#"><div class="fo-thumb" style="background:linear-gradient(135deg,#0f5132,#52b788)"></div><div class="p-3"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-1">Atlas Templates</h6><i class="bi bi-arrow-up-right text-secondary"></i></div><p class="small text-secondary mb-2">18 production-ready page designs: dashboards, logins, landings.</p><span class="fo-mono small" style="color:var(--fo-cyan)">ApexCharts · Single-file</span></div></a></div>
  </div>
</section>
<section id="about" class="container py-5" style="max-width:720px">
  <h2 class="fw-bold mb-4">Experience</h2>
  <div class="fo-tl pb-4"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-0">Maker, ConvertAtlas</h6><span class="fo-mono small text-secondary">2023 — now</span></div><span class="small" style="color:var(--fo-cyan)">convertatlas.org</span><p class="small text-secondary mt-1 mb-0">Designing, coding and operating the whole platform solo: database-free PHP MVC architecture, 500+ pages of content, schema.org SEO and AdSense monetization.</p></div>
  <div class="fo-tl pb-4"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-0">Web Developer</h6><span class="fo-mono small text-secondary">2019 — 2023</span></div><span class="small" style="color:var(--fo-cyan)">Baltic Digital Agency</span><p class="small text-secondary mt-1 mb-0">Delivered 30+ client sites and internal tools; led the move to component-driven front-ends.</p></div>
  <div class="fo-tl"><div class="d-flex justify-content-between"><h6 class="fw-bold mb-0">Junior Developer</h6><span class="fo-mono small text-secondary">2017 — 2019</span></div><span class="small" style="color:var(--fo-cyan)">StartupLab Riga</span><p class="small text-secondary mt-1 mb-0">Cut my teeth on rapid prototypes and learned to ship under deadline.</p></div>
</section>
<section id="contact" class="container py-5 text-center" style="max-width:640px">
  <div class="p-5 rounded-4" style="background:var(--fo-ink);color:#fff">
    <h3 class="fw-bold mb-2">Let's build something</h3>
    <p class="small opacity-75 mb-3">Want a tool or template added? Tell me what would help you ship.</p>
    <a class="btn px-4" style="background:#5dd6ff;color:#06121f;font-weight:700;border-radius:12px" href="mailto:hello@convertatlas.org"><i class="bi bi-envelope me-1"></i>hello@convertatlas.org</a>
  </div>
</section>
<footer class="fo-foot py-4 text-center small text-secondary">
  <div class="d-flex gap-3 justify-content-center mb-2 fs-5"><a class="text-secondary" href="#"><i class="bi bi-github"></i></a><a class="text-secondary" href="#"><i class="bi bi-linkedin"></i></a><a class="text-secondary" href="#"><i class="bi bi-twitter-x"></i></a></div>
  © 2026 ConvertAtlas · Built with <a href="https://convertatlas.org" class="fw-semibold" style="color:var(--fo-cyan);text-decoration:none">ConvertAtlas</a>
</footer>

:root{--fo-ink:#0e1726;--fo-cyan:#0c8fc4;--fo-soft:#eef6fa;--fo-line:#e3ecf2}
body{background:#fbfdfe;color:var(--fo-ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.fo-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.fo-chip{background:var(--fo-soft);color:var(--fo-cyan);border:1px solid #d4e9f3;border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:600}
.fo-av{width:108px;height:108px;border-radius:30px;background:linear-gradient(135deg,#0c8fc4,#5dd6ff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:2rem;box-shadow:0 16px 40px rgba(12,143,196,.3)}
.fo-h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(2rem,4.6vw,3rem)}
.btn-fo{background:var(--fo-ink);color:#fff;border-radius:12px;border:0;padding:.65rem 1.3rem;font-weight:600}
.btn-fo:hover{background:#1f2c44;color:#fff}
.btn-fo2{border:1.5px solid var(--fo-line);border-radius:12px;padding:.65rem 1.3rem;font-weight:600;color:var(--fo-ink);background:#fff}
.btn-fo2:hover{border-color:var(--fo-cyan);color:var(--fo-cyan)}
.fo-card{background:#fff;border:1px solid var(--fo-line);border-radius:18px;overflow:hidden;transition:.18s;text-decoration:none;color:inherit;display:block}
.fo-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(14,23,38,.1);color:inherit}
.fo-thumb{height:150px}
.fo-tl{border-left:2px solid var(--fo-line);padding-left:22px;position:relative}
.fo-tl::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--fo-cyan);box-shadow:0 0 0 4px var(--fo-soft)}
.fo-foot{border-top:1px solid var(--fo-line)}