tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/general_layout/GeneralLayout.jsx
View File

@ -1,6 +1,7 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import GeneralHeader from './GeneralHeader'; import GeneralHeader from './GeneralHeader';
import Head from "next/head" import Head from "next/head"
import GeneralFooter from './GeneralFooter';
const GeneralLayout = ({ children }) => { const GeneralLayout = ({ children }) => {
return ( 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" /> <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> </Head>
<GeneralHeader /> <GeneralHeader />
<article> <main>
{ children } { children }
</article> </main>
<GeneralFooter />
</Fragment> </Fragment>
) )
} }

197
pages/about.jsx
View File

@ -22,103 +22,108 @@ const about = () => {
<div className='w-full h-6'></div> <div className='w-full h-6'></div>
<h2><TextShuffler textInput="My Web Dev Stack" /></h2> <article>
<ul style={ { maxWidth: "800px" } }> <h2><TextShuffler textInput="My Web Dev Stack" /></h2>
<li> <ul style={ { maxWidth: "800px" } }>
<h3 className="tech-stack-header"><TextShuffler textInput="HTML, CSS, Javascript" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="HTML, CSS, Javascript" /></h3>
<TextShuffler textInput="The basics, the bedrock of all websites." /> <span className='opacity-50'>
</span> <TextShuffler textInput="The basics, the bedrock of all websites." />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="React JS" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="React JS" /></h3>
<TextShuffler textInput=" JavaScript library for high-performance web applications" /> <span className='opacity-50'>
</span> <TextShuffler textInput=" JavaScript library for high-performance web applications" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="Next JS" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="Next JS" /></h3>
<TextShuffler textInput="High performance React and Node js web framework for building blazing flast and performant web applications" /> <span className='opacity-50'>
</span> <TextShuffler textInput="High performance React and Node js web framework for building blazing flast and performant web applications" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="Tailwind CSS" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="Tailwind CSS" /></h3>
<TextShuffler textInput="Lighting fast mobile first styling" /> <span className='opacity-50'>
</span> <TextShuffler textInput="Lighting fast mobile first styling" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="Node JS" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="Node JS" /></h3>
<TextShuffler textInput="JavaScript runtime for the server. For creating backend architectures and APIs" /> <span className='opacity-50'>
</span> <TextShuffler textInput="JavaScript runtime for the server. For creating backend architectures and APIs" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="Ubuntu Linux" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="Ubuntu Linux" /></h3>
<TextShuffler textInput="Secure server management with ubuntu and Linux" /> <span className='opacity-50'>
</span> <TextShuffler textInput="Secure server management with ubuntu and Linux" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="Nginx" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="Nginx" /></h3>
<TextShuffler textInput="Super secure web server, reverse proxy and load balancer" /> <span className='opacity-50'>
</span> <TextShuffler textInput="Super secure web server, reverse proxy and load balancer" />
</li> </span>
<li> </li>
<h3 className="tech-stack-header"><TextShuffler textInput="MySQL" /></h3> <li>
<span className='opacity-50'> <h3 className="tech-stack-header"><TextShuffler textInput="MySQL" /></h3>
<TextShuffler textInput="Tried and tested data storage, querying, and management." /> <span className='opacity-50'>
</span> <TextShuffler textInput="Tried and tested data storage, querying, and management." />
</li> </span>
</ul> </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"> <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>

5
pages/index.jsx
View File

@ -21,6 +21,11 @@ const index = () => {
<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>
<a href='/contact' style={ {
backgroundColor: "transparent",
color: "white",
border: "2px solid white"
} }>Contact Me</a>
</div> </div>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div> <div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout> </GeneralLayout>

1
styles/main.css
View File

@ -32,7 +32,6 @@ body {
width: 100%; width: 100%;
margin: 0px; margin: 0px;
padding: 40px; padding: 40px;
padding-bottom: 100px;
top: 0; top: 0;
justify-content: center; justify-content: center;
background-color: var(--dark-color); background-color: var(--dark-color);

102
styles/tw_main.css
View File

@ -47,30 +47,10 @@
position: fixed position: fixed
} }
.absolute {
position: absolute
}
.top-4 {
top: 1rem
}
.left-4 {
left: 1rem
}
.right-4 {
right: 1rem
}
.top-0 { .top-0 {
top: 0px top: 0px
} }
.right-0 {
right: 0px
}
.left-0 { .left-0 {
left: 0px left: 0px
} }
@ -79,8 +59,16 @@
z-index: -10 z-index: -10
} }
.mb-0 { .mt-10 {
margin-bottom: 0px margin-top: 2.5rem
}
.mt-auto {
margin-top: auto
}
.mb-2 {
margin-bottom: 0.5rem
} }
.mb-1 { .mb-1 {
@ -91,74 +79,48 @@
display: block display: block
} }
.h-10 { .flex {
height: 2.5rem display: flex
}
.h-28 {
height: 7rem
}
.h-96 {
height: 24rem
}
.h-full {
height: 100%
}
.h-8 {
height: 2rem
}
.h-4 {
height: 1rem
} }
.h-6 { .h-6 {
height: 1.5rem height: 1.5rem
} }
.w-10 {
width: 2.5rem
}
.w-28 {
width: 7rem
}
.w-96 {
width: 24rem
}
.w-full { .w-full {
width: 100% width: 100%
} }
.bg-slate-600 { .flex-col {
--tw-bg-opacity: 1; flex-direction: column
background-color: rgb(71 85 105 / var(--tw-bg-opacity))
} }
.bg-red-600 { .border {
--tw-bg-opacity: 1; border-width: 1px
background-color: rgb(220 38 38 / var(--tw-bg-opacity))
} }
.text-slate-600 { .text-sm {
--tw-text-opacity: 1; font-size: 0.875rem;
color: rgb(71 85 105 / var(--tw-text-opacity)) line-height: 1.25rem
} }
.text-blue-600 { .text-xl {
--tw-text-opacity: 1; font-size: 1.25rem;
color: rgb(37 99 235 / var(--tw-text-opacity)) line-height: 1.75rem
} }
.opacity-25 { .font-bold {
opacity: 0.25 font-weight: 700
} }
.opacity-50 { .opacity-50 {
opacity: 0.5 opacity: 0.5
} }
.opacity-20 {
opacity: 0.2
}
.opacity-40 {
opacity: 0.4
}

2
tailwind.config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx"], content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx", , "./layouts/**/*.jsx"],
theme: { theme: {
screens: { screens: {
xs: "350px", xs: "350px",