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

customize

Browse source
This commit is contained in:
DIVISIONSolar 2024-03-12 19:07:53 -04:00
parent 6b2d3db917
commit d8b5bac0e1
Signed by: JoshS
GPG key ID: A37D037686151E97
10 changed files with 142 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/footer.js
View file

@ -1,15 +1,14 @@
import {useState} from 'react';
import Link from "next/link";
import RomanNumerals from '../lib/romanNumerals';
import { siGithub, siDiscord, siTwitter, siInstagram } from 'simple-icons/icons';
import { Linkedin, Mail } from 'lucide-react';
export default function Footer() {
const initialDiscordText = 'Roberto#1762';
const initialDiscordText = 'DIVISIONSolar';
const [discordText, setDiscordText] = useState(initialDiscordText);
function handleDiscordClick() {
navigator.clipboard.writeText("Roberto#1762").then(r => {
navigator.clipboard.writeText("DIVISIONSolar").then(r => {
setDiscordText('Copied to clipboard!');
setTimeout(() => {
@ -22,17 +21,17 @@ export default function Footer() {
<>
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<p className="text-xl">
© {RomanNumerals(new Date().getFullYear())}
© {(new Date().getFullYear())}
{" "}
<a>Robert S.</a>
<a>Josh S.</a>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start gap-x-4 md:gap-2.5">
<a href="mailto:admin@robert-s.dev" className="text-gray-400">
<a href="mailto:me@joshsevero.dev" className="text-gray-400">
<Mail className="w-5 h-5">
<title>Email</title>
</Mail>
</a>
<a href="https://github.com/Wallvon" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<a href="https://git.joshseveros.cloud/JoshS/" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"
@ -53,12 +52,12 @@ export default function Footer() {
</svg>
<span className='tooltip bg-gray-800 text-white rounded shadow-lg p-1 -mt-14'>{discordText}</span>
</button>
<a href="https://www.linkedin.com/in/robert-stokreef/" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<a href="https://joshsevero.dev/linkedin" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<Linkedin fill="currentColor" strokeWidth="0" className="w-5 h-5">
<title>Linkedin</title>
</Linkedin>
</a>
<a href="https://twitter.com/ThatGuy5275" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<a href="" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"
@ -68,7 +67,7 @@ export default function Footer() {
<path d={siTwitter.path} />
</svg>
</a>
<a href="https://instagram.com/robert.__.s" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<a href="" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"

3
components/navbar.js
View file

@ -15,7 +15,7 @@ export default function Navbar() {
<div className="flex">
<Link href="/">
<span className="flex font-medium items-center mb-4 md:mb-0 cursor-pointer">
<span className="text-2xl font-bold duration-200">Robert S.</span>
<span className="text-2xl font-bold duration-200">Josh S.</span>
</span>
</Link>
<button
@ -48,6 +48,7 @@ export default function Navbar() {
<NavLink href="/work" text="Work" />
<NavLink href="/about" text="About" />
<NavLink href="/contact" text="Contact" />
<NavLink href="/donate" text="Donate" />
</div>
</nav>
</>

22
layout/layout.js
View file

@ -6,25 +6,25 @@ export default function Layout({
children,
title = '',
}) {
title = `${title && `${title} —`} Robert S.`
title = `${title && `${title} —`} Josh S.`
return (
<>
<Head>
<meta charSet="UTF-8"/>
<title>{title}</title>
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Falcon,Tailwind,TailwindCSS,Bootstrap" />
<meta name="author" content="Robert Stokreef" />
<meta name="description" content="A developer and tech enthusiast from the United States." />
<meta name="keywords" content="HTML,CSS,JavaScript,Tailwind,TailwindCSS,Bootstrap" />
<meta name="author" content="Josh Severo" />
<link rel="icon" href="/favicon.ico" />
<meta property="og:title" content={`Robert S.${title && ` - ${title}`}`} />
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
<meta property="og:image" content="https://robert-s.dev/logo.webp" />
<meta property="og:title" content={`Josh S.${title && ` - ${title}`}`} />
<meta property="og:description" content="A developer and tech enthusiast from the United States." />
<meta property="og:image" content="https://joshsevero.dev/logo.webp" />
<meta name="theme-color" content="#F43F5E" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ThatGuy5275" />
<meta name="twitter:title" content={`Robert S.${title && ` - ${title}`}`} />
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
<meta name="twitter:image" content="https://robert-s.dev/logo.webp"/>
{/* <meta name="twitter:site" content="@ThatGuy5275" /> */}
<meta name="twitter:title" content={`Josh S.${title && ` - ${title}`}`} />
<meta name="twitter:description" content="A developer and tech enthusiast from the United States."/>
<meta name="twitter:image" content="https://joshsevero.dev/logo.webp"/>
</Head>
<div className="flex flex-col min-h-screen">
<Navbar />

13
lib/romanNumerals.js
View file

@ -1,13 +0,0 @@
export default function RomanNumerals(num) {
if (isNaN(num))
return NaN;
let digits = String(+num).split(""),
key = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM",
"", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC",
"", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
roman = "",
i = 3;
while (i--)
roman = (key[+digits.pop() + (i * 10)] || "") + roman;
return Array(+digits.join("") + 1).join("M") + roman;
}

18
pages/about.js
View file

@ -14,15 +14,15 @@ export default function About() {
<div className="container lg:w-3/5 w-11/12 mx-auto mt-4">
<div className="text-left md:text-justify space-y-6 text-lg font-medium text-gray-200">
<p>
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.
Hey, I'm Josh - a developer from the United States I mainly use React.js, TailwindCSS and TypeScript for my projects, but I have used different tools and frameworks in the past. My coding knowledge is mostly based on many years of experimenting and trial and error.
</p>
<div className="space-y-2">
<p>
I can use the following languages fluently:
</p>
<div className="grid grid-cols-2 grid-rows-3 md:grid-cols-3 md:grid-rows-2 lg:grid-rows-1 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
<img alt="Python" src="https://img.shields.io/badge/-Python-18181b?style=for-the-badge&logo=python&logoColor=F43F5E" />
<img alt="SQL" src="https://img.shields.io/badge/-SQL-18181b?style=for-the-badge&logo=postgresql&logoColor=F43F5E" />
{/* <img alt="Python" src="https://img.shields.io/badge/-Python-18181b?style=for-the-badge&logo=python&logoColor=F43F5E" />
<img alt="SQL" src="https://img.shields.io/badge/-SQL-18181b?style=for-the-badge&logo=postgresql&logoColor=F43F5E" /> */}
<img alt="Javascript" src="https://img.shields.io/badge/-Javascript-18181b?style=for-the-badge&logo=javascript&logoColor=F43F5E" />
<img alt="Typescript" src="https://img.shields.io/badge/-Typescript-18181b?style=for-the-badge&logo=typescript&logoColor=F43F5E" />
<img alt="HTML5" src="https://img.shields.io/badge/-HTML5-18181b?style=for-the-badge&logo=html5&logoColor=F43F5E" />
@ -34,13 +34,13 @@ export default function About() {
<div className="grid grid-cols-2 grid-rows-3 md:grid-cols-3 md:grid-rows-2 lg:grid-rows-1 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
<img alt="Tailwind CSS" src="https://img.shields.io/badge/-Tailwind CSS-18181b?style=for-the-badge&logo=tailwindcss&logoColor=F43F5E" />
<img alt="Bootstrap" src="https://img.shields.io/badge/-Bootstrap-18181b?style=for-the-badge&logo=bootstrap&logoColor=F43F5E" />
<img alt="UIkit" src="https://img.shields.io/badge/-UIkit-18181b?style=for-the-badge&logo=uikit&logoColor=F43F5E" />
{/* <img alt="UIkit" src="https://img.shields.io/badge/-UIkit-18181b?style=for-the-badge&logo=uikit&logoColor=F43F5E" />
<img alt="Flask" src="https://img.shields.io/badge/-Flask-18181b?style=for-the-badge&logo=flask&logoColor=F43F5E" />
<img alt="Falcon" src="https://img.shields.io/badge/-Falcon-18181b?style=for-the-badge&logo=falcon&logoColor=F43F5E" />
<img alt="Falcon" src="https://img.shields.io/badge/-Falcon-18181b?style=for-the-badge&logo=falcon&logoColor=F43F5E" /> */}
<img alt="React" src="https://img.shields.io/badge/-React-18181b?style=for-the-badge&logo=react&logoColor=F43F5E" />
<img alt="Next.js" src="https://img.shields.io/badge/-Next.js-18181b?style=for-the-badge&logo=next.js&logoColor=F43F5E" />
<img alt="Alpine.js" src="https://img.shields.io/badge/-Alpine.js-18181b?style=for-the-badge&logo=alpine.js&logoColor=F43F5E" />
<img alt="Prisma" src="https://img.shields.io/badge/-Prisma-18181b?style=for-the-badge&logo=prisma&logoColor=F43F5E" />
{/* <img alt="Alpine.js" src="https://img.shields.io/badge/-Alpine.js-18181b?style=for-the-badge&logo=alpine.js&logoColor=F43F5E" />
<img alt="Prisma" src="https://img.shields.io/badge/-Prisma-18181b?style=for-the-badge&logo=prisma&logoColor=F43F5E" /> */}
</div>
<p>
Miscellaneous tools that I use:
@ -49,14 +49,14 @@ export default function About() {
<img alt="Linux" src="https://img.shields.io/badge/-Linux-18181b?style=for-the-badge&logo=linux&logoColor=F43F5E" />
<img alt="Git" src="https://img.shields.io/badge/-Git-18181b?style=for-the-badge&logo=git&logoColor=F43F5E" />
<img alt="NGINX" src="https://img.shields.io/badge/-NGINX-18181b?style=for-the-badge&logo=nginx&logoColor=F43F5E" />
<img alt="Travis CI" src="https://img.shields.io/badge/-Travis CI-18181b?style=for-the-badge&logo=travisci&logoColor=F43F5E" />
<img alt="Windows" src="https://img.shields.io/badge/-Windows%2011-18181b?style=for-the-badge&logo=windows&logoColor=F43F5E" />
</div>
<p>
Currently learning:
</p>
<div className="grid grid-cols-2 grid-rows-3 md:grid-cols-3 md:grid-rows-2 lg:grid-rows-1 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
<img alt="Go" src="https://img.shields.io/badge/-Go-18181b?style=for-the-badge&logo=go&logoColor=F43F5E" />
<img alt="Rust" src="https://img.shields.io/badge/-Rust-18181b?style=for-the-badge&logo=rust&logoColor=F43F5E" />
{/* <img alt="Rust" src="https://img.shields.io/badge/-Rust-18181b?style=for-the-badge&logo=rust&logoColor=F43F5E" /> */}
<img alt="Docker" src="https://img.shields.io/badge/-Docker-18181b?style=for-the-badge&logo=docker&logoColor=F43F5E" />
</div>
</div>

24
pages/contact.js
View file

@ -29,18 +29,18 @@ export default function Contact() {
Contact <span className="text-rose-500">me</span>
</h1>
<p className="text-gray-200 text-lg font-medium px-4">
Want to get in touch, or just want to have a chat? Well, here's your chance! (╹◡╹)
Want to get in touch, or just want to have a chat?
</p>
</div>
<div className="mx-auto overflow-auto mt-4">
<div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
<a href="mailto:admin@robert-s.dev" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5">
<a href="mailto:me@joshsevero.dev" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5">
<Mail className="mx-auto max-h-12" size={48}>
<title>Email</title>
</Mail>
<p className="text-white text-xl overflow-ellipsis">admin@robert-s.dev</p>
<p className="text-white text-xl overflow-ellipsis">me@joshsevero.dev</p>
</a>
<a href="https://github.com/Wallvon" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<a href="https://git.joshseveros.cloud/JoshS" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
@ -49,7 +49,7 @@ export default function Contact() {
<title>{siGithub.title}</title>
<path d={siGithub.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Wallvon</p>
<p className="text-white text-xl overflow-ellipsis">JoshS</p>
</a>
<button onClick={handleDiscordClick} className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5 has-tooltip hover:text-rose-600 duration-200">
<svg
@ -61,15 +61,15 @@ export default function Contact() {
<path d={siDiscord.path} />
</svg>
<span className='tooltip bg-gray-800 text-white rounded shadow-lg'>{discordText}</span>
<p className="text-white text-xl overflow-ellipsis">Roberto#1762</p>
<p className="text-white text-xl overflow-ellipsis">DIVISIONSolar</p>
</button>
<a href="https://www.linkedin.com/in/robert-stokreef/" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<a href="https://joshsevero.dev/linkedin" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<Linkedin fill="currentColor" strokeWidth="0" className="mx-auto max-h-12" size={48}>
<title>Linkedin</title>
</Linkedin>
<p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a>
<a href="https://twitter.com/ThatGuy5275" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<a href="" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
@ -78,9 +78,9 @@ export default function Contact() {
<title>{siTwitter.title}</title>
<path d={siTwitter.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p>
<p className="text-white text-xl overflow-ellipsis"></p>
</a>
<a href="https://instagram.com/robert.__.s" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<a href="" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
@ -89,7 +89,7 @@ export default function Contact() {
<title>{siInstagram.title}</title>
<path d={siInstagram.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">robert.__.s</p>
<p className="text-white text-xl overflow-ellipsis"></p>
</a>
</div>
</div>

98
pages/donate.js Normal file
View file

@ -0,0 +1,98 @@
import {useState} from 'react';
import Layout from "../layout/layout";
import {motion} from "framer-motion";
import { siBuymeacoffee, siPaypal, siCashapp } from 'simple-icons/icons';
export default function Donate() {
return (
<Layout title="Support me">
<div className="flex flex-grow items-center">
<div className="w-full">
<div className="container flex mx-auto justify-center">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
<div className="text-center">
<h1 className="md:text-6xl text-3xl font-bold">
Support <span className="text-rose-500">me</span>
</h1>
<p className="text-gray-200 text-lg font-medium px-4">
Want to support me?
</p>
</div>
<div className="mx-auto overflow-auto mt-4">
<div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
<a href="https://www.buymeacoffee.com/joshsevero" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siBuymeacoffee.title}</title>
<path d={siBuymeacoffee.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a>
<a href="https://www.paypal.com/paypalme/JoshuaSevero" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siPaypal.title}</title>
<path d={siPaypal.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a>
<a href="https://cash.app/$divisionsol" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siCashapp.title}</title>
<path d={siCashapp.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">$divisionsol</p>
</a>
{/* <a href="https://www.buymeacoffee.com/joshsevero" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siBuymeacoffee.title}</title>
<path d={siBuymeacoffee.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a>
<a href="https://www.buymeacoffee.com/joshsevero" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siBuymeacoffee.title}</title>
<path d={siBuymeacoffee.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a>
<a href="https://www.buymeacoffee.com/joshsevero" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siBuymeacoffee.title}</title>
<path d={siBuymeacoffee.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Josh Severo</p>
</a> */}
</div>
</div>
</motion.div>
</div>
</div>
</div>
</Layout>
)
}

2
pages/index.js
View file

@ -9,7 +9,7 @@ export default function Home() {
<div className="container flex mx-auto justify-center">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
<h1 className="md:text-6xl text-3xl font-bold">
Hi there, I'm <span className="text-rose-500">Robert S.</span>
Hi there, I'm <span className="text-rose-500">Josh S.</span>
</h1>
<p className="text-gray-200 text-lg font-medium">
Developer & Tech enthusiast

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.9 KiB

BIN
public/logo.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.2 KiB