<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="UTF-8">

    <!-- Page Title -->
    <title>Origin Graphics</title>

    <!-- Meta Tags -->
    <meta name="description" content="Show yourself brightly with Braxton - unique and creative portfolio and resume template!">
    <meta name="keywords" content="mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean">
    <meta name="author" content="mix_design">

    <!-- Viewport Meta-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Template Favicon & Icons Start -->
    <link rel="icon" href="img/favicon/favicon.ico" sizes="any">
    <link rel="icon" href="img/favicon/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
    <link rel="manifest" href="img/favicon/manifest.webmanifest">
    <!-- Template Favicon & Icons End -->

    <!-- Facebook Metadata Start -->
    <meta property="og:image:height" content="1200">
    <meta property="og:image:width" content="1200">
    <meta property="og:title" content="Origin GFX">
    <meta property="og:description" content="Show yourself brightly with Origin">
    <meta property="og:url" content="https://i.imgur.com/vo7zh81.gif"
    <meta property="og:image" content="https://i.imgur.com/vo7zh81.gif">
    <!-- Facebook Metadata End -->

    <!-- Template Styles Start -->
    <link rel="stylesheet" href="css/loaders/loader.css">
    <link rel="stylesheet" type="text/css" href="css/plugins.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Template Styles End -->

    <!-- Custom Browser Color Start -->
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#dcdce7">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111111">
    <meta name="msapplication-navbutton-color" content="#111111">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Custom Browser Color End -->
  </head>

  <body>

    <!-- Loader Start -->
    <div id="loader" class="loader">
      <div id="loaderContent" class="loader__content">
        <div class="loader__shadow"></div>
        <div class="loader__box"></div>
      </div>
    </div>
    <!-- Loader End -->

    <!-- Header Start -->
    <header id="header" class="header d-flex justify-content-between">

      <!-- Navigation Menu Start -->
      <div class="header__navigation">
        <nav id="menu" class="menu">
          <ul class="menu__list d-flex justify-content-start">
            <li class="menu__item">
              <a class="menu__link btn" href="#home">
                <span class="menu__caption">Home</span>
                <i class="ph-bold ph-house-simple"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#portfolio">
                <span class="menu__caption">Portfolio</span>
                <i class="ph-bold ph-squares-four"></i>
              </a>
            </li>
            <li class="menu__item">
              <a class="menu__link btn" href="#resume">
                <span class="menu__caption">About Me</span>
                <i class="ph-bold ph-user"></i>
              </a>
            </li>

            <li class="menu__item">
              <a class="menu__link btn" href="#contact">
                <span class="menu__caption">Contact</span>
                <i class="ph-bold ph-envelope"></i>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <!-- Navigation Menu End -->

      <!-- Header Controls Start -->
      <div class="header__controls d-flex justify-content-end">
        <button id="color-switcher" class="color-switcher header__switcher btn" type="button" role="switch" aria-label="light/dark mode" aria-checked="true"></button>
        <a 
          id="notify-trigger" 
          class="header__trigger btn" 
          href="https://discord.gg/origingfxx" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          <span class="trigger__caption">Contact Us</span>
          <i class="ph-bold ph-globe"></i>
        </a>
      </div>
      
      <!-- Header Controls End -->

    </header>
    <!-- Header End -->

    <!-- Avatar Side Block Start -->
    <div id="avatar" class="avatar">
      <div class="avatar__container d-flex flex-column justify-content-lg-between">
        <!-- image and logo -->
        <div class="avatar__block">
          <div class="avatar__logo d-flex align-items-center">
            <div class="logo__image">
              <!-- Your Logo Here!!! -->
              <img src="img/logo.svg" alt="Braxton - Personal Portfolio & Resume HTML Template Logo">
              
                <g>
                  <linearGradient id="gradientFill" gradientUnits="userSpaceOnUse" x1="9.9604" y1="75.0338" x2="75.0387" y2="9.9555">
                    <stop  offset="0" style="stop-color:var(--accent)"/>
                    <stop  offset="1" style="stop-color:var(--secondary)"/>
                  </linearGradient>
                  <path class="gradient-fill" d="M51,0H34C15.2,0,0,15.2,0,34v17c0,14.3,8.9,26.6,21.4,31.6c0,0,0,0,0,0l0,0C25.3,84.1,29.5,85,34,85h17
                    c6,0,11.7-1.6,16.6-4.3c0.1-0.1,0.2-0.1,0.3-0.2C78.1,74.6,85,63.6,85,51V34C85,15.2,69.8,0,51,0z M83,51c0,10.7-5.3,20.2-13.4,26
                    v-2.5v-3.9h3.9v-3.9h-3.9v-3.9h3.9v-3.9h-3.9H67v-3.9V51h-3.9v3.9v3.9h2.6v3.9v3.9v3.9h-3.9h-3.9v3.9h3.9h3.9v3.9v1
                    C61.3,81.7,56.3,83,51,83H34c-4.5,0-8.7-0.9-12.6-2.6v-2v-3.9h3.9h3.9v-3.9h-3.9h-3.9v-3.9v-3.9v-3.9H24v-3.9V51h-3.9v3.9v3.9h-2.6
                    h-3.9v3.9h3.9v3.9h-3.9v3.9h3.9v3.9v3.9C8.2,72.8,2,62.6,2,51V34C2,16.4,16.4,2,34,2h17c17.6,0,32,14.4,32,32V51z M50.1,54.9H54
                    v3.9v3.9h-3.9v-3.9V54.9z M33.1,54.9H37v3.9v3.9h-3.9v-3.9V54.9z M27.9,51H24v-3.9v-3.9v-3.9h3.9v3.9v3.9V51z M31.8,39.3h-3.9v-3.9
                    h3.9V39.3z M31.8,43.2v-3.9h3.9v3.9H31.8z M63.1,47.1V51h-3.9v-3.9v-3.9v-3.9h3.9v3.9V47.1z M35.7,47.1v-3.9h3.9h3.9h3.9h3.9v3.9
                    h-3.9h-3.9h-3.9H35.7z M59.2,39.3h-3.9v-3.9h3.9V39.3z M55.3,43.2h-3.9v-3.9h3.9V43.2z"/>
                </g>
              </svg>
            </div>
            <div class="logo__caption">
              <p>Origin<br>Graphics</p>
            </div>
          </div>
          <div class="avatar__image">
            <img src="img/logo.svg" alt="origin gfx">
          </div>
        </div>
        <!-- data caption #1 -->
        <div class="avatar__block">
          <h6>
            <small class="top">Specialization:</small>
           Motion graphic designer<br>And after effects pro
          </h6>
        </div>
        <!-- data caption #2 -->
        <div class="avatar__block">
          <h6>
            <small class="top">high quality</small>
            top notch designs
          </h6>
        </div>
        <!-- socials and CTA button -->
        <div class="avatar__block">
          <div class="avatar__socials">
            <ul class="socials-square d-flex justify-content-between">
              <li class="socials-square__item">
                <a class="socials-square__link btn" href="https://discord.gg/origingfxx" target="_blank">
                  <i class="ph-fill ph-discord-logo"></i>
                </a>
              </li>
              
                </a>
              </li>
              
            </ul>
          </div>
          <div class="avatar__btnholder">
            <a class="btn btn-default btn-fullwidth btn-hover btn-hover-accent" href="#contact" target="_blank">
              <span class="btn-caption">Let's Work Together!</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Avatar Side Block End -->

    <!-- Page Content Start -->
    <div id="content" class="content">
      <div class="content__wrapper">

        <!-- Intro Section Start -->
        <section id="home" class="main intro">

          <!-- Headline Start -->
          <div id="headline" class="headline d-flex align-items-start flex-column" data-speed="1">
            <p class="headline__subtitle animate-headline">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>welcome</span>
            </p>
            <h1 class="headline__title animate-headline">I'm Prince.<br>motion graphic designer and a after effects pro</h1>
            <div class="headline__btnholder d-flex flex-column flex-sm-row">
              <a class="btn mobile-vertical btn-default btn-hover btn-hover-accent-mobile animate-headline" href="#portfolio">
                <span class="btn-caption">My Works</span>
                <i class="ph-bold ph-squares-four"></i>
              </a>
             
            </div>
          </div>
          <!-- Headline End -->

          <!-- Scroll Button Start -->
          <div class="rotating-btn">
            <a href="#portfolio" class="rotating-btn__link slide-down">
              <!-- SVG rotating text -->
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" 
                class="animate-rotation" data-value="360">
                <defs>
                  <path id="textPath" d="M110,59.5c0,27.6-22.4,50-50,50s-50-22.4-50-50s22.4-50,50-50S110,31.9,110,59.5z"/>
                </defs>
                <g>
                  <use xlink:href="#textPath" fill="none"></use>
                  <text>
                    <!-- button text here!!! -->
                    <textPath xlink:href="#textPath">Scroll for More * Scroll for More * </textPath>
                  </text>
                </g>
              </svg>
              <!-- arrow icon -->
              <i class="ph-bold ph-arrow-down"></i>
            </a>
          </div>
          <!-- Scroll Button End -->

        </section>
        <!-- Intro Section End -->

        <!-- Portfolio Section Start -->
        <section id="portfolio" class="inner inner-first portfolio">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-grid-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>Portfolio</span>
            </p>
            <h2 class="h2__title animate-in-up">Check out my featured projects</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Works Gallery Start -->
          <div class="content__block grid-block">
            <div class="container-fluid px-0 inner__gallery">
              <div class="row gx-0 my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/logo.gif" data-image="img/logo.gif" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="img/logo.gif" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr" itemprop="caption description">
                    <h5>Logo for F-TEAM</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag opposite">logo</span>
                      <span class="rounded-tag opposite">Animated</span>
                    </div>
                    <p class="small">Handcrafted animated logo design made for f-team by origin.
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/showcase2.png" data-image="img/showcase2.png" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
                    <img src="img/showcase2.png" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr opposite" itemprop="caption description">
                    <h5 class="opposite">Logo for vouch vault</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag">logo</span>
                      <span class="rounded-tag">illustrator</span>
                    </div>
                    <p class="small">Handcrafted logo made by us for vouch vault
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/showcase3.gif" data-image="img/showcase3.gif" class="gallery__link" itemprop="contentUrl" data-size="800x1515">
                    <img src="img/showcase3.gif" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr opposite" itemprop="caption description">
                    <h5 class="opposite">Thread design for cleanboosts</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag">Thread design</span>
                      <span class="rounded-tag">after effects</span>
                    </div>
                    <p class="small">Stunning thread design created by us for Cleanboosts
                    </p>
                  </figcaption>
                </figure>
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/showcase4.gif" data-image="img/showcase4.gif" class="gallery__link" itemprop="contentUrl" data-size="800x1515">
                    <img src="img/showcase4.gif" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr opposite" itemprop="caption description">
                    <h5 class="opposite">Thread design for F-team</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag">Thread design</span>
                      <span class="rounded-tag">after effects</span>
                    </div>
                    <p class="small">Stunning thread design created by us for f-team
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
                <!-- Works Gallery Single Item Start -->
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/showcase5.gif" data-image="img/showcase5.gif" class="gallery__link" itemprop="contentUrl" data-size="1200x300">
                    <img src="img/showcase5.gif" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr " itemprop="caption description">
                    <h5>Signature banner</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag opposite">Animated signature</span>
                      <span class="rounded-tag opposite">after effects</span>
                    </div>
                    <p class="small">animated signature made by us for F-Team.
                    </p>
                  </figcaption>
                </figure>
                <figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                  <a href="img/showcase6.gif" data-image="img/showcase6.gif" class="gallery__link" itemprop="contentUrl" data-size="1200x300">
                    <img src="img/showcase6.gif" class="gallery__image" itemprop="thumbnail" alt="Image description">
                  </a>
                  <figcaption class="gallery__descr " itemprop="caption description">
                    <h5>Signature banner</h5>
                    <div class="card__tags d-flex flex-wrap">
                      <span class="rounded-tag opposite">Animated signature</span>
                      <span class="rounded-tag opposite">after effects</span>
                    </div>
                    <p class="small">animated signature made by us for Ductify.
                    </p>
                  </figcaption>
                </figure>
                <!-- Works Gallery Single Item End -->
    
              </div>
            </div>
          </div>
          <!-- Content Block - Works Gallery End -->

        </section>
        <!-- Portfolio Section End -->

        <!-- About Section Start -->
        <section id="about" class="inner about">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-grid-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>About Me</span>
            </p>
            <h2 class="h2__title animate-in-up">Turning imagination into reality.</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Achievements Start -->
          <div class="content__block grid-block">
            <div class="achievements d-flex flex-column flex-md-row align-items-md-stretch">
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">200+</p>
                  <p class="achievements__descr">Happy clients</p>
                </div>
              </div>
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">2+</p>
                  <p class="achievements__descr">Years of experience</p>
                </div>
              </div>
              <!-- achievements single item -->
              <div class="achievements__item d-flex flex-column grid-item animate-card-3">
                <div class="achievements__card">
                  <p class="achievements__number">300+</p>
                  <p class="achievements__descr">Projects done</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Content Block - Achievements End -->

          <!-- Content Block - About Me Data Start -->
          <div class="content__block grid-block block-large">
            <div class="container-fluid p-0">
              <div class="row g-0 justify-content-between">
                
                <!-- About Me Description Start -->
                <div class="col-12 col-xl-8 grid-item about-descr">
                  <p class="about-descr__text animate-in-up">
                    Create as though your essence flows through every stroke—for creativity is not merely the act of shaping what is seen,
                    <a href="#0" class="text-link">but the unspoken truth of what could have been.</a> 
                    Never perceive your designs as anything less than echoes of infinite possibilities, for what you bring into existence is the reflection of all you are, all you were, and all you dare to become.
                  </p>
                  <p class="about-descr__text animate-in-up">
                    Design is not just what it looks like and feels like. 
                    <a href="#0" class="text-link">Design is how it works.</a> 
                  </p>
                  <div class="btn-group about-descr__btnholder animate-in-up">
                    <a
                      class="btn mobile-vertical btn-default btn-hover btn-hover-accent"
                      href="https://discord.gg/origingfxx" 
                      target="_blank" 
                      rel="noopener noreferrer"
                    >
                      <span class="btn-caption">Purchase</span>
                      <i class="ph-bold ph-globe"></i>
                    </a>
                  </div>
                  
                <!-- About Me Description End -->
      
                <!-- About Me Information Start -->
                <div class="col-12 col-xl-4 grid-item about-info">
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Name</small>
                      Prince
                    </h6>
                  </div>
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Work</small>
                      <a class="text-link-bold" href="tel:+12127089400">Graphic designer</a>
                    </h6>
                  </div>
                  <div class="about-info__item animate-in-up">
                    <h6>
                      <small class="top">Contact</small>
                      <a class="text-link-bold" href="https://discord.gg/origingfxx" target="_blank" rel="noopener noreferrer">Discord.gg/origingfxx</a>
                    </h6>
                    
                  </div>
                  <div class="about-info__item animate-in-up">
                    
                  </div>
                </div>
                <!-- About Me Information End -->
      
              </div>
            </div>
          </div>
          <!-- Content Block - About Me Data End -->

          <!-- Content Block - Services Start -->
          <div class="content__block grid-block">
            <div class="container-fluid p-0">
              <div class="row g-0 align-items-stretch cards">
                <!-- services cards grid single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Motion<br>Graphics</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">High quality</span>
                        <span class="rounded-tag tag-outline">Creative</span>
                      </div>
                      <p class="small cards__text animate-in-up">I work with after effects to make the animation smooth and eye catching.</p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="img/card.png" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Digital art and graphic design</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">Illustrations</span>
                        <span class="rounded-tag tag-outline">Designs</span>
                      </div>
                      <p class="small cards__text animate-in-up">I use Adobe Photoshop, ILlustrator to create 
                        illustrations and renders for my clients and stocks.
                      </p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="img/card.png" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Thread designs and marketing</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">MArketing</span>
                        <span class="rounded-tag tag-outline">Analytics</span>
                      </div>
                      <p class="small cards__text animate-in-up">i help my clients in marketing with stunning thread designs and product thumbnails.
                      </p>
                    </div>
                    <div class="cards__image d-flex">
                      <img src="img/card.png" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
                <!-- services grid cards single item -->
                <div class="col-12 col-md-6 cards__item grid-item animate-card-2">
                  <div class="cards__card d-flex flex-column">
                    <div class="cards__descr">
                      <h4 class="cards__title animate-in-up">Brand<br>identity</h4>
                      <div class="cards__tags d-flex flex-wrap animate-in-up">
                        <span class="rounded-tag tag-outline">Logo Design</span>
                        <span class="rounded-tag tag-outline">Style Guides</span>
                      </div>
                      <p class="small cards__text animate-in-up">I help my clients to develop a personality and brand voice, 
                        design the brand look and logo.
                      </p>
                    </div>
                    <div class="cards__image d-flex animate-in-up">
                      <img src="img/card.png" alt="Service/Feature Image">
                    </div>
                  </div>
                </div>
    
              </div>
            </div>
          </div>
          <!-- Content Block - Services End -->

        </section>
        <!-- About Section End -->

        <!-- Resume Section Start -->
        <section id="resume" class="inner resume">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block block-large">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>Experience</span>
            </p>
            <h2 class="h2__title animate-in-up">Practical experience</h2>
            <p class="h2__text animate-in-up">
              Be what you would seem to be - or, if you'd like it put more simply - never imagine yourself not to be otherwise 
              than what it might appear to others that what you were or 
              <a href="#0" class="text-link">might have been</a> 
              was not otherwise than what you had been 
              would have appeared to them to be otherwise.
            </p>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Education Start -->
          <div class="content__block block-large">

            <!-- H3 Block Start -->
           

            <!-- Education Lines Start -->
           

          <!-- Content Block - Experience Start -->
          <div class="content__block block-large">

            <!-- H3 Block Start -->
            <div class="section-h3">
              <h3 class="h3__title animate-in-up">Work experience</h3>
            </div>
            <!-- H3 Block End -->

            <!-- Experience Lines Start -->
            <div class="container-fluid p-0 resume-lines">
              <!-- experience single item -->
             
              <!-- experience single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2022 - 2023</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">Graphic Designer</h5>
                  <p class="resume-lines__source animate-in-up">uhq
                    <a href="#0" class="text-link-bold" target="_blank">Services</a>
                    agency
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">worked with 300+ clients and got a happy response.</p>
                </div>
              </div>
              <!-- experience single item -->
              <div class="row g-0 resume-lines__item animate-in-up">
                <div class="col-12 col-md-2">
                  <span class="resume-lines__date animate-in-up">2023 - now</span>
                </div>
                <div class="col-12 col-md-5">
                  <h5 class="resume-lines__title animate-in-up">Motion designer</h5>
                  <p class="resume-lines__source animate-in-up">Mastered
                    <a href="#0" class="text-link-bold" target="_blank">After effects</a>
                    
                  </p>
                </div>
                <div class="col-12 col-md-5">
                  <p class="small resume-lines__descr animate-in-up">I am actively involved in creating high quality and engaging motion designs.</p>
                </div>
              </div>
            </div>
            <!-- Experience Lines End -->

          </div>
          <!-- Content Block - Experience End -->

          <!-- Content Block - H3 Block Start -->
          <div class="content__block">
            <div class="section-h3 section-h3-grid">
              <h3 class="h3__title animate-in-up">My favourite tools</h3>
            </div>
          </div>
          <!-- Content Block - H3 Block End -->

          <!-- Content Block - Tools List Start -->
          <div class="content__block grid-block block-large">
            <!-- Tools List Start -->
            <div class="tools-cards d-flex justify-content-start flex-wrap">
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="img/icons/icon-photoshop.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Photoshop</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="img/icons/icon-figma.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Figma</h6>
                </div>
              </div>
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="img/icons/icon-illustrator.svg" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">Illustrator</h6>
                </div>
              </div>
              <!-- tools simgle item -->
            
              <!-- tools simgle item -->
          
              <!-- tools simgle item -->
           
              <!-- tools simgle item -->
          
              <!-- tools simgle item -->
              <div class="tools-cards__item d-flex grid-item-s animate-card-5">
                <div class="tools-cards__card">
                  <img class="tools-cards__icon animate-in-up" src="img/icons/aftereffects.png" alt="Tools Icon">
                  <h6 class="tools-cards__caption animate-in-up">After effects</h6>
                </div>
              </div>
            </div>
            <!-- Tools List End -->
          </div>
          <!-- Content Block - Tools List End -->

          <!-- Content Block - H2 Block Start -->
          <div class="content__block section-title">
            <p class="h2__subtitle animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>Vouches</span>
            </p>
            <h2 class="h2__title animate-in-up">Clients say about me</h2>
          </div>
          <!-- Content Block - H2 Block End -->

          <!-- Content Block - Testimonials Slider Start -->
          <div class="content__block">

            <!-- Testimonials Slider Start -->
            <div class="testimonials-slider">
              <!-- slider main container -->
              <div class="swiper-testimonials">
                <!-- additional required wrapper -->
                <div class="swiper-wrapper">
                  <!-- slides -->
                  <div class="swiper-slide">
                    <div class="testimonials-card animate-in-up">
                      <div class="testimonials-card__tauthor d-flex animate-in-up">
                        <div class="tauthor__avatar">
                          <img src="img/voucher.png" alt="Review Author">
                        </div>
                        <div class="tauthor__info d-flex flex-column justify-content-center">
                          <p class="tauthor__name">Skweakyz</p>
                          <p class="tauthor__position">Founder of 
                            <a href="#0" class="text-link-bold" target="_blank">Cleanboosts</a>
                          </p>
                          <div class="tauthor__rating d-flex">
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-card__descr animate-in-up">
                        <p>Honestly one of the best gfx artist I bought from Bought multiple times spending well over $150 on multiple gfx 🔥</p>
                      </div>
                      <div class="testimonials-card__btnholder animate-in-up">
                        <a class="btn mobile-vertical btn-line btn-transparent slide-right" href="https://myvouch.es/lucifergfx" target="_blank">
                          <span class="btn-caption">See more</span>
                          <i class="ph-bold ph-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                  
                  <div class="swiper-slide">
                    <div class="testimonials-card  animate-in-up">
                      <div class="testimonials-card__tauthor d-flex  animate-in-up">
                        <div class="tauthor__avatar">
                          <img src="img/voucher2.png" alt="Review Author">
                        </div>
                        <div class="tauthor__info d-flex flex-column justify-content-center">
                          <p class="tauthor__name">riflev</p>
                          <p class="tauthor__position">owner of
                            <a href="#0" class="text-link-bold" target="_blank">Boostnation</a>
                          </p>
                          <div class="tauthor__rating d-flex">
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                            <i class="ph-fill ph-star"></i>
                          </div>
                        </div>
                      </div>
                      <div class="testimonials-card__descr animate-in-up">
                        <p>got my logo and banner done in a day, the 5 product cards and emojis only took a few more days</p>
                      </div>
                      <div class="testimonials-card__btnholder animate-in-up">
                        <a class="btn mobile-vertical btn-line btn-transparent slide-right" href="https://myvouch.es/lucifergfx" target="_blank">
                          <span class="btn-caption">See more</span>
                          <i class="ph-bold ph-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- navigation buttons -->
                <div class="swiper-button-prev mxd-slider-btn-square mxd-slider-btn-square-prev animate-in-up">
                  <a class="btn btn-square btn-square-s btn-outline slide-left" href="#0">
                    <i class="ph-bold ph-caret-left"></i>
                  </a>
                </div>
                <div class="swiper-button-next mxd-slider-btn-square mxd-slider-btn-square-next animate-in-up">
                  <a class="btn btn-square btn-square-s btn-outline slide-right" href="#0">
                    <i class="ph-bold ph-caret-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <!-- Testimonials Slider End -->

          </div>
          <!-- Content Block - Testimonials Slider End -->

        </section>
        <!-- Resume Section End -->

        <!-- Contact Section Start -->
        <section id="contact" class="inner contact">

          <!-- Content Block - H2 Section Title Start -->
          <div class="content__block section-title">
            <p class="h2__subtitle  animate-in-up">
              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
                <path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
                  C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
                  C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
              </svg>
              <span>Contact</span>
            </p>
            <h2 class="h2__title  animate-in-up">Let's make something awesome together!</h2>
          </div>
          <!-- Content Block - H2 Section Title End -->

          <!-- Content Block - Contact Form Start -->
          <div class="content__block grid-block block-grid-large">
            <div class="form-container">

              <!-- Reply Messages Start -->
              <div class="form__reply centered text-center">
                <i class="ph-bold ph-smiley reply__icon"></i>
                <p class="reply__title">Done!</p>
                <span class="reply__text">Thanks for your message. I'll get back as soon as possible.</span>
              </div> 
              <!-- Reply Messages End -->

              <!-- Contact Form Start -->
              <form class="form contact-form" id="contact-form">
                <!-- Hidden Required Fields -->
                <input type="hidden" name="project_name" value="Starter Template">
                <input type="hidden" name="admin_email" value="support@mixdesign.club">
                <input type="hidden" name="form_subject" value="Contact Form Message">
                <!-- END Hidden Required Fields-->
                <div class="container-fluid p-0">
                
                    <div class="col-12 form__item animate-in-up">
                      <a class="btn btn-default btn-hover btn-hover-accent" href="https://discord.gg/origingfxx" target="_blank">
                        <span class="btn-caption">Contact Us</span>
                        <i class="ph-bold ph-paper-plane-tilt"></i>
                      </a>
                      
                    </div>
                  </div>
                </div>
              </form>
              <!-- Contact Form End -->

            </div>
          </div>
          <!-- Content Block - Contact Form End -->

          <!-- Content Block - Socials Cards Start -->
         
          <!-- Content Block - Socials Cards End -->

          <!-- Content Block - Teaser Start -->
          <div class="content__block">
            <div class="teaser">
              <p class="teaser__text animate-in-up">Want to know more about me, tell me 
                about your project or just to say hello? 
                <a class="text-link-bold" href="https://discord.gg/origingfxx">Drop me a line</a> 
                and I'll get back 
                as soon as possible.
              </p>
            </div>
          </div>
          <!-- Content Block - Teaser End -->

          <!-- Content Block - Contact Data Start -->
          <div class="content__block">
            <div class="container-fluid p-0 contact-lines animate-in-up">
              <div class="row g-0 contact-lines__item">
                <!-- data item -->
                <div class="col-12 col-md-4 contact-lines__data">
                  <p class="contact-lines__title animate-in-up">contact</p>
                  <p class="contact-lines__text animate-in-up">
                    <a class="text-link-bold" href="https://discord.gg/origingfxx" target="_blank">Discord</a>
                  </p>
                </div>
                <!-- data item -->
               
                <!-- data item -->
            
              </div>
            </div>
          </div>
          <!-- Content Block - Contact Data End -->

        </section>
        <!-- Contact Section End -->

      </div>
    </div>
    <!-- Page Content End -->

    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

      <!-- Background of PhotoSwipe.
      It's a separate element, as animating opacity is faster than rgba(). -->
      <div class="pswp__bg"></div>

      <!-- Slides wrapper with overflow:hidden. -->
      <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

          <div class="pswp__top-bar">

            <!--  Controls are self-explanatory. Order can be changed. -->

            <div class="pswp__counter"></div>

            <button class="pswp__button pswp__button--close link-s" title="Close (Esc)"></button>

            <button class="pswp__button pswp__button--share link-s" title="Share"></button>

            <button class="pswp__button pswp__button--fs link-s" title="Toggle fullscreen"></button>

            <button class="pswp__button pswp__button--zoom link-s" title="Zoom in/out"></button>

            <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- element will get class pswp__preloader-active when preloader is running -->
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
              <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left link-s" title="Previous (arrow left)"></button>

            <button class="pswp__button pswp__button--arrow--right link-s" title="Next (arrow right)"></button>

            <div class="pswp__caption">
              <div class="pswp__caption__center"></div>
            </div>

        </div>

      </div>

    </div>

    <div class="bottom-left-overlay">
      <a href="https://infected.bgng.io/product/InfectCord" target="_blank">Created By Infected</a>
    </div>
	<style>
	  /* Include Google Font Syne */
	  @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600&display=swap');

	  .bottom-left-overlay {
		position: fixed;
		bottom: 5px;
		left: 5px;
		padding: 5px 10px; /* Compact padding */
		font-family: 'Syne', sans-serif; /* Updated font */
		font-size: 12px; /* Small font size */
		color: white;
		background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
		backdrop-filter: blur(5px); /* Light blur effect */
		border-radius: 5px; /* Slightly rounded corners */
		z-index: 1000;
	  }

	  .bottom-left-overlay a {
		color: white; /* Hyperlink text color */
		text-decoration: none;
	  }

	  .bottom-left-overlay a:hover {
		text-decoration: underline;
	  }
	</style>
    <script src="js/libs.min.js"></script>
    <script>
      gsap.registerPlugin(ScrollTrigger);

      const content = document.querySelector('body');
      const imgLoad = imagesLoaded(content);
      const svgBackground = document.querySelector("svg-background");

      imgLoad.on('done', instance => {

        document.getElementById("loaderContent").classList.add("fade-out");
        setTimeout(() => {
          document.getElementById("loader").classList.add("loaded");
        }, 300);

        gsap.set(".animate-headline", {y: 50, opacity: 0});
        ScrollTrigger.batch(".animate-headline", {
          interval: 0.1,
          batchMax: 4,
          duration: 6,
          onEnter: batch => gsap.to(batch, {
            opacity: 1, 
            y: 0,
            ease: 'sine',
            stagger: {each: 0.15, grid: [1, 4]}, 
            overwrite: true
          }),
          onLeave: batch => gsap.set(batch, {opacity: 1, y: 0, overwrite: true}),
          onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
          onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 50, overwrite: true})
        });

      });
    </script>
    <script src="js/app.js"></script>
    <script src="js/gallery-init.js"></script>
    <!-- Load Scripts End -->
    
  </body>

</html>