<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mikołaj Paczkowski</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="static/mikolaj-paczkowski-32x32.jpg" sizes="32x32" />
    <link rel="icon" href="static/mikolaj-paczkowski-192x192.jpg" sizes="192x192" />

    <style>
      body {
        background: #f8f9fa;
        color: #212529;
        transition: background 0.3s, color 0.3s;
      }
      .profile-img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 20px;
      }
      .social-icons a {
        color: #333;
        margin: 0 10px;
        font-size: 1.5rem;
        transition: color 0.2s;
      }
      .social-icons a:hover {
        color: #0d6efd;
      }
      .section-title {
        margin-top: 40px;
        margin-bottom: 20px;
        font-weight: bold;
        color: #0d6efd;
      }
      /* Dark theme styles */
      body.dark-theme {
        background: #181a1b !important;
        color: #f8f9fa !important;
      }
      body.dark-theme .profile-img {
        border: 4px solid #23272b;
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      }
      body.dark-theme .social-icons a {
        color: #f8f9fa;
      }
      body.dark-theme .social-icons a:hover {
        color: #0d6efd;
      }
      body.dark-theme .section-title {
        color: #66b2ff;
      }
      body.dark-theme .list-group-item {
        background: #23272b;
        color: #f8f9fa;
        border-color: #343a40;
      }
      body.dark-theme .badge.bg-primary {
        background-color: #0d6efd !important;
        color: #fff !important;
      }
      body.dark-theme .btn-outline-primary {
        color: #66b2ff;
        border-color: #66b2ff;
      }
      body.dark-theme .btn-outline-primary:hover {
        background: #66b2ff;
        color: #181a1b;
      }
      .theme-switch {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 100;
      }
    </style>
  </head>

  <body>
    <div class="theme-switch">
      <button id="themeToggle" class="btn btn-dark" title="Switch theme">
        <i class="bi bi-moon-stars"></i>
        <span class="visually-hidden">Toggle dark/light theme</span>
      </button>
    </div>
    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-md-8 text-center">
          <img src="https://avatars.githubusercontent.com/u/1311358?v=4" alt="Mikołaj Paczkowski" class="profile-img">
          <h1 class="mt-3">Mikołaj Paczkowski</h1>
          <p class="lead">Digital Nomad | Python Software Engineer | Ex-Marketer</p>
          <div class="social-icons mb-4">
            <a href="https://www.linkedin.com/in/mikolajpaczkowski" target="_blank" title="LinkedIn"><i class="bi bi-linkedin"></i></a>
            <a href="https://github.com/mikowhy" target="_blank" title="GitHub"><i class="bi bi-github"></i></a>
            <a href="static/Mikolaj_Paczkowski_CV.pdf" target="_blank" title="Download CV"><i class="bi bi-filetype-pdf"></i></a>
            <a href="https://www.instagram.com/mikowhy" target="_blank" title="GitHub"><i class="bi bi-instagram"></i></a>
          </div>
          <hr>
          <h2 class="section-title">About Me</h2>
          <h3>DIGITAL NOMAD
          </h3>
          <p style="text-align: justify;">
            I am an <strong>e-commerce digital marketing</strong> veteran, who successfully transitioned his career to become an <strong>IT engineer</strong>.
          </p>

          <p style="text-align: justify;">
            I spent over 14 years in that marketing industry reaching the peak of my expertise and was put in charge of Lidl’s digital marketing operations for the whole of Poland. During those years, I focused on further educating myself in technology and team management aspects.
          </p>

          <p style="text-align: justify;">
            My personal goal was to build a team that shared knowledge, stimulated and supported the development of all its members and in that sphere I consider myself fulfilled. I like to think that my leadership helped my colleagues and subordinates to further their careers and expertise as I recognize myself as a disciple of a teal management philosophy.
          </p>

          <p style="text-align: justify;">
            My core values are honesty, transparency, and curiosity and these values played a pivotal role in my decision to drastically change my career path, as I realised that the biggest satisfaction in life for me is building things and watching them grow and flourish.</p>

          <p style="text-align: justify;">
            Having my background and a formal education in philosophy and IT science, naturally, I consider myself a humanist in the tech world and a tech guy among humanists.
          </p>
          
          <h2 class="section-title">Skills</h2>
          <ul class="list-inline">
            <li class="list-inline-item badge bg-primary m-1">Python</li>
            <li class="list-inline-item badge bg-primary m-1">Git</li>
            <li class="list-inline-item badge bg-primary m-1">Scrum</li>
            <li class="list-inline-item badge bg-primary m-1">FastAPI</li>
            <li class="list-inline-item badge bg-primary m-1">MongoDB</li>
            <li class="list-inline-item badge bg-primary m-1">PostgreSQL</li>
            <li class="list-inline-item badge bg-primary m-1">Docker</li>
            <li class="list-inline-item badge bg-primary m-1">CI/CD</li>
            <li class="list-inline-item badge bg-primary m-1">AWS</li>      
            <li class="list-inline-item badge bg-primary m-1">Kafka</li>
            <li class="list-inline-item badge bg-primary m-1">DDD</li>
          </ul>


          <a href="https://www.linkedin.com/in/mikolajpaczkowski/details/skills/" target="_blank" class="btn btn-outline-primary mb-3">
            Check more details (my LinkedIn account)
          </a>
          
          <h2 class="section-title">Experience</h2>
          <ul class="list-group mb-4">

            <li class="list-group-item">
              <strong>Python Software Engineer</strong> at <a href="https://www.merixstudio.com/" target="_blank">Merixstudio.com</a><br>
              <small>2020 – Present</small><br>
              Building backend solutions in Python. Working with FastAPI, AWS, Docker, and modern cloud architectures.
            </li>

            <li class="list-group-item">
              <strong>Digital Marketing Manager</strong> at <a href="https://www.lidl.pl/" target="_blank">Lidl Polska</a><br>
              <small>2013 – 2020</small><br>
              Led digital marketing strategy and operations for Lidl Poland. Managed large team and multi-million euro budgets.
            </li>

            <li class="list-group-item">
              <strong>Marketing Specialist</strong> at <a href="https://www.allegro.pl/" target="_blank">Allegro.pl</a><br>
              <small>2006 – 2013</small><br>
              Oversaw e-commerce, performance marketing, and digital transformation projects.
            </li>
          </ul>

          <a href="https://www.linkedin.com/in/mikolajpaczkowski/details/experience/" target="_blank" class="btn btn-outline-primary mb-3">
            Check more details (my LinkedIn account)
          </a>
          
          
          <h2 class="section-title">Contact</h2>
          <p>
            Email: <a href="mailto:mikolaj.paczkowski@gmail.com">mikolaj.paczkowski@gmail.com</a><br>
          </p>
        </div>
      </div>
    </div>
    <!-- Bootstrap JS and Bootstrap Icons -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <script>
      // Dark theme default ON
      function setTheme(dark) {
        if (dark) {
          document.body.classList.add('dark-theme');
          document.getElementById('themeToggle').classList.remove('btn-light');
          document.getElementById('themeToggle').classList.add('btn-dark');
          document.getElementById('themeToggle').innerHTML = '<i class="bi bi-moon-stars"></i><span class="visually-hidden">Toggle dark/light theme</span>';
        } else {
          document.body.classList.remove('dark-theme');
          document.getElementById('themeToggle').classList.remove('btn-dark');
          document.getElementById('themeToggle').classList.add('btn-light');
          document.getElementById('themeToggle').innerHTML = '<i class="bi bi-sun"></i><span class="visually-hidden">Toggle dark/light theme</span>';
        }
      }
      // Store theme in localStorage
      function getStoredTheme() {
        return localStorage.getItem('theme') || 'dark';
      }
      function storeTheme(theme) {
        localStorage.setItem('theme', theme);
      }
      // Init theme
      document.addEventListener('DOMContentLoaded', function() {
        let theme = getStoredTheme();
        setTheme(theme === 'dark');
        document.getElementById('themeToggle').addEventListener('click', function() {
          let isDark = document.body.classList.contains('dark-theme');
          setTheme(!isDark);
          storeTheme(!isDark ? 'dark' : 'light');
        });
      });
    </script>
  </body>
</html>