Dev

_footer.php

@@ -3,7 +3,7 @@
 
     <footer>
         <div>© dePhants Team </div>
-        <a href="/_legal.php">Legal Notice</a>
+        <a href="/legal.php">Legal Notice</a>
         <div class:"rezo">
             <img src="/assets/images/twitter.png">
             <img src="/assets/images/facebook.png">

assets/legal.css

@@ -3,14 +3,14 @@
 
   background: var(--black);
 }
-#legal>body {
-
+#legal>#body {
   overflow: hidden;
   font-family: 'Roboto';
-  margin: 50% 0 0 0;
+  margin: 0;
   position: relative;
+  height: 100vh;
 }
-#legal>body::after {
+#legal>#body::after {
   content: '';
   position: fixed;
   top: 0;
@@ -23,7 +23,7 @@
   height: 100%;
   width: 60%;
   margin: 0 auto;
-  perspective: 450px;
+  perspective: 250px;
 }
 .scroll-text {
   color: var(--red);
@@ -39,6 +39,6 @@
 }
 
 @keyframes scroll {
-	from { top: 0; transform: translateZ(0) rotateX(20deg); }
-	to { top: -7500px; transform: translateZ(-2500px) rotateX(21deg); }
+	from { top: 800px; transform: translateZ(0) rotateX(30deg); }
+	to { top: -7500px; transform: translateZ(-4500px) rotateX(30deg); }
 }

assets/loader.css

@@ -0,0 +1,45 @@
+@import url('https://fonts.googleapis.com/css2?family=Poller+One&display=swap');
+
+@mixin position-center($text-align: center) {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+	text-align: $text-align;
+}
+
+.loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	z-index: 9999;
+}
+
+.loading-text {
+	@include position-center;
+	width: 100%;
+	height: 100px;
+	line-height: 100px;
+	span {
+		display:inline-block;
+		margin: 0 5px;
+		color: red;
+    font-family: Poller one, sans-serif;
+		@for $i from 0 through 17 {
+			&:nth-child(#{$i + 1}) {
+				filter: blur(0px);
+				animation: blur-text 1.5s (#{$i/5})+s infinite linear alternate;
+			} 
+		}
+	}
+
+
+@keyframes blur-text {
+	0% {filter: blur(0px);}
+	100% {filter: blur(4px);}
+}

bin/script.php

@@ -7,7 +7,7 @@
 //important: do not write the extension .php
 $files = [
     "index",
-    "_legal"
+    "legal"
 ];
 
 foreach ($files as $file) {

docs/assets/background.css

@@ -56,11 +56,11 @@ ul {
     align-items: center;
     font-weight: bold;
     color: rgb(99, 99, 99);
-    list-style: none;
+    list-style: square;
 }
 
 li {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: "Lucida Console", Monaco, monospace;
     margin: 0 0 5px 0;
 }
 
@@ -73,4 +73,8 @@ li {
         padding-left: 45%;
     }
 
+    ul {
+        list-style: none;
+    }
+
 }

docs/assets/contact.css

@@ -2,9 +2,8 @@
     display: none;
     position: fixed;
     width: 50%;
-    height: 70%;
     text-align: center;
-    font-size: .8rem;
+    font-size: 1.5rem;
     border-radius: 35px;
     color: var(--black);
     transform: translateX(-50%) translateY(-50%);
@@ -20,8 +19,8 @@
 }
 
 #alert img {
-    width: auto;
-    height: 50%;
+    width: 30%;
+    height: auto;
 }
 
 #alert a {

docs/assets/homepage.css

@@ -36,3 +36,16 @@
   text-align: center;
   margin: 20px;
 }
+@media only screen and (max-width: 680px) {
+
+#homepage h1 {
+  font-family: stjedise;
+  font-size: 2rem;
+  color:var(--red);
+  width: 200px;
+  height: 100px;
+  padding: 15px;
+  text-align: center;
+  margin: 20px;
+}
+}

docs/assets/legal.css

@@ -3,14 +3,14 @@
 
   background: var(--black);
 }
-#legal>body {
-
+#legal>#body {
   overflow: hidden;
   font-family: 'Roboto';
-  margin: 50% 0 0 0;
+  margin: 0;
   position: relative;
+  height: 100vh;
 }
-#legal>body::after {
+#legal>#body::after {
   content: '';
   position: fixed;
   top: 0;
@@ -23,7 +23,7 @@
   height: 100%;
   width: 60%;
   margin: 0 auto;
-  perspective: 450px;
+  perspective: 250px;
 }
 .scroll-text {
   color: var(--red);
@@ -39,6 +39,6 @@
 }
 
 @keyframes scroll {
-	from { top: 0; transform: translateZ(0) rotateX(20deg); }
-	to { top: -7500px; transform: translateZ(-2500px) rotateX(21deg); }
+	from { top: 800px; transform: translateZ(0) rotateX(30deg); }
+	to { top: -7500px; transform: translateZ(-4500px) rotateX(30deg); }
 }

docs/assets/loader.css

@@ -0,0 +1,45 @@
+@import url('https://fonts.googleapis.com/css2?family=Poller+One&display=swap');
+
+@mixin position-center($text-align: center) {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+	text-align: $text-align;
+}
+
+.loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	z-index: 9999;
+}
+
+.loading-text {
+	@include position-center;
+	width: 100%;
+	height: 100px;
+	line-height: 100px;
+	span {
+		display:inline-block;
+		margin: 0 5px;
+		color: red;
+    font-family: Poller one, sans-serif;
+		@for $i from 0 through 17 {
+			&:nth-child(#{$i + 1}) {
+				filter: blur(0px);
+				animation: blur-text 1.5s (#{$i/5})+s infinite linear alternate;
+			} 
+		}
+	}
+
+
+@keyframes blur-text {
+	0% {filter: blur(0px);}
+	100% {filter: blur(4px);}
+}

docs/index.html

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Darth Vader CV</title>
-    <link rel="icon" type="image/x-icon" href="/docs/assets/images/favicon.ico">
-    <link rel="stylesheet" href="/docs/assets/style.css">
+    <link rel="icon" type="image/x-icon" href="/phpProjetCv/assets/images/favicon.ico">
+    <link rel="stylesheet" href="/phpProjetCv/assets/style.css">
 </head>
 
 <body>
@@ -15,12 +15,12 @@
     <label for="toggle">☰</label>
     <input type="checkbox" id="toggle">
     <div class="main_pages">
-        <img src="/docs/assets/images/logo.png">
-        <a href="/docs#homepage">Home</a>
-        <a href="/docs#background">Background</a>
-        <a href="/docs#skills">Skills</a>
-        <a href="/docs#portfolio">Portfolio</a>
-        <a href="/docs#contact">Contact</a>
+        <img src="/phpProjetCv/assets/images/logo.png">
+        <a href="/phpProjetCv#homepage">Home</a>
+        <a href="/phpProjetCv#background">Background</a>
+        <a href="/phpProjetCv#skills">Skills</a>
+        <a href="/phpProjetCv#portfolio">Portfolio</a>
+        <a href="/phpProjetCv#contact">Contact</a>
     </div>
 
 </nav>
@@ -31,7 +31,7 @@
 
     <h1>darth vader</h1>
 
-    <img src="/docs/assets/images/dv0.png" alt="Darth Vader" onmouseover=this.src="/docs/assets/images/dv1.png" onmouseout=this.src="/docs/assets/images/dv0.png" width="80%" height="auto">
+    <img src="/phpProjetCv/assets/images/dv0.png" alt="Darth Vader" onmouseover=this.src="/phpProjetCv/assets/images/dv1.png" onmouseout=this.src="/phpProjetCv/assets/images/dv0.png" width="80%" height="auto">
 
     <p>Dark Lord looking for new challenges</p>
 
@@ -120,12 +120,12 @@ <h2>Skills</h2>
 <section id="portfolio">
     <h2>Portfolio</h2>
     <div class="achievement">
-        <div><img src="/docs/assets/images/portfolio_1.jpeg" alt="New Dark Lord of the Sith"></div>
-        <div><img src="/docs/assets/images/portfolio_2.jpeg" alt="His troops stormed the craft"></div>
-        <div><img src="/docs/assets/images/portfolio_3.jpeg" alt="Vader hired bounty hunters"></div>
-        <div><img src="/docs/assets/images/portfolio_4.jpeg" alt="Vader boarded his TIE fighter"></div>
-        <div><img src="/docs/assets/images/portfolio_5.jpeg" alt="Vader and the Emperor"></div>
-        <div><img src="/docs/assets/images/portfolio_6.jpeg" alt="Luke lost control of his anger"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_1.jpeg" alt="New Dark Lord of the Sith"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_2.jpeg" alt="His troops stormed the craft"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_3.jpeg" alt="Vader hired bounty hunters"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_4.jpeg" alt="Vader boarded his TIE fighter"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_5.jpeg" alt="Vader and the Emperor"></div>
+        <div><img src="/phpProjetCv/assets/images/portfolio_6.jpeg" alt="Luke lost control of his anger"></div>
     </div>
 </section>
 
@@ -155,7 +155,7 @@ <h2>Get in touch</h2></br>
         <div class="contact">
             <div class="callme">
                 <div class="image">
-                    <div><img src="/docs/assets/images/phone.png" alt="Call me"></div>
+                    <div><img src="/phpProjetCv/assets/images/phone.png" alt="Call me"></div>
                 </div>
                 <div class="text">
                     <div>
@@ -168,7 +168,7 @@ <h3>Call me</h3>
             </div>
             <div class="contactme">
                 <div class="image">
-                    <div><img src="/docs/assets/images/email.png" alt="Contact me"></div>
+                    <div><img src="/phpProjetCv/assets/images/email.png" alt="Contact me"></div>
                 </div>
                 <div class="text">
                     <div>
@@ -181,7 +181,7 @@ <h3>Contact me</h3>
             </div>
             <div class="findme">
                 <div class="image">
-                    <div><img src="/docs/assets/images/map.png" alt="Find me"></div>
+                    <div><img src="/phpProjetCv/assets/images/map.png" alt="Find me"></div>
                 </div>
                 <div class="text">
                     <div>
@@ -199,11 +199,11 @@ <h3>Location</h3>
 
     <footer>
         <div>© dePhants Team </div>
-        <a href="/docs/_legal.html">Legal Notice</a>
+        <a href="/phpProjetCv/legal.html">Legal Notice</a>
         <div class:"rezo">
-            <img src="/docs/assets/images/twitter.png">
-            <img src="/docs/assets/images/facebook.png">
-            <img src="/docs/assets/images/linkedin.png">
+            <img src="/phpProjetCv/assets/images/twitter.png">
+            <img src="/phpProjetCv/assets/images/facebook.png">
+            <img src="/phpProjetCv/assets/images/linkedin.png">
         </div>
 
     </footer>