Update About me and Resume
This commit is contained in:
Benjamin Toby
parent
5c581775a5
commit
e68bdf5844
@ -1 +1,5 @@
|
||||
node_modules
|
||||
.git
|
||||
dump
|
||||
node_shell
|
||||
.next
|
||||
@ -24,18 +24,36 @@ export default function AboutSection() {
|
||||
<section className="flex flex-col items-start gap-4">
|
||||
<h2 className="mb-0">About Me</h2>
|
||||
|
||||
<span className="text-[24px]">Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me.</span>
|
||||
<span className="text-[24px]">
|
||||
To explain the full extent of my skills and
|
||||
abilities is now impractical. I've delved into the
|
||||
deep waters of tech and racked up multiple skills
|
||||
and abilities. To keep it simple, whichever stack is
|
||||
at hand, I've either had some experience with it, or
|
||||
I'll pick it up in a few weeks.
|
||||
</span>
|
||||
|
||||
<hr className="w-full my-8" />
|
||||
|
||||
<h3 className="m-0">_ Code Ben</h3>
|
||||
<span className="text-[24px]">In the last two years I've developed from a complete designer to pro software engineer. After countless days of writing code, debugging, testing, building projects, server administration, deployment, CI/CD, etc, I've developed the most vital skill of all: adaptability. The ability to asimilate new knowledge at record pace: the tech industry moves really fast: you either keepup, or fall behind.</span>
|
||||
<h3 className="m-0">_Code Ben</h3>
|
||||
<span className="text-[24px]">
|
||||
Software engineering is natural to me as a trained
|
||||
engineer. Web/server architecture and design is
|
||||
where I really thrive. Using tried and trusted
|
||||
technologies, while keeping a keen eye on stability
|
||||
and performance, I'm able to create the perfect
|
||||
balance between bleeding edge and stability.
|
||||
</span>
|
||||
|
||||
<hr className="w-full my-8" />
|
||||
|
||||
<h3 className="m-0">Graphic Design</h3>
|
||||
<span className="text-[24px]">
|
||||
After spending about 5 years in the design industry, I've picked up a few vital concepts about UI/UX design. My design path still sips into my developer life: and I must say, it's the perfect harmony of modern tech. Some of my designs can be found on my{" "}
|
||||
After spending about 5 years in the design industry,
|
||||
I've picked up a few vital concepts about UI/UX
|
||||
design. My design path still sips into my developer
|
||||
life: and it boosts my overall expertise. Some of my
|
||||
designs can be found on my{" "}
|
||||
<a
|
||||
href="https://99designs.com/profiles/tben"
|
||||
target="_blank"
|
||||
@ -47,10 +65,7 @@ export default function AboutSection() {
|
||||
|
||||
<hr className="w-full my-8" />
|
||||
|
||||
<a
|
||||
href="/about"
|
||||
className="button outlined"
|
||||
>
|
||||
<a href="/about" className="button outlined">
|
||||
Learn More About Me
|
||||
</a>
|
||||
</section>
|
||||
|
||||
@ -106,7 +106,7 @@ export default function Hero() {
|
||||
Contact Me
|
||||
</a>
|
||||
<a
|
||||
href="/documents/Resume-Benjamin-Toby-Linkedin.pdf"
|
||||
href="/documents/Resume-Benjamin-Toby.pdf"
|
||||
download={true}
|
||||
className="button grow hero-button-link"
|
||||
style={{
|
||||
|
||||
@ -11,15 +11,16 @@ export default function Hero() {
|
||||
>
|
||||
<span className="text-primary-light text-lg">About Me</span>
|
||||
<h1 className="text-5xl leading-snug" id="hero-text">
|
||||
I live on the bleeding edge of technology
|
||||
I'm the perfect balance between bleeding edge and stability
|
||||
</h1>
|
||||
<span className="hero-sub-text">
|
||||
Quick learner, adaptable, problem solver, curious. I strive
|
||||
to know the system, rather than the status quo. My credo is:
|
||||
no problem too great, no knowledge too vast, no logic too
|
||||
complex. I thrive in difficult situations and complex
|
||||
hurdles: problem solving is now second nature to me: if you
|
||||
can think it, it can be done.
|
||||
So often new technologies are introduced and they are not
|
||||
always the bells and whistles they are promised to be. I
|
||||
have a keen eye for these technologies and I'm able to
|
||||
determine if they are worth the investment or not. I'm not
|
||||
afraid to use new technologies but I'm also not afraid to
|
||||
use tried and true technologies. I'm able to make the best
|
||||
decision for the project at hand.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
394
index.html
394
index.html
@ -1,394 +0,0 @@
|
||||
<!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>
|
||||
@ -13,7 +13,7 @@
|
||||
},
|
||||
{
|
||||
"title": "My Resume",
|
||||
"url": "/documents/Resume-Benjamin-Toby-Linkedin.pdf",
|
||||
"url": "/documents/Resume-Benjamin-Toby.pdf",
|
||||
"download": true
|
||||
},
|
||||
{
|
||||
|
||||
@ -44,5 +44,14 @@
|
||||
"postcss": "^8.4.26",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"pkg": {
|
||||
"scripts": "build/**/*.js",
|
||||
"assets": "views/**/*",
|
||||
"targets": [
|
||||
"node18-linux-amd64",
|
||||
"node18-linux-arm64"
|
||||
],
|
||||
"outputPath": "dist"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/documents/Resume-Benjamin-Toby.pdf
Normal file
BIN
public/documents/Resume-Benjamin-Toby.pdf
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user