Upload 93 files

.gitattributes

@@ -23,3 +23,19 @@ assets/Videos/nano.mp4 filter=lfs diff=lfs merge=lfs -text
 indoor.jpg filter=lfs diff=lfs merge=lfs -text
 website-demo-image/desktop.png filter=lfs diff=lfs merge=lfs -text
 website-demo-image/mobile.png filter=lfs diff=lfs merge=lfs -text
+assets/Certifcations/AI.jpg filter=lfs diff=lfs merge=lfs -text
+assets/Certifcations/SQL.png filter=lfs diff=lfs merge=lfs -text
+assets/Certifcations/Ubunto.jpg filter=lfs diff=lfs merge=lfs -text
+assets/images/Projects/Tableau[[:space:]]Pro.png filter=lfs diff=lfs merge=lfs -text
+assets/images/Projects/Tableau[[:space:]]Pro2.png filter=lfs diff=lfs merge=lfs -text
+assets/Videos/lab.mp4 filter=lfs diff=lfs merge=lfs -text
+assets/Videos/lab5.mp4 filter=lfs diff=lfs merge=lfs -text
+assets/Videos/tableau.mp4 filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/apl1.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/apl3.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/apl4.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/im1.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/im2.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/im3.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/im4.png filter=lfs diff=lfs merge=lfs -text
+ProjectViewr/assets/im5.png filter=lfs diff=lfs merge=lfs -text

CirtifiCationsViewr/CertificatesViewer.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <title>Certificate Details</title>
 
-<!-- Include Marked library -->
+<!-- Markdown Parser -->
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
 <style>
@@ -13,18 +13,16 @@
   --card: #1f1f1f;
   --accent: #f5c542;
   --text: #e0e0e0;
-  --muted: #b0b0b0;
   --divider: #2a2a2a;
-  --shadow: rgba(0, 0, 0, 0.5);
-  --font-primary: "Segoe UI", "Roboto", sans-serif;
+  --shadow: rgba(0,0,0,0.5);
+  --font: "Segoe UI", Roboto, sans-serif;
 }
 
 body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: var(--font-primary);
-  line-height: 1.6;
+  font-family: var(--font);
 }
 
 .page {
@@ -36,125 +34,72 @@ body {
 }
 
 .container {
-  width: 100%;
   max-width: 900px;
+  width: 100%;
   background: linear-gradient(145deg, #1f1f1f, #222);
-  border-radius: 24px;
   padding: 50px 40px;
+  border-radius: 24px;
   box-shadow: 0 10px 30px var(--shadow);
-  transition: transform 0.3s ease;
 }
 
-.container:hover {
-  transform: translateY(-5px);
-}
-
-/* === TITLE === */
 h1 {
-  margin: 0;
-  font-size: 36px;
-  font-weight: 700;
   text-align: center;
-  letter-spacing: 1px;
   color: var(--accent);
-  text-shadow: 1px 1px 2px var(--shadow);
+  margin-bottom: 30px;
 }
 
-/* === SECTIONS === */
 .section {
-  margin-top: 50px;
+  margin-top: 40px;
 }
 
 .section-title {
   text-align: center;
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--accent);
+  letter-spacing: 2px;
   margin-bottom: 20px;
+  font-size: 14px;
 }
 
 .divider {
   height: 1px;
   background: var(--divider);
   margin: 40px 0;
-  opacity: 0.6;
 }
 
-/* === IMAGE === */
 .certificate-image {
   display: flex;
   justify-content: center;
 }
 
 .certificate-image img {
-  width: 100%;
   max-width: 720px;
+  width: 100%;
   border-radius: 20px;
-  object-fit: contain;
   box-shadow: 0 6px 20px var(--shadow);
-  transition: transform 0.3s ease;
-}
-
-.certificate-image img:hover {
-  transform: scale(1.02);
 }
 
-/* === CONTENT === */
+/* Markdown content */
 .content {
   max-width: 760px;
-  margin: 0 auto;
-  color: var(--text);
-  font-size: 16px;
+  margin: auto;
   line-height: 1.8;
-  text-align: left;
-  word-wrap: break-word;
 }
 
-/* Markdown styling */
-.content h1, .content h2, .content h3, .content h4 {
+.content h1,
+.content h2,
+.content h3 {
   color: var(--accent);
   text-align: center;
-  margin-bottom: 10px;
-}
-
-.content p {
-  margin-bottom: 1em;
-}
-
-.content ul {
-  padding-left: 1.2em;
-  margin-bottom: 1em;
-}
-
-.content li {
-  margin-bottom: 0.6em;
 }
 
 .content a {
   color: var(--accent);
-  text-decoration: none;
 }
 
-.content a:hover {
-  text-decoration: underline;
-}
-
-/* === MOBILE === */
 @media (max-width: 768px) {
   .container {
     padding: 30px 20px;
-    border-radius: 16px;
-  }
-
-  .content {
-    font-size: 15px;
-    text-align: left;
-  }
-
-  h1 {
-    font-size: 28px;
   }
 }
 </style>
@@ -165,12 +110,10 @@ h1 {
 <div class="page">
   <div class="container">
 
-    <!-- TITLE -->
-    <h1 id="title"></h1>
+    <h1 id="title">Loading...</h1>
 
     <div class="divider"></div>
 
-    <!-- CERTIFICATE IMAGE -->
     <div class="section">
       <div class="section-title">Certificate</div>
       <div class="certificate-image" id="image"></div>
@@ -178,9 +121,8 @@ h1 {
 
     <div class="divider"></div>
 
-    <!-- CONTENT -->
     <div class="section">
-      <div class="section-title">Certificate Details</div>
+      <div class="section-title">Description</div>
       <div class="content" id="content"></div>
     </div>
 
@@ -189,32 +131,54 @@ h1 {
 
 <script>
 const params = new URLSearchParams(window.location.search);
-const jsonPath = params.get("data");
-
-if (!jsonPath) {
-  document.body.innerHTML = "<p style='color:red'>No certificate data provided.</p>";
-  throw new Error("Missing data query");
-}
-
-fetch(jsonPath)
-  .then(res => res.json())
-  .then(cert => renderCertificate(cert))
-  .catch(() => {
-    document.body.innerHTML = "<p style='color:red'>Failed to load certificate data.</p>";
+const jsonUrl = params.get("data");
+
+if (!jsonUrl) {
+  document.body.innerHTML = "<p style='color:red'>Missing ?data=certificate.json</p>";
+  throw new Error("No data parameter");
+}
+
+// Load certificate JSON
+fetch(jsonUrl)
+  .then(res => {
+    if (!res.ok) throw new Error("JSON load failed");
+    return res.json();
+  })
+  .then(cert => render(cert))
+  .catch(err => {
+    document.body.innerHTML = "<p style='color:red'>Failed to load certificate data</p>";
+    console.error(err);
   });
 
-function renderCertificate(cert) {
-  document.getElementById("title").textContent = cert.title;
+function render(cert) {
+  document.getElementById("title").textContent = cert.title || "Certificate";
+
+  if (cert.imagePath) {
+    document.getElementById("image").innerHTML =
+      `<img src="${cert.imagePath}" alt="Certificate Image">`;
+  }
 
-  document.getElementById("image").innerHTML = `
-    <img src="${cert.imagePath}" alt="${cert.title}">
-  `;
+  if (!cert.description) {
+    document.getElementById("content").innerHTML =
+      "<p style='color:red'>No README path provided</p>";
+    return;
+  }
 
-  // If content is an array, join it; else treat as string
-  const markdown = Array.isArray(cert.content) ? cert.content.join('\n') : cert.content;
-  document.getElementById("content").innerHTML = marked.parse(markdown);
+  // Fetch README.md file
+  fetch(cert.description)
+    .then(res => {
+      if (!res.ok) throw new Error("Markdown load failed");
+      return res.text();
+    })
+    .then(md => {
+      document.getElementById("content").innerHTML = marked.parse(md);
+    })
+    .catch(() => {
+      document.getElementById("content").innerHTML =
+        "<p style='color:red'>Failed to load README file</p>";
+    });
 }
 </script>
 
 </body>
-</html>
+</html>

CirtifiCationsViewr/data/C1.json

@@ -1,5 +1,5 @@
 {
-    "title": "Deep Learning Specialization",
-    "imagePath": "../assets/Certifcations/Mohammed.jpg",
-    "content": "# 🎓 I Completed the Digitera Program!\n\nI’m thrilled to share that I have successfully completed the **Digitera Program**, marking a major step in mastering digital skills and becoming *Ready for Tomorrow*.\n\nThroughout this hands-on journey, I built powerful competencies that employers highly value, while applying them in practical, real-world exercises.\n\n## 📅 Training Highlights\nAll sessions were conducted online, and I actively participated in every session. The full training covered the following topics:\n\n- **Day 1:** Digital Productivity\n- **Day 2:** Data Literacy & Dashboards\n- **Day 3:** Automation for Daily Work\n- **Day 4:** AI for Productivity & Creativity\n- **Day 5:** Data Storytelling & Digital Presence\n- **Day 6:** Capstone Project & Digital Roadmap\n\nI also stayed connected through the official WhatsApp group to get updates, instructions, and interact with peers and mentors.\n\n## 💡 What I Gained\nCompleting this program enhanced my digital skills, strengthened my problem-solving abilities, and prepared me to apply practical tools to real-world challenges. It was an invaluable experience that helped me grow as a digital professional.\n\n*— Proud to have completed the Digitera Program and excited to apply what I’ve learned!*"
+    "title": "AI :12 Month Learning Journey ",
+    "imagePath": "../assets/Certifcations/AI.jpg",
+    "description": "./data/ReadMeFiles/C1.Readme"
 }

CirtifiCationsViewr/data/C2.json

@@ -1,5 +1,5 @@
 {
     "title": "Deep Learning Specialization",
-    "imagePath": "../assets/Certifcations/Excle.jpg",
-    "content": "# Microsoft Excel Certification\n\nThis certificate validates my proficiency in **Microsoft Excel** for data analysis and business reporting. It demonstrates essential to advanced Excel skills used in real-world data workflows.\n\n## Key Skills Covered\n\n- **Formulas, Functions, and Logical Expressions:** Applying Excel functions to analyze and manipulate data efficiently.\n- **Data Cleaning, Sorting, and Filtering:** Preparing data for accurate analysis and reporting.\n- **Charts and Dashboards:** Creating professional visualizations for clear insights.\n- **Pivot Tables and Pivot Charts:** Summarizing complex datasets effectively.\n- **Conditional Formatting:** Highlighting trends and key data points.\n- **Large Dataset Management:** Efficient handling of high-volume data.\n\nThis certification showcases my ability to transform raw data into meaningful insights using Excel, supporting **data-driven decision-making** in business and analytical environments."
+    "imagePath": "../assets/Certifcations/SQL.png",
+    "description": "./data/ReadMeFiles/C2.Readme"
 }

ProjectViewr/ProjectViewr.html

@@ -1,76 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Project Details</title>
 
 <!-- Iconify -->
 <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
-<!-- Marked.js for Markdown parsing -->
+
+<!-- Marked.js -->
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
 <style>
 :root {
-  --bg: #121212;
-  --card: #1f1f1f;
+  --bg: #0f0f0f;
+  --card: #1a1a1a;
   --accent: #f5c542;
-  --text: #e0e0e0;
-  --muted: #b0b0b0;
+  --text: #e5e5e5;
+  --muted: #9e9e9e;
   --divider: #2a2a2a;
-  --shadow: rgba(0, 0, 0, 0.5);
-  --font-primary: "Segoe UI", "Roboto", sans-serif;
+  --error: #ff5252;
+  --radius: 20px;
+  --shadow: 0 10px 30px rgba(0,0,0,0.6);
+  --font: "Segoe UI", Roboto, sans-serif;
 }
 
+* { box-sizing: border-box; }
+
 body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: var(--font-primary);
-  line-height: 1.6;
+  font-family: var(--font);
+  line-height: 1.7;
 }
 
 .page {
   min-height: 100vh;
   display: flex;
   justify-content: center;
-  align-items: center;
-  padding: 40px 16px;
+  padding: 60px 16px;
 }
 
 .container {
   width: 100%;
-  max-width: 900px;
-  background: linear-gradient(145deg, #1f1f1f, #222);
-  border-radius: 24px;
+  max-width: 1000px;
+  background: var(--card);
+  border-radius: var(--radius);
   padding: 50px 40px;
-  box-shadow: 0 10px 30px var(--shadow);
-  transition: transform 0.3s ease;
+  box-shadow: var(--shadow);
+  animation: fadeIn 0.4s ease;
 }
 
-.container:hover {
-  transform: translateY(-5px);
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-/* === HEADER === */
 h1 {
   margin: 0;
-  font-size: 36px;
-  font-weight: 700;
   text-align: center;
-  letter-spacing: 1px;
+  font-size: 36px;
   color: var(--accent);
-  text-shadow: 1px 1px 2px var(--shadow);
 }
 
-/* === SECTIONS === */
 .section {
   margin-top: 50px;
 }
 
 .section-title {
   text-align: center;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 14px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--accent);
@@ -84,20 +84,16 @@ h1 {
   opacity: 0.6;
 }
 
-/* === CATEGORY === */
 .category {
   text-align: center;
-  font-size: 16px;
   color: var(--muted);
-  font-weight: 500;
 }
 
-/* === TOOLS === */
 .tools {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 28px;
+  gap: 30px;
 }
 
 .tool {
@@ -106,22 +102,17 @@ h1 {
   align-items: center;
   font-size: 14px;
   color: var(--muted);
+  transition: transform 0.3s;
 }
 
+.tool:hover { transform: translateY(-4px); }
+
 .tool .iconify {
-  font-size: 42px;
+  font-size: 40px;
   color: var(--accent);
   margin-bottom: 8px;
-  transition: transform 0.3s ease, color 0.3s ease;
 }
 
-.tool:hover .iconify {
-  transform: scale(1.3) rotate(15deg);
-  color: #ffd84d;
-  cursor:pointer;
-}
-
-/* === MEDIA === */
 .media {
   display: flex;
   justify-content: center;
@@ -130,66 +121,59 @@ h1 {
 .media video,
 .media img {
   width: 100%;
-  max-width: 720px;
-  aspect-ratio: 16 / 9;
-  border-radius: 20px;
-  object-fit: cover;
-  box-shadow: 0 6px 20px var(--shadow);
-  transition: transform 0.3s ease;
+  max-width: 750px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
 }
 
-.media img:hover,
-.media video:hover {
-  transform: scale(1.02);
+.description {
+  max-width: 800px;
+  margin: auto;
 }
 
-/* === DESCRIPTION === */
-.description {
-  max-width: 760px;
-  margin: 0 auto;
-  color: var(--text);
-  font-size: 16px;
-  line-height: 1.8;
-  text-align: left;
-  word-wrap: break-word;
+.description h1,
+.description h2,
+.description h3 {
+  color: var(--accent);
 }
 
-/* === MOBILE === */
-@media (max-width: 768px) {
-  .container {
-    padding: 30px 20px;
-    border-radius: 16px;
-  }
+.description pre {
+  background: #111;
+  padding: 15px;
+  border-radius: 10px;
+  overflow-x: auto;
+}
 
-  h1 {
-    font-size: 28px;
-  }
+.loading {
+  text-align: center;
+  color: var(--muted);
+}
 
-  .description {
-    max-width: 100%;
-    font-size: 15px;
-  }
+.error {
+  text-align: center;
+  color: var(--error);
+}
+
+@media (max-width: 768px) {
+  .container { padding: 30px 20px; }
+  h1 { font-size: 28px; }
 }
 </style>
 </head>
-
 <body>
 
 <div class="page">
   <div class="container">
 
-    <!-- TITLE -->
     <h1 id="title"></h1>
 
-    <!-- CATEGORY -->
     <div class="section">
-      <div class="section-title">Category Type</div>
+      <div class="section-title">Category</div>
       <div class="category" id="category"></div>
     </div>
 
     <div class="divider"></div>
 
-    <!-- TOOLS -->
     <div class="section">
       <div class="section-title">Tools Used</div>
       <div class="tools" id="tools"></div>
@@ -197,86 +181,136 @@ h1 {
 
     <div class="divider"></div>
 
-    <!-- MEDIA -->
     <div class="section">
-      <div class="section-title">Project Preview</div>
+      <div class="section-title">Preview</div>
       <div class="media" id="media"></div>
     </div>
 
     <div class="divider"></div>
 
-    <!-- DESCRIPTION -->
     <div class="section">
-      <div class="section-title">Project Description</div>
-      <div class="description" id="description"></div>
+      <div class="section-title">Description</div>
+      <div id="description" class="description loading">
+        Loading README...
+      </div>
     </div>
 
   </div>
 </div>
 
 <script>
-const params = new URLSearchParams(window.location.search);
-const jsonPath = params.get("data");
-
-if (!jsonPath) {
-  document.body.innerHTML = "<p style='color:red'>No project data provided.</p>";
-  throw new Error("Missing data query");
-}
-
-fetch(jsonPath)
-  .then(res => res.json())
-  .then(project => renderProject(project));
-
 const toolIcons = {
   python: "logos:python",
-  fastapi: "logos:fastapi-icon",
   tensorflow: "logos:tensorflow",
-  pytorch: "logos:pytorch-icon",
   opencv: "logos:opencv",
-  wifi: "mdi:wifi",
-  powerbi: "logos:microsoft-power-bi",
-  n8n: "simple-icons:n8n",
-  docker: "logos:docker-icon",
-  javascript: "logos:javascript",
+  fastapi: "logos:fastapi-icon",
+  nextjs: "logos:nextjs-icon",
   react: "logos:react",
-  linux: "logos:linux-tux",
+  javascript: "logos:javascript",
+  docker: "logos:docker-icon",
+  linux: "logos:linux-tux"
 };
 
-function renderProject(p) {
-  document.getElementById("title").textContent = p.name;
-  document.getElementById("category").textContent = p.category;
+document.addEventListener("DOMContentLoaded", init);
+
+async function init() {
+  const params = new URLSearchParams(window.location.search);
+  const dataFile = params.get("data"); // e.g., "data/Pro1.json"
+
+  if (!dataFile) return showError("No project file provided.");
+
+  let project;
+  try {
+    const res = await fetch(dataFile);
+    if (!res.ok) throw new Error();
+    project = await res.json();
+  } catch {
+    return showError("Failed to load project JSON.");
+  }
+
+  renderBasicInfo(project);
+  renderMedia(project);
+  renderTools(project.tools);
 
-  // Use marked.js to render Markdown
-  document.getElementById("description").innerHTML = marked.parse(p.description);
+  if (!project.description) return showError("README file path missing.");
 
-  renderMedia(p);
-  renderTools(p.tools);
+  const descPath = project.description.trim();
+  if (!descPath.endsWith(".md") && !descPath.endsWith(".readme")) {
+    return showError("Description must be a .md or .readme file.");
+  }
+
+  await loadReadme(descPath);
+}
+
+function renderBasicInfo(project) {
+  document.getElementById("title").textContent =
+    project.name || "Untitled Project";
+  document.getElementById("category").textContent =
+    project.category || "N/A";
 }
 
-function renderMedia(p) {
+function renderMedia(project) {
   const media = document.getElementById("media");
-  media.innerHTML = p.displayType === "video"
-    ? `<video src="${p.filePath}" controls></video>`
-    : `<img src="${p.filePath}" alt="${p.name}">`;
+  media.innerHTML = "";
+
+  if (!project.filePath) return;
+
+  if (project.displayType === "video") {
+    const video = document.createElement("video");
+    video.src = project.filePath;
+    video.controls = true;
+    media.appendChild(video);
+  } else {
+    const img = document.createElement("img");
+    img.src = project.filePath;
+    img.alt = project.name || "Project preview";
+    media.appendChild(img);
+  }
+}
+
+function renderTools(toolsText = "") {
+  const container = document.getElementById("tools");
+  container.innerHTML = "";
+
+  toolsText
+    .split(/[, ]+/)
+    .filter(Boolean)
+    .forEach(tool => {
+      const key = tool.toLowerCase();
+      const icon = toolIcons[key] || "mdi:tools";
+
+      const el = document.createElement("div");
+      el.className = "tool";
+      el.innerHTML = `
+        <span class="iconify" data-icon="${icon}"></span>
+        <span>${tool}</span>
+      `;
+      container.appendChild(el);
+    });
+}
+
+async function loadReadme(path) {
+  const description = document.getElementById("description");
+
+  try {
+    const response = await fetch(path);
+    if (!response.ok) throw new Error();
+
+    const markdown = await response.text();
+    description.classList.remove("loading");
+    description.innerHTML = marked.parse(markdown);
+
+  } catch {
+    showError("Failed to load README file.");
+  }
 }
 
-function renderTools(toolsText) {
-  const toolsContainer = document.getElementById("tools");
-  const tools = toolsText.split(",").map(t => t.trim().toLowerCase());
-
-  tools.forEach(tool => {
-    const icon = toolIcons[tool] || "mdi:tools";
-
-    const el = document.createElement("div");
-    el.className = "tool";
-    el.innerHTML = `
-      <span class="iconify" data-icon="${icon}"></span>
-      <span>${tool}</span>
-    `;
-    toolsContainer.appendChild(el);
-  });
+function showError(message) {
+  const description = document.getElementById("description");
+  description.classList.remove("loading");
+  description.innerHTML = `<div class="error">${message}</div>`;
 }
 </script>
 
 </body>
-</html>
+</html>

ProjectViewr/data/Pro1.json

@@ -4,5 +4,5 @@
      "tools": "Python, TensorFlow, OpenCV",
      "displayType": "video",
      "filePath": "../assets/Videos/indoor.mp4",
-     "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
+     "description": "./data/ReadMeFiles/pro1.readme "
  }

ProjectViewr/data/Pro2.json

@@ -4,5 +4,5 @@
      "tools": "Python, TensorFlow, WiFi",
      "displayType": "video",
      "filePath": "../assets/Videos/FaceRec.3gp",
-     "description": "### Face Recognition Project using FaceNet\n\nDeveloped a **Face Recognition system** based on the FaceNet paper, introducing a novel loss function:\n\n```\n∑2_i^N [MAX(|f(x^A) - f(x^P)| - 0.2*α) + MAX(-|f(x^A) - f(x^N)| + α), 0]\n```\n\nAchieved **10% higher accuracy** than the original paper while training on only **6,000 images** compared to **1,000,000 images** in the original paper. The optimized model generalizes well even with a small dataset, demonstrating practical applicability for **real-world face recognition systems**."
+     "description": "./data/ReadMeFiles/pro2.readme"
  }

ProjectViewr/data/Pro3.json

@@ -4,5 +4,5 @@
      "tools": "Python, TensorFlow, n8n",
      "displayType": "video",
      "filePath": "../assets/Videos/nano.mp4",
-     "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
+     "description": "./data/ReadMeFiles/pro3.readme"
  }

ProjectViewr/data/Pro4.json

@@ -4,5 +4,5 @@
      "tools": "Python, FastAPI, TensorFlow NextJS",
      "displayType": "video",
      "filePath": "../assets/Videos/React.mp4",
-     "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
+     "description": "./data/ReadMeFiles/pro4.readme"
  }

assets/css/style.css

@@ -1,1880 +1,1880 @@
-/*-----------------------------------*\
-  #style.css
-\*-----------------------------------*/
-
-
-/**
- * copyright 2022 @codewithsadee
- */
-
-
-/*-----------------------------------*\
-  #CUSTOM PROPERTY
-\*-----------------------------------*/
-
-:root {
-    /**
-   * colors
-   */
-    /* gradient */
-    --bg-gradient-onyx: linear-gradient( to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
-    --bg-gradient-jet: linear-gradient( to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
-    --bg-gradient-yellow-1: linear-gradient( to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
-    --bg-gradient-yellow-2: linear-gradient( 135deg, hsla(45, 100%, 71%, 0.251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
-    --border-gradient-onyx: linear-gradient( to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
-    --text-gradient-yellow: linear-gradient( to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
-    /* solid */
-    --jet: hsl(0, 0%, 22%);
-    --onyx: hsl(240, 1%, 17%);
-    --eerie-black-1: hsl(240, 2%, 13%);
-    --eerie-black-2: hsl(240, 2%, 12%);
-    --smoky-black: hsl(0, 0%, 7%);
-    --white-1: hsl(0, 0%, 100%);
-    --white-2: hsl(0, 0%, 98%);
-    --orange-yellow-crayola: hsl(45, 100%, 72%);
-    --vegas-gold: hsl(45, 54%, 58%);
-    --light-gray: hsl(0, 0%, 84%);
-    --light-gray-70: hsla(0, 0%, 84%, 0.7);
-    --bittersweet-shimmer: hsl(0, 43%, 51%);
-    /**
-   * typography
-   */
-    /* font-family */
-    --ff-poppins: 'Poppins', sans-serif;
-    /* font-size */
-    --fs-1: 24px;
-    --fs-2: 18px;
-    --fs-3: 17px;
-    --fs-4: 16px;
-    --fs-5: 15px;
-    --fs-6: 14px;
-    --fs-7: 13px;
-    --fs-8: 11px;
-    /* font-weight */
-    --fw-300: 300;
-    --fw-400: 400;
-    --fw-500: 500;
-    --fw-600: 600;
-    /**
-   * shadow
-   */
-    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
-    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
-    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
-    --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
-    --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
-    /**
-   * transition
-   */
-    --transition-1: 0.25s ease;
-    --transition-2: 0.5s ease-in-out;
-}
-
-
-/*-----------------------------------*\
-  #RESET
-\*-----------------------------------*/
-
-*,
-*::before,
-*::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-a {
-    text-decoration: none;
-}
-
-li {
-    list-style: none;
-}
-
-img,
-ion-icon,
-a,
-button,
-time,
-span {
-    display: block;
-}
-
-button {
-    font: inherit;
-    background: none;
-    border: none;
-    text-align: left;
-    cursor: pointer;
-}
-
-input,
-textarea {
-    display: block;
-    width: 100%;
-    background: none;
-    font: inherit;
-}
-
-::selection {
-    background: var(--orange-yellow-crayola);
-    color: var(--smoky-black);
-}
-
-:focus {
-    outline-color: var(--orange-yellow-crayola);
-}
-
-html {
-    font-family: var(--ff-poppins);
-}
-
-body {
-    background: var(--smoky-black);
-}
-
-
-/*-----------------------------------*\
-  #REUSED STYLE
-\*-----------------------------------*/
-
-.sidebar,
-article {
-    background: var(--eerie-black-2);
-    border: 1px solid var(--jet);
-    border-radius: 20px;
-    padding: 15px;
-    box-shadow: var(--shadow-1);
-    z-index: 1;
-}
-
-.separator {
-    width: 100%;
-    height: 1px;
-    background: var(--jet);
-    margin: 16px 0;
-}
-
-.icon-box {
-    position: relative;
-    background: var(--border-gradient-onyx);
-    width: 30px;
-    height: 30px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 16px;
-    color: var(--orange-yellow-crayola);
-    box-shadow: var(--shadow-1);
-    z-index: 1;
-}
-
-.icon-box::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    background: var(--eerie-black-1);
-    border-radius: inherit;
-    z-index: -1;
-}
-
-.icon-box ion-icon {
-    --ionicon-stroke-width: 35px;
-}
-
-article {
-    display: none;
-}
-
-article.active {
-    display: block;
-    animation: fade 0.5s ease backwards;
-}
-
-@keyframes fade {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.h2,
-.h3,
-.h4,
-.h5 {
-    color: var(--white-2);
-    text-transform: capitalize;
-}
-
-.h2 {
-    font-size: var(--fs-1);
-}
-
-.h3 {
-    font-size: var(--fs-2);
-}
-
-.h4 {
-    font-size: var(--fs-4);
-}
-
-.h5 {
-    font-size: var(--fs-7);
-    font-weight: var(--fw-500);
-}
-
-.article-title {
-    position: relative;
-    padding-bottom: 7px;
-}
-
-.article-title::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 30px;
-    height: 3px;
-    background: var(--text-gradient-yellow);
-    border-radius: 3px;
-}
-
-.has-scrollbar::-webkit-scrollbar {
-    width: 5px;
-    /* for vertical scrollbar */
-    height: 5px;
-    /* for horizontal scrollbar */
-}
-
-.has-scrollbar::-webkit-scrollbar-track {
-    background: var(--onyx);
-    border-radius: 5px;
-}
-
-.has-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--orange-yellow-crayola);
-    border-radius: 5px;
-}
-
-.has-scrollbar::-webkit-scrollbar-button {
-    width: 20px;
-}
-
-.content-card {
-    position: relative;
-    background: var(--border-gradient-onyx);
-    padding: 15px;
-    padding-top: 45px;
-    border-radius: 14px;
-    box-shadow: var(--shadow-2);
-    cursor: pointer;
-    z-index: 1;
-}
-
-.content-card::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    background: var(--bg-gradient-jet);
-    border-radius: inherit;
-    z-index: -1;
-}
-
-
-/*-----------------------------------*\
-  #MAIN
-\*-----------------------------------*/
-
-main {
-    margin: 15px 12px;
-    margin-bottom: 75px;
-    min-width: 259px;
-}
-
-
-/*-----------------------------------*\
-  #SIDEBAR
-\*-----------------------------------*/
-
-.sidebar {
-    margin-bottom: 15px;
-    max-height: 112px;
-    overflow: hidden;
-    transition: var(--transition-2);
-}
-
-.sidebar.active {
-    max-height: 405px;
-}
-
-.sidebar-info {
-    position: relative;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 15px;
-}
-
-.avatar-box {
-    background: var(--bg-gradient-onyx);
-    border-radius: 20px;
-}
-
-.info-content .name {
-    color: var(--white-2);
-    font-size: var(--fs-3);
-    font-weight: var(--fw-500);
-    letter-spacing: -0.25px;
-    margin-bottom: 10px;
-}
-
-.info-content .title {
-    color: var(--white-1);
-    background: var(--onyx);
-    font-size: var(--fs-8);
-    font-weight: var(--fw-300);
-    width: max-content;
-    padding: 3px 12px;
-    border-radius: 8px;
-}
-
-.info_more-btn {
-    position: absolute;
-    top: -15px;
-    right: -15px;
-    border-radius: 0 15px;
-    font-size: 13px;
-    color: var(--orange-yellow-crayola);
-    background: var(--border-gradient-onyx);
-    padding: 10px;
-    box-shadow: var(--shadow-2);
-    transition: var(--transition-1);
-    z-index: 1;
-}
-
-.info_more-btn::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    border-radius: inherit;
-    background: var(--bg-gradient-jet);
-    transition: var(--transition-1);
-    z-index: -1;
-}
-
-.info_more-btn:hover,
-.info_more-btn:focus {
-    background: var(--bg-gradient-yellow-1);
-}
-
-.info_more-btn:hover::before,
-.info_more-btn:focus::before {
-    background: var(--bg-gradient-yellow-2);
-}
-
-.info_more-btn span {
-    display: none;
-}
-
-.sidebar-info_more {
-    opacity: 0;
-    visibility: hidden;
-    transition: var(--transition-2);
-}
-
-.sidebar.active .sidebar-info_more {
-    opacity: 1;
-    visibility: visible;
-}
-
-.contacts-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 16px;
-}
-
-.contact-item {
-    min-width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-
-.contact-info {
-    max-width: calc(100% - 46px);
-    width: calc(100% - 46px);
-}
-
-.contact-title {
-    color: var(--light-gray-70);
-    font-size: var(--fs-8);
-    text-transform: uppercase;
-    margin-bottom: 2px;
-}
-
-.contact-info :is(.contact-link, time, address) {
-    color: var(--white-2);
-    font-size: var(--fs-7);
-}
-
-.contact-info address {
-    font-style: normal;
-}
-
-.social-list {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 15px;
-    padding-bottom: 4px;
-    padding-left: 7px;
-}
-
-.social-item .social-link {
-    color: var(--light-gray-70);
-    font-size: 18px;
-}
-
-.social-item .social-link:hover {
-    color: var(--light-gray);
-}
-
-
-/*-----------------------------------*\
-  #NAVBAR
-\*-----------------------------------*/
-
-.navbar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: hsla(240, 1%, 17%, 0.75);
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--jet);
-    border-radius: 12px 12px 0 0;
-    box-shadow: var(--shadow-2);
-    z-index: 5;
-}
-
-.navbar-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    padding: 0 10px;
-}
-
-.navbar-link {
-    color: var(--light-gray);
-    font-size: var(--fs-8);
-    padding: 20px 7px;
-    transition: color var(--transition-1);
-}
-
-.navbar-link:hover,
-.navbar-link:focus {
-    color: var(--light-gray-70);
-}
-
-.navbar-link.active {
-    color: var(--orange-yellow-crayola);
-}
-
-
-/*-----------------------------------*\
-  #ABOUT
-\*-----------------------------------*/
-
-.about .article-title {
-    margin-bottom: 15px;
-}
-
-.about-text {
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-    line-height: 1.6;
-}
-
-.about-text p {
-    margin-bottom: 15px;
-}
-
-
-/**
- * #service 
- */
-
-.service {
-    margin-bottom: 35px;
-}
-
-.service-title {
-    margin-bottom: 20px;
-}
-
-.service-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 20px;
-}
-
-.service-item {
-    position: relative;
-    background: var(--border-gradient-onyx);
-    padding: 20px;
-    border-radius: 14px;
-    box-shadow: var(--shadow-2);
-    z-index: 1;
-}
-
-.service-item::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    background: var(--bg-gradient-jet);
-    border-radius: inherit;
-    z-index: -1;
-}
-
-.service-icon-box {
-    margin-bottom: 10px;
-}
-
-.service-icon-box img {
-    margin: auto;
-}
-
-.service-content-box {
-    text-align: center;
-}
-
-.service-item-title {
-    margin-bottom: 7px;
-}
-
-.service-item-text {
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-3);
-    line-height: 1.6;
-}
-
-
-/**
- * #testimonials 
- */
-
-.testimonials {
-    margin-bottom: 30px;
-}
-
-.testimonials-title {
-    margin-bottom: 20px;
-}
-
-.testimonials-list {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 15px;
-    margin: 0 -15px;
-    padding: 25px 15px;
-    padding-bottom: 35px;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: inline mandatory;
-}
-
-.testimonials-item {
-    min-width: 100%;
-    scroll-snap-align: center;
-}
-
-.testimonials-avatar-box {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(15px, -25px);
-    background: var(--bg-gradient-onyx);
-    border-radius: 14px;
-    box-shadow: var(--shadow-1);
-}
-
-.testimonials-item-title {
-    margin-bottom: 7px;
-}
-
-.testimonials-text {
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-    line-height: 1.6;
-    display: -webkit-box;
-    line-clamp: 4;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-
-/**
- * #testimonials-modal
- */
-
-.modal-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    z-index: 20;
-    pointer-events: none;
-    visibility: hidden;
-}
-
-.modal-container::-webkit-scrollbar {
-    display: none;
-}
-
-.modal-container.active {
-    pointer-events: all;
-    visibility: visible;
-}
-
-.overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background: hsl(0, 0%, 5%);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 1;
-    transition: var(--transition-1);
-}
-
-.overlay.active {
-    opacity: 0.8;
-    visibility: visible;
-    pointer-events: all;
-}
-
-.testimonials-modal {
-    background: var(--eerie-black-2);
-    position: relative;
-    padding: 15px;
-    margin: 15px 12px;
-    border: 1px solid var(--jet);
-    border-radius: 14px;
-    box-shadow: var(--shadow-5);
-    transform: scale(1.2);
-    opacity: 0;
-    transition: var(--transition-1);
-    z-index: 2;
-}
-
-.modal-container.active .testimonials-modal {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.modal-close-btn {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    background: var(--onyx);
-    border-radius: 8px;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--white-2);
-    font-size: 18px;
-    opacity: 0.7;
-}
-
-.modal-close-btn:hover,
-.modal-close-btn:focus {
-    opacity: 1;
-}
-
-.modal-close-btn ion-icon {
-    --ionicon-stroke-width: 50px;
-}
-
-.modal-avatar-box {
-    background: var(--bg-gradient-onyx);
-    width: max-content;
-    border-radius: 14px;
-    margin-bottom: 15px;
-    box-shadow: var(--shadow-2);
-}
-
-.modal-img-wrapper>img {
-    display: none;
-}
-
-.modal-title {
-    margin-bottom: 4px;
-}
-
-.modal-content time {
-    font-size: var(--fs-6);
-    color: var(--light-gray-70);
-    font-weight: var(--fw-300);
-    margin-bottom: 10px;
-}
-
-.modal-content p {
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-    line-height: 1.6;
-}
-
-
-/**
- * #clients 
- */
-
-.clients {
-    margin-bottom: 15px;
-}
-
-.clients-list {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 15px;
-    margin: 0 -15px;
-    padding: 25px;
-    padding-bottom: 25px;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: inline mandatory;
-    scroll-padding-inline: 25px;
-}
-
-.clients-item {
-    min-width: 50%;
-    scroll-snap-align: start;
-}
-
-.clients-item img {
-    width: 100%;
-    filter: grayscale(1);
-    transition: var(--transition-1);
-}
-
-.clients-item img:hover {
-    filter: grayscale(0);
-}
-
-
-/*-----------------------------------*\
-  #RESUME
-\*-----------------------------------*/
-
-.article-title {
-    margin-bottom: 30px;
-}
-
-
-/**
- * education and experience 
- */
-
-.timeline {
-    margin-bottom: 30px;
-}
-
-.timeline .title-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-bottom: 25px;
-}
-
-.timeline-list {
-    font-size: var(--fs-6);
-    margin-left: 45px;
-}
-
-.timeline-item {
-    position: relative;
-}
-
-.timeline-item:not(:last-child) {
-    margin-bottom: 20px;
-}
-
-.timeline-item-title {
-    font-size: var(--fs-6);
-    line-height: 1.3;
-    margin-bottom: 7px;
-}
-
-.timeline-list span {
-    color: var(--vegas-gold);
-    font-weight: var(--fw-400);
-    line-height: 1.6;
-}
-
-.timeline-item:not(:last-child)::before {
-    content: "";
-    position: absolute;
-    top: -25px;
-    left: -30px;
-    width: 1px;
-    height: calc(100% + 50px);
-    background: var(--jet);
-}
-
-.timeline-item::after {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: -33px;
-    height: 6px;
-    width: 6px;
-    background: var(--text-gradient-yellow);
-    border-radius: 50%;
-    box-shadow: 0 0 0 4px var(--jet);
-}
-
-.timeline-text {
-    color: var(--light-gray);
-    font-weight: var(--fw-300);
-    line-height: 1.6;
-}
-
-
-/**
- * skills 
- */
-
-.skills-title {
-    margin-bottom: 20px;
-}
-
-.skills-list {
-    padding: 20px;
-}
-
-.skills-item:not(:last-child) {
-    margin-bottom: 15px;
-}
-
-.skill .title-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin-bottom: 8px;
-}
-
-.skill .title-wrapper data {
-    color: var(--light-gray);
-    font-size: var(--fs-7);
-    font-weight: var(--fw-300);
-}
-
-.skill-progress-bg {
-    background: var(--jet);
-    width: 100%;
-    height: 8px;
-    border-radius: 10px;
-}
-
-.skill-progress-fill {
-    background: var(--text-gradient-yellow);
-    height: 100%;
-    border-radius: inherit;
-}
-
-
-/*-----------------------------------*\
-  #PORTFOLIO
-\*-----------------------------------*/
-
-.filter-list {
-    display: none;
-}
-
-.filter-select-box {
-    position: relative;
-    margin-bottom: 25px;
-}
-
-.filter-select {
-    background: var(--eerie-black-2);
-    color: var(--light-gray);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 12px 16px;
-    border: 1px solid var(--jet);
-    border-radius: 14px;
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-}
-
-.filter-select.active .select-icon {
-    transform: rotate(0.5turn);
-}
-
-.select-list {
-    background: var(--eerie-black-2);
-    position: absolute;
-    top: calc(100% + 6px);
-    width: 100%;
-    padding: 6px;
-    border: 1px solid var(--jet);
-    border-radius: 14px;
-    z-index: 2;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transition: 0.15s ease-in-out;
-}
-
-.filter-select.active+.select-list {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: all;
-}
-
-.select-item button {
-    background: var(--eerie-black-2);
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-    text-transform: capitalize;
-    width: 100%;
-    padding: 8px 10px;
-    border-radius: 8px;
-}
-
-.select-item button:hover {
-    --eerie-black-2: hsl(240, 2%, 20%);
-}
-
-.project-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 30px;
-    margin-bottom: 10px;
-}
-
-.project-item {
-    display: none;
-}
-
-.project-item.active {
-    display: block;
-    animation: scaleUp 0.25s ease forwards;
-}
-
-@keyframes scaleUp {
-    0% {
-        transform: scale(0.5);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.project-item>a {
-    width: 100%;
-}
-
-.project-img {
-    position: relative;
-    width: 100%;
-    height: 200px;
-    border-radius: 16px;
-    overflow: hidden;
-    margin-bottom: 15px;
-}
-
-.project-img::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    z-index: 1;
-    transition: var(--transition-1);
-}
-
-.project-item>a:hover .project-img::before {
-    background: hsla(0, 0%, 0%, 0.5);
-}
-
-.project-item-icon-box {
-    --scale: 0.8;
-    background: var(--jet);
-    color: var(--orange-yellow-crayola);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(var(--scale));
-    font-size: 20px;
-    padding: 18px;
-    border-radius: 12px;
-    opacity: 0;
-    z-index: 1;
-    transition: var(--transition-1);
-}
-
-.project-item>a:hover .project-item-icon-box {
-    --scale: 1;
-    opacity: 1;
-}
-
-.project-item-icon-box ion-icon {
-    --ionicon-stroke-width: 50px;
-}
-
-.project-img video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: var(--transition-1);
-}
-
-.project-img img {
-    width: 105%;
-    min-height: 200px;
-    transition: var(--transition-1);
-    margin: 9px;
-}
-
-.project-item>a:hover img {
-    transform: scale(1.1);
-}
-
-.project-title,
-.project-category {
-    margin-left: 10px;
-}
-
-.project-title {
-    color: var(--white-2);
-    font-size: var(--fs-5);
-    font-weight: var(--fw-400);
-    text-transform: capitalize;
-    line-height: 1.3;
-}
-
-.project-category {
-    color: var(--light-gray-70);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-}
-
-
-/*-----------------------------------*\
-  #BLOG
-\*-----------------------------------*/
-
-.blog-posts {
-    margin-bottom: 10px;
-}
-
-.blog-posts-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 20px;
-}
-
-.blog-post-item>a {
-    position: relative;
-    background: var(--border-gradient-onyx);
-    height: 100%;
-    box-shadow: var(--shadow-4);
-    border-radius: 16px;
-    z-index: 1;
-}
-
-.blog-post-item>a::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    border-radius: inherit;
-    background: var(--eerie-black-1);
-    z-index: -1;
-}
-
-.blog-banner-box {
-    width: 100%;
-    height: 200px;
-    border-radius: 12px;
-    overflow: hidden;
-}
-
-.blog-banner-box img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: var(--transition-1);
-}
-
-.blog-post-item>a:hover .blog-banner-box img {
-    transform: scale(1.1);
-}
-
-.blog-content {
-    padding: 15px;
-}
-
-.blog-meta {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 7px;
-    margin-bottom: 10px;
-}
-
-.blog-meta :is(.blog-category, time) {
-    color: var(--light-gray-70);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-}
-
-.blog-meta .dot {
-    background: var(--light-gray-70);
-    width: 4px;
-    height: 4px;
-    border-radius: 4px;
-}
-
-.blog-item-title {
-    margin-bottom: 10px;
-    line-height: 1.3;
-    transition: var(--transition-1);
-}
-
-.blog-post-item>a:hover .blog-item-title {
-    color: var(--orange-yellow-crayola);
-}
-
-.blog-text {
-    color: var(--light-gray);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-300);
-    line-height: 1.6;
-}
-
-
-/*-----------------------------------*\
-  #CONTACT
-\*-----------------------------------*/
-
-.mapbox {
-    position: relative;
-    height: 250px;
-    width: 100%;
-    border-radius: 16px;
-    margin-bottom: 30px;
-    border: 1px solid var(--jet);
-    overflow: hidden;
-}
-
-.mapbox figure {
-    height: 100%;
-}
-
-.mapbox iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    filter: grayscale(1) invert(1);
-}
-
-.contact-form {
-    margin-bottom: 10px;
-}
-
-.form-title {
-    margin-bottom: 20px;
-}
-
-.input-wrapper {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 25px;
-    margin-bottom: 25px;
-}
-
-.form-input {
-    color: var(--white-2);
-    font-size: var(--fs-6);
-    font-weight: var(--fw-400);
-    padding: 13px 20px;
-    border: 1px solid var(--jet);
-    border-radius: 14px;
-    outline: none;
-}
-
-.form-input::placeholder {
-    font-weight: var(--fw-500);
-}
-
-.form-input:focus {
-    border-color: var(--orange-yellow-crayola);
-}
-
-textarea.form-input {
-    min-height: 100px;
-    height: 120px;
-    max-height: 200px;
-    resize: vertical;
-    margin-bottom: 25px;
-}
-
-textarea.form-input::-webkit-resizer {
-    display: none;
-}
-
-.form-input:focus:invalid {
-    border-color: var(--bittersweet-shimmer);
-}
-
-.form-btn {
-    position: relative;
-    width: 100%;
-    background: var(--border-gradient-onyx);
-    color: var(--orange-yellow-crayola);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    padding: 13px 20px;
-    border-radius: 14px;
-    font-size: var(--fs-6);
-    text-transform: capitalize;
-    box-shadow: var(--shadow-3);
-    z-index: 1;
-    transition: var(--transition-1);
-}
-
-.form-btn::before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    background: var(--bg-gradient-jet);
-    border-radius: inherit;
-    z-index: -1;
-    transition: var(--transition-1);
-}
-
-.form-btn ion-icon {
-    font-size: 16px;
-}
-
-.form-btn:hover {
-    background: var(--bg-gradient-yellow-1);
-}
-
-.form-btn:hover::before {
-    background: var(--bg-gradient-yellow-2);
-}
-
-.form-btn:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-.form-btn:disabled:hover {
-    background: var(--border-gradient-onyx);
-}
-
-.form-btn:disabled:hover::before {
-    background: var(--bg-gradient-jet);
-}
-
-
-/*-----------------------------------*\
-  #RESPONSIVE
-\*-----------------------------------*/
-
-
-/**
- * responsive larger than 450px screen
- */
-
-@media (min-width: 450px) {
-    /**
-   * client
-   */
-    .clients-item {
-        min-width: calc(33.33% - 10px);
-    }
-    /**
-   * #PORTFOLIO, BLOG 
-   */
-    .project-img,
-    .blog-banner-box {
-        height: auto;
-    }
-}
-
-
-/**
- * responsive larger than 580px screen
- */
-
-@media (min-width: 580px) {
-    /**
-   * CUSTOM PROPERTY
-   */
-     :root {
-        /**
-     * typography
-     */
-        --fs-1: 32px;
-        --fs-2: 24px;
-        --fs-3: 26px;
-        --fs-4: 18px;
-        --fs-6: 15px;
-        --fs-7: 15px;
-        --fs-8: 12px;
-    }
-    /**
-   * #REUSED STYLE
-   */
-    .sidebar,
-    article {
-        width: 520px;
-        margin-inline: auto;
-        padding: 30px;
-    }
-    .article-title {
-        font-weight: var(--fw-600);
-        padding-bottom: 15px;
-    }
-    .article-title::after {
-        width: 40px;
-        height: 5px;
-    }
-    .icon-box {
-        width: 48px;
-        height: 48px;
-        border-radius: 12px;
-        font-size: 18px;
-    }
-    /**
-   * #MAIN
-   */
-    main {
-        margin-top: 60px;
-        margin-bottom: 100px;
-    }
-    /**
-   * #SIDEBAR
-   */
-    .sidebar {
-        max-height: 180px;
-        margin-bottom: 30px;
-    }
-    .sidebar.active {
-        max-height: 584px;
-    }
-    .sidebar-info {
-        gap: 25px;
-    }
-    .avatar-box {
-        border-radius: 30px;
-    }
-    .avatar-box img {
-        width: 120px;
-    }
-    .info-content .name {
-        margin-bottom: 15px;
-    }
-    .info-content .title {
-        padding: 5px 18px;
-    }
-    .info_more-btn {
-        top: -30px;
-        right: -30px;
-        padding: 10px 15px;
-    }
-    .info_more-btn span {
-        display: block;
-        font-size: var(--fs-8);
-    }
-    .info_more-btn ion-icon {
-        display: none;
-    }
-    .separator {
-        margin: 32px 0;
-    }
-    .contacts-list {
-        gap: 20px;
-    }
-    .contact-info {
-        max-width: calc(100% - 64px);
-        width: calc(100% - 64px);
-    }
-    /**
-   * #NAVBAR
-   */
-    .navbar {
-        border-radius: 20px 20px 0 0;
-    }
-    .navbar-list {
-        gap: 20px;
-    }
-    .navbar-link {
-        --fs-8: 14px;
-    }
-    /**
-   * #ABOUT
-   */
-    .about .article-title {
-        margin-bottom: 20px;
-    }
-    .about-text {
-        margin-bottom: 40px;
-    }
-    /* service */
-    .service-item {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        gap: 18px;
-        padding: 30px;
-    }
-    .service-icon-box {
-        margin-bottom: 0;
-        margin-top: 5px;
-    }
-    .service-content-box {
-        text-align: left;
-    }
-    /* testimonials */
-    .testimonials-title {
-        margin-bottom: 25px;
-    }
-    .testimonials-list {
-        gap: 30px;
-        margin: 0 -30px;
-        padding: 30px;
-        padding-bottom: 35px;
-    }
-    .content-card {
-        padding: 30px;
-        padding-top: 25px;
-    }
-    .testimonials-avatar-box {
-        transform: translate(30px, -30px);
-        border-radius: 20px;
-    }
-    .testimonials-avatar-box img {
-        width: 80px;
-    }
-    .testimonials-item-title {
-        margin-bottom: 10px;
-        margin-left: 95px;
-    }
-    .testimonials-text {
-        line-clamp: 2;
-        -webkit-line-clamp: 2;
-    }
-    /* testimonials modal */
-    .modal-container {
-        padding: 20px;
-    }
-    .testimonials-modal {
-        display: flex;
-        justify-content: flex-start;
-        align-items: stretch;
-        gap: 25px;
-        padding: 30px;
-        border-radius: 20px;
-    }
-    .modal-img-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .modal-avatar-box {
-        border-radius: 18px;
-        margin-bottom: 0;
-    }
-    .modal-avatar-box img {
-        width: 65px;
-    }
-    .modal-img-wrapper>img {
-        display: block;
-        flex-grow: 1;
-        width: 35px;
-    }
-    /* clients */
-    .clients-list {
-        gap: 50px;
-        margin: 0 -30px;
-        padding: 45px;
-        scroll-padding-inline: 45px;
-    }
-    .clients-item {
-        min-width: calc(33.33% - 35px);
-    }
-    /**
-   * #RESUME
-   */
-    .timeline-list {
-        margin-left: 65px;
-    }
-    .timeline-item:not(:last-child)::before {
-        left: -40px;
-    }
-    .timeline-item::after {
-        height: 8px;
-        width: 8px;
-        left: -43px;
-    }
-    .skills-item:not(:last-child) {
-        margin-bottom: 25px;
-    }
-    /**
-   * #PORTFOLIO, BLOG
-   */
-    .project-img,
-    .blog-banner-box {
-        border-radius: 16px;
-    }
-    .blog-posts-list {
-        gap: 30px;
-    }
-    .blog-content {
-        padding: 25px;
-    }
-    /**
-   * #CONTACT
-   */
-    .mapbox {
-        height: 380px;
-        border-radius: 18px;
-    }
-    .input-wrapper {
-        gap: 30px;
-        margin-bottom: 30px;
-    }
-    .form-input {
-        padding: 15px 20px;
-    }
-    textarea.form-input {
-        margin-bottom: 30px;
-    }
-    .form-btn {
-        --fs-6: 16px;
-        padding: 16px 20px;
-    }
-    .form-btn ion-icon {
-        font-size: 18px;
-    }
-}
-
-
-/**
- * responsive larger than 768px screen
- */
-
-@media (min-width: 768px) {
-    /**
-   * REUSED STYLE
-   */
-    .sidebar,
-    article {
-        width: 700px;
-    }
-    .has-scrollbar::-webkit-scrollbar-button {
-        width: 100px;
-    }
-    /**
-   * SIDEBAR
-   */
-    .contacts-list {
-        grid-template-columns: 1fr 1fr;
-        gap: 30px 15px;
-    }
-    /**
-   * NAVBAR
-   */
-    .navbar-link {
-        --fs-8: 15px;
-    }
-    /**
-   * ABOUT
-   */
-    /* testimonials modal */
-    .testimonials-modal {
-        gap: 35px;
-        max-width: 680px;
-    }
-    .modal-avatar-box img {
-        width: 80px;
-    }
-    /**
-   * PORTFOLIO
-   */
-    .article-title {
-        padding-bottom: 20px;
-    }
-    .filter-select-box {
-        display: none;
-    }
-    .filter-list {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        gap: 25px;
-        padding-left: 5px;
-        margin-bottom: 30px;
-    }
-    .filter-item button {
-        color: var(--light-gray);
-        font-size: var(--fs-5);
-        transition: var(--transition-1);
-    }
-    .filter-item button:hover {
-        color: var(--light-gray-70);
-    }
-    .filter-item button.active {
-        color: var(--orange-yellow-crayola);
-    }
-    /* portfolio and blog grid */
-    .project-list,
-    .blog-posts-list {
-        grid-template-columns: 1fr 1fr;
-    }
-    /**
-   * CONTACT
-   */
-    .input-wrapper {
-        grid-template-columns: 1fr 1fr;
-    }
-    .form-btn {
-        width: max-content;
-        margin-left: auto;
-    }
-}
-
-
-/**
- * responsive larger than 1024px screen
- */
-
-@media (min-width: 1024px) {
-    /**
-   * CUSTOM PROPERTY
-   */
-     :root {
-        /**
-    * shadow
-    */
-        --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
-        --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
-        --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
-    }
-    /**
-   * REUSED STYLE
-   */
-    .sidebar,
-    article {
-        width: 950px;
-        box-shadow: var(--shadow-5);
-    }
-    /**
-   * MAIN 
-   */
-    main {
-        margin-bottom: 60px;
-    }
-    .main-content {
-        position: relative;
-        width: max-content;
-        margin: auto;
-    }
-    /**
-   * NAVBAR
-   */
-    .navbar {
-        position: absolute;
-        bottom: auto;
-        top: 0;
-        left: auto;
-        right: 0;
-        width: max-content;
-        border-radius: 0 20px;
-        padding: 0 20px;
-        box-shadow: none;
-    }
-    .navbar-list {
-        gap: 30px;
-        padding: 0 20px;
-    }
-    .navbar-link {
-        font-weight: var(--fw-500);
-    }
-    /**
-   * ABOUT
-   */
-    /* service */
-    .service-list {
-        grid-template-columns: 1fr 1fr;
-        gap: 20px 25px;
-    }
-    /* testimonials */
-    .testimonials-item {
-        min-width: calc(50% - 15px);
-    }
-    /* clients */
-    .clients-item {
-        min-width: calc(25% - 38px);
-    }
-    /**
-   * PORTFOLIO
-   */
-    .project-list {
-        grid-template-columns: repeat(3, 1fr);
-    }
-    /**
-   * BLOG
-   */
-    .blog-banner-box {
-        height: 230px;
-    }
-}
-
-
-/**
- * responsive larger than 1250px screen
- */
-
-@media (min-width: 1250px) {
-    /**
-   * RESET
-   */
-    body::-webkit-scrollbar {
-        width: 20px;
-    }
-    body::-webkit-scrollbar-track {
-        background: var(--smoky-black);
-    }
-    body::-webkit-scrollbar-thumb {
-        border: 5px solid var(--smoky-black);
-        background: hsla(0, 0%, 100%, 0.1);
-        border-radius: 20px;
-        box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
-    }
-    body::-webkit-scrollbar-thumb:hover {
-        background: hsla(0, 0%, 100%, 0.15);
-    }
-    body::-webkit-scrollbar-button {
-        height: 60px;
-    }
-    /**
-   * REUSED STYLE
-   */
-    .sidebar,
-    article {
-        width: auto;
-    }
-    article {
-        min-height: 100%;
-    }
-    /**
-   * MAIN
-   */
-    main {
-        max-width: 1200px;
-        margin-inline: auto;
-        display: flex;
-        justify-content: center;
-        align-items: stretch;
-        gap: 25px;
-    }
-    .main-content {
-        min-width: 75%;
-        width: 75%;
-        margin: 0;
-    }
-    /**
-   * SIDEBAR
-   */
-    .sidebar {
-        position: sticky;
-        top: 60px;
-        max-height: max-content;
-        height: 100%;
-        margin-bottom: 0;
-        padding-top: 60px;
-        z-index: 1;
-    }
-    .sidebar-info {
-        flex-direction: column;
-    }
-    .avatar-box img {
-        width: 150px;
-    }
-    .info-content .name {
-        white-space: nowrap;
-        text-align: center;
-    }
-    .info-content .title {
-        margin: auto;
-    }
-    .info_more-btn {
-        display: none;
-    }
-    .sidebar-info_more {
-        opacity: 1;
-        visibility: visible;
-    }
-    .contacts-list {
-        grid-template-columns: 1fr;
-    }
-    .contact-info :is(.contact-link) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .contact-info :is(.contact-link, time, address) {
-        --fs-7: 14px;
-        font-weight: var(--fw-300);
-    }
-    .separator:last-of-type {
-        margin: 15px 0;
-        opacity: 0;
-    }
-    .social-list {
-        justify-content: center;
-    }
-    /**
-	 * RESUME
-	 */
-    .timeline-text {
-        max-width: 700px;
-    }
+/*-----------------------------------*\
+  #style.css
+\*-----------------------------------*/
+
+
+/**
+ * copyright 2022 @codewithsadee
+ */
+
+
+/*-----------------------------------*\
+  #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+    /**
+   * colors
+   */
+    /* gradient */
+    --bg-gradient-onyx: linear-gradient( to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
+    --bg-gradient-jet: linear-gradient( to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
+    --bg-gradient-yellow-1: linear-gradient( to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
+    --bg-gradient-yellow-2: linear-gradient( 135deg, hsla(45, 100%, 71%, 0.251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
+    --border-gradient-onyx: linear-gradient( to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
+    --text-gradient-yellow: linear-gradient( to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
+    /* solid */
+    --jet: hsl(0, 0%, 22%);
+    --onyx: hsl(240, 1%, 17%);
+    --eerie-black-1: hsl(240, 2%, 13%);
+    --eerie-black-2: hsl(240, 2%, 12%);
+    --smoky-black: hsl(0, 0%, 7%);
+    --white-1: hsl(0, 0%, 100%);
+    --white-2: hsl(0, 0%, 98%);
+    --orange-yellow-crayola: hsl(45, 100%, 72%);
+    --vegas-gold: hsl(45, 54%, 58%);
+    --light-gray: hsl(0, 0%, 84%);
+    --light-gray-70: hsla(0, 0%, 84%, 0.7);
+    --bittersweet-shimmer: hsl(0, 43%, 51%);
+    /**
+   * typography
+   */
+    /* font-family */
+    --ff-poppins: 'Poppins', sans-serif;
+    /* font-size */
+    --fs-1: 24px;
+    --fs-2: 18px;
+    --fs-3: 17px;
+    --fs-4: 16px;
+    --fs-5: 15px;
+    --fs-6: 14px;
+    --fs-7: 13px;
+    --fs-8: 11px;
+    /* font-weight */
+    --fw-300: 300;
+    --fw-400: 400;
+    --fw-500: 500;
+    --fw-600: 600;
+    /**
+   * shadow
+   */
+    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
+    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
+    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
+    --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
+    --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
+    /**
+   * transition
+   */
+    --transition-1: 0.25s ease;
+    --transition-2: 0.5s ease-in-out;
+}
+
+
+/*-----------------------------------*\
+  #RESET
+\*-----------------------------------*/
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+img,
+ion-icon,
+a,
+button,
+time,
+span {
+    display: block;
+}
+
+button {
+    font: inherit;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+}
+
+input,
+textarea {
+    display: block;
+    width: 100%;
+    background: none;
+    font: inherit;
+}
+
+::selection {
+    background: var(--orange-yellow-crayola);
+    color: var(--smoky-black);
+}
+
+:focus {
+    outline-color: var(--orange-yellow-crayola);
+}
+
+html {
+    font-family: var(--ff-poppins);
+}
+
+body {
+    background: var(--smoky-black);
+}
+
+
+/*-----------------------------------*\
+  #REUSED STYLE
+\*-----------------------------------*/
+
+.sidebar,
+article {
+    background: var(--eerie-black-2);
+    border: 1px solid var(--jet);
+    border-radius: 20px;
+    padding: 15px;
+    box-shadow: var(--shadow-1);
+    z-index: 1;
+}
+
+.separator {
+    width: 100%;
+    height: 1px;
+    background: var(--jet);
+    margin: 16px 0;
+}
+
+.icon-box {
+    position: relative;
+    background: var(--border-gradient-onyx);
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: var(--orange-yellow-crayola);
+    box-shadow: var(--shadow-1);
+    z-index: 1;
+}
+
+.icon-box::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    background: var(--eerie-black-1);
+    border-radius: inherit;
+    z-index: -1;
+}
+
+.icon-box ion-icon {
+    --ionicon-stroke-width: 35px;
+}
+
+article {
+    display: none;
+}
+
+article.active {
+    display: block;
+    animation: fade 0.5s ease backwards;
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.h2,
+.h3,
+.h4,
+.h5 {
+    color: var(--white-2);
+    text-transform: capitalize;
+}
+
+.h2 {
+    font-size: var(--fs-1);
+}
+
+.h3 {
+    font-size: var(--fs-2);
+}
+
+.h4 {
+    font-size: var(--fs-4);
+}
+
+.h5 {
+    font-size: var(--fs-7);
+    font-weight: var(--fw-500);
+}
+
+.article-title {
+    position: relative;
+    padding-bottom: 7px;
+}
+
+.article-title::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 30px;
+    height: 3px;
+    background: var(--text-gradient-yellow);
+    border-radius: 3px;
+}
+
+.has-scrollbar::-webkit-scrollbar {
+    width: 5px;
+    /* for vertical scrollbar */
+    height: 5px;
+    /* for horizontal scrollbar */
+}
+
+.has-scrollbar::-webkit-scrollbar-track {
+    background: var(--onyx);
+    border-radius: 5px;
+}
+
+.has-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--orange-yellow-crayola);
+    border-radius: 5px;
+}
+
+.has-scrollbar::-webkit-scrollbar-button {
+    width: 20px;
+}
+
+.content-card {
+    position: relative;
+    background: var(--border-gradient-onyx);
+    padding: 15px;
+    padding-top: 45px;
+    border-radius: 14px;
+    box-shadow: var(--shadow-2);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.content-card::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    background: var(--bg-gradient-jet);
+    border-radius: inherit;
+    z-index: -1;
+}
+
+
+/*-----------------------------------*\
+  #MAIN
+\*-----------------------------------*/
+
+main {
+    margin: 15px 12px;
+    margin-bottom: 75px;
+    min-width: 259px;
+}
+
+
+/*-----------------------------------*\
+  #SIDEBAR
+\*-----------------------------------*/
+
+.sidebar {
+    margin-bottom: 15px;
+    max-height: 112px;
+    overflow: hidden;
+    transition: var(--transition-2);
+}
+
+.sidebar.active {
+    max-height: 405px;
+}
+
+.sidebar-info {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 15px;
+}
+
+.avatar-box {
+    background: var(--bg-gradient-onyx);
+    border-radius: 20px;
+}
+
+.info-content .name {
+    color: var(--white-2);
+    font-size: var(--fs-3);
+    font-weight: var(--fw-500);
+    letter-spacing: -0.25px;
+    margin-bottom: 10px;
+}
+
+.info-content .title {
+    color: var(--white-1);
+    background: var(--onyx);
+    font-size: var(--fs-8);
+    font-weight: var(--fw-300);
+    width: max-content;
+    padding: 3px 12px;
+    border-radius: 8px;
+}
+
+.info_more-btn {
+    position: absolute;
+    top: -15px;
+    right: -15px;
+    border-radius: 0 15px;
+    font-size: 13px;
+    color: var(--orange-yellow-crayola);
+    background: var(--border-gradient-onyx);
+    padding: 10px;
+    box-shadow: var(--shadow-2);
+    transition: var(--transition-1);
+    z-index: 1;
+}
+
+.info_more-btn::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    border-radius: inherit;
+    background: var(--bg-gradient-jet);
+    transition: var(--transition-1);
+    z-index: -1;
+}
+
+.info_more-btn:hover,
+.info_more-btn:focus {
+    background: var(--bg-gradient-yellow-1);
+}
+
+.info_more-btn:hover::before,
+.info_more-btn:focus::before {
+    background: var(--bg-gradient-yellow-2);
+}
+
+.info_more-btn span {
+    display: none;
+}
+
+.sidebar-info_more {
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--transition-2);
+}
+
+.sidebar.active .sidebar-info_more {
+    opacity: 1;
+    visibility: visible;
+}
+
+.contacts-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+}
+
+.contact-item {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.contact-info {
+    max-width: calc(100% - 46px);
+    width: calc(100% - 46px);
+}
+
+.contact-title {
+    color: var(--light-gray-70);
+    font-size: var(--fs-8);
+    text-transform: uppercase;
+    margin-bottom: 2px;
+}
+
+.contact-info :is(.contact-link, time, address) {
+    color: var(--white-2);
+    font-size: var(--fs-7);
+}
+
+.contact-info address {
+    font-style: normal;
+}
+
+.social-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 15px;
+    padding-bottom: 4px;
+    padding-left: 7px;
+}
+
+.social-item .social-link {
+    color: var(--light-gray-70);
+    font-size: 18px;
+}
+
+.social-item .social-link:hover {
+    color: var(--light-gray);
+}
+
+
+/*-----------------------------------*\
+  #NAVBAR
+\*-----------------------------------*/
+
+.navbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: hsla(240, 1%, 17%, 0.75);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--jet);
+    border-radius: 12px 12px 0 0;
+    box-shadow: var(--shadow-2);
+    z-index: 5;
+}
+
+.navbar-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.navbar-link {
+    color: var(--light-gray);
+    font-size: var(--fs-8);
+    padding: 20px 7px;
+    transition: color var(--transition-1);
+}
+
+.navbar-link:hover,
+.navbar-link:focus {
+    color: var(--light-gray-70);
+}
+
+.navbar-link.active {
+    color: var(--orange-yellow-crayola);
+}
+
+
+/*-----------------------------------*\
+  #ABOUT
+\*-----------------------------------*/
+
+.about .article-title {
+    margin-bottom: 15px;
+}
+
+.about-text {
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+    line-height: 1.6;
+}
+
+.about-text p {
+    margin-bottom: 15px;
+}
+
+
+/**
+ * #service 
+ */
+
+.service {
+    margin-bottom: 35px;
+}
+
+.service-title {
+    margin-bottom: 20px;
+}
+
+.service-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+}
+
+.service-item {
+    position: relative;
+    background: var(--border-gradient-onyx);
+    padding: 20px;
+    border-radius: 14px;
+    box-shadow: var(--shadow-2);
+    z-index: 1;
+}
+
+.service-item::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    background: var(--bg-gradient-jet);
+    border-radius: inherit;
+    z-index: -1;
+}
+
+.service-icon-box {
+    margin-bottom: 10px;
+}
+
+.service-icon-box img {
+    margin: auto;
+}
+
+.service-content-box {
+    text-align: center;
+}
+
+.service-item-title {
+    margin-bottom: 7px;
+}
+
+.service-item-text {
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-3);
+    line-height: 1.6;
+}
+
+
+/**
+ * #testimonials 
+ */
+
+.testimonials {
+    margin-bottom: 30px;
+}
+
+.testimonials-title {
+    margin-bottom: 20px;
+}
+
+.testimonials-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 15px;
+    margin: 0 -15px;
+    padding: 25px 15px;
+    padding-bottom: 35px;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline mandatory;
+}
+
+.testimonials-item {
+    min-width: 100%;
+    scroll-snap-align: center;
+}
+
+.testimonials-avatar-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(15px, -25px);
+    background: var(--bg-gradient-onyx);
+    border-radius: 14px;
+    box-shadow: var(--shadow-1);
+}
+
+.testimonials-item-title {
+    margin-bottom: 7px;
+}
+
+.testimonials-text {
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+    line-height: 1.6;
+    display: -webkit-box;
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+
+/**
+ * #testimonials-modal
+ */
+
+.modal-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    z-index: 20;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.modal-container::-webkit-scrollbar {
+    display: none;
+}
+
+.modal-container.active {
+    pointer-events: all;
+    visibility: visible;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: hsl(0, 0%, 5%);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 1;
+    transition: var(--transition-1);
+}
+
+.overlay.active {
+    opacity: 0.8;
+    visibility: visible;
+    pointer-events: all;
+}
+
+.testimonials-modal {
+    background: var(--eerie-black-2);
+    position: relative;
+    padding: 15px;
+    margin: 15px 12px;
+    border: 1px solid var(--jet);
+    border-radius: 14px;
+    box-shadow: var(--shadow-5);
+    transform: scale(1.2);
+    opacity: 0;
+    transition: var(--transition-1);
+    z-index: 2;
+}
+
+.modal-container.active .testimonials-modal {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.modal-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: var(--onyx);
+    border-radius: 8px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--white-2);
+    font-size: 18px;
+    opacity: 0.7;
+}
+
+.modal-close-btn:hover,
+.modal-close-btn:focus {
+    opacity: 1;
+}
+
+.modal-close-btn ion-icon {
+    --ionicon-stroke-width: 50px;
+}
+
+.modal-avatar-box {
+    background: var(--bg-gradient-onyx);
+    width: max-content;
+    border-radius: 14px;
+    margin-bottom: 15px;
+    box-shadow: var(--shadow-2);
+}
+
+.modal-img-wrapper>img {
+    display: none;
+}
+
+.modal-title {
+    margin-bottom: 4px;
+}
+
+.modal-content time {
+    font-size: var(--fs-6);
+    color: var(--light-gray-70);
+    font-weight: var(--fw-300);
+    margin-bottom: 10px;
+}
+
+.modal-content p {
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+    line-height: 1.6;
+}
+
+
+/**
+ * #clients 
+ */
+
+.clients {
+    margin-bottom: 15px;
+}
+
+.clients-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 15px;
+    margin: 0 -15px;
+    padding: 25px;
+    padding-bottom: 25px;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline mandatory;
+    scroll-padding-inline: 25px;
+}
+
+.clients-item {
+    min-width: 50%;
+    scroll-snap-align: start;
+}
+
+.clients-item img {
+    width: 100%;
+    filter: grayscale(1);
+    transition: var(--transition-1);
+}
+
+.clients-item img:hover {
+    filter: grayscale(0);
+}
+
+
+/*-----------------------------------*\
+  #RESUME
+\*-----------------------------------*/
+
+.article-title {
+    margin-bottom: 30px;
+}
+
+
+/**
+ * education and experience 
+ */
+
+.timeline {
+    margin-bottom: 30px;
+}
+
+.timeline .title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.timeline-list {
+    font-size: var(--fs-6);
+    margin-left: 45px;
+}
+
+.timeline-item {
+    position: relative;
+}
+
+.timeline-item:not(:last-child) {
+    margin-bottom: 20px;
+}
+
+.timeline-item-title {
+    font-size: var(--fs-6);
+    line-height: 1.3;
+    margin-bottom: 7px;
+}
+
+.timeline-list span {
+    color: var(--vegas-gold);
+    font-weight: var(--fw-400);
+    line-height: 1.6;
+}
+
+.timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: -25px;
+    left: -30px;
+    width: 1px;
+    height: calc(100% + 50px);
+    background: var(--jet);
+}
+
+.timeline-item::after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: -33px;
+    height: 6px;
+    width: 6px;
+    background: var(--text-gradient-yellow);
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px var(--jet);
+}
+
+.timeline-text {
+    color: var(--light-gray);
+    font-weight: var(--fw-300);
+    line-height: 1.6;
+}
+
+
+/**
+ * skills 
+ */
+
+.skills-title {
+    margin-bottom: 20px;
+}
+
+.skills-list {
+    padding: 20px;
+}
+
+.skills-item:not(:last-child) {
+    margin-bottom: 15px;
+}
+
+.skill .title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin-bottom: 8px;
+}
+
+.skill .title-wrapper data {
+    color: var(--light-gray);
+    font-size: var(--fs-7);
+    font-weight: var(--fw-300);
+}
+
+.skill-progress-bg {
+    background: var(--jet);
+    width: 100%;
+    height: 8px;
+    border-radius: 10px;
+}
+
+.skill-progress-fill {
+    background: var(--text-gradient-yellow);
+    height: 100%;
+    border-radius: inherit;
+}
+
+
+/*-----------------------------------*\
+  #PORTFOLIO
+\*-----------------------------------*/
+
+.filter-list {
+    display: none;
+}
+
+.filter-select-box {
+    position: relative;
+    margin-bottom: 25px;
+}
+
+.filter-select {
+    background: var(--eerie-black-2);
+    color: var(--light-gray);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid var(--jet);
+    border-radius: 14px;
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+}
+
+.filter-select.active .select-icon {
+    transform: rotate(0.5turn);
+}
+
+.select-list {
+    background: var(--eerie-black-2);
+    position: absolute;
+    top: calc(100% + 6px);
+    width: 100%;
+    padding: 6px;
+    border: 1px solid var(--jet);
+    border-radius: 14px;
+    z-index: 2;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: 0.15s ease-in-out;
+}
+
+.filter-select.active+.select-list {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+}
+
+.select-item button {
+    background: var(--eerie-black-2);
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+    text-transform: capitalize;
+    width: 100%;
+    padding: 8px 10px;
+    border-radius: 8px;
+}
+
+.select-item button:hover {
+    --eerie-black-2: hsl(240, 2%, 20%);
+}
+
+.project-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 30px;
+    margin-bottom: 10px;
+}
+
+.project-item {
+    display: none;
+}
+
+.project-item.active {
+    display: block;
+    animation: scaleUp 0.25s ease forwards;
+}
+
+@keyframes scaleUp {
+    0% {
+        transform: scale(0.5);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.project-item>a {
+    width: 100%;
+}
+
+.project-img {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    border-radius: 16px;
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+
+.project-img::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: 1;
+    transition: var(--transition-1);
+}
+
+.project-item>a:hover .project-img::before {
+    background: hsla(0, 0%, 0%, 0.5);
+}
+
+.project-item-icon-box {
+    --scale: 0.8;
+    background: var(--jet);
+    color: var(--orange-yellow-crayola);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(var(--scale));
+    font-size: 20px;
+    padding: 18px;
+    border-radius: 12px;
+    opacity: 0;
+    z-index: 1;
+    transition: var(--transition-1);
+}
+
+.project-item>a:hover .project-item-icon-box {
+    --scale: 1;
+    opacity: 1;
+}
+
+.project-item-icon-box ion-icon {
+    --ionicon-stroke-width: 50px;
+}
+
+.project-img video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: var(--transition-1);
+}
+
+.project-img img {
+    width: 105%;
+    min-height: 200px;
+    transition: var(--transition-1);
+    margin: 9px;
+}
+
+.project-item>a:hover img {
+    transform: scale(1.1);
+}
+
+.project-title,
+.project-category {
+    margin-left: 10px;
+}
+
+.project-title {
+    color: var(--white-2);
+    font-size: var(--fs-5);
+    font-weight: var(--fw-400);
+    text-transform: capitalize;
+    line-height: 1.3;
+}
+
+.project-category {
+    color: var(--light-gray-70);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+}
+
+
+/*-----------------------------------*\
+  #BLOG
+\*-----------------------------------*/
+
+.blog-posts {
+    margin-bottom: 10px;
+}
+
+.blog-posts-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+}
+
+.blog-post-item>a {
+    position: relative;
+    background: var(--border-gradient-onyx);
+    height: 100%;
+    box-shadow: var(--shadow-4);
+    border-radius: 16px;
+    z-index: 1;
+}
+
+.blog-post-item>a::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    border-radius: inherit;
+    background: var(--eerie-black-1);
+    z-index: -1;
+}
+
+.blog-banner-box {
+    width: 100%;
+    height: 200px;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.blog-banner-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: var(--transition-1);
+}
+
+.blog-post-item>a:hover .blog-banner-box img {
+    transform: scale(1.1);
+}
+
+.blog-content {
+    padding: 15px;
+}
+
+.blog-meta {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 10px;
+}
+
+.blog-meta :is(.blog-category, time) {
+    color: var(--light-gray-70);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+}
+
+.blog-meta .dot {
+    background: var(--light-gray-70);
+    width: 4px;
+    height: 4px;
+    border-radius: 4px;
+}
+
+.blog-item-title {
+    margin-bottom: 10px;
+    line-height: 1.3;
+    transition: var(--transition-1);
+}
+
+.blog-post-item>a:hover .blog-item-title {
+    color: var(--orange-yellow-crayola);
+}
+
+.blog-text {
+    color: var(--light-gray);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-300);
+    line-height: 1.6;
+}
+
+
+/*-----------------------------------*\
+  #CONTACT
+\*-----------------------------------*/
+
+.mapbox {
+    position: relative;
+    height: 250px;
+    width: 100%;
+    border-radius: 16px;
+    margin-bottom: 30px;
+    border: 1px solid var(--jet);
+    overflow: hidden;
+}
+
+.mapbox figure {
+    height: 100%;
+}
+
+.mapbox iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    filter: grayscale(1) invert(1);
+}
+
+.contact-form {
+    margin-bottom: 10px;
+}
+
+.form-title {
+    margin-bottom: 20px;
+}
+
+.input-wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 25px;
+    margin-bottom: 25px;
+}
+
+.form-input {
+    color: var(--white-2);
+    font-size: var(--fs-6);
+    font-weight: var(--fw-400);
+    padding: 13px 20px;
+    border: 1px solid var(--jet);
+    border-radius: 14px;
+    outline: none;
+}
+
+.form-input::placeholder {
+    font-weight: var(--fw-500);
+}
+
+.form-input:focus {
+    border-color: var(--orange-yellow-crayola);
+}
+
+textarea.form-input {
+    min-height: 100px;
+    height: 120px;
+    max-height: 200px;
+    resize: vertical;
+    margin-bottom: 25px;
+}
+
+textarea.form-input::-webkit-resizer {
+    display: none;
+}
+
+.form-input:focus:invalid {
+    border-color: var(--bittersweet-shimmer);
+}
+
+.form-btn {
+    position: relative;
+    width: 100%;
+    background: var(--border-gradient-onyx);
+    color: var(--orange-yellow-crayola);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 13px 20px;
+    border-radius: 14px;
+    font-size: var(--fs-6);
+    text-transform: capitalize;
+    box-shadow: var(--shadow-3);
+    z-index: 1;
+    transition: var(--transition-1);
+}
+
+.form-btn::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    background: var(--bg-gradient-jet);
+    border-radius: inherit;
+    z-index: -1;
+    transition: var(--transition-1);
+}
+
+.form-btn ion-icon {
+    font-size: 16px;
+}
+
+.form-btn:hover {
+    background: var(--bg-gradient-yellow-1);
+}
+
+.form-btn:hover::before {
+    background: var(--bg-gradient-yellow-2);
+}
+
+.form-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.form-btn:disabled:hover {
+    background: var(--border-gradient-onyx);
+}
+
+.form-btn:disabled:hover::before {
+    background: var(--bg-gradient-jet);
+}
+
+
+/*-----------------------------------*\
+  #RESPONSIVE
+\*-----------------------------------*/
+
+
+/**
+ * responsive larger than 450px screen
+ */
+
+@media (min-width: 450px) {
+    /**
+   * client
+   */
+    .clients-item {
+        min-width: calc(33.33% - 10px);
+    }
+    /**
+   * #PORTFOLIO, BLOG 
+   */
+    .project-img,
+    .blog-banner-box {
+        height: auto;
+    }
+}
+
+
+/**
+ * responsive larger than 580px screen
+ */
+
+@media (min-width: 580px) {
+    /**
+   * CUSTOM PROPERTY
+   */
+     :root {
+        /**
+     * typography
+     */
+        --fs-1: 32px;
+        --fs-2: 24px;
+        --fs-3: 26px;
+        --fs-4: 18px;
+        --fs-6: 15px;
+        --fs-7: 15px;
+        --fs-8: 12px;
+    }
+    /**
+   * #REUSED STYLE
+   */
+    .sidebar,
+    article {
+        width: 520px;
+        margin-inline: auto;
+        padding: 30px;
+    }
+    .article-title {
+        font-weight: var(--fw-600);
+        padding-bottom: 15px;
+    }
+    .article-title::after {
+        width: 40px;
+        height: 5px;
+    }
+    .icon-box {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        font-size: 18px;
+    }
+    /**
+   * #MAIN
+   */
+    main {
+        margin-top: 60px;
+        margin-bottom: 100px;
+    }
+    /**
+   * #SIDEBAR
+   */
+    .sidebar {
+        max-height: 180px;
+        margin-bottom: 30px;
+    }
+    .sidebar.active {
+        max-height: 584px;
+    }
+    .sidebar-info {
+        gap: 25px;
+    }
+    .avatar-box {
+        border-radius: 30px;
+    }
+    .avatar-box img {
+        width: 120px;
+    }
+    .info-content .name {
+        margin-bottom: 15px;
+    }
+    .info-content .title {
+        padding: 5px 18px;
+    }
+    .info_more-btn {
+        top: -30px;
+        right: -30px;
+        padding: 10px 15px;
+    }
+    .info_more-btn span {
+        display: block;
+        font-size: var(--fs-8);
+    }
+    .info_more-btn ion-icon {
+        display: none;
+    }
+    .separator {
+        margin: 32px 0;
+    }
+    .contacts-list {
+        gap: 20px;
+    }
+    .contact-info {
+        max-width: calc(100% - 64px);
+        width: calc(100% - 64px);
+    }
+    /**
+   * #NAVBAR
+   */
+    .navbar {
+        border-radius: 20px 20px 0 0;
+    }
+    .navbar-list {
+        gap: 20px;
+    }
+    .navbar-link {
+        --fs-8: 14px;
+    }
+    /**
+   * #ABOUT
+   */
+    .about .article-title {
+        margin-bottom: 20px;
+    }
+    .about-text {
+        margin-bottom: 40px;
+    }
+    /* service */
+    .service-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 18px;
+        padding: 30px;
+    }
+    .service-icon-box {
+        margin-bottom: 0;
+        margin-top: 5px;
+    }
+    .service-content-box {
+        text-align: left;
+    }
+    /* testimonials */
+    .testimonials-title {
+        margin-bottom: 25px;
+    }
+    .testimonials-list {
+        gap: 30px;
+        margin: 0 -30px;
+        padding: 30px;
+        padding-bottom: 35px;
+    }
+    .content-card {
+        padding: 30px;
+        padding-top: 25px;
+    }
+    .testimonials-avatar-box {
+        transform: translate(30px, -30px);
+        border-radius: 20px;
+    }
+    .testimonials-avatar-box img {
+        width: 80px;
+    }
+    .testimonials-item-title {
+        margin-bottom: 10px;
+        margin-left: 95px;
+    }
+    .testimonials-text {
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
+    }
+    /* testimonials modal */
+    .modal-container {
+        padding: 20px;
+    }
+    .testimonials-modal {
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        gap: 25px;
+        padding: 30px;
+        border-radius: 20px;
+    }
+    .modal-img-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .modal-avatar-box {
+        border-radius: 18px;
+        margin-bottom: 0;
+    }
+    .modal-avatar-box img {
+        width: 65px;
+    }
+    .modal-img-wrapper>img {
+        display: block;
+        flex-grow: 1;
+        width: 35px;
+    }
+    /* clients */
+    .clients-list {
+        gap: 50px;
+        margin: 0 -30px;
+        padding: 45px;
+        scroll-padding-inline: 45px;
+    }
+    .clients-item {
+        min-width: calc(33.33% - 35px);
+    }
+    /**
+   * #RESUME
+   */
+    .timeline-list {
+        margin-left: 65px;
+    }
+    .timeline-item:not(:last-child)::before {
+        left: -40px;
+    }
+    .timeline-item::after {
+        height: 8px;
+        width: 8px;
+        left: -43px;
+    }
+    .skills-item:not(:last-child) {
+        margin-bottom: 25px;
+    }
+    /**
+   * #PORTFOLIO, BLOG
+   */
+    .project-img,
+    .blog-banner-box {
+        border-radius: 16px;
+    }
+    .blog-posts-list {
+        gap: 30px;
+    }
+    .blog-content {
+        padding: 25px;
+    }
+    /**
+   * #CONTACT
+   */
+    .mapbox {
+        height: 380px;
+        border-radius: 18px;
+    }
+    .input-wrapper {
+        gap: 30px;
+        margin-bottom: 30px;
+    }
+    .form-input {
+        padding: 15px 20px;
+    }
+    textarea.form-input {
+        margin-bottom: 30px;
+    }
+    .form-btn {
+        --fs-6: 16px;
+        padding: 16px 20px;
+    }
+    .form-btn ion-icon {
+        font-size: 18px;
+    }
+}
+
+
+/**
+ * responsive larger than 768px screen
+ */
+
+@media (min-width: 768px) {
+    /**
+   * REUSED STYLE
+   */
+    .sidebar,
+    article {
+        width: 700px;
+    }
+    .has-scrollbar::-webkit-scrollbar-button {
+        width: 100px;
+    }
+    /**
+   * SIDEBAR
+   */
+    .contacts-list {
+        grid-template-columns: 1fr 1fr;
+        gap: 30px 15px;
+    }
+    /**
+   * NAVBAR
+   */
+    .navbar-link {
+        --fs-8: 15px;
+    }
+    /**
+   * ABOUT
+   */
+    /* testimonials modal */
+    .testimonials-modal {
+        gap: 35px;
+        max-width: 680px;
+    }
+    .modal-avatar-box img {
+        width: 80px;
+    }
+    /**
+   * PORTFOLIO
+   */
+    .article-title {
+        padding-bottom: 20px;
+    }
+    .filter-select-box {
+        display: none;
+    }
+    .filter-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 25px;
+        padding-left: 5px;
+        margin-bottom: 30px;
+    }
+    .filter-item button {
+        color: var(--light-gray);
+        font-size: var(--fs-5);
+        transition: var(--transition-1);
+    }
+    .filter-item button:hover {
+        color: var(--light-gray-70);
+    }
+    .filter-item button.active {
+        color: var(--orange-yellow-crayola);
+    }
+    /* portfolio and blog grid */
+    .project-list,
+    .blog-posts-list {
+        grid-template-columns: 1fr 1fr;
+    }
+    /**
+   * CONTACT
+   */
+    .input-wrapper {
+        grid-template-columns: 1fr 1fr;
+    }
+    .form-btn {
+        width: max-content;
+        margin-left: auto;
+    }
+}
+
+
+/**
+ * responsive larger than 1024px screen
+ */
+
+@media (min-width: 1024px) {
+    /**
+   * CUSTOM PROPERTY
+   */
+     :root {
+        /**
+    * shadow
+    */
+        --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
+        --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
+        --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
+    }
+    /**
+   * REUSED STYLE
+   */
+    .sidebar,
+    article {
+        width: 950px;
+        box-shadow: var(--shadow-5);
+    }
+    /**
+   * MAIN 
+   */
+    main {
+        margin-bottom: 60px;
+    }
+    .main-content {
+        position: relative;
+        width: max-content;
+        margin: auto;
+    }
+    /**
+   * NAVBAR
+   */
+    .navbar {
+        position: absolute;
+        bottom: auto;
+        top: 0;
+        left: auto;
+        right: 0;
+        width: max-content;
+        border-radius: 0 20px;
+        padding: 0 20px;
+        box-shadow: none;
+    }
+    .navbar-list {
+        gap: 30px;
+        padding: 0 20px;
+    }
+    .navbar-link {
+        font-weight: var(--fw-500);
+    }
+    /**
+   * ABOUT
+   */
+    /* service */
+    .service-list {
+        grid-template-columns: 1fr 1fr;
+        gap: 20px 25px;
+    }
+    /* testimonials */
+    .testimonials-item {
+        min-width: calc(50% - 15px);
+    }
+    /* clients */
+    .clients-item {
+        min-width: calc(25% - 38px);
+    }
+    /**
+   * PORTFOLIO
+   */
+    .project-list {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    /**
+   * BLOG
+   */
+    .blog-banner-box {
+        height: 230px;
+    }
+}
+
+
+/**
+ * responsive larger than 1250px screen
+ */
+
+@media (min-width: 1250px) {
+    /**
+   * RESET
+   */
+    body::-webkit-scrollbar {
+        width: 20px;
+    }
+    body::-webkit-scrollbar-track {
+        background: var(--smoky-black);
+    }
+    body::-webkit-scrollbar-thumb {
+        border: 5px solid var(--smoky-black);
+        background: hsla(0, 0%, 100%, 0.1);
+        border-radius: 20px;
+        box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
+    }
+    body::-webkit-scrollbar-thumb:hover {
+        background: hsla(0, 0%, 100%, 0.15);
+    }
+    body::-webkit-scrollbar-button {
+        height: 60px;
+    }
+    /**
+   * REUSED STYLE
+   */
+    .sidebar,
+    article {
+        width: auto;
+    }
+    article {
+        min-height: 100%;
+    }
+    /**
+   * MAIN
+   */
+    main {
+        max-width: 1200px;
+        margin-inline: auto;
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+        gap: 25px;
+    }
+    .main-content {
+        min-width: 75%;
+        width: 75%;
+        margin: 0;
+    }
+    /**
+   * SIDEBAR
+   */
+    .sidebar {
+        position: sticky;
+        top: 60px;
+        max-height: max-content;
+        height: 100%;
+        margin-bottom: 0;
+        padding-top: 60px;
+        z-index: 1;
+    }
+    .sidebar-info {
+        flex-direction: column;
+    }
+    .avatar-box img {
+        width: 150px;
+    }
+    .info-content .name {
+        white-space: nowrap;
+        text-align: center;
+    }
+    .info-content .title {
+        margin: auto;
+    }
+    .info_more-btn {
+        display: none;
+    }
+    .sidebar-info_more {
+        opacity: 1;
+        visibility: visible;
+    }
+    .contacts-list {
+        grid-template-columns: 1fr;
+    }
+    .contact-info :is(.contact-link) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .contact-info :is(.contact-link, time, address) {
+        --fs-7: 14px;
+        font-weight: var(--fw-300);
+    }
+    .separator:last-of-type {
+        margin: 15px 0;
+        opacity: 0;
+    }
+    .social-list {
+        justify-content: center;
+    }
+    /**
+	 * RESUME
+	 */
+    .timeline-text {
+        max-width: 700px;
+    }
 }

assets/js/script.js

@@ -1,166 +1,166 @@
-'use strict';
-
-
-
-
-
-
-// element toggle function
-const elementToggleFunc = function(elem) { elem.classList.toggle("active"); }
-
-
-
-// sidebar variables
-const sidebar = document.querySelector("[data-sidebar]");
-const sidebarBtn = document.querySelector("[data-sidebar-btn]");
-
-// sidebar toggle functionality for mobile
-sidebarBtn.addEventListener("click", function() { elementToggleFunc(sidebar); });
-
-
-
-// testimonials variables
-const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
-const modalContainer = document.querySelector("[data-modal-container]");
-const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
-const overlay = document.querySelector("[data-overlay]");
-
-// modal variable
-const modalImg = document.querySelector("[data-modal-img]");
-const modalTitle = document.querySelector("[data-modal-title]");
-const modalText = document.querySelector("[data-modal-text]");
-
-// modal toggle function
-const testimonialsModalFunc = function() {
-    modalContainer.classList.toggle("active");
-    overlay.classList.toggle("active");
-}
-
-
-// add click event to all modal items
-for (let i = 0; i < testimonialsItem.length; i++) {
-
-    testimonialsItem[i].addEventListener("click", function() {
-
-        modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
-        modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
-        modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
-        modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
-
-        testimonialsModalFunc();
-
-    });
-
-}
-
-
-// add click event to modal close button
-modalCloseBtn.addEventListener("click", testimonialsModalFunc);
-overlay.addEventListener("click", testimonialsModalFunc);
-
-
-
-// custom select variables
-const select = document.querySelector("[data-select]");
-const selectItems = document.querySelectorAll("[data-select-item]");
-const selectValue = document.querySelector("[data-selecct-value]");
-const filterBtn = document.querySelectorAll("[data-filter-btn]");
-
-select.addEventListener("click", function() { elementToggleFunc(this); });
-
-// add event in all select items
-document.getElementById("LazyImages").onloadedmetadata = () => {
-    for (let i = 0; i < selectItems.length; i++) {
-        selectItems[i].addEventListener("click", function() {
-
-            let selectedValue = this.innerText.toLowerCase();
-            selectValue.innerText = this.innerText;
-            elementToggleFunc(select);
-            filterFunc(selectedValue);
-
-        });
-    }
-}
-
-// filter variables
-
-
-const filterFunc = function(selectedValue) {
-    const filterItems = document.querySelectorAll("[data-filter-item]");
-    for (let i = 0; i < filterItems.length; i++) {
-
-        if (selectedValue === "all") {
-            filterItems[i].classList.add("active");
-        } else if (filterItems[i].dataset.category.includes(selectedValue)) {
-            filterItems[i].classList.add("active");
-        } else {
-            filterItems[i].classList.remove("active");
-        }
-
-    }
-
-}
-
-// add event in all filter button items for large screen
-let lastClickedBtn = filterBtn[0];
-
-for (let i = 0; i < filterBtn.length; i++) {
-
-    filterBtn[i].addEventListener("click", function() {
-
-        let selectedValue = this.innerText.toLowerCase();
-        selectValue.innerText = this.innerText;
-        filterFunc(selectedValue);
-
-        lastClickedBtn.classList.remove("active");
-        this.classList.add("active");
-        lastClickedBtn = this;
-
-    });
-
-}
-
-
-
-// contact form variables
-const form = document.querySelector("[data-form]");
-const formInputs = document.querySelectorAll("[data-form-input]");
-const formBtn = document.querySelector("[data-form-btn]");
-
-// add event to all form input field
-for (let i = 0; i < formInputs.length; i++) {
-    formInputs[i].addEventListener("input", function() {
-
-        // check form validation
-        if (form.checkValidity()) {
-            formBtn.removeAttribute("disabled");
-        } else {
-            formBtn.setAttribute("disabled", "");
-        }
-
-    });
-}
-
-
-
-// page navigation variables
-const navigationLinks = document.querySelectorAll("[data-nav-link]");
-const pages = document.querySelectorAll("[data-page]");
-
-// add event to all nav link
-for (let i = 0; i < navigationLinks.length; i++) {
-    navigationLinks[i].addEventListener("click", function() {
-
-        for (let i = 0; i < pages.length; i++) {
-            if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
-                pages[i].classList.add("active");
-                navigationLinks[i].classList.add("active");
-                window.scrollTo(0, 0);
-            } else {
-                pages[i].classList.remove("active");
-                navigationLinks[i].classList.remove("active");
-            }
-        }
-
-    });
+'use strict';
+
+
+
+
+
+
+// element toggle function
+const elementToggleFunc = function(elem) { elem.classList.toggle("active"); }
+
+
+
+// sidebar variables
+const sidebar = document.querySelector("[data-sidebar]");
+const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+// sidebar toggle functionality for mobile
+sidebarBtn.addEventListener("click", function() { elementToggleFunc(sidebar); });
+
+
+
+// testimonials variables
+const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
+const modalContainer = document.querySelector("[data-modal-container]");
+const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
+const overlay = document.querySelector("[data-overlay]");
+
+// modal variable
+const modalImg = document.querySelector("[data-modal-img]");
+const modalTitle = document.querySelector("[data-modal-title]");
+const modalText = document.querySelector("[data-modal-text]");
+
+// modal toggle function
+const testimonialsModalFunc = function() {
+    modalContainer.classList.toggle("active");
+    overlay.classList.toggle("active");
+}
+
+
+// add click event to all modal items
+for (let i = 0; i < testimonialsItem.length; i++) {
+
+    testimonialsItem[i].addEventListener("click", function() {
+
+        modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
+        modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
+        modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
+        modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
+
+        testimonialsModalFunc();
+
+    });
+
+}
+
+
+// add click event to modal close button
+modalCloseBtn.addEventListener("click", testimonialsModalFunc);
+overlay.addEventListener("click", testimonialsModalFunc);
+
+
+
+// custom select variables
+const select = document.querySelector("[data-select]");
+const selectItems = document.querySelectorAll("[data-select-item]");
+const selectValue = document.querySelector("[data-selecct-value]");
+const filterBtn = document.querySelectorAll("[data-filter-btn]");
+
+select.addEventListener("click", function() { elementToggleFunc(this); });
+
+// add event in all select items
+document.getElementById("LazyImages").onloadedmetadata = () => {
+    for (let i = 0; i < selectItems.length; i++) {
+        selectItems[i].addEventListener("click", function() {
+
+            let selectedValue = this.innerText.toLowerCase();
+            selectValue.innerText = this.innerText;
+            elementToggleFunc(select);
+            filterFunc(selectedValue);
+
+        });
+    }
+}
+
+// filter variables
+
+
+const filterFunc = function(selectedValue) {
+    const filterItems = document.querySelectorAll("[data-filter-item]");
+    for (let i = 0; i < filterItems.length; i++) {
+
+        if (selectedValue === "all") {
+            filterItems[i].classList.add("active");
+        } else if (filterItems[i].dataset.category.includes(selectedValue)) {
+            filterItems[i].classList.add("active");
+        } else {
+            filterItems[i].classList.remove("active");
+        }
+
+    }
+
+}
+
+// add event in all filter button items for large screen
+let lastClickedBtn = filterBtn[0];
+
+for (let i = 0; i < filterBtn.length; i++) {
+
+    filterBtn[i].addEventListener("click", function() {
+
+        let selectedValue = this.innerText.toLowerCase();
+        selectValue.innerText = this.innerText;
+        filterFunc(selectedValue);
+
+        lastClickedBtn.classList.remove("active");
+        this.classList.add("active");
+        lastClickedBtn = this;
+
+    });
+
+}
+
+
+
+// contact form variables
+const form = document.querySelector("[data-form]");
+const formInputs = document.querySelectorAll("[data-form-input]");
+const formBtn = document.querySelector("[data-form-btn]");
+
+// add event to all form input field
+for (let i = 0; i < formInputs.length; i++) {
+    formInputs[i].addEventListener("input", function() {
+
+        // check form validation
+        if (form.checkValidity()) {
+            formBtn.removeAttribute("disabled");
+        } else {
+            formBtn.setAttribute("disabled", "");
+        }
+
+    });
+}
+
+
+
+// page navigation variables
+const navigationLinks = document.querySelectorAll("[data-nav-link]");
+const pages = document.querySelectorAll("[data-page]");
+
+// add event to all nav link
+for (let i = 0; i < navigationLinks.length; i++) {
+    navigationLinks[i].addEventListener("click", function() {
+
+        for (let i = 0; i < pages.length; i++) {
+            if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+                pages[i].classList.add("active");
+                navigationLinks[i].classList.add("active");
+                window.scrollTo(0, 0);
+            } else {
+                pages[i].classList.remove("active");
+                navigationLinks[i].classList.remove("active");
+            }
+        }
+
+    });
 }

data/Certificates.json

@@ -1,20 +1,43 @@
 [{
+        "title": "AI :12 Month Learning Journey ",
+        "category": "AI Models",
+        "Time": "Fef  19, 2026",
+        "image": "./assets/Certifcations/AI.jpg",
+        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C1.json",
+        "Text": " Studing ALL about AI , ML,DL,CV and NLP "
+    },
+    {
+        "title": "SQL Server Development",
+
+        "Time": "Feb 7, 2026",
+        "image": "./assets/Certifcations/SQL.png",
+        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C2.json",
+        "Text": " Learning Database Design Using ERD and EERD and Developing using TSQL "
+    },
+    {
         "title": "Excle From A To Z",
         "category": "Dashbord",
         "Time": "Jan 11, 2026",
         "image": "./assets/Certifcations/Excle.jpg",
-        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C1.json",
+        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C3.json",
         "Text": " Learning Excle Commands & Dashbord "
     },
+    {
+        "title": "Ubuntu Linux Essentials",
+        "category": "AI Models",
+        "Time": "Jan 24, 2026",
+        "image": "./assets/Certifcations/Ubunto.jpg",
+        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C4.json",
+        "Text": " Studing Ubuntu Essentials and Deferent typs of Shell"
+    },
     {
         "title": "Tech For Non-Tech",
         "category": "AI Models",
         "Time": "Dec 30, 2025",
         "image": "./assets/Certifcations/Mohammed.jpg",
-        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C1.json",
+        "details": "./CirtifiCationsViewr/CertificatesViewer.html?data=data/C5.json",
         "Text": " Studing Google WorkSpace ,PowerBI & Automation"
     }
 
 
-
 ]

data/projects.json

@@ -14,7 +14,37 @@
         "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro3.json"
     }
 
-    ,
+    , {
+        "title": "Sales Analysis DashBord |Tableau",
+        "category": "Dashbord",
+        "filter": "dashbords  ",
+        "image": "./assets/images/Projects/Tableau Pro2.png",
+        "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro5.json"
+    }, {
+        "title": "Airline Performance & Analytics Dashboard",
+        "category": "Dashbord",
+        "filter": "dashbords  ",
+        "image": "./ProjectViewr/assets/im4.png",
+        "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro6.json"
+    }, {
+        "title": "Adventure Works Sales Performance Analysis",
+        "category": "Dashbord",
+        "filter": "dashbords  ",
+        "image": "./ProjectViewr/assets/overview.png",
+        "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro9.json"
+    }, {
+        "title": "Airline Performance & Analytics Dashboard",
+        "category": "Dashbord",
+        "filter": "dashbords  ",
+        "image": "./ProjectViewr/assets/ks.png",
+        "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro7.json"
+    }, {
+        "title": "Adventure Works Cycles: Sales Performance Dashboard",
+        "category": "Dashbord",
+        "filter": "dashbords  ",
+        "image": "./ProjectViewr/assets/adv2.png",
+        "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro8.json"
+    },
 
     {
         "title": "Users FullStack Reactjs App",

index.html

@@ -1,890 +1,900 @@
-<!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>Personal Portfolio</title>
-
-  <!--
-    - favicon
-  -->
-  <link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
-
-  <!--
-    - custom css link
-  -->
-  <link rel="stylesheet" href="./assets/css/style.css">
-
-  <!--
-    - google font link
-  -->
-  <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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
-</head>
-
-<body>
-
-  <!--
-    - #MAIN
-  -->
-
-  <main>
-
-    <!--
-      - #SIDEBAR
-    -->
-
-    <aside class="sidebar" data-sidebar>
-
-      <div class="sidebar-info">
-
-        <figure class="avatar-box" style=" border-radius: 50px;">
-          <img src="./assets/images/MyImage.jpg" alt="Richard hanrick" width="80" style=" border-radius: 20px;" >
-        </figure>
-
-        <div class="info-content">
-          <h1 class="name" title="Richard hanrick">Mohammed Abo Ellil</h1>
-
-          <p class="title">Data Scientist</p>
-        </div>
-
-        <button class="info_more-btn" data-sidebar-btn>
-          <span>Show Contacts</span>
-
-          <ion-icon name="chevron-down"></ion-icon>
-        </button>
-
-      </div>
-
-      <div class="sidebar-info_more">
-
-        <div class="separator"></div>
-
-        <ul class="contacts-list">
-
-          <li class="contact-item">
-
-            <div class="icon-box">
-              <ion-icon name="mail-outline"></ion-icon>
-            </div>
-
-            <div class="contact-info">
-              <p class="contact-title">Email</p>
-
-              <a href="mailto:mohammedaboellil200@gmail.com" class="contact-link">mohammedaboellil200@gmail.com</a>
-            </div>
-
-          </li>
-
-          <li class="contact-item">
-
-            <div class="icon-box">
-              <ion-icon name="phone-portrait-outline"></ion-icon>
-            </div>
-
-            <div class="contact-info">
-              <p class="contact-title">Phone</p>
-
-              <a href="tel:+201036689958" class="contact-link">+20 (103) 6689-958</a>
-            </div>
-
-          </li>
-
-          <li class="contact-item">
-
-            <div class="icon-box">
-              <ion-icon name="calendar-outline"></ion-icon>
-            </div>
-
-            <div class="contact-info">
-              <p class="contact-title">Birthday</p>
-
-              <time datetime="2001-04-229">April 29, 2001</time>
-            </div>
-
-          </li>
-
-          <li class="contact-item">
-
-            <div class="icon-box">
-              <ion-icon name="location-outline"></ion-icon>
-            </div>
-
-            <div class="contact-info">
-              <p class="contact-title">Location</p>
-
-              <address>Tanta, Ghabia, EGYPT</address>
-            </div>
-
-          </li>
-
-        </ul>
-
-        <div class="separator"></div>
-
-        <ul class="social-list">
-
-          <li class="social-item">
-            <a href="https://www.facebook.com/profile.php?id=61585737173252" class="social-link">
-              <ion-icon name="logo-facebook"></ion-icon>
-            </a>
-          </li>
-
-          <li class="social-item">
-            <a href="https://www.linkedin.com/in/mohammed-aboellil-7806a5245/" class="social-link">
-              <ion-icon name="logo-linkedin"></ion-icon>
-            </a>
-          </li>
-
-          <li class="social-item">
-            <a href="#" class="social-link">
-              <ion-icon name="logo-kaggle"></ion-icon>
-            </a>
-          </li>
-
-        </ul>
-
-      </div>
-
-    </aside>
-
-
-
-
-
-    <!--
-      - #main-content
-    -->
-
-    <div class="main-content">
-
-      <!--
-        - #NAVBAR
-      -->
-
-      <nav class="navbar">
-
-        <ul class="navbar-list">
-
-          <li class="navbar-item">
-            <button class="navbar-link  active" data-nav-link>About</button>
-          </li>
-
-          <li class="navbar-item">
-            <button class="navbar-link" data-nav-link>Resume</button>
-          </li>
-
-          <li class="navbar-item">
-            <button class="navbar-link" data-nav-link>Portfolio</button>
-          </li>
-
-          <li class="navbar-item">
-            <button class="navbar-link" data-nav-link>Certifications</button>
-          </li>
-
-          
-
-        </ul>
-
-      </nav>
-
-
-
-
-
-      <!--
-        - #ABOUT
-      -->
-
-      <article class="about  active" data-page="about">
-
-        <header>
-          <h2 class="h2 article-title">About me</h2>
-        </header>
-
-        <section class="about-text">
-          <p>
-          I am a Data science engineer skilled in Python, SQL, and machine learning frameworks. Experienced in
-          projects such as face recognition, indoor localization, and wake word detection, achieving measurable
-          improvements like 10% accuracy gains on small datasets. Seeking to apply expertise to analyze data,
-          build predictive models, and deploy AI solutions that deliver measurable impact.
-          </p>
-
-          <p>
-           I build end-to-end machine learning solutions, from data preprocessing and model development to deployment using modern frameworks. My work emphasizes accuracy, efficiency, and real-time performance, ensuring that AI systems are practical, scalable, and aligned with business needs.
-          </p>
-        </section>
-
-
-        <!--
-          - service
-        -->
-
-        <section class="service">
-
-          <h3 class="h3 service-title">What i'm doing</h3>
-
-          <ul class="service-list">
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/robot.png
-                " alt="design icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">Machine Learning & AI</h4>
-
-                <p class="service-item-text">
-                  Designing and training machine learning models to solve real-world problems, with a focus on accuracy, efficiency, and practical deployment.
-                </p>
-              </div>
-
-            </li>
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/eye.png" alt="Web development icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">Computer Vision</h4>
-
-                <p class="service-item-text">
-                 Building computer vision systems such as face recognition and wake-word detection using deep learning models optimized for real-time and mobile environments.
-                </p>
-              </div>
-
-            </li>
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/map.png" alt="mobile app icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">Indoor Localization & Mapping</h4>
-
-                <p class="service-item-text">
-                  Developing WiFi-based indoor localization systems and navigation solutions using deep learning and pathfinding algorithms for accurate indoor positioning.
-                </p>
-              </div>
-
-            </li>
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/project-launch.png" alt="camera icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">Model Deployment & APIs</h4>
-
-                <p class="service-item-text">
-                  Deploying machine learning models as scalable REST APIs using FastAPI, ONNX Runtime,TFLite, and cloud-ready architectures.
-                </p>
-              </div>
-
-            </li>
-
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/software-application.png" alt="camera icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">AI-Powered Web Applications</h4>
-
-                <p class="service-item-text">
-               Integrating AI models into modern web applications using FastAPI and React to create intelligent, user-friendly systems.
-                  </p>
-              </div>
-
-            </li>
-
-            <li class="service-item">
-
-              <div class="service-icon-box">
-                <img src="./assets/images/automation.png" alt="camera icon" width="40">
-              </div>
-
-              <div class="service-content-box">
-                <h4 class="h4 service-item-title">Automation & Workflows</h4>
-
-                <p class="service-item-text">
-              Automating data pipelines and AI workflows using n8n to connect models, APIs, and external services efficiently.
-            </p>
-              </div>
-
-            </li>
-
-          </ul>
-
-        </section>
-
-
-        <!--
-          - testimonials
-        -->
-
-        <section class="testimonials">
-
-          <h3 class="h3 testimonials-title">Technical Stack & Tools</h3>
-
-          <ul class="testimonials-list has-scrollbar">
-
-            <li class="testimonials-item">
-              <div class="content-card" data-testimonials-item>
-
-                <figure class="testimonials-avatar-box">
-                  <img src="./assets/images/Python.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
-                </figure>
-
-                <h4 class="h4 testimonials-item-title" data-testimonials-title>Programing Languages</h4>
-               <div class="testimonials-text" data-testimonials-text>
-                  <p >
-                    Python has been my go‑to for turning raw data into intelligent solutions, from machine learning models to real‑time systems. With libraries like NumPy, Pandas, TensorFlow, and PyTorch, I’ve built and deployed AI pipelines using FastAPI, ONNX, and TFLite.
-                   <br>
-                    JavaScript has been my bridge to building interactive web experiences, especially through React. At an intermediate level, I’ve used it to create dynamic interfaces and connect AI‑powered backends with responsive, real‑time applications.
-                  </p>
-                </div>
-
-              </div>
-            </li>
-
-            <li class="testimonials-item">
-              <div class="content-card" data-testimonials-item>
-
-                <figure class="testimonials-avatar-box">
-                  <img src="./assets/images/tf.svg" alt="Jessica miller" width="60" data-testimonials-avatar>
-                </figure>
-
-                <h4 class="h4 testimonials-item-title" data-testimonials-title>AI Frame Work</h4>
-                <div class="testimonials-text" data-testimonials-text>
-                  <p>
-                    My journey with AI frameworks began when Python became a tool for building intelligent systems, using Scikit-learn and TensorFlow to solve real problems.
-                    I deploy these models into production by optimizing them with ONNX and TFLite and serving them through FastAPI for fast, scalable AI solutions.
-                  </p>
-                </div>
-
-              </div>
-            </li>
-
-            <li class="testimonials-item">
-              <div class="content-card" data-testimonials-item>
-
-                <figure class="testimonials-avatar-box">
-                  <img src="./assets/images/fastapi.svg" alt="Emily evans" width="60" data-testimonials-avatar>
-                </figure>
-
-                <h4 class="h4 testimonials-item-title" data-testimonials-title>AI Deployment</h4>
-                <div class="testimonials-text" data-testimonials-text>
-                  <p>
-                   FastAPI is where my AI models become real products — I use it to turn trained models into scalable, high-performance APIs that can be reliably consumed by web and mobile applications.
-                   <br>Through FastAPI, I focus on clean architecture, low-latency inference, and seamless integration between AI backends and real-world systems.
-                  </p>
-                </div>
-
-              </div>
-            </li>
-
-            <li class="testimonials-item">
-              <div class="content-card" data-testimonials-item>
-
-                <figure class="testimonials-avatar-box">
-                  <img src="./assets/images/n8n-color.svg" alt="Henry william" width="60" data-testimonials-avatar style="padding:10px;">
-                </figure>
-
-                <h4 class="h4 testimonials-item-title" data-testimonials-title>Automation</h4>
-                <div class="testimonials-text" data-testimonials-text>
-                  <p>
-                   I use n8n to automate AI workflows and system integrations, turning repetitive processes into reliable, event-driven pipelines.
-Through automation, I connect models, APIs, and data sources to create end-to-end solutions that run efficiently with minimal manual intervention.
-                  </p>
-                </div>
-
-              </div>
-            </li>
-
-          </ul>
-
-        </section>
-
-
-        <!--
-          - testimonials modal
-        -->
-
-        <div class="modal-container" data-modal-container>
-
-          <div class="overlay" data-overlay></div>
-
-          <section class="testimonials-modal">
-
-            <button class="modal-close-btn" data-modal-close-btn>
-              <ion-icon name="close-outline"></ion-icon>
-            </button>
-
-            <div class="modal-img-wrapper">
-              <figure class="modal-avatar-box">
-                <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
-              </figure>
-
-              <img src="./assets/images/icon-quote.svg" alt="quote icon">
-            </div>
-
-            <div class="modal-content" >
-
-              <h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
-
-              <time datetime="2021-06-14" data-modal-Time>14 June, 2021</time>
-
-              <div data-modal-text style='color:"fff"'>
-                <p>
-                  Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-                  lot of experience
-                  and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-                  consectetur adipiscing
-                  elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-                </p>
-              </div>
-
-            </div>
-
-          </section>
-
-        </div>
-
-
-        <!--
-          - clients
-        -->
-
-        <section class="clients">
-
-          <h3 class="h3 clients-title">Internships</h3>
-
-          <ul class="clients-list has-scrollbar">
-
-            <li class="clients-item">
-              <a href="https://iti.gov.eg/">
-                <img src="./assets/images/iti-logo-422x430.png" alt="client logo" >
-              </a>
-            </li>
-
-            <li class="clients-item">
-              <a href="https://maharatech.gov.eg/">
-                <img src="./assets/images/mahara.png" alt="client logo">
-              </a>
-            </li>
-
-            <li class="clients-item">
-              <a href="https://icareer.ai/">
-                <img src="./assets/images/icareeregy_logo.png" alt="client logo">
-              </a>
-            </li>
-
-            <li class="clients-item">
-              <a href="https://www.linkedin.com/company/apps-square/?originalSubdomain=eg">
-                <img src="./assets/images/appsq-.png" alt="client logo">
-              </a>
-            </li>
-
-
-          </ul>
-
-        </section>
-
-      </article>
-
-
-
-
-
-      <!--
-        - #RESUME
-      -->
-
-      <article class="resume" data-page="resume">
-
-        <header>
-          <h2 class="h2 article-title">Resume</h2>
-        </header>
-
-        <section class="timeline">
-
-          <div class="title-wrapper">
-            <div class="icon-box">
-              <ion-icon name="book-outline"></ion-icon>
-            </div>
-
-            <h3 class="h3">Education</h3>
-          </div>
-
-          <ol class="timeline-list">
-
-            <li class="timeline-item">
-
-              <h4 class="h4 timeline-item-title">Information Technology Institute ITI</h4>
-
-              <span>1/2026 — 6/2026</span>
-
-              <p class="timeline-text">
-               I transform raw data into actionable insights, creating interactive dashboards and reports that empower organizations to make data-driven decisions efficiently and effectively.
-              </p>
-
-            </li>
-
-            <li class="timeline-item">
-
-              <h4 class="h4 timeline-item-title"> B.Sc. in Electrical Engineering (Computing and Automatic Control)</h4>
-
-              <span>2019 — 2024</span>
-
-              <p class="timeline-text">
-                As a Data Science enthusiast with a background in Electrical Engineering (Computing and Automatic Control), I transform complex data into actionable insights, building interactive dashboards and predictive models that support smarter, data-driven business decisions
-              </p>
-
-            </li>
-
-          </ol>
-
-        </section>
-
-        <section class="skill">
-
-          <h3 class="h3 skills-title">My skills</h3>
-
-          <ul class="skills-list content-card">
-
-            <li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Programming: Python (Advanced), JavaScript
-                  (Intermediate)
-                </h5>
-               <!-- <data value="80">80%</data>-->
-              </div>
-
-            </li>
-
-            <li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Data Processing : Pandas , NumPy , Statistics</h5>
-                
-              </div>
-
-            </li>
-
-            <li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Data Visualization : Power BI , Excel ,Tableau</h5>
-                <data value="90"></data>
-              </div>
-
-              <!--<div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 90%;"></div>
-              </div>-->
-
-            </li>
-
-            <li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Data Science: Scikit‑learn, TensorFlow</h5>
-                <data value="50"></data>
-              </div>
-
-              <!--<div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 50%;"></div>
-              </div>-->
-
-            </li>
-
-<li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Web Development: FastAPI, React.js
-</h5>
-                <data value="50"></data>
-              </div>
-
-              <!--<div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 50%;"></div>
-              </div>-->
-
-            </li>
-
-            <li class="skills-item">
-
-              <div class="title-wrapper">
-                <h5 class="h5">Automation: n8n</h5>
-                <data value="50"></data>
-              </div>
-
-              <!--<div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 50%;"></div>
-              </div>-->
-
-            </li>
-
-
-
-
-
-
-
-          </ul>
-
-        </section>
-
-      </article>
-
-
-
-
-
-      <!--
-        - #PORTFOLIO
-      -->
-
-      <article class="portfolio" data-page="portfolio">
-
-        <header>
-          <h2 class="h2 article-title">Portfolio</h2>
-        </header>
-
-        <section class="projects">
-
-          <ul class="filter-list">
-
-            <li class="filter-item">
-              <button class="active" data-filter-btn>All</button>
-            </li>
-
-            <li class="filter-item">
-              <button data-filter-btn>AI models</button>
-            </li>
-
-            <li class="filter-item">
-              <button data-filter-btn>Dashbords</button>
-            </li>
-
-            <li class="filter-item">
-              <button data-filter-btn>Automation</button>
-            </li>
-             <li class="filter-item">
-              <button data-filter-btn>FullStack</button>
-            </li>
-
-          </ul>
-
-          <div class="filter-select-box">
-
-            <button class="filter-select" data-select>
-
-              <div class="select-value" data-selecct-value>Select category</div>
-
-              <div class="select-icon">
-                <ion-icon name="chevron-down"></ion-icon>
-              </div>
-
-            </button>
-
-            <ul class="select-list">
-
-              <li class="select-item">
-                <button data-select-item>All</button>
-              </li>
-
-              <li class="select-item">
-                <button data-select-item>AI Models</button>
-              </li>
-
-              <li class="select-item">
-                <button data-select-item>Dashbords</button>
-              </li>
-
-              <li class="select-item">
-                <button data-select-item>Automation</button>
-              </li>
-
-                <li class="select-item">
-                <button data-select-item>FullStack</button>
-              </li>
-
-            </ul>
-
-          </div>
-
-          <ul class="project-list" id="projectList">
-            <li class="project-item active" data-filter-item="" data-category="ai models">
-        <a href="./ProjectViewr/ProjectViewr.html?data=data/Pro2.json" target="_blank">
-          <figure class="project-img">
-            <div class="project-item-icon-box">
-              <ion-icon name="eye-outline" role="img" class="md hydrated" aria-label="eye outline"></ion-icon>
-            </div>
-            <img src="./assets/ProImg/FaceRec.png" alt="Face Recognition" loading="lazy" id="LazyImages">
-          </figure>
-
-          <h3 class="project-title">Face Recognition</h3>
-          <p class="project-category">AI Models</p>
-        </a>
-      </li>
-            
-          </ul>
-
-        </section>
-
-      </article>
-
-
-
-
-
-      <!--
-        - #BLOG
-      -->
-
-      <article class="blog" data-page="certifications">
-
-        <header>
-          <h2 class="h2 article-title">Certificates</h2>
-        </header>
-
-        <section class="blog-posts">
-
-          <ul class="blog-posts-list" id ="Certificates">
-
-          </ul>
-
-        </section>
-
-      </article>
-
-
-
-
-
-
-    </div>
-
-  </main>
-
-
-<script>
-  
-fetch('./data/projects.json')
-    .then(response => response.json())
-    .then(projects => {
-        const projectList = document.getElementById('projectList');
-
-
-        projects.forEach(project => {
-            const li = document.createElement('li');
-            li.className = 'project-item active';
-            li.setAttribute('data-filter-item', '');
-            li.setAttribute('data-category', project.filter);
-
-
-            li.innerHTML = `
-        <a href="${project.details}" target="_blank">
-          <figure class="project-img">
-            <div class="project-item-icon-box">
-              <ion-icon name="eye-outline"></ion-icon>
-            </div>
-            <img src="${project.image}" style:"background-url:" alt="${project.title}" loading="lazy">
-          </figure>
-
-          <h3 class="project-title">${project.title}</h3>
-          <p class="project-category">${project.category}</p>
-        </a>
-      `;
-
-            projectList.appendChild(li);
-        });
-    })
-    .catch(error => console.error('Error loading projects:', error));
-
-</script>
-
-
-<script>
-fetch('./data/Certificates.json')
-  .then(response => response.json())
-  .then(Certificates => {
-    const CertificateList = document.getElementById('Certificates');
-   
-
-    Certificates.forEach(Certificate => {
-      const li = document.createElement('li');
-      li.className = "blog-post-item";
-     
-      
-      li.innerHTML = `
-              <a href="${Certificate.details}" target='_blank'>
-
-                <figure class="blog-banner-box" >
-                  <img src="${Certificate.image}"  alt="Image" loading="lazy">
-                </figure>
-
-                <div class="blog-content">
-
-                  <div class="blog-meta">
-                    <p class="blog-category">Certificate.category</p>
-
-                    <span class="dot"></span>
-
-                    <time datetime="2022-02-23">${Certificate.Time}</time>
-                  </div><h3 class="h3 blog-item-title">${Certificate.title}</h3>
-                  
-                  <p class="blog-text" >
-                    ${Certificate.Text}
-                  </p>
-
-                </div>
-
-              </a>
-            
-      `;
-
-      CertificateList.appendChild(li);
-    });
-  })
-  .catch(error => console.error('Error loading projects:', error));
-</script>
-
-
-
-
-  <!--
-    - custom js link
-  -->
-  <script src="./assets/js/script.js"></script>
-
-  <!--
-    - ionicon link
-  -->
-  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-
-
-</body>
-
-
-
-
-
-
+<!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>Personal Portfolio</title>
+
+  <!--
+    - favicon
+  -->
+  <link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
+
+  <!--
+    - custom css link
+  -->
+  <link rel="stylesheet" href="./assets/css/style.css">
+
+  <!--
+    - google font link
+  -->
+  <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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+  <!--
+    - #MAIN
+  -->
+
+  <main>
+
+    <!--
+      - #SIDEBAR
+    -->
+
+    <aside class="sidebar" data-sidebar>
+
+      <div class="sidebar-info">
+
+        <figure class="avatar-box" style=" border-radius: 50px;">
+          <img src="./assets/images/MyImage.jpg" alt="Richard hanrick" width="80" style=" border-radius: 20px;" >
+        </figure>
+
+        <div class="info-content">
+          <h1 class="name" title="Richard hanrick">Mohammed Abo Ellil</h1>
+
+          <p class="title">Data Scientist</p>
+        </div>
+
+        <button class="info_more-btn" data-sidebar-btn>
+          <span>Show Contacts</span>
+
+          <ion-icon name="chevron-down"></ion-icon>
+        </button>
+
+      </div>
+
+      <div class="sidebar-info_more">
+
+        <div class="separator"></div>
+
+        <ul class="contacts-list">
+
+          <li class="contact-item">
+
+            <div class="icon-box">
+              <ion-icon name="mail-outline"></ion-icon>
+            </div>
+
+            <div class="contact-info">
+              <p class="contact-title">Email</p>
+
+              <a href="mailto:mohammedaboellil200@gmail.com" class="contact-link">mohammedaboellil200@gmail.com</a>
+            </div>
+
+          </li>
+
+          <li class="contact-item">
+
+            <div class="icon-box">
+              <ion-icon name="phone-portrait-outline"></ion-icon>
+            </div>
+
+            <div class="contact-info">
+              <p class="contact-title">Phone</p>
+
+              <a href="tel:+201036689958" class="contact-link">+20 (103) 6689-958</a>
+            </div>
+
+          </li>
+
+          <li class="contact-item">
+
+            <div class="icon-box">
+              <ion-icon name="calendar-outline"></ion-icon>
+            </div>
+
+            <div class="contact-info">
+              <p class="contact-title">Birthday</p>
+
+              <time datetime="2001-04-229">April 29, 2001</time>
+            </div>
+
+          </li>
+
+          <li class="contact-item">
+
+            <div class="icon-box">
+              <ion-icon name="location-outline"></ion-icon>
+            </div>
+
+            <div class="contact-info">
+              <p class="contact-title">Location</p>
+
+              <address>Tanta, Ghabia, EGYPT</address>
+            </div>
+
+          </li>
+
+        </ul>
+
+        <div class="separator"></div>
+
+        <ul class="social-list">
+
+          <li class="social-item">
+            <a href="https://www.facebook.com/profile.php?id=61585737173252" class="social-link">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </a>
+          </li>
+
+          <li class="social-item">
+            <a href="https://www.linkedin.com/in/mohammed-aboellil-7806a5245/" class="social-link">
+              <ion-icon name="logo-linkedin"></ion-icon>
+            </a>
+          </li>
+<li class="social-item">
+            <a href="https://wa.me/201289071166" class="social-link">
+              <ion-icon name="logo-whatsapp"></ion-icon>
+            </a>
+          </li>
+          </li>
+<li class="social-item">
+            <a href="https://public.tableau.com/app/profile/mohammed.aboellil/vizzes" class="social-link">
+              <ion-icon name="logo-tableau"></ion-icon>
+            </a>
+          </li>
+          <li class="social-item">
+            <a href="#" class="social-link">
+              <ion-icon name="logo-kaggle"></ion-icon>
+            </a>
+          </li>
+
+        </ul>
+
+      </div>
+
+    </aside>
+
+
+
+
+
+    <!--
+      - #main-content
+    -->
+
+    <div class="main-content">
+
+      <!--
+        - #NAVBAR
+      -->
+
+      <nav class="navbar">
+
+        <ul class="navbar-list">
+
+          <li class="navbar-item">
+            <button class="navbar-link  active" data-nav-link>About</button>
+          </li>
+
+          <li class="navbar-item">
+            <button class="navbar-link" data-nav-link>Resume</button>
+          </li>
+
+          <li class="navbar-item">
+            <button class="navbar-link" data-nav-link>Portfolio</button>
+          </li>
+
+          <li class="navbar-item">
+            <button class="navbar-link" data-nav-link>Certifications</button>
+          </li>
+
+          
+
+        </ul>
+
+      </nav>
+
+
+
+
+
+      <!--
+        - #ABOUT
+      -->
+
+      <article class="about  active" data-page="about">
+
+        <header>
+          <h2 class="h2 article-title">About me</h2>
+        </header>
+
+        <section class="about-text">
+          <p>
+          I am a Data science engineer skilled in Python, SQL, and machine learning frameworks. Experienced in
+          projects such as face recognition, indoor localization, and wake word detection, achieving measurable
+          improvements like 10% accuracy gains on small datasets. Seeking to apply expertise to analyze data,
+          build predictive models, and deploy AI solutions that deliver measurable impact.
+          </p>
+
+          <p>
+           I build end-to-end machine learning solutions, from data preprocessing and model development to deployment using modern frameworks. My work emphasizes accuracy, efficiency, and real-time performance, ensuring that AI systems are practical, scalable, and aligned with business needs.
+          </p>
+        </section>
+
+
+        <!--
+          - service
+        -->
+
+        <section class="service">
+
+          <h3 class="h3 service-title">What i'm doing</h3>
+
+          <ul class="service-list">
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/robot.png
+                " alt="design icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">Machine Learning & AI</h4>
+
+                <p class="service-item-text">
+                  Designing and training machine learning models to solve real-world problems, with a focus on accuracy, efficiency, and practical deployment.
+                </p>
+              </div>
+
+            </li>
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/eye.png" alt="Web development icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">Computer Vision</h4>
+
+                <p class="service-item-text">
+                 Building computer vision systems such as face recognition and wake-word detection using deep learning models optimized for real-time and mobile environments.
+                </p>
+              </div>
+
+            </li>
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/map.png" alt="mobile app icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">Indoor Localization & Mapping</h4>
+
+                <p class="service-item-text">
+                  Developing WiFi-based indoor localization systems and navigation solutions using deep learning and pathfinding algorithms for accurate indoor positioning.
+                </p>
+              </div>
+
+            </li>
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/project-launch.png" alt="camera icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">Model Deployment & APIs</h4>
+
+                <p class="service-item-text">
+                  Deploying machine learning models as scalable REST APIs using FastAPI, ONNX Runtime,TFLite, and cloud-ready architectures.
+                </p>
+              </div>
+
+            </li>
+
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/software-application.png" alt="camera icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">AI-Powered Web Applications</h4>
+
+                <p class="service-item-text">
+               Integrating AI models into modern web applications using FastAPI and React to create intelligent, user-friendly systems.
+                  </p>
+              </div>
+
+            </li>
+
+            <li class="service-item">
+
+              <div class="service-icon-box">
+                <img src="./assets/images/automation.png" alt="camera icon" width="40">
+              </div>
+
+              <div class="service-content-box">
+                <h4 class="h4 service-item-title">Automation & Workflows</h4>
+
+                <p class="service-item-text">
+              Automating data pipelines and AI workflows using n8n to connect models, APIs, and external services efficiently.
+            </p>
+              </div>
+
+            </li>
+
+          </ul>
+
+        </section>
+
+
+        <!--
+          - testimonials
+        -->
+
+        <section class="testimonials">
+
+          <h3 class="h3 testimonials-title">Technical Stack & Tools</h3>
+
+          <ul class="testimonials-list has-scrollbar">
+
+            <li class="testimonials-item">
+              <div class="content-card" data-testimonials-item>
+
+                <figure class="testimonials-avatar-box">
+                  <img src="./assets/images/Python.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
+                </figure>
+
+                <h4 class="h4 testimonials-item-title" data-testimonials-title>Programing Languages</h4>
+               <div class="testimonials-text" data-testimonials-text>
+                  <p >
+                    Python has been my go‑to for turning raw data into intelligent solutions, from machine learning models to real‑time systems. With libraries like NumPy, Pandas, TensorFlow, and PyTorch, I’ve built and deployed AI pipelines using FastAPI, ONNX, and TFLite.
+                   <br>
+                    JavaScript has been my bridge to building interactive web experiences, especially through React. At an intermediate level, I’ve used it to create dynamic interfaces and connect AI‑powered backends with responsive, real‑time applications.
+                  </p>
+                </div>
+
+              </div>
+            </li>
+
+            <li class="testimonials-item">
+              <div class="content-card" data-testimonials-item>
+
+                <figure class="testimonials-avatar-box">
+                  <img src="./assets/images/tf.svg" alt="Jessica miller" width="60" data-testimonials-avatar>
+                </figure>
+
+                <h4 class="h4 testimonials-item-title" data-testimonials-title>AI Frame Work</h4>
+                <div class="testimonials-text" data-testimonials-text>
+                  <p>
+                    My journey with AI frameworks began when Python became a tool for building intelligent systems, using Scikit-learn and TensorFlow to solve real problems.
+                    I deploy these models into production by optimizing them with ONNX and TFLite and serving them through FastAPI for fast, scalable AI solutions.
+                  </p>
+                </div>
+
+              </div>
+            </li>
+
+            <li class="testimonials-item">
+              <div class="content-card" data-testimonials-item>
+
+                <figure class="testimonials-avatar-box">
+                  <img src="./assets/images/fastapi.svg" alt="Emily evans" width="60" data-testimonials-avatar>
+                </figure>
+
+                <h4 class="h4 testimonials-item-title" data-testimonials-title>AI Deployment</h4>
+                <div class="testimonials-text" data-testimonials-text>
+                  <p>
+                   FastAPI is where my AI models become real products — I use it to turn trained models into scalable, high-performance APIs that can be reliably consumed by web and mobile applications.
+                   <br>Through FastAPI, I focus on clean architecture, low-latency inference, and seamless integration between AI backends and real-world systems.
+                  </p>
+                </div>
+
+              </div>
+            </li>
+
+            <li class="testimonials-item">
+              <div class="content-card" data-testimonials-item>
+
+                <figure class="testimonials-avatar-box">
+                  <img src="./assets/images/n8n-color.svg" alt="Henry william" width="60" data-testimonials-avatar style="padding:10px;">
+                </figure>
+
+                <h4 class="h4 testimonials-item-title" data-testimonials-title>Automation</h4>
+                <div class="testimonials-text" data-testimonials-text>
+                  <p>
+                   I use n8n to automate AI workflows and system integrations, turning repetitive processes into reliable, event-driven pipelines.
+Through automation, I connect models, APIs, and data sources to create end-to-end solutions that run efficiently with minimal manual intervention.
+                  </p>
+                </div>
+
+              </div>
+            </li>
+
+          </ul>
+
+        </section>
+
+
+        <!--
+          - testimonials modal
+        -->
+
+        <div class="modal-container" data-modal-container>
+
+          <div class="overlay" data-overlay></div>
+
+          <section class="testimonials-modal">
+
+            <button class="modal-close-btn" data-modal-close-btn>
+              <ion-icon name="close-outline"></ion-icon>
+            </button>
+
+            <div class="modal-img-wrapper">
+              <figure class="modal-avatar-box">
+                <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
+              </figure>
+
+              <img src="./assets/images/icon-quote.svg" alt="quote icon">
+            </div>
+
+            <div class="modal-content" >
+
+              <h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
+
+              <time datetime="2021-06-14" data-modal-Time>14 June, 2021</time>
+
+              <div data-modal-text style='color:"fff"'>
+                <p>
+                  Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
+                  lot of experience
+                  and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
+                  consectetur adipiscing
+                  elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+                </p>
+              </div>
+
+            </div>
+
+          </section>
+
+        </div>
+
+
+        <!--
+          - clients
+        -->
+
+        <section class="clients">
+
+          <h3 class="h3 clients-title">Internships</h3>
+
+          <ul class="clients-list has-scrollbar">
+
+            <li class="clients-item">
+              <a href="https://iti.gov.eg/">
+                <img src="./assets/images/iti-logo-422x430.png" alt="client logo" >
+              </a>
+            </li>
+
+            <li class="clients-item">
+              <a href="https://maharatech.gov.eg/">
+                <img src="./assets/images/mahara.png" alt="client logo">
+              </a>
+            </li>
+
+            <li class="clients-item">
+              <a href="https://icareer.ai/">
+                <img src="./assets/images/icareeregy_logo.png" alt="client logo">
+              </a>
+            </li>
+
+            <li class="clients-item">
+              <a href="https://www.linkedin.com/company/apps-square/?originalSubdomain=eg">
+                <img src="./assets/images/appsq-.png" alt="client logo">
+              </a>
+            </li>
+
+
+          </ul>
+
+        </section>
+
+      </article>
+
+
+
+
+
+      <!--
+        - #RESUME
+      -->
+
+      <article class="resume" data-page="resume">
+
+        <header>
+          <h2 class="h2 article-title">Resume</h2>
+        </header>
+
+        <section class="timeline">
+
+          <div class="title-wrapper">
+            <div class="icon-box">
+              <ion-icon name="book-outline"></ion-icon>
+            </div>
+
+            <h3 class="h3">Education</h3>
+          </div>
+
+          <ol class="timeline-list">
+
+            <li class="timeline-item">
+
+              <h4 class="h4 timeline-item-title">Information Technology Institute ITI</h4>
+
+              <span>1/2026 — 6/2026</span>
+
+              <p class="timeline-text">
+               I transform raw data into actionable insights, creating interactive dashboards and reports that empower organizations to make data-driven decisions efficiently and effectively.
+              </p>
+
+            </li>
+
+            <li class="timeline-item">
+
+              <h4 class="h4 timeline-item-title"> B.Sc. in Electrical Engineering (Computing and Automatic Control)</h4>
+
+              <span>2019 — 2024</span>
+
+              <p class="timeline-text">
+                As a Data Science enthusiast with a background in Electrical Engineering (Computing and Automatic Control), I transform complex data into actionable insights, building interactive dashboards and predictive models that support smarter, data-driven business decisions
+              </p>
+
+            </li>
+
+          </ol>
+
+        </section>
+
+        <section class="skill">
+
+          <h3 class="h3 skills-title">My skills</h3>
+
+          <ul class="skills-list content-card">
+
+            <li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Programming: Python (Advanced), JavaScript
+                  (Intermediate)
+                </h5>
+               <!-- <data value="80">80%</data>-->
+              </div>
+
+            </li>
+
+            <li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Data Processing : Pandas , NumPy , Statistics</h5>
+                
+              </div>
+
+            </li>
+
+            <li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Data Visualization : Power BI , Excel ,Tableau</h5>
+                <data value="90"></data>
+              </div>
+
+              <!--<div class="skill-progress-bg">
+                <div class="skill-progress-fill" style="width: 90%;"></div>
+              </div>-->
+
+            </li>
+
+            <li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Data Science: Scikit‑learn, TensorFlow</h5>
+                <data value="50"></data>
+              </div>
+
+              <!--<div class="skill-progress-bg">
+                <div class="skill-progress-fill" style="width: 50%;"></div>
+              </div>-->
+
+            </li>
+
+<li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Web Development: FastAPI, React.js
+</h5>
+                <data value="50"></data>
+              </div>
+
+              <!--<div class="skill-progress-bg">
+                <div class="skill-progress-fill" style="width: 50%;"></div>
+              </div>-->
+
+            </li>
+
+            <li class="skills-item">
+
+              <div class="title-wrapper">
+                <h5 class="h5">Automation: n8n</h5>
+                <data value="50"></data>
+              </div>
+
+              <!--<div class="skill-progress-bg">
+                <div class="skill-progress-fill" style="width: 50%;"></div>
+              </div>-->
+
+            </li>
+
+
+
+
+
+
+
+          </ul>
+
+        </section>
+
+      </article>
+
+
+
+
+
+      <!--
+        - #PORTFOLIO
+      -->
+
+      <article class="portfolio" data-page="portfolio">
+
+        <header>
+          <h2 class="h2 article-title">Portfolio</h2>
+        </header>
+
+        <section class="projects">
+
+          <ul class="filter-list">
+
+            <li class="filter-item">
+              <button class="active" data-filter-btn>All</button>
+            </li>
+
+            <li class="filter-item">
+              <button data-filter-btn>AI models</button>
+            </li>
+
+            <li class="filter-item">
+              <button data-filter-btn>Dashbords</button>
+            </li>
+
+            <li class="filter-item">
+              <button data-filter-btn>Automation</button>
+            </li>
+             <li class="filter-item">
+              <button data-filter-btn>FullStack</button>
+            </li>
+
+          </ul>
+
+          <div class="filter-select-box">
+
+            <button class="filter-select" data-select>
+
+              <div class="select-value" data-selecct-value>Select category</div>
+
+              <div class="select-icon">
+                <ion-icon name="chevron-down"></ion-icon>
+              </div>
+
+            </button>
+
+            <ul class="select-list">
+
+              <li class="select-item">
+                <button data-select-item>All</button>
+              </li>
+
+              <li class="select-item">
+                <button data-select-item>AI Models</button>
+              </li>
+
+              <li class="select-item">
+                <button data-select-item>Dashbords</button>
+              </li>
+
+              <li class="select-item">
+                <button data-select-item>Automation</button>
+              </li>
+
+                <li class="select-item">
+                <button data-select-item>FullStack</button>
+              </li>
+
+            </ul>
+
+          </div>
+
+          <ul class="project-list" id="projectList">
+            <li class="project-item active" data-filter-item="" data-category="ai models">
+        <a href="./ProjectViewr/ProjectViewr.html?data=data/Pro2.json" target="_blank">
+          <figure class="project-img">
+            <div class="project-item-icon-box">
+              <ion-icon name="eye-outline" role="img" class="md hydrated" aria-label="eye outline"></ion-icon>
+            </div>
+            <img src="./assets/ProImg/FaceRec.png" alt="Face Recognition" loading="lazy" id="LazyImages">
+          </figure>
+
+          <h3 class="project-title">Face Recognition</h3>
+          <p class="project-category">AI Models</p>
+        </a>
+      </li>
+            
+          </ul>
+
+        </section>
+
+      </article>
+
+
+
+
+
+      <!--
+        - #BLOG
+      -->
+
+      <article class="blog" data-page="certifications">
+
+        <header>
+          <h2 class="h2 article-title">Certificates</h2>
+        </header>
+
+        <section class="blog-posts">
+
+          <ul class="blog-posts-list" id ="Certificates">
+
+          </ul>
+
+        </section>
+
+      </article>
+
+
+
+
+
+
+    </div>
+
+  </main>
+
+
+<script>
+  
+fetch('./data/projects.json')
+    .then(response => response.json())
+    .then(projects => {
+        const projectList = document.getElementById('projectList');
+
+
+        projects.forEach(project => {
+            const li = document.createElement('li');
+            li.className = 'project-item active';
+            li.setAttribute('data-filter-item', '');
+            li.setAttribute('data-category', project.filter);
+
+
+            li.innerHTML = `
+        <a href="${project.details}" target="_blank">
+          <figure class="project-img">
+            <div class="project-item-icon-box">
+              <ion-icon name="eye-outline"></ion-icon>
+            </div>
+            <img src="${project.image}" style:"background-url:" alt="${project.title}" loading="lazy">
+          </figure>
+
+          <h3 class="project-title">${project.title}</h3>
+          <p class="project-category">${project.category}</p>
+        </a>
+      `;
+
+            projectList.appendChild(li);
+        });
+    })
+    .catch(error => console.error('Error loading projects:', error));
+
+</script>
+
+
+<script>
+fetch('./data/Certificates.json')
+  .then(response => response.json())
+  .then(Certificates => {
+    const CertificateList = document.getElementById('Certificates');
+   
+
+    Certificates.forEach(Certificate => {
+      const li = document.createElement('li');
+      li.className = "blog-post-item";
+     
+      
+      li.innerHTML = `
+              <a href="${Certificate.details}" target='_blank'>
+
+                <figure class="blog-banner-box" >
+                  <img src="${Certificate.image}"  alt="Image" loading="lazy">
+                </figure>
+
+                <div class="blog-content">
+
+                  <div class="blog-meta">
+                    <p class="blog-category">Certificate.category</p>
+
+                    <span class="dot"></span>
+
+                    <time datetime="2022-02-23">${Certificate.Time}</time>
+                  </div><h3 class="h3 blog-item-title">${Certificate.title}</h3>
+                  
+                  <p class="blog-text" >
+                    ${Certificate.Text}
+                  </p>
+
+                </div>
+
+              </a>
+            
+      `;
+
+      CertificateList.appendChild(li);
+    });
+  })
+  .catch(error => console.error('Error loading projects:', error));
+</script>
+
+
+
+
+  <!--
+    - custom js link
+  -->
+  <script src="./assets/js/script.js"></script>
+
+  <!--
+    - ionicon link
+  -->
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+
+
+</body>
+
+
+
+
+
+
 </html>