initial commit

LogicalAlpha7Programmer · Nov 1, 2023 · 40fe4f6 · 40fe4f6
1 parent d75f8a7
commit 40fe4f6
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 0 deletions.
diff --git a/072120-ToDoList-Blog.png b/072120-ToDoList-Blog.png
diff --git a/app.js b/app.js
diff --git a/background.png b/background.png
diff --git a/index.html b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
+  <link rel="stylesheet" href="style.css">
+
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  
+
+  <title>Abdulrahman Portfolio</title>
+</head>
+  <body style="height: 100vh;">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: black; border-bottom: thin white;">
+      <div class="container-fluid">
+        <a class="navbar-brand" style="color: rgb(255, 191, 0);" href="#">Abdulrahamn_Azhar</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarCollapse">
+          <ul class="navbar-nav me-auto mb-2 mb-md-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#projects">Projects</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <section style="background-image: url(background.png); height: 95%; border-radius: 25px; border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" class="m-4">
+      <div class="d-flex align-items-center justify-content-center" style="height: 100%;">
+        <div class="card text-white w-50 text-center" style="max-width: fit-content; background: transparent;">
+          <div class="row no-gutters">
+            <div class="col-md-14">
+              <div class="card-body fade-in-text" style="border-bottom-right-radius: 50%;">
+                <h2 class="card-title neonText-intro">Hi, my name is Abdulrahman Azhar!</h2>
+                <p class="card-text">Emerging Junior developer eager to contribute academic knowledge to hands-on role. Strong knowledge of emerging technologies and industry trends. Innovative and resourceful team player with expertise not just in one programming language but in various programming languages...</p>            
+                <!-- <small class="text-muted fade-in-text">Last updated 3 mins ago</small> -->
+                <a href="#" class="btn btn-outline-warning">Download my CV</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section>
+
+      <div class="card m-4" id="projects" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" data-aos="fade-in">
+        <h4 class="text-center m-3" style="color: orange;" >Projects</h4>
+      </div>
+      <!-- <hr class="ml-4 mr-4 rounded"> -->
+      <div class="card m-4 d-flex flex-row" style="background: transparent;">
+        <div class="card-body w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" data-aos="fade-right">
+          <h5 class="card-title" style="color: orange;">Contact Management App</h5>
+          <p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
+          <a href="#" class="btn btn-outline-warning">Go to Github</a>
+        </div>
+      </div>
+
+      <div class="card m-4 d-flex flex-row" style="background: transparent;">
+        <div class="card-body w-50 " data-aos="fade-down">
+          <img src="maxresdefault.webp" height="300px" alt="An image of a Project" >
+        </div>
+        <div class="card-body mb-3 w-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" data-aos="fade-left">
+          <h5 class="card-title" style="color: orange;">Todolist App</h5>
+          <p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
+          <a href="#" class="btn btn-outline-warning"">Go to Github</a>
+          <a href="#" class="btn btn-outline-danger">Watch Demo Video</a>
+        </div>
+      </div>
+
+      <div class="card m-4 d-flex flex-row" style="background: transparent;">
+        <div class="card-body mb-3 w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" data-aos="fade-right">
+          <h5 class="card-title" style="color: orange;">Amazon Transaction Automation </h5>
+          <p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
+          <small class="text-muted fade-in-text">Cannot be viewed</small>
+        </div>
+      </div>
+
+      <div class="card m-4 d-flex flex-row" style="background: transparent;">
+        <div class="card-body mb-3 w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);" data-aos="fade-left">
+          <h5 class="card-title" style="color: orange;">Order Processing App (In Progress)</h5>
+          <p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
+          <a href="#" class="btn btn-outline-warning"">Go to Github</a>
+        </div>
+      </div>
+
+    </section>
+    <section>
+      <div class="card m-4" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow:  0 0 7px rgb(255, 238, 0);">
+        <h4 class="text-center m-3" style="color: orange;">Skills</h4>
+      </div>
+    </section>
+
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init({
+        duration: 2000,
+        mirror: false,
+        anchorPlacement: 'top-bottom'
+        // offset: 200
+      });
+    </script>
+  </body>
+</html>
diff --git a/maxresdefault.webp b/maxresdefault.webp
diff --git a/style.css b/style.css
@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
+
+body{
+  /* background-image: url(wepik-export-202310011119307YTm.png); */
+  position:absolute;
+  background-color: black;
+  overflow-x: hidden;
+}
+
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+
+
+.fade-in-text {
+  animation: fadeIn 4s;
+  -webkit-animation: fadeIn 4s;
+  -moz-animation: fadeIn 4s;
+  -o-animation: fadeIn 4s;
+  -ms-animation: fadeIn 4s;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-moz-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-o-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-ms-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.neonText-intro {
+  color: orange;
+  text-shadow:
+      0 0 1px orange,
+      0 0 2px orange,
+
+      0 0 102px rgb(255, 196, 0),
+      0 0 151px rgb(255, 196, 0);
+}
+
+hr.rounded {
+  border-top: 8px solid orange;
+  border-radius: 5px;
+}
+img {
+  translate: 0 10%;
+  transition: 1000ms;
+}
+
+img:hover {
+  translate: 0 -10%;
+  transition: 1000ms;
+}