This commit is contained in:
Tben
2022-03-11 13:36:23 +01:00
parent 893246dfc0
commit c9bd5c9332
6 changed files with 143 additions and 170 deletions
+101 -96
View File
@@ -22,103 +22,108 @@ const about = () => {
<div className='w-full h-6'></div>
<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>
<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>
<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>
<div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
+5
View File
@@ -21,6 +21,11 @@ const index = () => {
<div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
<a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
<a href='/contact' style={ {
backgroundColor: "transparent",
color: "white",
border: "2px solid white"
} }>Contact Me</a>
</div>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout>