using rocket instead of astro

This commit is contained in:
Philippe Loctaux 2023-12-01 10:54:31 +01:00
parent eb72400722
commit e61ef1d4c3
79 changed files with 4406 additions and 8501 deletions

5
templates/pages/404.html Normal file
View file

@ -0,0 +1,5 @@
{% extends "content.html" %}
{% block content %}
<p>This page could not be found.</p>
{% endblock %}

View file

@ -0,0 +1,25 @@
{% extends "content.html" %}
{% block content %}
<p>Send an email if you want to work with me, propose a project idea, or just to say hi!</p>
<div class="my-4">
<a
href="mailto:helloATphilippeloctauxDOTcom"
class="inline-flex bg-sky-900 hover:bg-sky-700 transition-all duration-200 text-white font-bold py-2 px-4 rounded-xl items-center"
>
<div class="inline-flex items-center">
{% include "icons/email.html" %}
<span class="ml-2 sm:ml-0 text-center">hello at philippeloctaux dot com</span>
</div>
</a>
</div>
<p class="mb-2">
If you want to encrypt your message, I have a
<a href="/pub/pgp-0x69771CD04BA82EC0.txt" class="underline">pgp key</a> at your disposal.
</p>
<p class="mb-2">
I also have a <a href="/keybase.txt" class="underline">Keybase</a> account, but I do not check it often.
</p>
{% endblock %}

15
templates/pages/root.html Normal file
View file

@ -0,0 +1,15 @@
{% extends "base.html" %}
{% block container %}
{% include "pages/root/hero-image.html" %}
<main class="container mx-auto px-4 md:px-8 lg:px-16 py-16">
{% include "pages/root/whoami.html" %}
<div class="my-16 space-y-16 md:space-y-32">
{% include "pages/root/www.html" %}
{% include "pages/root/jobs.html" %}
{% include "pages/root/projects.html" %}
{% include "pages/root/talks.html" %}
{% include "pages/root/friends.html" %}
</div>
</main>
{% endblock %}

View file

@ -0,0 +1,24 @@
<div>
<h1 class="text-4xl font-bold mb-4">Friends</h1>
<p class="text-lg">Folks I worked with, or I like what they do.</p>
<ul class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-4">
{% for friend in friends %}
<li class="py-2">
<a
href={{friend.uri}}
target="_blank"
class="hover:bg-gray-500 transition-all duration-200 flex items-center rounded-lg p-2"
>
<span class="rounded-full flex-shrink-0 mr-4 w-10 h-10 bg-sky-900 text-white flex items-center justify-center text-lg font-medium"
>{{ friend.initials() }}</span
>
<div>
<p class="font-bold">{{ friend.first_name }} {{ friend.last_name }}</p>
<p>{{ friend.domain_name() }}</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>

View file

@ -0,0 +1,8 @@
<div class="container mx-auto px-8 py-16 w-full h-full justify-center items-center flex flex-col">
<div class="inline-block backdrop-blur-lg backdrop-brightness-75 rounded-3xl shadow-2xl px-4 py-6 sm:px-8 sm:py-12 space-y-4">
<h1 class="text-3xl sm:text-4xl font-bold">Philippe Loctaux</h1>
<h2 class="sm:text-xl font-semibold">
Developer of all sorts. Epitech alumni, class of 2023.
</h2>
</div>
</div>

View file

@ -0,0 +1,70 @@
<style>
/* Fixed background when scrolling in tailwind
* Disabled on iOS devices
* https://tailwindcss.com/docs/background-attachment
* https://stackoverflow.com/a/60220757/4809297
*/
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
#wallpaper {
background-attachment: scroll;
}
}
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
#wallpaper {
background-attachment: fixed;
}
}
</style>
<div class="bg-gradient-to-r from-red-900 via-teal-900 to-fuchsia-900">
{% let wallpaper_uri -%}
{% match wallpaper %}
{% when Some with (wallpaper) %}
{% let wallpaper_uri = wallpaper.file -%}
{% when None %}
{% let wallpaper_uri = "" -%}
{% endmatch %}
<div
id="wallpaper"
class="relative text-white w-full h-almostscreen bg-center bg-cover"
style="background-image: url({{ wallpaper_uri }});"
>
<!-- Content inside -->
{% include "pages/root/hero-content.html" %}
{% match wallpaper %}
{% when Some with (wallpaper) %}
<!-- Exif info -->
<div
class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg backdrop-brightness-75 rounded-xl shadow-2xl p-2 space-y-0.5 sm:space-y-2"
>
<!-- Location -->
<div class="flex">
<div class="inline-flex items-center">
{% include "icons/location.html" %}
<span class="ml-1 text-sm"
>{{ wallpaper.location.precise }}<span class="hidden md:inline"
>, {{ wallpaper.location.broad }}</span
></span
>
</div>
</div>
<!-- Date -->
<div class="flex">
<div class="inline-flex items-center">
{% include "icons/calendar.html" %}
<span class="ml-1 text-sm">{{ wallpaper.date }}</span>
</div>
</div>
</div>
{% when None %}
{% endmatch %}
</div>
</div>

View file

@ -0,0 +1,64 @@
<div>
<h1 class="text-4xl font-bold mb-4">Professional Experiences</h1>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for job in jobs %}
<div class="w-full rounded-2xl bg-sky-950">
<div class="p-6 justify-between h-full">
<!-- Header -->
<div class="flex flex-col">
<div class="flex flex-row">
{% let css -%}
{# If css updates make sure to update in both places! #}
{% if job.logo.transparent_background == true -%}
{% let css = "h-16 w-16 rounded-xl mr-4 p-2 bg-white" -%}
{% else -%}
{% let css = "h-16 w-16 rounded-xl mr-4" -%}
{% endif -%}
<img loading="lazy" src="{{ job.logo.file }}" alt="{{ job.company }} logo" class="{{ css }}">
<div class="flex flex-col justify-evenly">
<div class="text-xl md:text-2xl font-semibold">{{ job.company }}</div>
<div class="text-xs md:text-sm">{{ job.dates }}</div>
</div>
</div>
<p class="text-xl md:text-2xl font-semibold my-4">{{ job.title }}</p>
</div>
<!-- Content -->
<div class="space-y-2">
<!-- Description -->
{% for desc in job.description %}
<p>{{ desc }}</p>
{% endfor %}
<!-- Accomplishments -->
<div>
<ul class="list-disc mt-6">
{% for accomplishment in job.accomplishments %}
<li class="ml-5">{{ accomplishment }}</li>
{% endfor %}
</ul>
</div>
<!-- Technologies -->
<div>
<div class="text-xl font-semibold mt-8 mb-2">
Technologies
</div>
<ul>
{% for technology in job.technologies %}
<li>{{ technology }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

View file

@ -0,0 +1,108 @@
{% let css_image_position -%}
{% let css_image_position_corner -%}
{# If css updates make sure to update in both places! #}
{% match project.image.position %}
{% when Position::Left %}
{% let css_image_position = "2xl:flex items-stretch justify-between" -%}
{% let css_image_position_corner = "flex w-full 2xl:w-1/2 grow rounded-t-2xl object-cover 2xl:rounded-tr-none 2xl:rounded-l-2xl" -%}
{% when Position::Right %}
{% let css_image_position = "2xl:flex items-stretch justify-between 2xl:flex-row-reverse" -%}
{% let css_image_position_corner = "flex w-full 2xl:w-1/2 grow rounded-t-2xl object-cover 2xl:rounded-tl-none 2xl:rounded-r-2xl" -%}
{% endmatch %}
<div class="w-full rounded-2xl bg-pink-950 {{ css_image_position }}">
<!-- Image on the side -->
<img loading="lazy" src="{{ project.image.file }}" alt="{{ project.name }} image" class="{{ css_image_position_corner }}">
<div class="p-6 flex flex-col grow-0 justify-between h-full">
<!-- Header -->
<div class="flex flex-col">
<div class="flex flex-row">
{% match project.logo %}
{% when Some with (logo) %}
{% let css_logo -%}
{# If css updates make sure to update in both places! #}
{% if logo.transparent_background == true -%}
{% let css_logo = "h-16 w-16 rounded-xl mr-4 p-2 bg-white" -%}
{% else -%}
{% let css_logo = "h-16 w-16 rounded-xl mr-4" -%}
{% endif -%}
<img loading="lazy" src="{{ logo.file }}" alt="{{ project.name }} logo" class="{{ css_logo }}">
{% when None %}
{% endmatch %}
<div class="flex flex-col justify-evenly">
<div class="text-xl md:text-2xl font-semibold">{{ project.name }}</div>
<div class="text-xs md:text-sm">{{ project.dates }}</div>
</div>
</div>
<p class="text-xl md:text-2xl font-semibold my-4">{{ project.tagline }}</p>
</div>
<!-- Content -->
<div class="space-y-2">
<!-- Description -->
{% for desc in project.description %}
<p>{{ desc }}</p>
{% endfor %}
<!-- Accomplishments -->
<div>
<ul class="list-disc mt-6">
{% for accomplishment in project.accomplishments %}
<li class="ml-5">{{ accomplishment }}</li>
{% endfor %}
</ul>
</div>
<!-- Technologies -->
<div>
<div class="text-xl font-semibold mt-8 mb-2">
Technologies
</div>
<ul>
{% for technology in project.technologies %}
<li>{{ technology }}</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Link with label -->
{% match project.link %}
{% when Some with (link) %}
{% match link %}
{% when ProjectLink::Available(project_link) %}
<a
href="{{ project_link.uri }}"
target="_blank"
class="mt-4 inline-flex max-w-fit bg-transparent hover:bg-sky-700 text-white font-semibold py-1.5 px-4 rounded-xl items-center border border-white hover:border-transparent transition-all duration-200"
>
<div class="inline-flex items-center">
{% include "icons/link.html" %}
<span>{{ project_link.label }}</span>
</div>
</a>
<!-- Link is not available -->
{% when ProjectLink::NotAvailable %}
<span class="mt-4 cursor-not-allowed inline-flex max-w-fit bg-gray-400 text-gray-600 font-semibold py-1.5 px-4 rounded-xl items-center">
No longer available
</span>
{% endmatch %}
<!-- No link -->
{% when None %}
{% endmatch %}
</div>
</div>

View file

@ -0,0 +1,91 @@
<div class="w-full rounded-2xl bg-pink-950">
<div class="p-6 justify-between h-full">
<!-- Header -->
<div class="flex flex-col">
<div class="flex flex-row">
{% match project.logo %}
{% when Some with (logo) %}
{% let css_logo -%}
{# If css updates make sure to update in both places! #}
{% if logo.transparent_background == true -%}
{% let css_logo = "h-16 w-16 rounded-xl mr-4 p-2 bg-white" -%}
{% else -%}
{% let css_logo = "h-16 w-16 rounded-xl mr-4" -%}
{% endif -%}
<img loading="lazy" src="{{ logo.file }}" alt="{{ project.name }} logo" class="{{ css_logo }}">
{% when None %}
{% endmatch %}
<div class="flex flex-col justify-evenly">
<div class="text-xl md:text-2xl font-semibold">{{ project.name }}</div>
<div class="text-xs md:text-sm">{{ project.dates }}</div>
</div>
</div>
<p class="text-xl md:text-2xl font-semibold my-4">{{ project.tagline }}</p>
</div>
<!-- Content -->
<div class="space-y-2">
<!-- Description -->
{% for desc in project.description %}
<p>{{ desc }}</p>
{% endfor %}
<!-- Accomplishments -->
<div>
<ul class="list-disc mt-6">
{% for accomplishment in project.accomplishments %}
<li class="ml-5">{{ accomplishment }}</li>
{% endfor %}
</ul>
</div>
<!-- Technologies -->
<div>
<div class="text-xl font-semibold mt-8 mb-2">
Technologies
</div>
<ul>
{% for technology in project.technologies %}
<li>{{ technology }}</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Link with label -->
{% match project.link %}
{% when Some with (link) %}
{% match link %}
{% when ProjectLink::Available(project_link) %}
<a
href="{{ project_link.uri }}"
target="_blank"
class="mt-4 inline-flex max-w-fit bg-transparent hover:bg-sky-700 text-white font-semibold py-1.5 px-4 rounded-xl items-center border border-white hover:border-transparent transition-all duration-200"
>
<div class="inline-flex items-center">
{% include "icons/link.html" %}
<span>{{ project_link.label }}</span>
</div>
</a>
<!-- Link is not available -->
{% when ProjectLink::NotAvailable %}
<span class="mt-4 cursor-not-allowed inline-flex max-w-fit bg-gray-400 text-gray-600 font-semibold py-1.5 px-4 rounded-xl items-center">
No longer available
</span>
{% endmatch %}
<!-- No link -->
{% when None %}
{% endmatch %}
</div>
</div>

View file

@ -0,0 +1,23 @@
<div>
<h1 class="text-4xl font-bold mb-4">Projects</h1>
<div class="mt-4 space-y-4">
{% for project in projects %}
{% match project %}
{% when ProjectKind::WithoutImage((project1, project2)) %}
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
{% let project = project1 -%}
{% include "pages/root/project-without-image.html" %}
{% let project = project2 -%}
{% include "pages/root/project-without-image.html" %}
</div>
{% when ProjectKind::WithImage(project) %}
{% include "pages/root/project-with-image.html" %}
{% endmatch %}
{% endfor %}
</div>
</div>

View file

@ -0,0 +1,46 @@
<div>
<h1 class="text-4xl font-bold mb-4">Talks</h1>
<p class="text-lg">
Giving a talk is the opportunity to share what I know, and helps me
reduce my fear of public speaking.
</p>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 place-content-center">
{% for talk in talks %}
<div class="rounded-2xl w-full bg-teal-950 p-6">
<!-- Title -->
<h3 class="text-xl font-semibold mb-4">{{talk.title}}</h3>
<!-- Date -->
<div class="flex">
<div class="inline-flex items-center">
{% include "icons/calendar.html" %}
<span class="ml-2">{{talk.date}}</span>
</div>
</div>
<!-- Location -->
<div class="flex">
<div class="inline-flex items-center">
{% include "icons/location.html" %}
<span class="ml-2">{{talk.location}}</span>
</div>
</div>
<!-- Link with label -->
<a
href={{talk.link.uri}}
target="_blank"
class="mt-4 inline-flex bg-transparent hover:bg-sky-700 text-white font-semibold py-1.5 px-4 rounded-xl items-center border border-white hover:border-transparent transition-all duration-200"
>
<div class="inline-flex items-center">
{% include "icons/link.html" %}
<span>{{talk.link.label}}</span>
</div>
</a>
</div>
{% endfor %}
</div>
</div>

View file

@ -0,0 +1,39 @@
<div class="md:flex md:flex-row-reverse items-center">
<div class="md:w-1/2 mb-4 md:mb-0">
<img
src="/pub/phil.png"
alt="Phil"
class="rounded-3xl bg-sky-900 h-36 w-36 md:mx-auto md:h-56 md:w-56 lg:h-64 lg:w-64 mb-2 md:mb-0"
/>
</div>
<div class="md:w-1/2">
<h1 class="text-4xl font-bold mb-4">About Phil</h1>
<h2 class="text-2xl font-semibold mb-4">Developer of all sorts</h2>
<div class="text-lg space-y-6">
<p>
I got into computer science by learning about the Linux kernel and administrating servers.
</p>
<p>
After high school, I became a student at Epitech and learned to
tackle technical concepts and apply them quickly by working
on small projects.
</p>
<p>
During my studies at Epitech, I had the opportunity to be a
teacher. My role was to assist students with technical problems
in their projects.
</p>
<p>
Now I have experience in software engineering, full-stack web
and mobile development, system administration and CI/CD, as well
as embedded development.
</p>
<p>
My goal is to use my knowledge and experience to make software
helping its users accomplish their needs.
</p>
</div>
</div>
</div>

View file

@ -0,0 +1,39 @@
<div class="grid grid-cols-3 lg:grid-cols-6 gap-4 place-content-center">
{% for network in networks %}
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<a
target="_blank"
href="{{ network.uri }}"
class="inline-flex bg-sky-900 hover:bg-sky-700 transition-all duration-200 text-white font-bold py-2 px-4 rounded-xl items-center"
>
{% match network.icon %}
{% when Icon::Email %}
{% include "icons/email.html" %}
{% when Icon::Github %}
{% include "icons/github.html" %}
{% when Icon::Linkedin %}
{% include "icons/linkedin.html" %}
{% when Icon::Mastodon %}
{% include "icons/mastodon.html" %}
{% when Icon::Telegram %}
{% include "icons/telegram.html" %}
{% when Icon::Twitter %}
{% include "icons/twitter.html" %}
{% endmatch %}
<div class="inline-flex items-center">
<span class="hidden sm:inline">{{ network.name }}</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>