Compare commits

..

9 commits

8 changed files with 832 additions and 313 deletions

872
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{ {
"name": "ahurac-homepage", "name": "ahurac-homepage",
"type": "module", "type": "module",
"version": "0.1.0", "version": "1.0.0",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",

BIN
src/assets/tera-io.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View file

@ -7,6 +7,7 @@ import NavButton from '../components/NavButton.astro'
<span>Ahurac</span> <span>Ahurac</span>
<div class="navButtons"> <div class="navButtons">
<NavButton link="/">Home</NavButton> <NavButton link="/">Home</NavButton>
<NavButton link="/portfolio">Portfolio</NavButton>
<NavButton link="mailto:ahurac@mailbox.org">Contact (mail)</NavButton> <NavButton link="mailto:ahurac@mailbox.org">Contact (mail)</NavButton>
</div> </div>
</div> </div>

62
src/layouts/Page.astro Normal file
View file

@ -0,0 +1,62 @@
---
import Header from '../components/Header.astro';
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Ahurac | { title }</title>
</head>
<body>
<Header />
<main><slot /></main>
</body>
</html>
<style>
@font-face {
font-family: 'Cantarell';
src: url('/fonts/cantarell.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
/* Background */
background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
/* Text */
color: white;
font-family: 'Cantarell', sans-serif;
/* Flex */
display: flex;
align-items: center;
margin: 0;
flex-direction: column;
}
main {
width: 40%;
}
@media screen and (max-width: 1200px) {
main {
width: 60%;
}
}
@media screen and (max-width: 800px) {
main {
width: 95%;
}
}
</style>

View file

@ -1,91 +1,39 @@
--- ---
import Header from '../components/Header.astro'; import Page from '../layouts/Page.astro';
import Card from '../components/Card.astro'; import Card from '../components/Card.astro';
--- ---
<html lang="en"> <Page title="Home">
<head> <p>Home of a FOSS extremist and music nerd.</p>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <h1>My services</h1>
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <div id="cards">
<title>Ahurac</title> <Card
</head> id="forgejo"
<body> name="Forgejo"
<Header /> link="https://git.ahur.ac/"
<main> >A straight-to-the-point source code forge</Card>
<p>Home of a FOSS extremist and music nerd.</p> <Card
<h1>My services</h1> id="send"
<div id="cards"> name="Send"
<Card link="https://send.ahur.ac/"
id="forgejo" >Encrypt and send files privately</Card>
name="Forgejo" <Card
link="https://git.ahur.ac/" id="matrix"
>A straight-to-the-point source code forge</Card> name="Matrix"
<Card link="https://chat.ahur.ac/"
id="send" >The messenger that doesn't spy on you</Card>
name="Send" <Card
link="https://send.ahur.ac/" id="vaultwarden"
>Encrypt and send files privately</Card> name="Vaultwarden"
<Card link="https://vw.ahur.ac/"
id="matrix" >A (Rust) based password manager</Card>
name="Matrix" </div>
link="https://chat.ahur.ac/"
>The messenger that doesn't spy on you</Card>
<Card
id="vaultwarden"
name="Vaultwarden"
link="https://vw.ahur.ac/"
>A (Rust) based password manager</Card>
</div>
</main>
</body>
</html>
<style> <style>
#cards { #cards {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@font-face {
font-family: 'Cantarell';
src: url('/fonts/cantarell.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
/* Background */
background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
/* Text */
color: white;
font-family: 'Cantarell', sans-serif;
/* Flex */
display: flex;
align-items: center;
margin: 0;
flex-direction: column;
}
main {
width: 40%;
}
@media screen and (max-width: 1200px) {
main {
width: 60%;
}
}
@media screen and (max-width: 800px) {
main {
width: 95%;
}
}
</style> </style>

56
src/pages/portfolio.astro Normal file
View file

@ -0,0 +1,56 @@
---
import Page from '../layouts/Page.astro';
import { Image } from 'astro:assets';
import teraioImg from '../assets/tera-io.jpg';
---
<Page title="Portfolio">
<h1>Who am I?</h1>
<p>My name is Hippolyte Chauvin and I'm born in 2004. I study IT Bachelor (BUT Informatique) at the technological institute of Grenoble (IUT2 Grenoble), where I follow the course named "Communicating and secure application deployment" which is about system administration and IT security. Fascinated by the capacity of an operating system to provide an interface to the user since my young age, I gained passion for the Linux ecosystem in 2022, which I use daily since back then.</p>
<h1>My projects</h1>
<h2>Commitment to software and Internet freedom</h2>
<p>Since 2023, I host free software based services on the web thanks to my personnal server, <code>tera-io</code>. These services allow me to escape from ones provided by privacy disrespecting big corporates, and at the same time enhance my system administration and service deployment knowledge.</p>
<Image
alt="tera-io, my personnal server"
src={ teraioImg }
width={ 200 }
/>
<figcaption>Photo of <code>tera-io</code>, my personnal server</figcaption>
<p>You can find links to services I host on <a href="/">this website's homepage</a>.</p>
</Page>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
font-style: italic;
}
a {
background-color: white;
text-decoration: none;
color: black;
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
}
a:hover {
background-color: rgba(0, 0, 0, 0);
color: white;
outline: 1px solid white;
outline-offset: -2px;
}
</style>

View file

@ -0,0 +1,44 @@
---
import Page from '../layouts/Page.astro';
import { Image } from 'astro:assets';
import teraioImg from '../assets/tera-io.jpg';
---
<Page title="Portfolio">
<h1>Qui suis-je ?</h1>
<p>J'étudie actuellement en 3<sup>ème</sup> année de BUT Informatique à l'IUT2 de Grenoble, dans le parcours "Déploiement d'applications communicantes et sécurisées" dont le contenu se rapporte à l'administration système et à la sécurité informatique. Fasciné par la capacité d'un système d'exploitation à proposer une interface à l'utilisateur depuis mon plus jeune âge, je me prends de passion pour l'écosystème Linux en 2022, dont je fais une utilisation intensive depuis. Cette passion m'a poussé à mener un combat en faveur du logiciel libre.</p>
<h1>Mes projets</h1>
<h2>Engagement pour le logiciel et l'Internet libre</h2>
<p>Depuis 2023, je mets en ligne des services à base de logiciels libres sur le web grâce à mon serveur personnel, <code>tera-io</code>. Ces services me permettent de ne pas avoir recours à des équivalents dispensés par des entreprises irrespectueuses de la vie privée des utilisateur•ices, ainsi que de parfaire mes connaissances et ma pratique de l'administration système et du déploiement de services.</p>
<Image
alt="tera-io, mon serveur personnel"
src={ teraioImg }
width={ 200 }
/>
<figcaption>Photo de <code>tera-io</code>, mon serveur personnel</figcaption>
<p>
- **[Forgejo](https://forgejo.org/)**, une forge de code source
- **[Matrix](https://matrix.org/)** via le logiciel **[Conduit](https://conduit.rs/)**, une messagerie instantannée chiffrée et fédérée
- **[Bitwarden](https://bitwarden.com/)** via le logiciel **[Vaultwarden](https://github.com/dani-garcia/vaultwarden)**, un gestionnaire de mot de passe centralisé
</p>
</Page>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
font-style: italic;
}
</style>