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-04-26 12:39:32 +00:00
< TextShuffler textInput = "Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. There's no problem too great: no knowledge too vast: no logic too complex. My motto is simple: you have a goal, I have a target: and I get the job done impeccably, everytime." / >
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:45:49 +00:00
< section >
2022-03-11 12:52:31 +00:00
< h2 > < TextShuffler textInput = "Web Dev Tech Stack" / > < / h2 >
2022-03-11 12:36:23 +00:00
< 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 >
2022-03-11 12:37:45 +00:00
< li >
< h3 className = "tech-stack-header" > < TextShuffler textInput = "Git and Github" / > < / h3 >
< span className = 'opacity-50' >
< TextShuffler textInput = "Version control" / >
< / span >
< / li >
2022-03-11 12:36:23 +00:00
< / ul >
2022-03-11 12:45:49 +00:00
< / section >
2022-03-11 12:36:23 +00:00
2022-03-11 12:45:49 +00:00
< section >
2022-03-11 12:52:31 +00:00
< h2 > < TextShuffler textInput = "UI/UX tech Stack" / > < / h2 >
2022-03-11 12:36:23 +00:00
< 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 >
2022-03-11 12:45:49 +00:00
< / section >
2022-03-11 11:14:44 +00:00
2022-01-06 05:27:13 +00:00
< div className = "hero-ctas-section" >
2022-03-11 12:42:01 +00:00
< a href = '/documents/Benjamin_Toby_CV-min.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
