tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update About me and Resume

Browse Source
This commit is contained in:
Benjamin Toby 2024-01-08 19:03:07 +01:00
parent 5c581775a5
commit e68bdf5844
8 changed files with 47 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore
View File

@ -1 +1,5 @@
node_modules node_modules
.git
dump
node_shell
.next

29
app/(components)/AboutSection.tsx
View File

@ -24,18 +24,36 @@ export default function AboutSection() {
<section className="flex flex-col items-start gap-4"> <section className="flex flex-col items-start gap-4">
<h2 className="mb-0">About Me</h2> <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" /> <hr className="w-full my-8" />
<h3 className="m-0">_Code Ben</h3> <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> <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" /> <hr className="w-full my-8" />
<h3 className="m-0">Graphic Design</h3> <h3 className="m-0">Graphic Design</h3>
<span className="text-[24px]"> <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 <a
href="https://99designs.com/profiles/tben" href="https://99designs.com/profiles/tben"
target="_blank" target="_blank"
@ -47,10 +65,7 @@ export default function AboutSection() {
<hr className="w-full my-8" /> <hr className="w-full my-8" />
<a <a href="/about" className="button outlined">
href="/about"
className="button outlined"
>
Learn More About Me Learn More About Me
</a> </a>
</section> </section>

2
app/(components)/Hero.tsx
View File

@ -106,7 +106,7 @@ export default function Hero() {
Contact Me Contact Me
</a> </a>
<a <a
href="/documents/Resume-Benjamin-Toby-Linkedin.pdf" href="/documents/Resume-Benjamin-Toby.pdf"
download={true} download={true}
className="button grow hero-button-link" className="button grow hero-button-link"
style={{ style={{

15
app/about/(components)/Hero.tsx
View File

@ -11,15 +11,16 @@ export default function Hero() {
> >
<span className="text-primary-light text-lg">About Me</span> <span className="text-primary-light text-lg">About Me</span>
<h1 className="text-5xl leading-snug" id="hero-text"> <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> </h1>
<span className="hero-sub-text"> <span className="hero-sub-text">
Quick learner, adaptable, problem solver, curious. I strive So often new technologies are introduced and they are not
to know the system, rather than the status quo. My credo is: always the bells and whistles they are promised to be. I
no problem too great, no knowledge too vast, no logic too have a keen eye for these technologies and I'm able to
complex. I thrive in difficult situations and complex determine if they are worth the investment or not. I'm not
hurdles: problem solving is now second nature to me: if you afraid to use new technologies but I'm also not afraid to
can think it, it can be done. use tried and true technologies. I'm able to make the best
decision for the project at hand.
</span> </span>
</div> </div>
</div> </div>

394
index.html
View File

@ -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>&lsaquo;</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&nbsp;<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>

2
layouts/general_layout/links.json
View File

@ -13,7 +13,7 @@
}, },
{ {
"title": "My Resume", "title": "My Resume",
"url": "/documents/Resume-Benjamin-Toby-Linkedin.pdf", "url": "/documents/Resume-Benjamin-Toby.pdf",
"download": true "download": true
}, },
{ {

9
package.json
View File

@ -44,5 +44,14 @@
"postcss": "^8.4.26", "postcss": "^8.4.26",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"typescript": "^5.1.6" "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
View File

Binary file not shown.