Ajout : docker-compose

.dockerignore

@@ -0,0 +1,3 @@
+*
+!/src
+!/public

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:lts-alpine AS base
+WORKDIR /app
+
+# By copying only the package.json and package-lock.json here, we ensure that the following `-deps` steps are independent of the source code.
+# Therefore, the `-deps` steps will be skipped if only the source code changes.
+COPY package.json package-lock.json ./
+
+FROM base AS prod-deps
+RUN npm install --production
+
+FROM base AS build-deps
+RUN npm install --production=false
+
+FROM build-deps AS build
+COPY . .
+RUN npm run build
+
+FROM base AS runtime
+COPY --from=prod-deps /app/node_modules ./node_modules
+COPY --from=build /app/dist ./dist
+
+ENV HOST=0.0.0.0
+ENV PORT=4321
+EXPOSE 4321
+CMD node ./dist/server/entry.mjs

docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  site:
+    image: ahurac-homepage:latest
+    build:
+      context: .
+    restart: unless-stopped
+    ports:
+      - "${AHURAC_PORT}:4321"

public/img/logo/forgejo.svg

@@ -0,0 +1,33 @@
+<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
+  <metadata xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+    <rdf:RDF>
+      <cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
+        <dc:title>Forgejo logo</dc:title>
+        <cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <style type="text/css">
+    circle {
+      fill: none;
+      stroke: #fff;
+      stroke-width: 15;
+    }
+    path {
+      fill: none;
+      stroke: #fff;
+      stroke-width: 25;
+    }
+    .orange .red {
+      stroke: #fff;
+    }
+  </style>
+  <g transform="translate(6,6)">
+    <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange"/>
+    <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red"/>
+    <circle cx="142" cy="20" r="18" class="orange"/>
+    <circle cx="142" cy="88" r="18" class="red"/>
+    <circle cx="58" cy="180" r="18" class="red"/>
+  </g>
+</svg>

public/img/logo/matrix.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#fff">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>

src/components/Card.astro

@@ -1,8 +1,9 @@
 ---
-const { id, name } = Astro.props;
+const { id, name, link } = Astro.props;
 ---
 
-<div class="card">
+<a href={link}>
+  <div class="card">
     <div class="image-wrapper">
       <img src={`/img/logo/${id}.svg`} alt={`${name} logo`}" />
     </div>
@@ -10,7 +11,8 @@ const { id, name } = Astro.props;
       <h1>{name}</h1>
       <p><slot /></p>
     </div>
-</div>
+  </div>
+</a>
 
 <style>
 .card {
@@ -18,20 +20,25 @@ const { id, name } = Astro.props;
   align-items: center;
   padding: 10px;
   margin: 10px 0;
-  border: 2px #ff66ff solid;
+  border: 2px #ff1aff solid;
   color: white;
   border-radius: 25px;
-  transition: 0.1s ease-out;
   position: relative;
   top: 0;
   background-color: #00000000;
+  box-shadow: 0 0 50px #ff1aff80;
+}
+
+a {
+  text-decoration: none;
 }
 
 .card:hover {
   top: -4px;
-  background-color: #ff80ff;
-  border: none;
+  background-color: #ff27f4;
+  border: 2px #00000000 solid;
   color: black;
+  box-shadow: 0 0 50px #ff1affff;
 }
 
 .card:hover img {
@@ -50,6 +57,10 @@ const { id, name } = Astro.props;
 
 img {
   height: 100%;
-  width: auto;
+  width: 100px;;
+}
+
+img, .card {
+  transition: 0.1s ease-out;
 }
 </style>

src/components/Header.astro

@@ -0,0 +1,44 @@
+---
+import NavButton from '../components/NavButton.astro'
+---
+
+<nav>
+  <div class="left">
+    <span>Ahurac</span>
+    <div class="navButtons">
+      <NavButton link="/">Home</NavButton>
+      <NavButton link="mailto:hchauvin@mailbox.org">Contact (mail)</NavButton>
+    </div>
+  </div>
+</nav>
+
+<style>
+nav {
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(6px);
+  margin-bottom: 10px;
+}
+
+span {
+  font-size: 60px;
+  margin: 0;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+}
+
+.navButtons {
+  display: flex;
+  align-items: center;
+  height: 30px;
+}
+</style>

src/components/NavButton.astro

@@ -0,0 +1,38 @@
+---
+const { link } = Astro.props;
+---
+
+<a href={link}>
+  <slot />
+</a>
+
+<style>
+a {
+  text-decoration: none;
+  margin-left: 20px;
+  color: inherit;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+a:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+</style>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
-import Card from '../components/Card.astro'
+import Header from '../components/Header.astro';
+import Card from '../components/Card.astro';
 ---
 
 <html lang="en">
@@ -11,11 +12,26 @@ import Card from '../components/Card.astro'
 		<title>Ahurac</title>
 	</head>
 	<body>
+		<Header />
 		<main>
+			<p>Home of a FOSS extremist and music nerd.</p>
 			<h1>My services</h1>
 			<div id="cards">
-				<Card id="forgejo" name="Forgejo">A straight-to-the-point source code forge</Card>
-				<Card id="test2" name="Purasehoraderu">:)</Card>
+				<Card
+					id="forgejo"
+					name="Forgejo"
+					link="https://git.ahur.ac/"
+				>A straight-to-the-point source code forge</Card>
+				<Card
+					id="matrix"
+					name="Matrix"
+					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>
@@ -36,24 +52,23 @@ import Card from '../components/Card.astro'
 }
 
 body {
-	/*
-  background:
-		linear-gradient(135deg, #4d0099 0%, #00000000 100%),
-		linear-gradient(-135deg, #9933ff 0%, #00000000 100%),
-		linear-gradient(45deg, #ff4dff 0%, #00000000 100%),
-		linear-gradient(-45deg, #3366ff 0%, #00000000 100%);
-		*/
+	/* 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;
-	justify-content: center;
+	align-items: center;
+	margin: 0;
+	flex-direction: column;
 }
 
 main {
-	width: 30%;
+	width: 40%;
 }
 </style>