JoshS/Portfolio-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Cleaned up the code and made it use flexbox

Browse source 
Oh and there's also a nav indicator now :)
This commit is contained in:
Robert S 2021-10-13 18:42:23 +02:00
parent 8a5c48ba3d
commit 41b39bda69
No known key found for this signature in database
GPG key ID: DD534ED7DF3857A5
7 changed files with 223 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Footer.js
View file

@ -11,7 +11,7 @@ export default function Footer() {
<a>Robert S.</a> <a>Robert S.</a>
</Link> </Link>
</h4> </h4>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start space-x-2"> <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start gap-2.5">
<a href="mailto:admin@robert-s.dev" className="text-gray-400"> <a href="mailto:admin@robert-s.dev" className="text-gray-400">
<svg fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Email</title> <title>Email</title>

18
components/NavLink.js Normal file
View file

@ -0,0 +1,18 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
const NavLink = ({ href, children }) => {
const router = useRouter()
let className = children.props.className || ''
if (router.pathname === href) {
className = `${className} text-white`
} else {
className = `${className} text-gray-400`
}
return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}
export default NavLink

24
components/Navbar.js
View file

@ -1,5 +1,6 @@
import Link from "next/link"; import Link from "next/link";
import {useState} from "react"; import {useState} from "react";
import NavLink from "./NavLink";
export default function Navbar() { export default function Navbar() {
const [active, setActive] = useState(false) const [active, setActive] = useState(false)
@ -43,21 +44,26 @@ export default function Navbar() {
active ? "flex" : "hidden" active ? "flex" : "hidden"
} md:ml-auto md:flex flex-wrap flex-col md:flex-row md:space-x-4 items-center w-full pt-2 md:pt-0 md:w-auto text-lg justify-center font-semibold`} } md:ml-auto md:flex flex-wrap flex-col md:flex-row md:space-x-4 items-center w-full pt-2 md:pt-0 md:w-auto text-lg justify-center font-semibold`}
> >
<Link href="/work"> <NavLink href="/">
<a className="w-full sm:w-auto flex-none text-gray-400 hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m"> <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
Home
</a>
</NavLink>
<NavLink href="/work">
<a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
Work Work
</a> </a>
</Link> </NavLink>
<Link href="/about"> <NavLink href="/about">
<a className="w-full sm:w-auto flex-none text-gray-400 hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m"> <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
About About
</a> </a>
</Link> </NavLink>
<Link href="/contact"> <NavLink href="/contact">
<a className="w-full sm:w-auto flex-none text-gray-400 hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m"> <a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
Contact Contact
</a> </a>
</Link> </NavLink>
</div> </div>
</nav> </nav>
</> </>

72
pages/about.js
View file

@ -16,45 +16,49 @@ export default function About() {
<meta name="theme-color" content="#F43F5E" /> <meta name="theme-color" content="#F43F5E" />
</Head> </Head>
<div> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<div className="py-24 container mx-auto space-y-8"> <div className="flex flex-grow items-center">
<motion.div className="space-y-6" initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}> <div className="w-full">
<h1 className="text-center md:text-6xl text-3xl font-bold"> <div className="container flex mx-auto justify-center">
About <span className="text-rose-500">me</span> <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
</h1> <h1 className="text-center md:text-6xl text-3xl font-bold">
<div className="container lg:w-3/5 w-11/12 mx-auto"> About <span className="text-rose-500">me</span>
<div className="text-left md:text-justify space-y-6 text-lg font-medium text-gray-200"> </h1>
<p> <div className="container lg:w-3/5 w-11/12 mx-auto">
Hey, I'm Robert - a full-stack developer from the Netherlands with approximately three years of back-end and five years of front-end development experience. Nowadays, I mainly use Next.js, TailwindCSS and Python for my projects, but I have used different tools and frameworks in the past. I also love the open-source community, <a className="text-gray-200 underline" href="https://github.com/Wallvon/website" target="_blank" rel="noopener noreferrer">and this website is open-source too :)</a>. My coding knowledge is mostly based on many years of experimenting and trying, and I am happy to have made it this far. <div className="text-left md:text-justify space-y-6 text-lg font-medium text-gray-200">
</p> <p>
<div className="space-y-2"> Hey, I'm Robert - a full-stack developer from the Netherlands with approximately three years of back-end and five years of front-end development experience. Nowadays, I mainly use Next.js, TailwindCSS and Python for my projects, but I have used different tools and frameworks in the past. I also love the open-source community, <a className="text-gray-200 underline" href="https://github.com/Wallvon/website" target="_blank" rel="noopener noreferrer">and this website is open-source too :)</a>. My coding knowledge is mostly based on many years of experimenting and trying, and I am happy to have made it this far.
<p> </p>
I can use the following technologies/frameworks mostly fluently: <div className="space-y-2">
</p> <p>
<ul className="list-disc pl-4"> I can use the following technologies/frameworks mostly fluently:
<li>HTML, CSS & JS</li> </p>
<li>TailwindCSS, Bootstrap, UIkit & Cirrus UI</li> <ul className="list-disc pl-4">
<li>Python</li> <li>HTML, CSS & JS</li>
<li>Flask & similar frameworks (like Sanic)</li> <li>TailwindCSS, Bootstrap, UIkit & Cirrus UI</li>
<li>MySQL, PostgreSQL, MongoDB, Redis</li> <li>Python</li>
</ul> <li>Flask & similar frameworks (like Sanic)</li>
<p> <li>MySQL, PostgreSQL, MongoDB, Redis</li>
And I am currently learning the following technologies/frameworks: </ul>
</p> <p>
<ul className="list-disc pl-4"> And I am currently learning the following technologies/frameworks:
<li>Go</li> </p>
<li>Rust</li> <ul className="list-disc pl-4">
<li>React/Next.js</li> <li>Go</li>
<li>Docker</li> <li>Rust</li>
</ul> <li>React/Next.js</li>
<li>Docker</li>
</ul>
</div>
</div>
</div> </div>
</div> </motion.div>
</div> </div>
</motion.div> </div>
</div> </div>
<Footer />
</div> </div>
<Footer />
</div> </div>
) )
} }

130
pages/contact.js
View file

@ -16,72 +16,78 @@ export default function Contact() {
<meta name="theme-color" content="#F43F5E" /> <meta name="theme-color" content="#F43F5E" />
</Head> </Head>
<div> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<motion.div className="py-24 container mx-auto space-y-8" initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}> <div className="flex flex-grow items-center">
<div className="text-center"> <div className="w-full">
<h1 className="md:text-6xl text-3xl font-bold"> <div className="container flex mx-auto justify-center">
Contact <span className="text-rose-500">me</span> <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
</h1> <div className="text-center">
<p className="text-gray-200 text-lg font-medium px-4"> <h1 className="md:text-6xl text-3xl font-bold">
Want to get in touch, or just want to have a chat? Well, here's your chance! :) Contact <span className="text-rose-500">me</span>
</p> </h1>
</div> <p className="text-gray-200 text-lg font-medium px-4">
<div className="lg:w-2/3 w-4/5 mx-auto overflow-auto"> Want to get in touch, or just want to have a chat? Well, here's your chance! :)
<div className="w-full grid gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-3"> </p>
<a href="mailto:admin@robert-s.dev" className="bg-gray-800 text-white p-4 text-center rounded gap-3"> </div>
<svg fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mx-auto max-h-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <div className="mx-auto overflow-auto mt-4">
<title>Email</title> <div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/> <a href="mailto:admin@robert-s.dev" className="bg-gray-800 text-white p-4 text-center rounded gap-3">
</svg> <svg fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<p className="text-white text-xl overflow-ellipsis">admin@robert-s.dev</p> <title>Email</title>
</a> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
<a href="https://github.com/Wallvon" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer"> </svg>
<svg fill="currentColor" className="mx-auto max-h-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <p className="text-white text-xl overflow-ellipsis">admin@robert-s.dev</p>
<title>GitHub</title> </a>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/> <a href="https://github.com/Wallvon" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer">
</svg> <svg fill="currentColor" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<p className="text-white text-xl overflow-ellipsis">Wallvon</p> <title>GitHub</title>
</a> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
<a onClick={() => {navigator.clipboard.writeText("That Guy#5275")}} className="bg-gray-800 text-white p-4 text-center rounded gap-3 cursor-pointer has-tooltip"> </svg>
<svg fill="currentColor" className="mx-auto max-h-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <p className="text-white text-xl overflow-ellipsis">Wallvon</p>
<title>Discord</title> </a>
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/> <a onClick={() => {navigator.clipboard.writeText("That Guy#5275")}} className="bg-gray-800 text-white p-4 text-center rounded gap-3 cursor-pointer has-tooltip">
</svg> <svg fill="currentColor" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<span className='tooltip bg-gray-800 text-white rounded shadow-lg'>Click to copy</span> <title>Discord</title>
<p className="text-white text-xl overflow-ellipsis">That Guy#5275</p> <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
</a> </svg>
<a href="https://www.linkedin.com/in/robert-stokreef/" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer"> <span className='tooltip bg-gray-800 text-white rounded shadow-lg'>Click to copy</span>
<svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0" <p className="text-white text-xl overflow-ellipsis">That Guy#5275</p>
className="mx-auto max-h-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> </a>
<title>LinkedIn</title> <a href="https://www.linkedin.com/in/robert-stokreef/" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/> <svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0"
<circle cx="4" cy="4" r="2" stroke="none"/> className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</svg> <title>LinkedIn</title>
<p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p> <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/>
</a> <circle cx="4" cy="4" r="2" stroke="none"/>
<a href="https://twitter.com/ThatGuy5275" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer"> </svg>
<svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="mx-auto max-h-24" <p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p>
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> </a>
<title>Twitter</title> <a href="https://twitter.com/ThatGuy5275" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/> <svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="mx-auto max-h-12"
</svg> viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p> <title>Twitter</title>
</a> <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
<a href="https://instagram.com/robert.__.s" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer"> </svg>
<svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" <p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p>
className="mx-auto max-h-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> </a>
<title>Instagram</title> <a href="https://instagram.com/robert.__.s" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/> <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"/> className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</svg> <title>Instagram</title>
<p className="text-white text-xl overflow-ellipsis">robert.__.s</p> <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
</a> <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"/>
</svg>
<p className="text-white text-xl overflow-ellipsis">robert.__.s</p>
</a>
</div>
</div>
</motion.div>
</div> </div>
</div> </div>
</motion.div> </div>
<Footer />
</div> </div>
<Footer />
</div> </div>
) )
} }

26
pages/index.js
View file

@ -16,22 +16,24 @@ export default function Home() {
<meta name="theme-color" content="#F43F5E" /> <meta name="theme-color" content="#F43F5E" />
</Head> </Head>
<div className="h-screen"> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<div className="h-1/2 m-auto absolute inset-0"> <div className="flex flex-grow items-center">
<div className="container flex mx-auto items-center justify-center absolute inset-0"> <div className="w-full">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}> <div className="container flex mx-auto justify-center">
<h1 className="md:text-6xl text-3xl font-bold"> <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
Hi there, I'm <span className="text-rose-500">Robert S.</span> <h1 className="md:text-6xl text-3xl font-bold">
</h1> Hi there, I'm <span className="text-rose-500">Robert S.</span>
<p className="text-gray-200 text-lg font-medium"> </h1>
Developer & Tech enthusiast <p className="text-gray-200 text-lg font-medium">
</p> Developer & Tech enthusiast
</motion.div> </p>
</motion.div>
</div>
</div> </div>
</div> </div>
<Footer />
</div> </div>
<Footer />
</div> </div>
) )
} }

132
pages/work.js
View file

@ -16,75 +16,81 @@ export default function Work() {
<meta name="theme-color" content="#F43F5E" /> <meta name="theme-color" content="#F43F5E" />
</Head> </Head>
<div> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<motion.div className="py-24 container mx-auto space-y-8" initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}> <div className="flex flex-grow items-center">
<div className="text-center"> <div className="w-full">
<h1 className="md:text-6xl text-3xl font-bold"> <div className="container flex mx-auto justify-center">
My <span className="text-rose-500">work</span> <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
</h1> <div className="text-center">
<p className="text-gray-200 text-lg font-medium px-4"> <h1 className="md:text-6xl text-3xl font-bold">
Featured & recent projects My <span className="text-rose-500">work</span>
</p> </h1>
</div> <p className="text-gray-200 text-lg font-medium px-4">
<div className="relative w-11/12 mx-auto overflow-auto"> Featured & recent projects
<div className="absolute h-full w-full p-20 z-20"> </p>
<div className="flex items-center justify-center h-full w-full p-4">
<h1 className="md:text-6xl text-3xl font-bold text-center">
Coming soon
</h1>
</div>
</div>
<div className="w-full grid gap-20 grid-cols-1 md:grid-cols-2 blur md:p-16 p-4">
<div className="flex-grow space-y-2">
<h1 className="text-3xl font-bold">Lorem Ipsum</h1>
<p className="text-gray-400 py- text-justify">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div className="flex space-x-2">
<a className="rounded-full" href="#" target="_blank">
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</a>
<a className="rounded-full" href="#" target="_blank">
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Link</title>
<path d="M14.8284 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.509 3.3668 14.9763 3.3668 13.4142 4.9289L10.5858 7.75732L12 9.17154L14.8284 6.34311C15.6095 5.56206 16.8758 5.56206 17.6568 6.34311C18.4379 7.12416 18.4379 8.39049 17.6568 9.17154L14.8284 12Z" />
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02372 20.6332 6.49106 20.6332 4.92896 19.0711C3.36686 17.509 3.36686 14.9764 4.92896 13.4143L7.75739 10.5858L9.1716 12L6.34317 14.8285C5.56212 15.6095 5.56212 16.8758 6.34317 17.6569C7.12422 18.4379 8.39055 18.4379 9.1716 17.6569L12 14.8285Z" />
<path d="M14.8285 10.5857C15.219 10.1952 15.219 9.56199 14.8285 9.17147C14.4379 8.78094 13.8048 8.78094 13.4142 9.17147L9.1716 13.4141C8.78107 13.8046 8.78107 14.4378 9.1716 14.8283C9.56212 15.2188 10.1953 15.2188 10.5858 14.8283L14.8285 10.5857Z" />
</svg>
</a>
</div> </div>
</div> <div className="relative w-11/12 mx-auto overflow-auto">
<div className="flex-grow space-y-2"> <div className="absolute h-full w-full p-20 z-20">
<h1 className="text-3xl font-bold">Lorem Ipsum</h1> <div className="flex items-center justify-center h-full w-full p-4">
<p className="text-gray-400 py- text-justify"> <h1 className="md:text-6xl text-3xl font-bold text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Coming soon
</p> </h1>
<div className="flex space-x-2"> </div>
<a className="rounded-full" href="#" target="_blank"> </div>
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <div className="w-full grid gap-20 grid-cols-1 md:grid-cols-2 blur md:p-16 p-4">
<title>GitHub</title> <div className="flex-grow space-y-2">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/> <h1 className="text-3xl font-bold">Lorem Ipsum</h1>
</svg> <p className="text-gray-400 py- text-justify">
</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
<a className="rounded-full" href="#" target="_blank"> </p>
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <div className="flex space-x-2">
<title>Link</title> <a className="rounded-full" href="#" target="_blank">
<path d="M14.8284 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.509 3.3668 14.9763 3.3668 13.4142 4.9289L10.5858 7.75732L12 9.17154L14.8284 6.34311C15.6095 5.56206 16.8758 5.56206 17.6568 6.34311C18.4379 7.12416 18.4379 8.39049 17.6568 9.17154L14.8284 12Z" /> <svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02372 20.6332 6.49106 20.6332 4.92896 19.0711C3.36686 17.509 3.36686 14.9764 4.92896 13.4143L7.75739 10.5858L9.1716 12L6.34317 14.8285C5.56212 15.6095 5.56212 16.8758 6.34317 17.6569C7.12422 18.4379 8.39055 18.4379 9.1716 17.6569L12 14.8285Z" /> <title>GitHub</title>
<path d="M14.8285 10.5857C15.219 10.1952 15.219 9.56199 14.8285 9.17147C14.4379 8.78094 13.8048 8.78094 13.4142 9.17147L9.1716 13.4141C8.78107 13.8046 8.78107 14.4378 9.1716 14.8283C9.56212 15.2188 10.1953 15.2188 10.5858 14.8283L14.8285 10.5857Z" /> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg> </svg>
</a> </a>
<a className="rounded-full" href="#" target="_blank">
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Link</title>
<path d="M14.8284 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.509 3.3668 14.9763 3.3668 13.4142 4.9289L10.5858 7.75732L12 9.17154L14.8284 6.34311C15.6095 5.56206 16.8758 5.56206 17.6568 6.34311C18.4379 7.12416 18.4379 8.39049 17.6568 9.17154L14.8284 12Z" />
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02372 20.6332 6.49106 20.6332 4.92896 19.0711C3.36686 17.509 3.36686 14.9764 4.92896 13.4143L7.75739 10.5858L9.1716 12L6.34317 14.8285C5.56212 15.6095 5.56212 16.8758 6.34317 17.6569C7.12422 18.4379 8.39055 18.4379 9.1716 17.6569L12 14.8285Z" />
<path d="M14.8285 10.5857C15.219 10.1952 15.219 9.56199 14.8285 9.17147C14.4379 8.78094 13.8048 8.78094 13.4142 9.17147L9.1716 13.4141C8.78107 13.8046 8.78107 14.4378 9.1716 14.8283C9.56212 15.2188 10.1953 15.2188 10.5858 14.8283L14.8285 10.5857Z" />
</svg>
</a>
</div>
</div>
<div className="flex-grow space-y-2">
<h1 className="text-3xl font-bold">Lorem Ipsum</h1>
<p className="text-gray-400 py- text-justify">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div className="flex space-x-2">
<a className="rounded-full" href="#" target="_blank">
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</a>
<a className="rounded-full" href="#" target="_blank">
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Link</title>
<path d="M14.8284 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.509 3.3668 14.9763 3.3668 13.4142 4.9289L10.5858 7.75732L12 9.17154L14.8284 6.34311C15.6095 5.56206 16.8758 5.56206 17.6568 6.34311C18.4379 7.12416 18.4379 8.39049 17.6568 9.17154L14.8284 12Z" />
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02372 20.6332 6.49106 20.6332 4.92896 19.0711C3.36686 17.509 3.36686 14.9764 4.92896 13.4143L7.75739 10.5858L9.1716 12L6.34317 14.8285C5.56212 15.6095 5.56212 16.8758 6.34317 17.6569C7.12422 18.4379 8.39055 18.4379 9.1716 17.6569L12 14.8285Z" />
<path d="M14.8285 10.5857C15.219 10.1952 15.219 9.56199 14.8285 9.17147C14.4379 8.78094 13.8048 8.78094 13.4142 9.17147L9.1716 13.4141C8.78107 13.8046 8.78107 14.4378 9.1716 14.8283C9.56212 15.2188 10.1953 15.2188 10.5858 14.8283L14.8285 10.5857Z" />
</svg>
</a>
</div>
</div>
</div>
</div> </div>
</div> </motion.div>
</div> </div>
</div> </div>
</motion.div> </div>
<Footer />
</div> </div>
<Footer />
</div> </div>
) )
} }