refactor:organize files-dynamically fills content from config.json

mahmoudalnkeeb · May 10, 2024 · 5df424a · 5df424a
1 parent db3abab
commit 5df424a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -8,5 +8,6 @@ Nothing fancy just html, css and javascript.
 
 ## todos
 
-- [ ] make the code better for future improvements !important.
+- [x] make the code better for future improvements !important.
+- [ ] improve my css use vars and other stuff
 - [ ] show a selected list of repositories from my github using github api.
diff --git a/config.json b/config.json
@@ -0,0 +1,14 @@
+{
+  "info": {
+    "name": "Mahmoud Alnakeeb",
+    "role": "Backend Developer",
+    "company": "",
+    "about": "Starting my backend developer journey in 2020, I immersed myself in JavaScript and Node.js, cultivating a strong foundation. Since then, I've embraced continuous learning, completing web development courses and engaging in diverse projects. Venturing into Rust in 2024 was a pivotal decision, broadening my skill set and igniting new passions. Now, I'm on the lookout for exciting opportunities in backend development where I can apply my expertise and contribute to cutting-edge projects. Eager to embark on the next chapter of my professional journey, I'm ready to tackle challenges and make meaningful contributions."
+  },
+  "socials": {
+    "linkedin": "https://www.linkedin.com/in/mahmoud-alnakeeb/",
+    "github": "https://github.com/mahmoudalnkeeb",
+    "email": "mailto:[email protected]",
+    "resume": "https://docs.google.com/document/d/e/2PACX-1vSnLDXFRBODqU7dM_9OQVxKB2oWml_EEz0lbhQaKrDtNF43CnzufAWq3BbeMf2jl54F-utAnbD9heD3/pub"
+  }
+}
diff --git a/style.css → css/style.css b/style.css → css/style.css
@@ -41,33 +41,37 @@ ul {
   flex-wrap: wrap;
 }
 
+.job-title {
+  display: flex;
+  gap: 20px;
+  font-size: 1.3em;
+  align-items: center;
+}
+
 .role {
   color: #6c5ce7;
-  font-size: 1.3em;
   width: fit-content;
-  position: relative;
 }
-.role::before {
-  content: "@";
-  position: absolute;
-  right: -25px;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #6c5ce7;
-  vertical-align: baseline;
+
+.company {
+  color: #202c38;
+  font-size: 1.2em;
+  position: relative;
 }
-.role::after {
-  content: "";
-  position: absolute;
-  right: -27px;
-  top: 51%;
-  transform: translate(-50%, -50%);
-  background-color: #6c5ce7;
+
+.company-empty {
+  background-color: #202c38;
   width: 0.25rem;
   height: 2rem;
   animation: blink 1s infinite;
 }
 
+.company::before {
+  content: "@";
+  position: absolute;
+  left: -17px;
+}
+
 li a {
   text-decoration: none;
 }
@@ -105,6 +109,6 @@ li i {
     background-color: transparent;
   }
   50% {
-    background-color: #6c5ce7;
+    background-color: #202c38;
   }
 }
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mahmoud Alnakeeb - Backend Developer</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./css/style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -22,9 +22,12 @@
   <body>
     <canvas id="background"></canvas>
     <main>
-      <h1>Mahmoud Alnakeeb</h1>
-      <span class="role">Backend Developer</span>
-      <p class="bio">
+      <h1 id="name">Mahmoud Alnakeeb</h1>
+      <div class="job-title">
+        <span class="role" id="role">Backend Developer</span>
+        <span class="company company-empty" id="company"></span>
+      </div>
+      <p class="bio" id="about">
         Starting my backend developer journey in 2020, I immersed myself in
         JavaScript and Node.js, cultivating a strong foundation. Since then,
         I've embraced continuous learning, completing web development courses
@@ -38,33 +41,29 @@ <h1>Mahmoud Alnakeeb</h1>
       </p>
       <ul class="socials">
         <li class="in">
-          <a
-            target="_blank"
-            href="https://www.linkedin.com/in/mahmoud-alnakeeb/"
-          >
+          <a target="_blank" id="inLink">
             <i class="fa-brands fa-linkedin"></i>
           </a>
         </li>
         <li class="github">
-          <a target="_blank" href="https://github.com/mahmoudalnkeeb">
+          <a target="_blank" id="githubLink">
             <i class="fa-brands fa-square-github"></i>
           </a>
         </li>
         <li class="mail">
-          <a target="_blank" href="mailto:[email protected]">
+          <a target="_blank" id="emailLink">
             <i class="fa-solid fa-at"></i>
           </a>
         </li>
         <li class="resume">
-          <a
-            href="https://docs.google.com/document/d/e/2PACX-1vSnLDXFRBODqU7dM_9OQVxKB2oWml_EEz0lbhQaKrDtNF43CnzufAWq3BbeMf2jl54F-utAnbD9heD3/pub"
-          >
+          <a id="resumeLink">
             <i class="fa-solid fa-file-alt"></i>
           </a>
         </li>
       </ul>
     </main>
 
-    <script src="script.js"></script>
+    <script src="./js/script.js" type="module"></script>
+    <script src="./js/cursor.js"></script>
   </body>
 </html>
diff --git a/script.js → js/cursor.js b/script.js → js/cursor.js
@@ -60,13 +60,13 @@ class Cursor {
 
 const cursor = new Cursor(mouse.x, mouse.y);
 
-function animate() {
-  requestAnimationFrame(animate);
+function follow() {
+  requestAnimationFrame(follow);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   cursor.setTargetPosition(mouse.x, mouse.y);
   cursor.update();
   cursor.draw();
 }
 
-animate();
+follow();
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,23 @@
+const anchors = [
+  { name: "linkedin", element: document.getElementById("inLink") },
+  { name: "github", element: document.getElementById("githubLink") },
+  { name: "email", element: document.getElementById("emailLink") },
+  { name: "resume", element: document.getElementById("resumeLink") },
+];
+const nameElement = document.getElementById("name");
+const roleElement = document.getElementById("role");
+const companyElement = document.getElementById("company");
+const aboutElement = document.getElementById("about");
+
+fetch("../config.json").then(async (res) => {
+  const { info, socials } = await res.json();
+  nameElement.innerText = info.name;
+  roleElement.innerText = info.role;
+  if (!!info.company) {
+    companyElement.classList.remove('company-empty')
+    companyElement.innerText = info.company;
+  }
+  anchors.forEach((anchor) => {
+    anchor.element.setAttribute("href", socials[`${anchor.name}`]);
+  });
+});