Milestone 1: Completed First Prototype

I started using Bootstrap Creative template after deployment. The integration was redesigned and structured at first through GitHub Pages. The basic structure and initial project were completed in Aug 2025. Then I migrated all exisiting data and files into the Folio Bootstrap framework and stripped out unused components. The entire framework was restructured in sections using index.html, main.css, custom.css and custom.js.

              <section id="hero" class="hero">
                <h1>SASHA CHEEK</h1>
                <p>I am an Engineer</p>
              </section>
                      

Milestone 2: Designed annd Restructured to Customized Cyberpunk Theme

I replaced the default Bootstrap palette with neon cyan, magenta, and electric blue accents. Afterwards, I integrated Orbitron, VT323 and [previously] DotGothic16 fonts to achieve a futuristic display aesthetic from Sept to Nov 2025. New sections were adapted from other Boostrap templates (Lonely Bootstrap resume, Zen Blog Bootstrap Blog design elements, etc.). Customized carousels were built with extensive JS and CSS modifications for the blog, testimonials, and published work sections.

    <!-- Blog Carousel Subsection -->
    <section id="blog" class="blog-carousel section-black">
      <!-- Carousel Container Main -->
      <div class="carousel-container" data-aos="fade-up" data-aos-delay="100">
        <button class="carousel-btn prev">❮</button>
        <div class="carousel-track" id="blogTrack"></div>
        <button class="carousel-btn next">❯</button>
      </div>
    </section>
    <!-- End Blog Carousel Subsection -->

Milestone 3: Engineered Page Automation

Integrations were built for Google Search Console, Bing Webmaster Tools, Cloud DNS + SSL, and Formspree API endpoint for the custom-built contact form. Some sections (Ex. - tech portfolio) load dynamically with AOS animations and reusable components. I looked up online tutorials to learn how to do scroll animations, lazy loading, and used Swiper.js for portfolio carousels.

      <script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.__tSwiper) window.__tSwiper.destroy(true, true);

  window.__tSwiper = new Swiper('.testimonials-swiper', {
    loop: true,
    speed: 600,
    autoHeight: true, 
    autoplay: { delay: 5000, disableOnInteraction: false },
    slidesPerView: 1,
    centeredSlides: true,
    spaceBetween: 20,
    pagination: { el: '.testimonials-pagination', clickable: true },
    navigation: { nextEl: '.testimonials-next', prevEl: '.testimonials-prev' },
    breakpoints: {
      992: { slidesPerView: 1, centeredSlides: true, spaceBetween: 24 }
    }
  });
});
</script>
    

  <!-- Contact Form -->
  <form id="contact-form" action="https://formspree.io/f/[ENDPOINT URL]" method="POST" class="contact-form" novalidate>
    <div class="row gy-4">

      <!-- Name -->
      <div class="col-md-6">
        <input type="text" name="name" class="form-control" placeholder="Your Name" required>
      </div>

      <!-- Email -->
      <div class="col-md-6">
        <input type="email" name="email" class="form-control" placeholder="Your Email" required>
      </div>

      <!-- Subject -->
      <div class="col-md-12">
        <input type="text" name="subject" class="form-control" placeholder="Subject" required>
      </div>

      <!-- Message -->
      <div class="col-md-12">
        <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
      </div>

      <!-- Honeypot field (spam protection) -->
      <input type="text" name="_gotcha" style="display:none">

      <!-- Status Messages -->
      <div class="col-md-12 text-center">
        <div class="status-messages">
          <div class="loading" style="display:none;">Loading...</div>
          <div class="error-message" style="display:none;"></div>
          <div class="sent-message" style="display:none;">Your message has been sent. Thank you!</div>
        </div>
        <button type="submit" class="btn btn-neon btn-lg">Send Message</button>
      </div>

    </div>
  </form>

Log Highlights

• 2025-11-11 — Uploaded microsoftWebmasterTool.html to root directory for site verification.
• 2025-11-10 — Created and linked sitemap.xml for SEO and crawler indexing.

Milestone 4: Published + Iterated

Deployed the site to production, refined the layout for mobile, and added new sections for the Tech Portfolio and Published Work.

Log Highlights

• 2025-11-12 — Blog section visual + layout refinements (v05–v09 commits)
• 2025-11-11 — Iterative blog layout fixes, added next/prev button logic
• 2025-11-11 — Updated tagline styling and microcopy
• 2025-11-11 — Blog section initial publish and baseline structure
• 2025-11-10 — Homepage (`index.html`) updates to surface blog section

“Every build is both a product and a lesson.”