221 lines
No EOL
18 KiB
HTML
221 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 name="description" content="A developer and tech enthusiast from the Netherlands." />
|
|
<meta name="keywords" content="developer, full-stack, website, python, javascript, tailwindcss" />
|
|
<meta name="author" content="Robert S." />
|
|
<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="./assets/css/jetbrains.css">
|
|
<link rel="stylesheet" href="./assets/css/fontawesome.css"/>
|
|
<link rel="stylesheet" href="./assets/css/animate.css">
|
|
<!-- JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.9/scrollreveal.min.js" integrity="sha512-Kr+RPfLjQ71E0cJ9nseJ6jwTrnmMnuSPnnsVQQ/ZYYCjOHKfJcWj8ILICXnvf9A7ZQChNzIbr9x/ZAxA6xAZlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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="https://robert-s.dev/assets/img/logo.jpg">
|
|
<meta name="theme-color" content="#111827">
|
|
</head>
|
|
<body class="bg-darkBlue-default text-white font-mono">
|
|
<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 href="/" class="flex title-font font-medium items-center mb-4 md:mb-0">
|
|
<span class="text-2xl font-bold hover:text-gray-400 duration-200">Robert S.</span>
|
|
</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-darkBlue-default text-gray-400 hover:text-white text-sm leading-6 font-semibold py-2 rounded focus:ring-2 focus:ring-offset-2 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-darkBlue-default text-gray-400 hover:text-white text-sm leading-6 font-semibold py-2 rounded focus:ring-2 focus:ring-offset-2 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-darkBlue-light hover:bg-darkBlue-lightest text-sm text-gray-400 hover:text-white leading-6 font-semibold py-2 px-5 rounded focus:ring-2 focus:ring-offset-2 focus:outline-none transition-colors duration-200 mr-auto mr-0@m"
|
|
href="#contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- Hero -->
|
|
<section id="hero" class="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-4xl text-3xl mb-1 font-bold animate__animated animate__fadeInUp animate__fast">Hi, I'm Robert S.</h1>
|
|
<p class="text-gray-400 leading-relaxed mb-2 text-lg font-medium animate__animated animate__fadeInUp animate__fast">Developer & Tech enthusiast</p>
|
|
</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-4xl text-3xl 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-darkBlue-lighter rounded-lg gap-3">
|
|
<img alt="Wavy" loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="./assets/img/Wavy.jpg">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">Wavy</h1>
|
|
<p class="text-gray-400 py-2 pr-5">
|
|
Wavy is a blazing-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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-lighter rounded-lg gap-3">
|
|
<img alt="SharePY" 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">SharePY</h1>
|
|
<p class="text-gray-400 py-2 pr-5">
|
|
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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-lighter rounded-lg gap-3">
|
|
<img alt="ConnectedHost" loading=lazy class="flex-shrink-0 rounded-t-lg w-full h-56 object-cover object-center mb-1"
|
|
src="./assets/img/ConnectedHost.jpg">
|
|
<div class="flex-grow pl-2 py-2">
|
|
<h1 class="text-3xl font-bold">ConnectedHost</h1>
|
|
<p class="text-gray-400 py-2 pr-5">
|
|
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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-lighter rounded-lg gap-3">
|
|
<img alt="Soon" 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-400 py-2 pr-5">
|
|
Stay tuned for more projects! :)
|
|
</p>
|
|
<a class="inline-flex items-center bg-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest rounded-full text-base mt-4 md:mt-0"
|
|
href="#"><i class="fas fa-link"></i></a>
|
|
<a class="inline-flex items-center bg-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-4xl text-3xl 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-2xl text-gray-400">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-2xl 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-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Python</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light 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-darkBlue-light 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-darkBlue-light 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-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">PostgreSQL</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">MySQL</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light 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-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">TailwindCSS</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">UIkit</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Bootstrap</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Cirrus UI</h2>
|
|
</div>
|
|
<h3 class="text-2xl 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-darkBlue-light border-0 py-2 px-3 rounded-lg text-base mt-4 md:mt-0">Go</h2>
|
|
<h2 class="inline-flex items-center bg-darkBlue-light 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-4xl text-3xl 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest rounded-full text-base mt-4 md:mt-0" data-clipboard-text="That Guy#5275"><span class='tooltip rounded shadow-lg p-1 bg-darkBlue-light text-white -mt-16'>That Guy#5275</span><i class="fab fa-discord"></i></button>
|
|
<a class="inline-flex items-center bg-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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-darkBlue-light border-0 py-3 px-3 focus:outline-none hover:bg-darkBlue-lightest 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 text-gray-400"><i class="fas fa-pencil-ruler"></i> & <i class="fas fa-terminal"></i> with <i
|
|
class="fas fa-heart animate-pulse"></i> by <a class="text-white" href="https://robert-s.dev/">Robert
|
|
S.</a>
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
<script src="./assets/js/main.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.min.js" integrity="sha512-B1mG20gde4TfQx8dZ4yGlmqm/uZAy//Ln0nDGrSxIPuKnZQdx7fA2Xt1VZh1j37kCp4W0KJ1xOlJ2zzhMjDyBw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js" integrity="sha512-sIqUEnRn31BgngPmHt2JenzleDDsXwYO+iyvQ46Mw6RL+udAUZj2n/u/PGY80NxRxynO7R9xIGx5LEzw4INWJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
</body>
|
|
</html> |