<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include("./partials/head.ejs") %>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <!-- Project -->
    <div class="wrapper">
      <header>
        <div class="container">
          <div class="row">
            <div class="my__image">
              <!--img srcset="./image/image-anousheh-ansari.webp" src="./image/image-anousheh-ansari.webp" alt="profile image"-->
              <img
                srcset="/image/my_profile_pic.png"
                src="/image/my_profile_pic.png"
                alt="my profile pic"
              />
            </div>
            <div class="header__wrapper">
              <h1 class="small__header">Discover</h1>
              <h2 class="main__header">about me.</h2>
              <p>
                Iâ€™m a 26 year old graphic designer and web developer with a
                passion for teaching. I'm currently based in Nairobi. My formal
                background is Foodscience & Technology, but graphic and
                interaction design has always been my 'thing'. My use of graphic
                illustrations in classrooms earned me the title for 'The Most
                Love Teacher' in schools.
              </p>
              <p>
                As someone who has both a creative and logical side, I always
                strive towards consistency and cleanliness in both code and
                design. I have been working as a freelance designer and
                front-end developer since 2016.
              </p>
              <div class="main__btn">
                <a class="btn" href="/contact#jumplink">Hire Me</a>
                <a class="btn1 a" href="">Download CV</a>
              </div>
            </div>
          </div>
        </div>
      </header>

      <%- include("./partials/nav.ejs") %>

      <main>
        <section class="second">
          <div class="rectangle"></div>
          <div class="container">
            <h2 class="sub__title">skills & expertise.</h2>
            <div class="row">
              <div class="skills">
                <p>
                  I discovered web design/development as an alternative career
                  path as I was hopelessly enthusiastic about the web. I
                  realized it would be the perfect fit for me. I could use my
                  creative side to design and paint things for a living, while
                  my logical side to code (and prepare a nice recipe ðŸ˜Œ). Upside
                  to this was that I was able to gain huge development
                  experience both from a logical and a creative point of view.
                </p>
                <ul>
                  <li>front-end</li>
                  <li>web</li>
                  <li>back-end</li>
                  <li>interaction</li>
                  <li>systems</li>
                  <li>cms</li>
                  <li>tutor</li>
                  <li>e-commerce</li>
                  <li>prototyping</li>
                </ul>
              </div>
              <div class="progress">
                <div class="technique">
                  <h3>Html / CSS</h3>
                  <div><span style="width: 83%">83% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>JavaScript / Node JS</h3>
                  <div><span style="width: 88%">88% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>Python</h3>
                  <div><span style="width: 80%">80% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>React</h3>
                  <div><span style="width: 75%">75% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>Graphic Design</h3>
                  <div><span style="width: 90%">90% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>Firebase</h3>
                  <div><span style="width: 60%">60% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>Linux</h3>
                  <div><span style="width: 80%">80% &nbsp;</span></div>
                </div>
                <div class="technique">
                  <h3>NoSQL Database</h3>
                  <div><span style="width: 78%">78% &nbsp;</span></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="container">
            <h2 class="sub__title">approach & vision</h2>
            <p>
              I follow a scientific process to ensure good quality & returns for
              my clients. Although the approach differs with the project scope,
              I make sure that I don't leave any area uncovered.
            </p>
            <div class="row">
              <div>
                <h3>My Strengths</h3>
                <br />
                <p>
                  One of my strongest areas is UX & UI know-how. Your mobile app
                  & web presence are an extension of your business and service.
                  I take care to retain the integrity of your company image, and
                  make sure that this is reflected throughout the UX / UI Design
                  I produce.
                </p>

                <p>
                  I make your app and website live by my intuitive designs,
                  making them more efficient, self-explanatory and more user
                  friendly. Putting an effort to develop more vibrant user
                  vision, and leading your app and website to success is what I
                  believe in.
                </p>
              </div>
              <div class="accordion">
                <div class="accordion__block-title">
                  <h3>How I Do It: The Design Process</h3>
                </div>
                <label class="accordion__item">
                  <input type="radio" name="accordion" />
                  <div class="accordion__title">Empathize</div>
                  <div class="accordion__content">
                    <div></div>
                    <div>
                      <p>
                        Here, I spend time focusing on research, getting to know
                        the human users with the aim of understanding their
                        wants, needs, and objectives as deeply as possible.
                      </p>
                      <ul>
                        <li>Research & Analysis,</li>
                        <li>User Interviews,</li>
                        <li>Use cases,</li>
                        <li>Personas creation,</li>
                        <li>Competition Analysis,</li>
                        <li>Brand Guidelines & Objectives</li>
                      </ul>
                    </div>
                  </div>
                </label>
                <label class="accordion__item">
                  <input type="radio" name="accordion" />
                  <div class="accordion__title">Conceptualisation</div>
                  <div class="accordion__content">
                    <div></div>
                    <div>
                      <p>
                        For every concept to be actualized, problems must be
                        identified first. I usually dedicate a lot of time to
                        get a clear problem statement that frames, in
                        user-centered terms, the problem I've identified.
                      </p>
                      <ul>
                        <li>Storyboarding,</li>
                        <li>Brainstorming,</li>
                        <li>Information Architecture</li>
                      </ul>
                    </div>
                  </div>
                </label>
                <label class="accordion__item">
                  <input type="radio" name="accordion" />
                  <div class="accordion__title">Prototype</div>
                  <div class="accordion__content">
                    <div></div>
                    <div>
                      <p>
                        Here, I explore more, Scaling-down mock-ups of the
                        potential products or solutions with the purpose of
                        interrogating ideas further and ironing out potential
                        mess ups.
                      </p>
                      <p></p>
                      <ul>
                        <li>UI Design,</li>
                        <li>High fidelity Mockups,</li>
                        <li>Usability Testing,</li>
                        <li>Analysis</li>
                      </ul>
                    </div>
                  </div>
                </label>
                <label class="accordion__item">
                  <input type="radio" name="accordion" />
                  <div class="accordion__title">UI Development - Web</div>
                  <div class="accordion__content">
                    <div></div>
                    <div>
                      <p>
                        I strive to turn an already spectacular, pixel-perfect
                        product into a dazzling, exemplary work; pulling
                        together the solutions into one complete product that
                        can create memorable experience for your brand in real
                        life.
                      </p>
                      <p></p>
                      <ul>
                        <li>Resolution definition,</li>
                        <li>UI Dev strategy,</li>
                        <li>Responsive UI Dev,</li>
                        <li>QA & testing,</li>
                        <li>UAT</li>
                      </ul>
                    </div>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </section>
        <section class="third">
          <div class="rectangle1"></div>
          <div class="container">
            <h2 class="sub__title">journey & experience</h2>
            <p>
              My path to web development was rather unconventional path. Instead
              of pursuing design and CS degrees, l am an entirely self-taught
              programmer. This approach has given me the freedom to check out
              the areas I was especially curious about.
            </p>
            <div class="row">
              <div class="cv">
                <div class="slideshow-container">
                  <div class="mySlides">
                    <div class="mySlidesContainer">
                      <div class="quote">
                        <h3 class="company">visualLearners</h3>
                        <h4 class="job__title">WEB DEVELOPER / online tutor</h4>
                        <p class="details">
                          Prepared well structured drafts using digital
                          publishing platforms. Promoted content on social
                          networks and monitored engagements.
                        </p>
                        <p class="date"><strong>FEB 2016 - PRESENT</strong></p>
                      </div>
                    </div>
                  </div>

                  <div class="mySlides">
                    <div class="mySlidesContainer">
                      <div class="quote">
                        <h3 class="company">vineyard Ltd</h3>
                        <h4 class="job__title">Quality Assurance</h4>
                        <p class="details">
                          Managed the company's website by coming up with
                          innovative ways to increase traffic. Conducted a
                          planned sequence of observations or measurements to
                          assess proper CCP.
                        </p>
                        <p class="date">
                          <strong>25th SEP 2020 - 20th DEC 2021</strong>
                        </p>
                      </div>
                    </div>
                  </div>

                  <div class="mySlides">
                    <div class="mySlidesContainer">
                      <div class="quote">
                        <h3 class="company">Alliance One International</h3>
                        <h4 class="job__title">Dry-Leaf Shipment Assistant</h4>
                        <p class="details">
                          Organized and processed data using visualization tools
                          and database management. Took records involving
                          inventory management and stock take.
                        </p>
                        <p class="date"><strong>AUG 2017 - FEB 2020</strong></p>
                      </div>
                    </div>
                  </div>

                  <div class="mySlides">
                    <div class="mySlidesContainer">
                      <div class="quote">
                        <h3 class="company">University of Nairobi</h3>
                        <h4 class="job__title">BSc Foodscience & Tech</h4>
                        <p class="details">
                          I spent four years here learning a wide range of
                          topics. From food production to web development on the
                          side. Guess I'm inquisitive by nature.
                        </p>
                        <p class="date"><strong>JAN 2014 - FEB 2017</strong></p>
                      </div>
                    </div>
                  </div>

                  <!-- Next/prev buttons -->
                  <a class="prev">&#10094;</a>
                  <a class="next">&#10095;</a>
                </div>
                <!-- END slidehow-container -->

                <!-- Dots/bullets/indicators -->
                <div class="dot-container">
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                </div>
              </div>
              <div class="cv-2">
                <h3>The man Himself!</h3>
                <img
                  class="side_pic"
                  src="./image/side_profile_pic.png"
                  alt="side profile picture"
                  srcset="./image/side_profile_pic.png"
                />
              </div>
            </div>
            <div class="outline">
              <a class="btn1 a" href="">Download CV</a>
            </div>

            <%- include("./partials/bodynav.ejs") %>
          </div>
        </section>
      </main>

      <%- include("./partials/footer.ejs") %> <%-
      include("./partials/button.ejs") %>
    </div>
    <script src="js/main.js"></script>
    <script src="js/about.js"></script>
  </body>
</html>
