pages/portfolio : description qemush

src/layouts/Page.astro

@@ -46,6 +46,7 @@ body {
 
 main {
 	width: 40%;
+	text-align: justify;
 }
 
 @media screen and (max-width: 1200px) {

src/pages/portfolio.astro

@@ -8,13 +8,21 @@ 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>
+<p>
+My name is <b>Hippolyte Chauvin</b> and I'm born in <b>2004</b>. I study the <b>computer science bachelor</b> (BUT Informatique) at the <b>technological university institute of Grenoble</b> (IUT2 Grenoble), where I follow the course named "Communicating and secure application deployment" which is about system administration and IT security. I gained passion for the <b>Linux</b> ecosystem in 2022, which I use daily since back then.
+</p>
+
+<p>
+I was introduced to the world of computers in my young age, when I could spend hours on the family's computer messing around with the operating system and trying to explore every feature it had built in. This experience slowly led me to want to learn how to seriously use a computer, and later to study the field of cybersecurity.
+</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>
+<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"
@@ -24,6 +32,18 @@ import teraioImg from '../assets/tera-io.jpg';
 <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>
+
+<h2><code>qemush</code></h2>
+
+<p>
+<code>qemush</code> is a wrapper for the <b>QEMU</b> software. This emulator has a lot of features, and running QEMU machines can sometimes require a lot of command line arguments. <code>qemush</code> aims to provide an unified interface and a basic abstract layer to this software.
+</p>
+
+<p>
+<code>qemush</code> is written in a very portable way (in POSIX shell). It works with a system of launchers : a laucher is an user-written subscript called by the main program, that invokes a QEMU process in the end.
+</p>
+
+You can find <code>qemush</code>'s source code in <a href="https://git.ahur.ac/ahurac/qemush">its repo</a> on my self-hosted instance of the source code forge <b>Forgejo</b>.
 </Page>
 
 <style>
@@ -31,26 +51,53 @@ img {
   display: block;
   margin-left: auto;
   margin-right: auto;
+  box-shadow: 0 0 50px #ff1aff80;
 }
 
 figcaption {
   text-align: center;
   font-style: italic;
+  margin-top: 5px;
+}
+
+p {
+  line-height: 1.5;
 }
 
 a {
-  background-color: white;
+  position: relative;
   text-decoration: none;
-  color: black;
+  color: #ff66ff;
-  border-radius: 8px;
+  padding: 2px;
-  padding-left: 5px;
+  transition: color 0.1s;
-  padding-right: 5px;
+}
+
+a::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: #ff66ff;
+  transform: scaleY(0.1);
+  transition: transform 0.1s ease-out;
+  transform-origin: bottom;
+  z-index: -1;
+}
+
+a:hover::before {
+  transform: scaleY(1);
 }
 
 a:hover {
-  background-color: rgba(0, 0, 0, 0);
   color: white;
-  outline: 1px solid white;
+}
-  outline-offset: -2px;
+
+code {
+  padding: 2px;
+  border: 1px solid #ffffff80;
+  border-radius: 5px;
+  background-color: #00000080;
 }
 </style>