Layout function o.O
Cleaned up the code and that's about it.
This commit is contained in:
Robert S
parent
b9ed40b2b9
commit
79cc0cb8d1
10 changed files with 234 additions and 283 deletions
|
|
@ -1,11 +1,12 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import RomanNumerals from './romanNumerals';
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
||||||
<p className="text-xl">
|
<p className="text-xl">
|
||||||
© MMXXI
|
© {RomanNumerals(new Date().getFullYear())}
|
||||||
{" "}
|
{" "}
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a>Robert S.</a>
|
<a>Robert S.</a>
|
||||||
37
components/layout.js
Normal file
37
components/layout.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import Navbar from "./navbar";
|
||||||
|
import Footer from "./footer";
|
||||||
|
|
||||||
|
export default function Layout({
|
||||||
|
children,
|
||||||
|
title = '',
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<meta charSet="UTF-8"/>
|
||||||
|
<title>Robert S. {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,Tailwind,TailwindCSS,Bootstrap" />
|
||||||
|
<meta name="author" content="Robert Stokreef" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta property="og:title" content="Robert S. - My work" />
|
||||||
|
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
||||||
|
<meta property="og:url" content="https://robert-s.dev/work" />
|
||||||
|
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
||||||
|
<meta name="theme-color" content="#F43F5E" />
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<meta name="twitter:site" content="@ThatGuy5275" />
|
||||||
|
<meta name="twitter:title" content="Robert S. - My work" />
|
||||||
|
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
||||||
|
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
||||||
|
</Head>
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
<Navbar />
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import {useState} from "react";
|
import {useState} from "react";
|
||||||
import NavLink from "./NavLink";
|
import NavLink from "./navlink";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [active, setActive] = useState(false)
|
const [active, setActive] = useState(false)
|
||||||
13
components/romanNumerals.js
Normal file
13
components/romanNumerals.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -1,73 +1,48 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function About() {
|
export default function About() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="About me">
|
||||||
<Head>
|
<div className="flex flex-grow items-center">
|
||||||
<meta charSet="UTF-8"/>
|
<div className="w-full">
|
||||||
<title>Robert S. - About me</title>
|
<div className="container flex mx-auto justify-center">
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
<h1 className="text-center md:text-6xl text-3xl font-bold">
|
||||||
<meta name="author" content="Robert Stokreef" />
|
About <span className="text-rose-500">me</span>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
</h1>
|
||||||
<meta property="og:title" content="Robert S. - About me" />
|
<div className="container lg:w-3/5 w-11/12 mx-auto mt-4">
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
<div className="text-left md:text-justify space-y-6 text-lg font-medium text-gray-200">
|
||||||
<meta property="og:url" content="https://robert-s.dev/about" />
|
<p>
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
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.
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
</p>
|
||||||
<meta name="twitter:card" content="summary" />
|
<div className="space-y-2">
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S. - About me" />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<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 }}>
|
|
||||||
<h1 className="text-center md:text-6xl text-3xl font-bold">
|
|
||||||
About <span className="text-rose-500">me</span>
|
|
||||||
</h1>
|
|
||||||
<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>
|
<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.
|
I can use the following technologies/frameworks mostly fluently:
|
||||||
</p>
|
</p>
|
||||||
<div className="space-y-2">
|
<ul className="list-disc pl-4">
|
||||||
<p>
|
<li>HTML, CSS & JS</li>
|
||||||
I can use the following technologies/frameworks mostly fluently:
|
<li>TailwindCSS, Bootstrap, UIkit & Cirrus UI</li>
|
||||||
</p>
|
<li>Python</li>
|
||||||
<ul className="list-disc pl-4">
|
<li>Flask & similar frameworks (like Sanic)</li>
|
||||||
<li>HTML, CSS & JS</li>
|
<li>MySQL, PostgreSQL, MongoDB, Redis</li>
|
||||||
<li>TailwindCSS, Bootstrap, UIkit & Cirrus UI</li>
|
</ul>
|
||||||
<li>Python</li>
|
<p>
|
||||||
<li>Flask & similar frameworks (like Sanic)</li>
|
And I am currently learning the following technologies/frameworks:
|
||||||
<li>MySQL, PostgreSQL, MongoDB, Redis</li>
|
</p>
|
||||||
</ul>
|
<ul className="list-disc pl-4">
|
||||||
<p>
|
<li>Go</li>
|
||||||
And I am currently learning the following technologies/frameworks:
|
<li>Rust</li>
|
||||||
</p>
|
<li>React/Next.js</li>
|
||||||
<ul className="list-disc pl-4">
|
<li>Docker</li>
|
||||||
<li>Go</li>
|
</ul>
|
||||||
<li>Rust</li>
|
|
||||||
<li>React/Next.js</li>
|
|
||||||
<li>Docker</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
159
pages/contact.js
159
pages/contact.js
|
|
@ -1,102 +1,77 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import {motion} from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="Contact me">
|
||||||
<Head>
|
<div className="flex flex-grow items-center">
|
||||||
<meta charSet="UTF-8"/>
|
<div className="w-full">
|
||||||
<title>Robert S. - Contact me</title>
|
<div className="container flex mx-auto justify-center">
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
<div className="text-center">
|
||||||
<meta name="author" content="Robert Stokreef" />
|
<h1 className="md:text-6xl text-3xl font-bold">
|
||||||
<link rel="icon" href="/favicon.ico" />
|
Contact <span className="text-rose-500">me</span>
|
||||||
<meta property="og:title" content="Robert S. - Contact me" />
|
</h1>
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
<p className="text-gray-200 text-lg font-medium px-4">
|
||||||
<meta property="og:url" content="https://robert-s.dev/contact" />
|
Want to get in touch, or just want to have a chat? Well, here's your chance! :)
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
</p>
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
</div>
|
||||||
<meta name="twitter:card" content="summary" />
|
<div className="mx-auto overflow-auto mt-4">
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
<div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
|
||||||
<meta name="twitter:title" content="Robert S. - Contact me" />
|
<a href="mailto:admin@robert-s.dev" className="bg-gray-800 text-white p-4 text-center rounded gap-3">
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
<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">
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
<title>Email</title>
|
||||||
</Head>
|
<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"/>
|
||||||
|
</svg>
|
||||||
<div className="flex flex-col min-h-screen">
|
<p className="text-white text-xl overflow-ellipsis">admin@robert-s.dev</p>
|
||||||
<Navbar />
|
</a>
|
||||||
<div className="flex flex-grow items-center">
|
<a href="https://github.com/Wallvon" className="bg-gray-800 text-white p-4 text-center rounded gap-3" target="_blank" rel="noopener noreferrer">
|
||||||
<div className="w-full">
|
<svg fill="currentColor" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<div className="container flex mx-auto justify-center">
|
<title>GitHub</title>
|
||||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
|
<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"/>
|
||||||
<div className="text-center">
|
</svg>
|
||||||
<h1 className="md:text-6xl text-3xl font-bold">
|
<p className="text-white text-xl overflow-ellipsis">Wallvon</p>
|
||||||
Contact <span className="text-rose-500">me</span>
|
</a>
|
||||||
</h1>
|
<a onClick={() => {navigator.clipboard.writeText("Roberto#1762")}} className="bg-gray-800 text-white p-4 text-center rounded gap-3 cursor-pointer has-tooltip">
|
||||||
<p className="text-gray-200 text-lg font-medium px-4">
|
<svg fill="currentColor" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
Want to get in touch, or just want to have a chat? Well, here's your chance! :)
|
<title>Discord</title>
|
||||||
</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"/>
|
||||||
|
</svg>
|
||||||
|
<span className='tooltip bg-gray-800 text-white rounded shadow-lg'>Click to copy</span>
|
||||||
|
<p className="text-white text-xl overflow-ellipsis">Roberto#1762</p>
|
||||||
|
</a>
|
||||||
|
<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">
|
||||||
|
<svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0"
|
||||||
|
className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>LinkedIn</title>
|
||||||
|
<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"/>
|
||||||
|
<circle cx="4" cy="4" r="2" stroke="none"/>
|
||||||
|
</svg>
|
||||||
|
<p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p>
|
||||||
|
</a>
|
||||||
|
<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 fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="mx-auto max-h-12"
|
||||||
|
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>Twitter</title>
|
||||||
|
<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>
|
||||||
|
<p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p>
|
||||||
|
</a>
|
||||||
|
<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 fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
||||||
|
className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>Instagram</title>
|
||||||
|
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
|
||||||
|
<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>
|
||||||
<div className="mx-auto overflow-auto mt-4">
|
</div>
|
||||||
<div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
|
</motion.div>
|
||||||
<a href="mailto:admin@robert-s.dev" className="bg-gray-800 text-white p-4 text-center rounded gap-3">
|
|
||||||
<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">
|
|
||||||
<title>Email</title>
|
|
||||||
<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"/>
|
|
||||||
</svg>
|
|
||||||
<p className="text-white text-xl overflow-ellipsis">admin@robert-s.dev</p>
|
|
||||||
</a>
|
|
||||||
<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 fill="currentColor" className="mx-auto max-h-12" 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>
|
|
||||||
<p className="text-white text-xl overflow-ellipsis">Wallvon</p>
|
|
||||||
</a>
|
|
||||||
<a onClick={() => {navigator.clipboard.writeText("Roberto#1762")}} className="bg-gray-800 text-white p-4 text-center rounded gap-3 cursor-pointer has-tooltip">
|
|
||||||
<svg fill="currentColor" className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<title>Discord</title>
|
|
||||||
<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"/>
|
|
||||||
</svg>
|
|
||||||
<span className='tooltip bg-gray-800 text-white rounded shadow-lg'>Click to copy</span>
|
|
||||||
<p className="text-white text-xl overflow-ellipsis">Roberto#1762</p>
|
|
||||||
</a>
|
|
||||||
<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">
|
|
||||||
<svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0"
|
|
||||||
className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<title>LinkedIn</title>
|
|
||||||
<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"/>
|
|
||||||
<circle cx="4" cy="4" r="2" stroke="none"/>
|
|
||||||
</svg>
|
|
||||||
<p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p>
|
|
||||||
</a>
|
|
||||||
<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 fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="mx-auto max-h-12"
|
|
||||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<title>Twitter</title>
|
|
||||||
<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>
|
|
||||||
<p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p>
|
|
||||||
</a>
|
|
||||||
<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 fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
|
||||||
className="mx-auto max-h-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<title>Instagram</title>
|
|
||||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
|
|
||||||
<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>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,23 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout>
|
||||||
<Head>
|
<div className="flex flex-grow items-center">
|
||||||
<meta charSet="UTF-8"/>
|
<div className="w-full">
|
||||||
<title>Robert S.</title>
|
<div className="container flex mx-auto justify-center">
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
<h1 className="md:text-6xl text-3xl font-bold">
|
||||||
<meta name="author" content="Robert Stokreef" />
|
Hi there, I'm <span className="text-rose-500">Robert S.</span>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
</h1>
|
||||||
<meta property="og:title" content="Robert S." />
|
<p className="text-gray-200 text-lg font-medium">
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
Developer & Tech enthusiast
|
||||||
<meta property="og:url" content="https://robert-s.dev/" />
|
</p>
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
</motion.div>
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S." />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<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 }}>
|
|
||||||
<h1 className="md:text-6xl text-3xl font-bold">
|
|
||||||
Hi there, I'm <span className="text-rose-500">Robert S.</span>
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-200 text-lg font-medium">
|
|
||||||
Developer & Tech enthusiast
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
155
pages/work.js
155
pages/work.js
|
|
@ -1,105 +1,80 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function Work() {
|
export default function Work() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="My work">
|
||||||
<Head>
|
<div className="flex flex-grow items-center">
|
||||||
<meta charSet="UTF-8"/>
|
<div className="w-full">
|
||||||
<title>Robert S. - My work</title>
|
<div className="container flex mx-auto justify-center">
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
<div className="text-center">
|
||||||
<meta name="author" content="Robert Stokreef" />
|
<h1 className="md:text-6xl text-3xl font-bold">
|
||||||
<link rel="icon" href="/favicon.ico" />
|
My <span className="text-rose-500">work</span>
|
||||||
<meta property="og:title" content="Robert S. - My work" />
|
</h1>
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
<p className="text-gray-200 text-lg font-medium px-4">
|
||||||
<meta property="og:url" content="https://robert-s.dev/work" />
|
Featured & recent projects
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
</p>
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
</div>
|
||||||
<meta name="twitter:card" content="summary" />
|
<div className="relative w-11/12 mx-auto overflow-auto">
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
<div className="absolute h-full w-full p-20 z-20">
|
||||||
<meta name="twitter:title" content="Robert S. - My work" />
|
<div className="flex items-center justify-center h-full w-full p-4">
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
<h1 className="md:text-6xl text-3xl font-bold text-center">
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
Coming soon
|
||||||
</Head>
|
</h1>
|
||||||
|
</div>
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<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">
|
|
||||||
My <span className="text-rose-500">work</span>
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-200 text-lg font-medium px-4">
|
|
||||||
Featured & recent projects
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="relative w-11/12 mx-auto overflow-auto">
|
<div className="w-full grid gap-20 grid-cols-1 md:grid-cols-2 blur md:p-16 p-4">
|
||||||
<div className="absolute h-full w-full p-20 z-20">
|
<div className="flex-grow space-y-2">
|
||||||
<div className="flex items-center justify-center h-full w-full p-4">
|
<h1 className="text-3xl font-bold">Lorem Ipsum</h1>
|
||||||
<h1 className="md:text-6xl text-3xl font-bold text-center">
|
<p className="text-gray-400 py- text-justify">
|
||||||
Coming soon
|
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.
|
||||||
</h1>
|
</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 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">
|
||||||
<div className="flex-grow space-y-2">
|
<h1 className="text-3xl font-bold">Lorem Ipsum</h1>
|
||||||
<h1 className="text-3xl font-bold">Lorem Ipsum</h1>
|
<p className="text-gray-400 py- text-justify">
|
||||||
<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.
|
||||||
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>
|
||||||
</p>
|
<div className="flex space-x-2">
|
||||||
<div className="flex space-x-2">
|
<a className="rounded-full" href="#" target="_blank">
|
||||||
<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">
|
||||||
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<title>GitHub</title>
|
||||||
<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"/>
|
||||||
<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">
|
||||||
<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">
|
||||||
<svg className="h-8 w-8" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<title>Link</title>
|
||||||
<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="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="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" />
|
||||||
<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>
|
||||||
</svg>
|
</a>
|
||||||
</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>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
public/forum-banner.jpg
Normal file
BIN
public/forum-banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
Add table
Reference in a new issue