224 lines
No EOL
18 KiB
HTML
224 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
_____ _ _ _____
|
|
| __ \ | | | | / ____|
|
|
| |__) | ___ | |__ ___ _ __ | |_ | (___
|
|
| _ / / _ \ | '_ \ / _ \| '__|| __| \___ \
|
|
| | \ \| (_) || |_) || __/| | | |_ ____) |_
|
|
|_| \_\\___/ |_.__/ \___||_| \__| |_____/(_)
|
|
|
|
Site made with <3 by Robert S. - https://robert-s.dev
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Main -->
|
|
<title>Robert S.</title>
|
|
<link rel="icon" type="image/jpg" href="./assets/img/logo.jpg">
|
|
<!-- Meta tags -->
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- CSS -->
|
|
<link href="./assets/css/tailwind.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
|
crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
|
|
<!-- JS -->
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.9/dist/scrollreveal.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
|
|
<script src="./assets/js/main.js"></script>
|
|
<!-- Embed -->
|
|
<meta property="og:title" content="Robert S.">
|
|
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands.">
|
|
<meta property="og:url" content="https://robert-s.dev/">
|
|
<meta property="og:image" content="./assets/img/logo.jpg">
|
|
</head>
|
|
<body class="bg-gray-900 text-white">
|
|
<div class="h-screen top-0 left-0">
|
|
<!-- Header -->
|
|
<header x-data="{ mobileMenuOpen : false }" class="body-font">
|
|
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row">
|
|
<div class="flex">
|
|
<a class="flex title-font font-medium items-center mb-4 md:mb-0">
|
|
<a href="/">
|
|
<span class="text-2xl font-bold hover:text-gray-300 duration-200">Robert S.</span>
|
|
</a>
|
|
</a>
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen"
|
|
class="inline-block md:hidden w-8 h-8 text-gray-400 focus:text-white p-1 ml-auto">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
|
|
fill="currentColor" />
|
|
<path
|
|
d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z"
|
|
fill="currentColor" />
|
|
<path
|
|
d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z"
|
|
fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav class="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"
|
|
:class="{ 'flex' : mobileMenuOpen , 'hidden' : !mobileMenuOpen}" @click.away="mobileMenuOpen = false">
|
|
<a class="w-full sm:w-auto flex-none bg-gray-900 hover:text-gray-300 text-lg leading-6 font-semibold py-2 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 mr-auto mr-0@m"
|
|
href="#projects">Projects</a>
|
|
<a class="w-full sm:w-auto flex-none bg-gray-900 hover:text-gray-300 text-lg leading-6 font-semibold py-2 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 mr-auto mr-0@m"
|
|
href="#about">About</a>
|
|
<a class="w-full sm:w-auto flex-none bg-purple-700 hover:bg-purple-600 hover:text-gray-100 text-lg leading-6 font-semibold py-2 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 mr-auto mr-0@m"
|
|
href="#contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- Hero -->
|
|
<section id="hero" class="bg-gray-900 body-font h-1/2 m-auto absolute inset-0">
|
|
<div class="container flex mx-auto items-center justify-center absolute inset-0">
|
|
<div class="text-center">
|
|
<h1 class="title-font sm:text-5xl text-4xl mb-1 font-bold animate__animated animate__fadeInUp animate__fast">Hi, I'm Robert S.</h1>
|
|
<p class="leading-relaxed mb-2 text-xl font-medium animate__animated animate__fadeInUp animate__fast">Developer & Tech enthusiast</p>
|
|
<div class="flex justify-center">
|
|
<a class="animate__animated animate__fadeInUp sm:w-auto flex-none bg-purple-700 hover:bg-purple-600 hover:text-gray-100 text-lg leading-6 font-semibold py-2 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 mr-2" href="#projects">My Projects</a>
|
|
<a class="animate__animated animate__fadeInUp sm:w-auto flex-none bg-purple-700 hover:bg-purple-600 hover:text-gray-100 text-lg leading-6 font-semibold py-2 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 ml-2" href="#about">About Me</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Projects -->
|
|
<section class="body-font pb-24">
|
|
<div id="projects" class="container mx-auto">
|
|
<div class="animated flex flex-col text-center w-full mb-10">
|
|
<h1 class="sm:text-5xl text-4xl font-bold title-font mb-4">
|
|
Featured Projects
|
|
</h1>
|
|
</div>
|
|
<div class="lg:w-3/5 w-11/12 mx-auto overflow-auto">
|
|
<div class="w-full grid gap-20 grid-cols-1 md:grid-cols-2">
|
|
<div class="animated bg-gray-800 rounded-lg gap-3 shadow-xl">
|
|
<img loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="./assets/img/Wavy.png">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">Wavy</h1>
|
|
<p class="text-gray-200 py-2">
|
|
Wavy is a blazingly fast and powerful yet easy-to-use multi-purpose Discord bot. The primary purpose of Wavy is to be
|
|
very fast.
|
|
</p>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0" href="https://wavybot.com" target="_blank"><i class="fas fa-link"></i></a>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://github.com/Wavy-Bot" target="_blank"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="animated bg-gray-800 rounded-lg gap-3 shadow-xl">
|
|
<img loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="./assets/img/Robert-S.png">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">SharePY</h1>
|
|
<p class="text-gray-200 py-2">
|
|
SharePY is a cross-platform ShareX alternative made with Python 3 that is fully compatible with ShareX upload scripts.
|
|
</p>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://github.com/pyTrinkets/SharePY" target="_blank"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="animated bg-gray-800 rounded-lg gap-3 shadow-xl">
|
|
<img loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="./assets/img/ConnectedHost.png">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">ConnectedHost</h1>
|
|
<p class="text-gray-200 py-2">
|
|
ConnectedHost is a free web hosting company that aims to offer reliable and free web hosting for everyone.
|
|
</p>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://connectedhost.xyz" target="_blank"><i class="fas fa-link"></i></a>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://github.com/ConnectedHost" target="_blank"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="animated bg-gray-800 rounded-lg gap-3 shadow-xl">
|
|
<img loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="https://dummyimage.com/489x277">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">Soon™</h1>
|
|
<p class="text-gray-200 py-2 pb-8">
|
|
More projects are coming soon!
|
|
</p>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="#"><i class="fas fa-link"></i></a>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="#"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- About -->
|
|
<section class="body-font pb-24">
|
|
<div id="about" class="container mx-auto">
|
|
<div class="animated flex flex-col text-center w-full mb-10">
|
|
<h1 class="sm:text-5xl text-4xl font-bold title-font mb-4">
|
|
About Me
|
|
</h1>
|
|
</div>
|
|
<div class="animated lg:w-3/5 w-11/12 mx-auto overflow-auto font-medium text-center">
|
|
<h3 class="text-3xl">Hey, I'm Robert - a full-stack developer from the Netherlands with approximately three years of back-end development experience
|
|
and five years of front-end development experience. Nowadays, I mainly use Flask and TailwindCSS for my projects, but I
|
|
have used different frameworks in the past. A few of my hobbies include listening to music and, of course, coding. My
|
|
biggest flaw is undoubted that I am very unorganized, but I've mostly got the hang of how to manage that.</h3>
|
|
<h3 class="text-3xl mt-16">I can use the following technologies/frameworks fluently:</h3>
|
|
<div class="animated mx-auto overflow-auto font-medium text-center mt-4 space-y-1.5">
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Python</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Flask (and forks of it like Quart)</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">HTML & CSS</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Javascript (front-end)</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">PostgreSQL</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">MySQL</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">MongoDB (I hate it, though)</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">TailwindCSS</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">UIkit</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Bootstrap</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Cirrus UI</h2>
|
|
</div>
|
|
<h3 class="text-3xl mt-4">And these are the technologies that I'm still learning:</h3>
|
|
<div class="animated mx-auto overflow-auto font-medium text-center mt-4 space-y-1.5">
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Go</h2>
|
|
<h2 class="inline-flex items-center bg-gray-800 border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">C++</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Contact -->
|
|
<section class="body-font pb-24">
|
|
<div id="contact" class="container mx-auto">
|
|
<div class="animated flex flex-col text-center w-full mb-10">
|
|
<h1 class="sm:text-5xl text-4xl font-bold title-font mb-4">
|
|
Contact Me
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="animated lg:w-3/5 w-full mx-auto overflow-auto font-medium text-center">
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="mailto:admin@robert-s.dev"><i class="fas fa-envelope"></i></a>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://github.com/Wallvon" target="_blank"><i class="fab fa-github"></i></a>
|
|
<button class="has-tooltip inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0" data-clipboard-text="That Guy#5275"><span class='tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-16'>That Guy#5275</span><i class="fab fa-discord"></i></button>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://twitter.com/ThatGuy5275" target="_blank"><i class="fab fa-twitter"></i></a>
|
|
<a class="inline-flex items-center bg-gray-700 border-0 py-3 px-3 focus:outline-none hover:bg-gray-600 rounded-full text-base mt-4 md:mt-0"
|
|
href="https://instagram.com/robert.__.s" target="_blank"><i class="fab fab fa-instagram"></i></a>
|
|
</div>
|
|
</section>
|
|
<!-- Footer -->
|
|
<footer id="footer" class="animated body-font">
|
|
<div class="container px-5 py-4 mx-auto flex items-center justify-center sm:flex-row flex-col">
|
|
<span class="inline-flex justify-center text-center">
|
|
<p class="text-sm py-2"><i class="fas fa-pencil-ruler"></i> & <i class="fas fa-terminal"></i> with <i
|
|
class="fas fa-heart animate-pulse"></i> by <a href="https://robert-s.dev/">Robert
|
|
S.</a>
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |