personal-site/index.html

311 lines
10 KiB
HTML
Raw Normal View History

2021-05-24 13:38:13 +00:00
<!DOCTYPE html>
<html lang="en">
2021-06-19 08:12:11 +00:00
<head>
<!-- ...................................................................................................................... Head -->
2021-05-24 13:38:13 +00:00
2021-06-19 08:12:11 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
2021-06-19 10:56:35 +00:00
<title>Tben Web Designer</title>
2021-05-24 13:38:13 +00:00
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
2021-06-19 10:57:44 +00:00
<link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon4.ico"
2021-06-19 10:03:18 +00:00
type="image/x-icon">
2021-06-26 09:11:17 +00:00
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700,800|Material+Icons"
rel="stylesheet">
2021-06-19 06:59:15 +00:00
2021-06-26 09:11:17 +00:00
<link rel="stylesheet" href="main.min.css">
2021-05-24 13:38:13 +00:00
</head>
2021-06-19 08:12:11 +00:00
2021-05-24 13:38:13 +00:00
2021-06-19 06:59:15 +00:00
<body>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- Preloader -->
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<div class="preloader-init" id="preloader"></div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- Header -->
2021-06-19 08:12:11 +00:00
2021-05-24 13:38:13 +00:00
<header>
2021-06-19 06:59:15 +00:00
<a href="#">
<img src="images/logo-v3.svg" alt="">
<div>Tben.<br>Design</div>
</a>
2021-06-19 08:12:11 +00:00
2021-06-20 07:02:27 +00:00
<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">Resume</a>
<a href="#contact-me" id="contact-me-link" class="nav-link">Contact Me</a>
2021-06-26 09:11:17 +00:00
<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="#" class="social-media-links material-icons" id="linkedin"><img src="images/linkedin.svg"
alt=""></a>
</div>
2021-06-20 07:02:27 +00:00
</nav>
</div>
2021-06-26 09:11:17 +00:00
<button class="hamburger-button">
<div></div>
<div></div>
<div></div>
</button>
2021-05-24 13:38:13 +00:00
</header>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<div id="header-controller"></div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- Hero -->
2021-06-19 08:12:11 +00:00
2021-05-25 20:30:40 +00:00
<section class="hero-section">
2021-06-19 06:59:15 +00:00
<div></div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<div>
<div class="main-text-block">
2021-06-19 08:12:11 +00:00
Hi. Im a
2021-06-19 06:59:15 +00:00
<h1 class="main-hero-text">
2021-06-26 09:11:17 +00:00
<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>
2021-06-20 07:02:27 +00:00
2021-06-26 09:11:17 +00:00
<!-- <div class="hero-scroll-down-block">
2021-06-20 07:02:27 +00:00
<a href="#my-work">
<div>&lsaquo;</div>
</a>
2021-06-26 09:11:17 +00:00
<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>
2021-06-20 07:02:27 +00:00
</div>
2021-06-19 06:59:15 +00:00
</div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<img src="images/clouds.jpg" alt="" id="clouds">
<img src="images/mountains.png" alt="" id="mountains">
2021-06-19 08:12:11 +00:00
2021-06-26 09:11:17 +00:00
<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>
2021-06-19 06:59:15 +00:00
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
</section>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- My Work -->
2021-06-19 08:12:11 +00:00
2021-06-20 07:02:27 +00:00
<section class="my-work-section" id="my-work">
2021-06-19 06:59:15 +00:00
<div>
2021-06-26 09:11:17 +00:00
<h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2>
<p class="scroll-into-view-content" data-delay="400">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
2021-06-19 06:59:15 +00:00
</div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<div class="scroll-into-view">
2021-06-26 09:11:17 +00:00
<div class="portfolio-items-container scroll-into-view-content" data-delay="800"></div>
2021-06-19 06:59:15 +00:00
</div>
</section>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- About Me -->
2021-06-19 08:12:11 +00:00
2021-06-20 07:02:27 +00:00
<section class="about-me-section" id="about-me">
2021-06-19 06:59:15 +00:00
<div class="scroll-into-view">
</div>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<div>
<h2 class="scroll-into-view-content">About Me</h2>
2021-06-19 08:12:11 +00:00
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
commodo viverra maecenas accumsan lacus vel facilisis. </p>
2021-06-19 06:59:15 +00:00
</div>
</section>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- My Specialties -->
2021-06-19 08:12:11 +00:00
2021-06-20 07:02:27 +00:00
<section class="my-specialties-section" id="my-specialties">
2021-06-19 06:59:15 +00:00
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
2021-06-19 08:12:11 +00:00
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo
viverra maecenas accumsan lacus vel facilisis. </p>
2021-06-19 06:59:15 +00:00
<div>
2021-06-26 09:11:17 +00:00
<div class="scroll-into-view-content" data-delay="0">
<div>Adobe Photoshop</div><img src="images/photoshop.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="100">
<div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="200">
<div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="300">
<div>HTML 5</div><img src="images/html5.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="400">
<div>CSS3</div><img src="images/css3.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="500">
<div>javascript</div><img src="images/javascript.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="600">
<div>Git Version Control</div><img src="images/git-version-control.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="700">
<div>Figma</div><img src="images/figma.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="800">
<div>Wordpress</div><img src="images/wordpress.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="900">
<div>Webflow</div><img src="images/webflow.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1000">
<div>Adobe XD</div><img src="images/adobe-xd.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1100">
<div>Visual Studio Code</div><img src="images/vs-code.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1200">
<div>Dreamweaver</div><img src="images/dreamweaver.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1300">
<div>Adobe Animate</div><img src="images/adobe animate.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1400">
<div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt="">
</div>
2021-06-19 06:59:15 +00:00
</div>
2021-06-26 09:11:17 +00:00
<button class="scroll-into-view-content-2" data-delay="500">Download My Resume</button>
2021-06-19 06:59:15 +00:00
</section>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- Contact Me -->
2021-06-19 08:12:11 +00:00
2021-06-20 07:02:27 +00:00
<section class="contact-section" id="contact-me">
2021-06-19 06:59:15 +00:00
<div>
2021-06-20 07:02:27 +00:00
<h2 class="scroll-into-view-content">So. Let's talk</h2>
2021-06-19 08:12:11 +00:00
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
2021-06-20 07:02:27 +00:00
tempor incididunt ut labore et dolore magna aliqua. </p>
2021-06-26 09:11:17 +00:00
<a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500">
Email Address&nbsp;<span class="material-icons">mail</span>
</a>
2021-06-20 07:02:27 +00:00
2021-06-26 09:11:17 +00:00
<div class="scroll-into-view-content-2" data-delay="700">
2021-06-20 07:02:27 +00:00
<div>Copyright 2021 Tben.Design</div>
</div>
2021-06-19 06:59:15 +00:00
</div>
2021-06-19 08:12:11 +00:00
2021-06-26 09:11:17 +00:00
<div class="scroll-into-view" id="footer-right-section">
2021-06-19 08:12:11 +00:00
2021-06-26 09:11:17 +00:00
<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">
2021-06-20 07:02:27 +00:00
<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>
2021-06-19 08:12:11 +00:00
2021-05-26 06:34:47 +00:00
</div>
2021-06-19 10:03:18 +00:00
<div class="contact-section-controller"></div>
2021-06-20 07:02:27 +00:00
<div class="footer-bar">
</div>
2021-05-24 13:38:13 +00:00
</section>
2021-06-19 08:12:11 +00:00
2021-06-19 06:59:15 +00:00
<!-- #################################################################################-- Scripts -->
2021-06-19 08:12:11 +00:00
<script src="scripts/anime.min.js"></script>
2021-06-26 09:11:17 +00:00
<script src="scripts/main.min.js"></script>
2021-06-19 08:12:11 +00:00
2021-05-24 13:38:13 +00:00
</body>
</html>