2022-01-06 05:27:13 +00:00
import React from 'react'
2022-01-06 13:03:06 +00:00
import Head from 'next/head'
2022-01-06 05:27:13 +00:00
import TextShuffler from '../components/actions/TextShuffler'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
2022-03-11 10:43:00 +00:00
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
2022-01-06 05:27:13 +00:00
const about = ( ) => {
2022-03-11 10:43:00 +00:00
React . useEffect ( ( ) => {
threeJsAnimations ( )
} , [ ] )
2022-01-06 05:27:13 +00:00
return (
< GeneralLayout >
2022-01-06 13:03:06 +00:00
< Head >
< title > About Me < / title >
< meta name = "description" content = "Ben of all trade, master of all! Learn more about me" / >
< / Head >
2022-01-06 05:27:13 +00:00
< h1 > < TextShuffler textInput = "Ben of all trade, master of all!" / > < / h1 >
< span className = 'hero-sub-text' >
2022-03-11 10:43:00 +00:00
< TextShuffler textInput = "So the thing about me is: I want to know it all, I want to master it all: hence I've dug deep into almost every aspect of web design and development. In the process I've developed my most valuable skill: learnabiltiy: there are so many languages and libraries out there: about a dozen different ways to achieve the same result: even in my quest to master it all, it is not possible to master all the available languages, libraries and other web technologies: but whichever knowledge is needed at any given time, I adapt and learn: very quickly." / >
2022-01-06 05:27:13 +00:00
< / span >
2022-03-11 11:14:44 +00:00
< div className = 'w-full h-6' > < / div >
2022-03-11 12:36:23 +00:00
< article >
< h2 > < TextShuffler textInput = "My Web Dev Stack" / > < / h2 >
< ul style = { { maxWidth : "800px" } } >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "HTML, CSS, Javascript" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "The basics, the bedrock of all websites." / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "React JS" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = " JavaScript library for high-performance web applications" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Next JS" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "High performance React and Node js web framework for building blazing flast and performant web applications" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Tailwind CSS" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Lighting fast mobile first styling" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Node JS" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "JavaScript runtime for the server. For creating backend architectures and APIs" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Ubuntu Linux" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Secure server management with ubuntu and Linux" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Nginx" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Super secure web server, reverse proxy and load balancer" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "MySQL" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Tried and tested data storage, querying, and management." / >
< / span >
< / li >
< / ul >
< / article >
< article >
< h2 > < TextShuffler textInput = "My UI/UX Stack" / > < / h2 >
< ul style = { { maxWidth : "800px" } } >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Adobe Photoshop" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Web design, image manipulation, image compositing, and more" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Adobe Illustrator" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Vector graphic of all types" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Figma" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Web, UI, UX design." / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Affinity Designer" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Vector graphics." / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "After Effects" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Motion graphics and animation" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Adobe XD" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "UI/UX design" / >
< / span >
< / li >
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Webflow" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Visual Web coding" / >
< / span >
< / li >
< / ul >
< / article >
2022-03-11 11:14:44 +00:00
2022-01-06 05:27:13 +00:00
< div className = "hero-ctas-section" >
2022-03-11 10:43:00 +00:00
< a href = '/documents/Benjamin_Toby_CV.pdf' download = { true } > See my resume < / a >
2022-01-06 05:27:13 +00:00
< a href = 'https://www.linkedin.com/in/benjamin-toby/' target = "_blank" > Linkedin < / a >
< / div >
2022-03-11 10:43:00 +00:00
< div className = 'fixed top-0 left-0 -z-10' id = 'homepage-animation-wrapper' > < / div >
2022-01-06 05:27:13 +00:00
< / GeneralLayout >
)
}
export default about
