add ppp

src/routes/Header.svelte

@@ -53,7 +53,8 @@
 		display: flex;
 		background-color: white;
 		justify-content: space-between;
-		width: 80%;
+		width: 100%;
+		max-width: 64rem;
 		margin: 0 auto;
 		position: relative;
 		top: 20px;
@@ -132,4 +133,14 @@
 		background-color: var(--color-bg-nav);
 		border-radius: 5px;
 	}
+
+	@media (max-width: 600px) {
+		.header {
+			flex-direction: column;
+		}
+
+		.corner {
+			display: none;
+		}
+	}
 </style>

src/routes/Hero.svelte

@@ -42,5 +42,18 @@
 		max-width: 300px;
 		height: 100%;
 		border-radius: 5%;
+		display: block;
+		margin: 0 auto;
+	}
+
+	@media (max-width: 768px) {
+		.hero {
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.hero img {
+			max-width: 80%;
+		}
 	}
 </style>

src/routes/shs/internship/+page.md

@@ -7,8 +7,6 @@ tags:
   - svelte
 ---
 
-# Internship report
-
 During the year, I developed a website for a new association in Toulouse related to TISA (Toulouse, Computer Science, Security and Association). I developed this website using the Svelte framework because I was intrigued by its promise of performance and simplicity of development.
 
 During this internship, I learned to use Svelte effectively and to set up a solid project architecture. I also had to work closely with the members of the association to understand their needs and vision for the website, in order to create a final product that met their expectations.

src/routes/shs/ppp/+page.md

@@ -0,0 +1,20 @@
+---
+title: 👨‍💻 Projet Personnel Professionnel
+date: 2022-12-31
+description: PPP
+tags:
+---
+
+<script>
+	import ppp from '$lib/files/PPP.pdf';
+</script>
+
+<iframe src={ppp} class="ppp"></iframe>
+
+<style>
+  /* Display the iframe with a 16/9 ratio */
+  .ppp {
+    width: 100%;
+    height: 600px;
+  }
+</style>