<!DOCTYPE html> <html lang="en"> <head> <!-- ...................................................................................................................... Head --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Tben Web Designer</title> <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer"> <link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon4.ico" type="image/x-icon"> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700,800|Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="main.css"> </head> <body> <!-- #################################################################################-- Preloader --> <div class="preloader-init" id="preloader"></div> <!-- #################################################################################-- Header --> <header> <a href="#"> <img src="images/logo-v3.svg" alt=""> <div>Tben.<br>Design</div> </a> <div> <nav> <a href="#my-work" id="my-work-link" class="nav-link">My Work</a> <a href="#about-me" id="about-me-link" class="nav-link">About Me</a> <a href="#my-specialties" id="resume-link" class="nav-link footer-special">Resume</a> <a href="#contact-me" id="contact-me-link" class="nav-link footer-special">Contact Me</a> </nav> </div> <div style="display: flex;align-items: center;"> <a href="mailto:benoti.san@gmail.com" class="social-media-links material-icons" id="mail">mail</a> <a href="https://linkedin.com/in/benjamin-toby" class="social-media-links material-icons" id="linkedin" target="_blank"><img src="images/linkedin.svg" alt=""></a> </div> <button class="hamburger-button"> <div></div> <div></div> <div></div> </button> </header> <div id="header-controller"></div> <!-- #################################################################################-- Preloader --> <div id="preloader-container"> <img src="images/clouds.jpg" alt=""> <img src="images/logo-v3.svg" alt=""> </div> <!-- #################################################################################-- Hero --> <section class="hero-section"> <div></div> <div> <div class="main-text-block"> Hi. I’m a <h1 class="main-hero-text"> <a href="#" class="uiux-designer-link">UI UX Designer</a>, <a href="#" class="web-designer-link">Web Designer</a>, <a href="#" class="frontend-designer-link">Frontend Web Developer</a>, <a href="#" class="graphic-motion-designer-link">Graphic and motion Designer</a>. </h1> <br> <button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button> </div> <!-- <div class="hero-scroll-down-block"> <a href="#my-work"> <div>‹</div> </a> <img src="images/rotating-text.svg" alt="" class="rotating-text-image"> </div> --> <div class="hero-text-section-graphic"> <a href="#my-work"> <img src="images/down-arrow.svg" alt=""> </a> <div></div> <div></div> <div></div> </div> </div> <img src="images/clouds.jpg" alt="" id="clouds"> <img src="images/mountains.png" alt="" id="mountains"> <div class="benjamin-image-block-wrapper"> <div class="benjamin-image-block"> <div class="benjamin-image-block-overlay"></div> </div> <div class="service-display-block"> </div> </div> <div class="benjamin-big-text-block">Benjamin<br>Toby</div> </section> <!-- #################################################################################-- My Work --> <section class="my-work-section" id="my-work"> <div> <h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2> <p class="scroll-into-view-content" data-delay="400">Here are a few of my works: you can find more of my work on my <a href="https://99designs.com/profiles/2220588" target="_blank">99designs</a> profile.</p> <div class="portfolio-buttons-container"> <button class="portfolio-left-button"><img src="images/white-arrow.svg" alt=""></button> <button class="portfolio-right-button"><img src="images/white-arrow.svg" alt=""></button> </div> </div> <div class="scroll-into-view"> <div class="portfolio-items-container scroll-into-view-content" data-delay="800"> <!-- Porfolio entry --> <div class="portfolio-entry" id="transcend-barriers"> <!-- <img src="images/my-image-large.jpg" alt=""> --> <div> <h3>Transcend Barriers Animation</h3> <p>This animation was made for web view. I used aftereffects and bodymoving to accomplish this: the result? High definition svg anmimation that looks crisp on any resolution and maintains a relatively light weight</p> </div> <div> <div class="specialty-skill"> <div>Adobe Illustrator</div><img src="images/illustrator.svg" alt=""> </div> <div class="specialty-skill"> <div>Adobe After Effects</div><img src="images/aftereffects.svg" alt=""> </div> <div class="specialty-skill"> <div>javascript</div><img src="images/javascript.svg" alt=""> </div> </div> </div> <!-- Porfolio entry --> <div class="portfolio-entry" id="github-to-asana"> <!-- <img src="images/mountains.png" alt=""> --> <div> <h3>Github to Asana</h3> <p>This project is an ongoing webapp that connects github to asana. In this project I'm focusing on the UI/UX, together with frontend functionality.</p> </div> <div> <div class="specialty-skill"> <div>Adobe Photoshop</div><img src="images/photoshop.svg" alt=""> </div> <div class="specialty-skill"> <div>Adobe Illustrator</div><img src="images/illustrator.svg" alt=""> </div> <div class="specialty-skill"> <div>Adobe After Effects</div><img src="images/aftereffects.svg" alt=""> </div> <div class="specialty-skill"> <div>HTML5</div><img src="images/html5.svg" alt=""> </div> <div class="specialty-skill"> <div>CSS3</div><img src="images/css3.svg" alt=""> </div> <div class="specialty-skill"> <div>javascript</div><img src="images/javascript.svg" alt=""> </div> <div class="specialty-skill"> <div>Git version control</div><img src="images/git-version-control.svg" alt=""> </div> </div> <img src="images/Project_GitToAsana_LandingPage_002.jpg" alt=""> <div id="github-to-asana-animation"></div> </div> </div> </div> </section> <!-- #################################################################################-- About Me --> <section class="about-me-section" id="about-me"> <div class="scroll-into-view"> <img src="images/my-image-large.jpg" alt=""> </div> <div> <h2 class="scroll-into-view-content">About Me</h2> <p class="scroll-into-view-content">I've traversed multiple fields over the past decade: from engineering studies, to solar power constructions, to web design, graphic design, 2d animations, and code. Over the years I've learnt the best skill: which is learnability and adaptability: hence I aim to cut across many different fields: the world changes fast, and I think this is the only skill that matters.</p> </div> </section> <!-- #################################################################################-- My Specialties --> <section class="my-specialties-section" id="my-specialties"> <h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2> <p class="scroll-into-view-content">Ever expanding and ever improving, I have proffesional grade understanding of the tools below. But I don't plan to stop here.</p> <div> <div class="specialty-skill scroll-into-view-content" data-delay="0"> <div>Adobe Photoshop</div><img src="images/photoshop.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="100"> <div>Adobe Illustrator</div><img src="images/illustrator.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="200"> <div>Adobe After Effects</div><img src="images/aftereffects.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="300"> <div>HTML 5</div><img src="images/html5.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="400"> <div>CSS3</div><img src="images/css3.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="500"> <div>javascript</div><img src="images/javascript.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="600"> <div>Git Version Control</div><img src="images/git-version-control.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="700"> <div>Figma</div><img src="images/figma.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content" data-delay="800"> <div>Wordpress</div><img src="images/wordpress.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="900"> <div>Webflow</div><img src="images/webflow.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="1000"> <div>Adobe XD</div><img src="images/adobe-xd.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="1100"> <div>Visual Studio Code</div><img src="images/vs-code.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="1200"> <div>Dreamweaver</div><img src="images/dreamweaver.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="1300"> <div>Adobe Animate</div><img src="images/adobe animate.svg" alt=""> </div> <div class="specialty-skill scroll-into-view-content-2" data-delay="1400"> <div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt=""> </div> </div> <button class="scroll-into-view-content-2" data-delay="500">Download My Resume</button> </section> <!-- #################################################################################-- Contact Me --> <section class="contact-section" id="contact-me"> <div> <h2 class="scroll-into-view-content">So. Let's talk</h2> <p class="scroll-into-view-content">Your business is my business as soon as you hit that contact button. I'm ready to attend to your needs as soon as possible. Just drop a line.</p> <a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500"> Email Address <span class="material-icons">mail</span> </a> <div class="scroll-into-view-content-2" data-delay="700"> <div>Copyright 2021 Tben.Design</div> </div> </div> <div class="scroll-into-view" id="footer-right-section"> <div class="scroll-into-view-content" data-delay="800"> <form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php" autocomplete="on"> <input type="text" required placeholder="Enter Full Name"> <input type="email" required placeholder="Enter Email Address"> <textarea name="Message" rows="3" maxlength="3000" required placeholder="Enter Message"></textarea> <button type="submit">Send Message</button> </form> </div> </div> <div class="contact-section-controller"></div> <div class="footer-bar"> </div> </section> <!-- #################################################################################-- Scripts --> <script src="scripts/anime.min.js"></script> <script src="scripts/lottie.min.js"></script> <script src="scripts/main.js"></script> </body> </html>