V4.1.0 CLEAN CODE

frs99 · Aug 10, 2022 · db8f572 · db8f572
1 parent ae2627c
commit db8f572
Show file tree

Hide file tree

Showing 55 changed files with 740 additions and 38,722 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ERROR</title>
+    <!-- CSS & FAVICON -->
+    <link href="assets/css/error.css" rel="stylesheet" type="text/css">
+    <link href="assets/img/favicon.ico" rel="icon" type="assets/img/png">
+    <script src="assets/js/onload.js"></script>
+    <!--FONTS-->
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
+    <!-- font-family: 'Nunito', sans-serif; -->
+
+    <!-- RESPONSIVE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- COLOR FOR HEADER BAR -->
+    <!-- Chrome, Firefox OS and Opera -->
+    <meta name="theme-color" content="#202020">
+    <!-- Windows Phone -->
+    <meta name="msapplication-navbutton-color" content="#202020">
+    <!-- iOS Safari -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="#202020">
+</head>
+<body>
+  <main class="main-error">
+      <section>
+          <img src="assets/img/404.png">
+          <a href="https://frscodes.github.io/">HOME</a>
+      </section>
+  </main>
+</body>
+</html>
diff --git a/about.html b/about.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <title>FrsCodes - About</title>
+
+  <!-- FAVICON -->
+  <link href="assets/img/favicon.ico" rel="icon" type="assets/img/png">
+
+  <!-- STYLE CSS -->
+  <link rel="stylesheet" href="assets/css/saturneyes.css">
+  <link rel="stylesheet" href="assets/css/header.css">
+  <link rel="stylesheet" href="assets/css/footer.css">
+  <link rel="stylesheet" href="assets/css/about.css">
+  <link rel="stylesheet" href="assets/css/index.css">
+  <!-- RESPONSIVE -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="assets/css/media.css">
+
+  <!-- JS -->
+  <script src="assets/js/onload.js"></script>
+  <script src="assets/js/icon.js"></script>
+
+  <!-- COLOR FOR HEADER BAR -->
+  <!-- Chrome, Firefox, Opera -->
+  <meta name="theme-color" content="#202020">
+  <!-- Windows Phone -->
+  <meta name="msapplication-navbutton-color" content="#202020">
+  <!-- iOS Safari -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="#202020">
+
+  <!--FONTS-->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
+
+  <!-- FACEBOOK - Meta-tag Verification -->
+  <meta name="facebook-domain-verification" content="delxleccauuw4uj81zuxfo0b5npc24" />
+
+  <!-- Primary Meta Tags -->
+  <meta name="title" content="FrsCodes">
+  <meta name="description" content="Full stack web developer and (UX / UI) with info security">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="FrsCodes">
+  <meta property="og:url" content="https://frscodes.github.io/">
+  <meta property="og:title" content="FrsCodes">
+  <meta property="og:description" content="Full stack web developer and (UX / UI) with info security">
+  <meta property="og:image" content="https://frscodes.github.io/assets/img/meta.jpg">
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://frscodes.github.io/">
+  <meta property="twitter:title" content="FrsCodes">
+  <meta property="twitter:description" content="Full stack web developer and (UX / UI) with info security">
+  <meta property="twitter:image" content="https://frscodes.github.io/assets/img/meta.jpg">
+</head>
+<body>
+  <!-- START HEADER -->
+  <header>
+    <div class="bar">
+      <div class="navbar">
+          <div class="logo link d-f-c m-c" style="cursor: pointer;"><img src="assets/img/first-logo.png"></div>
+          <div class="resp-nav"><i class="fas fa-bars" aria-hidden="true"></i><i class="fas fa-times d-n" aria-hidden="true"></i></div>
+          <div class="nav-navbar d-f-c m-c to-space-between">
+            <nav>
+                <ul class="ul-navbar">
+                  <li class="li-navbar"><a class="a-navbar" href="/">Home</a></li>
+                  <li class="li-navbar"><a class="a-navbar" href="/about">About me</a></li>
+                  <li class="li-navbar"><a class="a-navbar" href="/services">My servies</a></li>
+                  <li class="li-navbar"><a class="a-navbar" href="https://frscodes.github.io/portfolio/">My portfolio</a></li>
+                </ul>
+            </nav>
+            <nav><a class="btn-a" href="/">contact</a></nav>
+          </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- START MAIN -->
+  <main class="main-about">
+    <section class="box-hi d-f-c m-c">
+      <div>
+        <div class="min-info">
+            <h1 class="hi">Hi</h1>
+            <p class="im">Im</p>
+            <h2 class="frscodes">FrsCodes</h2>
+            <p class="job">Website developer and design lover</p>
+        </div>
+        <div class="social-about d-f-c to-space-between">
+            <div class="logo-about d-f-c to-center"><img src="assets/img/big-logo.png"></div>
+            <a href="https://www.linkedin.com/in/frscodes/" target="_blank">
+              <div class="social d-f-c to-center"><i class="fab fa-linkedin" aria-hidden="true"></i></div>
+            </a>
+            <a href="https://github.com/faresdjefaflia" target="_blank">
+              <div class="social d-f-c to-center"><i class="fab fa-github-square" aria-hidden="true"></i></div>
+            </a>
+            <a href="https://www.behance.net/frscodes" target="_blank">
+              <div class="social d-f-c to-center"><i class="fab fa-behance-square" aria-hidden="true"></i></div>
+            </a>
+            <a href="https://twitter.com/frscodes" target="_blank">
+              <div class="social d-f-c to-center"><i class="fab fa-twitter-square" aria-hidden="true"></i></div>
+            </a>
+        </div>
+      </div>
+    </section>
+
+    <section class="box-about m-c">
+      <div class="title">
+        <h1>About me</h1>
+        <div></div>
+      </div>
+      <div class="box-speak m-c d-f-c">
+        <div class="img-profile"><img src="assets/img/profile.jpg"></div>
+        <p class="speak">
+          Hello, my name is Fares from Algeria and I am 22 years old.<br>
+          I am a web developer, and I also enjoy designing interfaces and logos and learning everything .<br>
+          I also push open source projects that help everyone.<br>
+          I started learning programming from the phone and I do not own a computer<br>
+          the programming for me is a love , and not just a job.<br>
+          Today I am good at many thing 😎.
+        </p>
+      </div>
+      <div class="title">
+        <h1>Skills</h1>
+        <div></div>
+      </div>
+      <div class="box-speak m-c d-f-c">
+        <div class="img-profile"><img src="assets/img/profile.jpg"></div>
+        <p class="speak">
+          I used to love to use the computer since my childhood, but unfortunately I did not have the money to buy a device.<br>
+          I loved programming and design, but I couldn't do anything, However..<br>
+          I slowly started learning programming by phone only.<br>
+          until I bought a computer and started doing the thing I love.<br>
+          These are some of the things I'm good at:<br>
+        </p>
+      </div>
+      <div class="box-skills d-f-c to-center">
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/html-5.png"></div>
+            <p>HTML5</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/css-3.png"></div>
+            <p>CSS3</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/js.png"></div>
+            <p>JavaScript</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/react.png"></div>
+            <p>React</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/linux.png"></div>
+            <p>Linux</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/git.png"></div>
+            <p>Git</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/xd.png"></div>
+            <p>Adobe Xd</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/illustrator.png"></div>
+            <p>Illustrator</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills d-f-c to-center"><img src="assets/img/icons/photoshop.png"></div>
+            <p>Photoshop</p>
+        </div>
+        <div class="skills d-f-c">
+            <div class="img-skills-wait d-f-c to-center"><img src="assets/img/icons/time-left.png"></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="thanks m-c">
+      <h1>Thanks</h1>
+      <p>Thank you for visiting my website and being on this page.<br>
+      I really appreciate your time.<br>
+      My greetings</p><img src="assets/img/first-logo.png">
+    </section>
+
+    <button class="btn-scroll d-f-c to-center">
+      <i class="fas fa-arrow-circle-up"></i>
+    </button>
+  </main>
+
+  <!-- START FOOTER -->
+  <footer class="m-c footer">
+    <section class="d-f-c to-space-between m-c footer-box">
+        <div class="copyright">
+          <p>All Rights Reserved - <a href="https://frscodes.github.io/copyright/" class="copyright">FrsCodes 2021 ©</a></p>
+        </div>
+        <div class="other-link">
+          <ul class="d-f-c to-space-between">
+              <li><a class="bzns" href="#">Business Policy</a></li>
+              <li><a class="contactme" href="#">Support Me</a></li>
+              <li><a class="contactme" href="#">Contact Me</a></li>
+              <a href="https://github.com/frscodes/frscodes.github.io" target="_blank">
+                <p class="version">V4</p>
+              </a>
+          </ul>
+        </div>
+    </section>
+  </footer>
+<script src="assets/js/main.js"></script>
+<script src="assets/js/footer.js"></script>
+</body>
+</html>
diff --git a/src/css/about.css → assets/css/about.css b/src/css/about.css → assets/css/about.css
diff --git a/assets/css/error.css b/assets/css/error.css
@@ -0,0 +1,65 @@
+@charset "utf-8";
+
+*{
+    font-family: 'Nunito', sans-serif;
+    padding: 0px; 
+    margin: 0px; 
+    box-sizing: border-box; 
+    text-decoration: none; 
+    list-style: none; 
+    -webkit-tap-highlight-color:transparent;
+}
+
+img {
+  pointer-events: none;
+}
+a{
+  user-select: none;
+}
+body{
+    background-color: #070314;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width:100%;
+    height:100%;
+}
+main section{
+    position: absolute;
+    top: 0; bottom: 0; left: 0; right: 0;
+    margin: auto;
+    width: 400px;
+    height:370px;
+    text-align: center;
+}
+main section img{
+    width:350px;
+}
+main section a{
+  color: #fff;
+  display: inline-block;
+  margin: 0 auto;
+  border: 2px solid #ffffff;
+  border-radius: 20px;
+  padding: 10px 20px;
+  transition: 0.3s;
+  margin-top:40px;
+  background-color: #100d0d;
+}
+main section a:hover{
+  color: #100d0d;
+  background-color: #fff;
+  box-shadow: -2px -2px 4px #69b3fc, 2px 2px 4px #e55193;
+}
+
+@media(max-width:400px){
+    body{
+        background-size: auto;
+    }
+    main section{
+        width: 300px;
+        height: 330px;
+    }
+    main section img{
+        width:300px;
+    }
+}
diff --git a/src/css/footer.css → assets/css/footer.css b/src/css/footer.css → assets/css/footer.css
diff --git a/src/css/header.css → assets/css/header.css b/src/css/header.css → assets/css/header.css
diff --git a/src/css/index.css → assets/css/index.css b/src/css/index.css → assets/css/index.css
@@ -44,3 +44,22 @@ body{
   box-shadow: -1px -1px 4px #69b3fc, 1px 1px 4px #e55193;
 }
 
+.op0{
+  opacity: 0;
+}
+
+.btn-scroll{
+  background-color: #202020;
+  border-radius: 50px;
+  width:40px;
+  height:40px;
+  border: none;
+  position: fixed;
+  bottom: 60px;
+  right: 60px;
+  opacity: 0;
+}
+.btn-scroll i {
+  color: #fff;
+  font-size:26px;
+}
diff --git a/src/css/media.css → assets/css/media.css b/src/css/media.css → assets/css/media.css
@@ -83,7 +83,6 @@
 
   /* FOOTER */
   .footer{
-    /* background-color: transparent; */
     padding: 10px 0;
     opacity:1 !important;
   }
@@ -104,7 +103,7 @@
   }
 
   /* PAGE - ABOUT */
-  .box-about{
+  .box-hi, .box-about{
     padding:30% 0;
     height: auto;
   }
@@ -167,9 +166,6 @@
   .thanks p{
     font-size:18px;
   }
-  .footer-about{
-    opacity:1;
-  }
 
   /* PAGE SERVCIES */
   .srv-logo{
@@ -187,6 +183,9 @@
   .List-box-srv p{
     width:95%;
   }
+  .btn-scroll{
+    display: none !important;
+  }
 }
 
 @media (max-width:768px){

diff --git a/src/css/saturneyes.css → assets/css/saturneyes.css b/src/css/saturneyes.css → assets/css/saturneyes.css
diff --git a/src/css/services.css → assets/css/services.css b/src/css/services.css → assets/css/services.css
diff --git a/assets/img/404.png b/assets/img/404.png
diff --git a/public/assets/img/background.jpg → assets/img/background.jpg b/public/assets/img/background.jpg → assets/img/background.jpg
diff --git a/src/media/big-logo.png → assets/img/big-logo.png b/src/media/big-logo.png → assets/img/big-logo.png
diff --git a/public/assets/img/favicon.ico → assets/img/favicon.ico b/public/assets/img/favicon.ico → assets/img/favicon.ico
diff --git a/src/media/first-logo.png → assets/img/first-logo.png b/src/media/first-logo.png → assets/img/first-logo.png
diff --git a/public/assets/img/icons/css-3.png → assets/img/icons/css-3.png b/public/assets/img/icons/css-3.png → assets/img/icons/css-3.png
diff --git a/public/assets/img/icons/git.png → assets/img/icons/git.png b/public/assets/img/icons/git.png → assets/img/icons/git.png
diff --git a/public/assets/img/icons/html-5.png → assets/img/icons/html-5.png b/public/assets/img/icons/html-5.png → assets/img/icons/html-5.png
diff --git a/public/assets/img/icons/illustrator.png → assets/img/icons/illustrator.png b/public/assets/img/icons/illustrator.png → assets/img/icons/illustrator.png
diff --git a/public/assets/img/icons/js.png → assets/img/icons/js.png b/public/assets/img/icons/js.png → assets/img/icons/js.png
diff --git a/public/assets/img/icons/linux.png → assets/img/icons/linux.png b/public/assets/img/icons/linux.png → assets/img/icons/linux.png
diff --git a/public/assets/img/icons/photoshop.png → assets/img/icons/photoshop.png b/public/assets/img/icons/photoshop.png → assets/img/icons/photoshop.png
diff --git a/public/assets/img/icons/react.png → assets/img/icons/react.png b/public/assets/img/icons/react.png → assets/img/icons/react.png
diff --git a/public/assets/img/icons/time-left.png → assets/img/icons/time-left.png b/public/assets/img/icons/time-left.png → assets/img/icons/time-left.png
diff --git a/public/assets/img/icons/xd.png → assets/img/icons/xd.png b/public/assets/img/icons/xd.png → assets/img/icons/xd.png
diff --git a/public/assets/img/meta.jpg → assets/img/meta.jpg b/public/assets/img/meta.jpg → assets/img/meta.jpg
diff --git a/src/media/profile.jpg → assets/img/profile.jpg b/src/media/profile.jpg → assets/img/profile.jpg
diff --git a/assets/js/footer.js b/assets/js/footer.js
@@ -0,0 +1,11 @@
+document.querySelector(".footer").classList.toggle("op0");
+window.addEventListener("scroll", () => {
+  let scroleable = document.documentElement.scrollHeight - window.innerHeight;
+  let scrolled = window.scrollY;
+  if(scrolled === scroleable){
+    document.querySelector(".footer").classList.remove("op0");
+  }
+  else{
+    document.querySelector(".footer").classList.add("op0");
+  }
+})
diff --git a/public/assets/js/icon.js → assets/js/icon.js b/public/assets/js/icon.js → assets/js/icon.js