This commit is contained in:
Tben 2022-03-11 12:14:44 +01:00
parent e114d90e10
commit 34f2c03509
4 changed files with 149 additions and 4 deletions

View File

@ -19,6 +19,107 @@ const about = () => {
<span className='hero-sub-text'> <span className='hero-sub-text'>
<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." /> <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." />
</span> </span>
<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>
<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"> <div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a> <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='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>

View File

@ -12,11 +12,11 @@ const index = () => {
<GeneralLayout> <GeneralLayout>
<Head> <Head>
<title>Benjamin Toby</title> <title>Benjamin Toby</title>
<meta name="description" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /> <meta name="description" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, Next JS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer" />
</Head> </Head>
<h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /></h1> <h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /></h1>
<span className='hero-sub-text'> <span className='hero-sub-text'>
<TextShuffler textInput="Hi, I'm Benjamin Toby, a highly talented fullstack web developer with extensive enxperience in web design, frontend and backend development." /> <TextShuffler textInput="Hi, I'm Benjamin Toby, a fullstack web developer and UI/UX expert." />
</span> </span>
<div className="hero-ctas-section"> <div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a> <a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>

View File

@ -23,8 +23,8 @@ html {
--sec-color-3: #688e26; --sec-color-3: #688e26;
--sec-color-4: #adb2d3; --sec-color-4: #adb2d3;
--sec-color-5: #c2a878; --sec-color-5: #c2a878;
--light-color-1: #ddd; --light-color-1: rgb(64, 37, 216);
--test-color: rgb(224, 64, 64); --test-color: rgb(113, 116, 255);
--transparent-white: rgba(255, 255, 255, 0.2); --transparent-white: rgba(255, 255, 255, 0.2);
} }
@ -81,6 +81,7 @@ header {
h1 { h1 {
font-size: 52px; font-size: 52px;
margin-top: 0; margin-top: 0;
margin-bottom: 10px;
} }
/* ################################################# -- Sliders */ /* ################################################# -- Sliders */
@ -315,6 +316,11 @@ textarea {
background-color: var(--dark-color); background-color: var(--dark-color);
} }
.tech-stack-header {
color: rgb(113, 116, 255);
margin-bottom: 3px;
}
/* ############################################################################################### /* ###############################################################################################
################################################################################################## ##################################################################################################
################################################################################################## ##################################################################################################

View File

@ -79,6 +79,14 @@
z-index: -10 z-index: -10
} }
.mb-0 {
margin-bottom: 0px
}
.mb-1 {
margin-bottom: 0.25rem
}
.block { .block {
display: block display: block
} }
@ -99,6 +107,18 @@
height: 100% height: 100%
} }
.h-8 {
height: 2rem
}
.h-4 {
height: 1rem
}
.h-6 {
height: 1.5rem
}
.w-10 { .w-10 {
width: 2.5rem width: 2.5rem
} }
@ -124,3 +144,21 @@
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity)) background-color: rgb(220 38 38 / var(--tw-bg-opacity))
} }
.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity))
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity))
}
.opacity-25 {
opacity: 0.25
}
.opacity-50 {
opacity: 0.5
}