<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>PullStyle - Portfolio HTML template</title>
      <!-- Main Stylesheet -->
      <link rel="stylesheet" href="css/main.css">
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <!-- Icons -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"/>
  </head>
  <body>
      <!-- Navigation -->
      <nav class="navbar sticky-top px-5 py-3 border-dark border-bottom">
          <div class="container">
              <a class="navbar-brand" href="index.html"><i class="iconoir-planet"></i></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                  <i class="iconoir-menu-scale"></i>
              </button>
              <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body d-flex align-items-center">
                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                      <li class="nav-item">
                        <a class="nav-link" href="index.html" data-bs-dismiss="offcanvas">
                          <span class="menu-number">1</span> Home
                        </a>
                        <div class="borderline"></div>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="about.html" data-bs-dismiss="offcanvas">
                          <span class="menu-number">2</span> About
                        </a>
                        <div class="borderline"></div>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="portfolio.html" data-bs-dismiss="offcanvas">
                          <span class="menu-number">3</span> Case studies
                        </a>
                        <div class="borderline"></div>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="journal.html" data-bs-dismiss="offcanvas">
                          <span class="menu-number">4</span> Journal
                        </a>
                        <div class="borderline"></div>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="contact.html" data-bs-dismiss="offcanvas">
                          <span class="menu-number">5</span> Contact
                        </a>
                        <div class="borderline"></div>
                      </li>
                    </ul>
                </div>
              </div>
          </div>
      </nav>
      <!-- Hero Section -->
      <div class="container hero-section">
          <div class="row">
            <div class="col-xl-8 col-lg-12">
              <h1>Sam Simmons.</h1>
              <h2>Visual Designer</h2>
            </div>
            <div class="col-xl-4 col-lg-12">
              <p class="description-hero">
                  As a visual designer, I specialize in creating engaging, aesthetically pleasing designs that enhance user experiences and drive brand success.
              </p>
              <a href="" class="pull-btn-social">Dribble</a>
              <a href="" class="pull-btn-social">Behance</a>
              <a href="" class="pull-btn-social">Instagram</a>
            </div>
          </div>
          <div class="container projects-expand">
              <div class="row g-4 py-2">
                  <div class="col-12">
                      <a href=""><img src="img/hero-1.webp"></a>
                  </div>
              </div>
              <div class="row g-4 py-2">
                  <div class="col-2">
                      <a href=""><video src="img/hero-video1.mp4" autoplay loop muted class="zoom-1"></video></a>
                  </div>
                  <div class="col-10">
                      <a href=""><img src="img/hero-3.webp"></a>
                  </div>
              </div>
              <div class="row g-4 py-2">
                  <div class="col-7">
                      <a href=""><img src="img/hero-4.webp"></a>
                  </div>
                  <div class="col-5">
                      <a href=""><video src="img/hero-video2.mp4" autoplay loop muted></video></a>
                  </div>
              </div>
              <div class="row g-4 py-2">
                  <div class="col-12">
                      <a href=""><img src="img/hero-6.webp"></a>
                  </div>
              </div>
          </div>
      </div>
      <!-- Services -->
      <div class="container services">
          <div class="row">
              <div class="col-12">
                  <h3><i class="iconoir-long-arrow-down-right"></i>Services</h3>
                  <div class="accordion accordion-flush" id="accordionFlushExample">
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                              <i class="iconoir-two-points-circle"></i> UI.UX
                          </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                          <div class="accordion-body">I offer user-centered UX/UI design services focused on creating intuitive and visually appealing digital experiences. My approach ensures seamless navigation, efficient functionality, and a cohesive user journey. By combining research-driven insights with creative design, I help businesses enhance user engagement and improve overall satisfaction. Whether for web or mobile platforms, my designs prioritize usability, accessibility, and a positive user experience that aligns with business goals.</div>
                        </div>
                      </div>
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                              <i class="iconoir-perspective-view"></i> Development
                          </button>
                        </h2>
                        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                          <div class="accordion-body">Delivering comprehensive web development solutions, I focus on building responsive, high-performance websites that align with your business objectives. From sleek front-end interfaces to powerful back-end systems, each site is crafted to be visually compelling and technically sound. Prioritizing scalability, security, and optimization, these web solutions aim to enhance user engagement and drive conversions. Whether it's a minimalist landing page or a complex e-commerce platform, the focus remains on providing a seamless user experience across all devices.</div>
                        </div>
                      </div>
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingThree">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                              <i class="iconoir-color-filter"></i> Branding
                          </button>
                        </h2>
                        <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                          <div class="accordion-body">Crafting strong brand identities that resonate with target audiences, my branding services help businesses create memorable and impactful visual representations. From developing logos to complete brand identity systems, each element reflects your brand’s core values and personality. The goal is to establish a cohesive and recognizable presence that builds customer trust and loyalty. Through thoughtful design and strategic execution, brands are equipped with the tools needed to stand out in a competitive market.</div>
                        </div>
                      </div>
                      <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingFour">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
                              <i class="iconoir-cube-hole"></i> Animation
                            </button>
                          </h2>
                          <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">Offering tailored animation services that bring concepts to life, each animation is designed to engage viewers and enrich digital content. Whether enhancing websites, social media campaigns, or presentations, animations are crafted to align with your brand’s style and message. From motion graphics to detailed character animations, the goal is to create dynamic and captivating visuals that communicate ideas effectively and leave a lasting impression.</div>
                          </div>
                      </div>
                      <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingFive">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
                              <i class="iconoir-ease-curve-control-points"></i> Motion
                            </button>
                          </h2>
                          <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">Specializing in motion design, these services create visually dynamic elements that enhance storytelling and interaction. From subtle transitions to full-length animated videos, motion is used to guide users through digital interfaces, highlight key features, and create a more immersive experience. Each motion design project is tailored to fit brand aesthetics and improve user engagement, ensuring that animations not only look great but also serve a functional purpose in enhancing the overall user experience.</div>
                          </div>
                      </div>  
                    </div>
              </div>
          </div>
      </div>
      <!-- Case studies -->
      <div class="container case-studies">
          <div class="row">
              <div class="col-12">
                <h3><i class="iconoir-long-arrow-down-right"></i>Case studies</h3>
              </div>
          </div>
          <div class="row row-cols-2 case-container g-5">
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case2.png" alt=""></a>
                <h4><a href="portfolio-single.html">Foodspring</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case1.jpg" alt=""></a>
                <h4><a href="portfolio-single.html">Flextro</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case3.png" alt=""></a>
                <h4><a href="portfolio-single.html">Stellar</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case4.png" alt=""></a>
                <h4><a href="portfolio-single.html">Pay+</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case5.png" alt=""></a>
                <h4><a href="portfolio-single.html">Hyper</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="case-card">
                <a href="portfolio-single.html"><img src="img/case6.jpg" alt=""></a>
                <h4><a href="portfolio-single.html">Crypto app</a></h4>
                <div class="tags">
                  <a href="#" class="pull-btn-social">Artwork</a>
                  <a href="#" class="pull-btn-social">Branding</a>
                  <a href="#" class="pull-btn-social">3D & Motion</a>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <a href="portfolio.html" class="w-100 btn pull-btn-full">All case studies <i class="iconoir-arrow-right"></i></a>
            </div>
          </div>
      </div>
      <!-- Journal -->
      <div class="container journal">
        <div class="row">
          <div class="col">
            <h3><i class="iconoir-long-arrow-down-right"></i>Journal</h3>
          </div>
        </div>
        <div class="row row-cols-3 g-5">
          <div class="col">
            <a href="journal-single.html"><img class="img-journal" src="img/journal1.jpg"></a>
            <p class="date-journal">Oct 7, 2024</p>
            <h4 class="title-journal"><a href="journal-single.html">5 Essential Web Design Trends to Elevate Your Business in 2024</a></h4>
          </div>
          <div class="col">
            <a href="journal-single.html"><img class="img-journal" src="img/journal2.jpg"></a>
            <p class="date-journal">Oct 7, 2024</p>
            <h4 class="title-journal"><a href="journal-single.html">How User-Centered Design Improves Customer Experience and Boosts Conversions</a></h4>
          </div>
          <div class="col">
            <a href="journal-single.html"><img class="img-journal" src="img/journal3.jpg"></a>
            <p class="date-journal">Oct 7, 2024</p>
            <h4 class="title-journal"><a href="journal-single.html">Why Branding Matters: Building a Strong Visual Identity for Your Business</a></h4>
          </div>
        </div>
      </div>
      <!-- Footer -->
      <div class="container" id="footer">
        <div class="row">
          <div class="col-12 text-center footer-contact">
            <p class="big-heading">
              Let’s create your<br>next big idea.
            </p>
            <a href="contact.html" class="pull-btn-white btn text-center">Request a quote <i class="iconoir-arrow-right"></i></a>
          </div>
          <div class="col-12 text-center footer-links">
            <a href="index.html" class="px-2">Home</a>
            <a href="about.html" class="px-2">About</a>
            <a href="portfolio.html" class="px-2">Case studies</a>
            <a href="journal.html" class="px-2">Journal</a>
            <a href="contact.html" class="px-2">Contact</a>
          </div>
          <div class="col-12 text-center copyright">
            <p>&copy; 2024 Boneluv</p>
          </div>
        </div>
      </div>
      <!-- Bootstrap Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>