chore:add files

mahmoudalnkeeb · May 8, 2024 · d319bc0 · d319bc0
commit d319bc0
Show file tree

Hide file tree

Showing 4 changed files with 261 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# The-Repository
+
+Simple portfolio contains information about me and my socials
+
+## built with
+
+Nothing fancy just html, css and javascript.
+
+## todos
+
+- [ ] make the code better for future improvements !important.
+- [ ] show a selected list of repositories from my github using github api.
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mahmoud Alnakeeb - Backend Developer</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <canvas id="background"></canvas>
+    <main>
+      <h1>Mahmoud Alnakeeb</h1>
+      <span class="role">Backend Developer</span>
+      <p class="bio">
+        Starting my backend developer journey in 2020, I immersed myself in
+        JavaScript and Node.js, cultivating a strong foundation. Since then,
+        I've embraced continuous learning, completing web development courses
+        and engaging in diverse projects. Venturing into Rust in 2024 was a
+        pivotal decision, broadening my skill set and igniting new passions.
+        Now, I'm on the lookout for exciting opportunities in backend
+        development where I can apply my expertise and contribute to
+        cutting-edge projects. Eager to embark on the next chapter of my
+        professional journey, I'm ready to tackle challenges and make meaningful
+        contributions.
+      </p>
+      <ul class="socials">
+        <li class="in">
+          <a target="_blank" href="https://www.linkedin.com/in/mahmoud-alnakeeb/">
+            <i class="fa-brands fa-linkedin"></i>
+          </a>
+        </li>
+        <li class="github">
+          <a target="_blank" href="https://github.com/mahmoudalnkeeb">
+            <i class="fa-brands fa-square-github"></i>
+          </a>
+        </li>
+        <li class="mail">
+          <a target="_blank" href="mailto:[email protected]">
+            <i class="fa-solid fa-envelope-open-text"></i>
+          </a>
+        </li>
+        <li class="resume">
+          <a
+            href="https://docs.google.com/document/d/e/2PACX-1vSnLDXFRBODqU7dM_9OQVxKB2oWml_EEz0lbhQaKrDtNF43CnzufAWq3BbeMf2jl54F-utAnbD9heD3/pub"
+          >
+            <i class="fa-solid fa-file-alt"></i>
+          </a>
+        </li>
+      </ul>
+    </main>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,72 @@
+/**
+ * @type  {HTMLCanvasElement}
+ */
+const canvas = document.getElementById("background");
+const ctx = canvas.getContext("2d");
+
+canvas.width = innerWidth;
+canvas.height = innerHeight;
+
+document.addEventListener("resize", (e) => {
+  canvas.width = innerWidth;
+  canvas.height = innerHeight;
+});
+
+const mouse = {
+  x: null,
+  y: null,
+};
+
+addEventListener("mouseover", (e) => {
+  mouse.x = e.clientX;
+  mouse.y = e.clientY;
+});
+
+document.addEventListener("mousemove", (e) => {
+  mouse.x = e.clientX;
+  mouse.y = e.clientY;
+});
+
+class Cursor {
+  constructor(x, y) {
+    this.r = 30;
+    this.x = x;
+    this.y = y;
+    this.targetX = x;
+    this.targetY = y;
+    this.delay = 0.09;
+  }
+
+  draw() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
+    ctx.fillStyle = "#a29bfe";
+    ctx.fill();
+    ctx.closePath();
+  }
+
+  update() {
+    const dx = this.targetX - this.x;
+    const dy = this.targetY - this.y;
+    this.x += dx * this.delay;
+    this.y += dy * this.delay;
+  }
+
+  setTargetPosition(x, y) {
+    this.targetX = x;
+    this.targetY = y;
+  }
+}
+
+const cursor = new Cursor(mouse.x, mouse.y);
+
+function animate() {
+  requestAnimationFrame(animate);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  cursor.setTargetPosition(mouse.x, mouse.y);
+  cursor.update();
+  cursor.draw();
+}
+
+animate();
diff --git a/style.css b/style.css
@@ -0,0 +1,110 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Ubuntu Mono", monospace;
+  font-weight: 400;
+  font-style: normal;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  background-color: #ecf0f1;
+  color: #202c38;
+}
+
+main {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+p {
+  max-width: 120ch;
+  line-height: 160%;
+  letter-spacing: 1px;
+}
+
+ul {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.role {
+  color: #6c5ce7;
+  font-size: 1.3em;
+  width: fit-content;
+  position: relative;
+}
+.role::before {
+  content: "@";
+  position: absolute;
+  right: -25px;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #6c5ce7;
+  vertical-align: baseline;
+}
+.role::after {
+  content: "";
+  position: absolute;
+  right: -27px;
+  top: 51%;
+  transform: translate(-50%, -50%);
+  background-color: #6c5ce7;
+  width: 0.25rem;
+  height: 2rem;
+  animation: blink 1s infinite;
+}
+
+li a {
+  text-decoration: none;
+}
+li i {
+  font-size: 1.5em;
+}
+
+.socials .fa-brands.fa-linkedin {
+  color: #0077b5;
+}
+
+.socials .fa-brands.fa-square-github {
+  color: #181717;
+}
+
+.socials .fa-solid.fa-envelope-open-text {
+  color: #e17055;
+}
+.socials .fa-solid.fa-file-alt {
+  color: #00b894;
+}
+
+.socials li:hover i {
+  opacity: 0.7;
+}
+
+#background {
+  z-index: -1;
+  position: absolute;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: #6c5ce7;
+  }
+}