updates
This commit is contained in:
Tben
parent
893246dfc0
commit
c9bd5c9332
@ -1,6 +1,7 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import GeneralHeader from './GeneralHeader';
|
||||
import Head from "next/head"
|
||||
import GeneralFooter from './GeneralFooter';
|
||||
|
||||
const GeneralLayout = ({ children }) => {
|
||||
return (
|
||||
@ -9,9 +10,10 @@ const GeneralLayout = ({ children }) => {
|
||||
<meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
|
||||
</Head>
|
||||
<GeneralHeader />
|
||||
<article>
|
||||
<main>
|
||||
{ children }
|
||||
</article>
|
||||
</main>
|
||||
<GeneralFooter />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
197
pages/about.jsx
197
pages/about.jsx
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -32,7 +32,6 @@ body {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
padding: 40px;
|
||||
padding-bottom: 100px;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
background-color: var(--dark-color);
|
||||
|
||||
@ -47,30 +47,10 @@
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top-4 {
|
||||
top: 1rem
|
||||
}
|
||||
|
||||
.left-4 {
|
||||
left: 1rem
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px
|
||||
}
|
||||
@ -79,8 +59,16 @@
|
||||
z-index: -10
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px
|
||||
.mt-10 {
|
||||
margin-top: 2.5rem
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
@ -91,74 +79,48 @@
|
||||
display: block
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem
|
||||
}
|
||||
|
||||
.h-28 {
|
||||
height: 7rem
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem
|
||||
}
|
||||
|
||||
.w-28 {
|
||||
width: 7rem
|
||||
}
|
||||
|
||||
.w-96 {
|
||||
width: 24rem
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.bg-slate-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(71 85 105 / var(--tw-bg-opacity))
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.bg-red-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(220 38 38 / var(--tw-bg-opacity))
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.text-slate-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(71 85 105 / var(--tw-text-opacity))
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
|
||||
.text-blue-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(37 99 235 / var(--tw-text-opacity))
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem
|
||||
}
|
||||
|
||||
.opacity-25 {
|
||||
opacity: 0.25
|
||||
.font-bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
.opacity-20 {
|
||||
opacity: 0.2
|
||||
}
|
||||
|
||||
.opacity-40 {
|
||||
opacity: 0.4
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx"],
|
||||
content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx", , "./layouts/**/*.jsx"],
|
||||
theme: {
|
||||
screens: {
|
||||
xs: "350px",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user