add projects, mobile fix

sjapanwala · Oct 30, 2024 · e8eec29 · e8eec29
1 parent e2bc293
commit e8eec29
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 92 deletions.
diff --git a/exp.html b/exp.html
@@ -9,9 +9,17 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="icon" href="elements/favicon-16x16.png" type="image/x-icon">
 </head>
+<nav>
+    <div class="nav-left">
+        <a href="#home">
+            <img src="elements/personal_image.JPG" alt="this would show saaim" class="profile-pic">
+        </a>
+        <span><a class ="nav-name" href="index.html">Saaim Japanwala&nbsp;&nbsp;🚀</a></span> 
+    </div>
+</nav>
 <body>
   <main>
-    <p class="warn" align="center">⚠️ This is Showing Because Navbar Failed To Load ⚠️<br>To Go Back To Homepage, Click The Profile Picture, or The Name</p>
+    <p class="warn" align="center">⚠️ This is Showing Because Navbar Failed To Load ⚠️<br>To Go Back To Homepage, Click The Profile Picture, or The Name</p><br><br>
     <section class="about-container">
       <div class="profile">
         <a href="index.html">
@@ -38,7 +46,7 @@ <h2>Education</h2>
               <ul>
                   <li>
                       <div class="item-container">
-                          <span><strong>Bachelors, Psychology, Computer Science and, Business</strong></span>
+                          <span><strong>Bachelors In Psychology & Computer Science</strong></span>
                           <span class="date">University of Alberta&nbsp;&nbsp;&nbsp;<strong>2023 - Present</strong></span>
                       </div>
                   </li>
@@ -184,6 +192,39 @@ <h2>Awards and Accolades</h2>
           </section>
       </div>
 
+      <div class="about-details">
+        <div class="about-details">
+          <section class="skills">
+              <h2>Projects</h2>
+              <ul>
+                  <li>
+                      <div class="item-container">
+                          <span><strong>Pyrun | The Better Python Runner</strong></span>
+                          <a href="https://sjapanwala.github.io/pyrun/" target="_blank" rel="noopener noreferrer">
+                          <span class="date">🔗&nbsp;&nbsp;&nbsp;<strong>2024</strong></span>
+                          </a>
+                      </div>
+                  </li>
+                  <li>
+                      <div class="item-container">
+                          <span><strong>EmployMe | Get Tailor Made Jobs At Your Fingertips</strong></span>
+                          <a href="https://sjapanwala.github.io/employme/" target="_blank" rel="noopener noreferrer">
+                          <span class="date">🔗&nbsp;&nbsp;&nbsp;<strong>2024</strong></span>
+                          </a>
+                      </div>
+                  </li>
+                  <li>
+                      <div class="item-container">
+                          <span><strong>Audiofy | Free Online Audio Player</strong></span>
+                          <a href="https://sjapanwala.github.io/audiofy.github.io/" target="_blank" rel="noopener noreferrer">
+                          <span class="date">🔗&nbsp;&nbsp;&nbsp;<strong>2024</strong></span>
+                          </a>
+                      </div>
+                  </li>
+              </ul>
+          </section>
+      </div>
+
       <div class="about-details">
         <div class="about-details">
           <section class="skills">

diff --git a/index.html b/index.html
@@ -10,6 +10,16 @@
     <link rel="icon" href="elements/favicon-16x16.png" type="image/x-icon">
 </head>
 <body>
+    <script>
+    window.onload = function () {
+        const redirectWidth = 768;
+        const mobilePageUrl = "exp.html";
+
+        if (window.innerWidth < redirectWidth) {
+            window.location.href = mobilePageUrl;
+        }
+    };
+    </script>
     <nav>
         <div class="nav-left">
             <a href="#home">
@@ -57,7 +67,7 @@ <h1 class="title">
                 <div class="about-text">
                     <p class="about-blurb">
                         Hello! I’m Saaim, currently a second-year student at <strong><br>The University of Alberta.</strong><br><br>
-                        My passion for programming is always growing, and I’m eager to learn more about it! When im not building projects, I enjoy playing video games and trying out different foods. I also love learning new things. Right now im eager to master ReactJS.<br><br> <strong>Connect With Me By Clicking These Cool Icons!</strong>
+                        My passion for programming is always growing, and I’m eager to learn more about it! When im not building projects, I enjoy playing video games and trying out different foods. I also love learning new things. Right now im eager to master ReactJS.<br><br>
                         <!--these icons are provided by icons8, i have to say it because they asked nicely on thier website-->
                     </p>
                     <div class="social-media">
@@ -90,15 +100,15 @@ <h1 class="title">
         <h2>Projects</h2>
     <div class="projects-container">
         <div class="project-card">
-            <img src="projects/audiofy.png" alt="Audiofy, Web Audio Player" class="project-image">
+            <img src="projects/audiofy.png" alt="Audiofy" class="project-image">
             <div class="project-info">
-                <h3>Audiofy, Web Audio Player<br><br></h3>
+                <h3>Audiofy<br><br></h3>
                 <div class="tags">
                     <span class="tag">HTML</span>
                     <span class="tag">CSS</span>
                     <span class="tag">JavaScript</span>
                 </div>
-                <p>Audiofy, a webplayer built in mind for people who want to use Youtube for music, but dont want the annoying features it comes with. With a plain UI, a queue, and many more features!
+                <p>Audiofy, a webplayer built in mind for people who want to use Youtube for music, but dont want the annoying features it comes with. a queue, and many more features!
                 </p>
                 <a href="https://sjapanwala.github.io/audiofy.github.io/" target="_blank" class="project-link">Goto Site</a>
                 <a href="https://github.com/sjapanwala/audiofy.github.io" target="_blank" class="project-link">View Repository</a>
@@ -123,7 +133,7 @@ <h3>HiveBuzz, Blogs And News<br><br></h3>
         <div class="project-card">
             <img src="projects/pyrunweb.png" alt="Pyrun, The Better Python Addon" class="project-image">
             <div class="project-info">
-                <h3>Pyrun, The Python Addon<br><br></h3>
+                <h3>Pyrun<br><br></h3>
                 <div class="tags">
                     <span class="tag">Python3</span>
                     <span class="tag">Shell Script</span>
@@ -133,6 +143,42 @@ <h3>Pyrun, The Python Addon<br><br></h3>
                 <a href="https://github.com/sjapanwala/pyrun" target="_blank" class="project-link">View Repository</a>
             </div>
         </div>
+        <div class="project-card">
+            <img src="projects/netwise.png" alt="netwise" class="project-image">
+            <div class="project-info">
+                <h3>Netwise<br><br></h3>
+                <div class="tags">
+                    <span class="tag">Batch</span>
+                    <span class="tag">Networking</span>
+                </div>
+                <p>A tool with a focus on Cybersecurity, and Networking. Fetching data from servers and analyzing it. With various different features</p>
+                <a href="https://github.com/sjapanwala/netwise" target="_blank" class="project-link">View Repository</a>
+            </div>
+        </div>
+        <div class="project-card">
+            <img src="projects/repixel2.png" alt="repixel" class="project-image">
+            <div class="project-info">
+                <h3>Repixel<br><br></h3>
+                <div class="tags">
+                    <span class="tag">Python3</span>
+                    <span class="tag">Pillow</span>
+                </div>
+                <p>Using the Pillow library, creating pixelated images to appear in the terminal using ANSI colour codes</p>
+                <a href="https://github.com/sjapanwala/repixel" target="_blank" class="project-link">View Repository</a>
+            </div>
+        </div>
+        <div class="project-card">
+            <img src="projects/gfetch.png" alt="gfetch" class="project-image">
+            <div class="project-info">
+                <h3>gfetch<br><br></h3>
+                <div class="tags">
+                    <span class="tag">Python3</span>
+                    <span class="tag">Repixel</span>
+                </div>
+                <p>Using Repixel, created a <i>Neofetch</i> inspirted terminal tool, that displayes pixelated images of your operating system, alongside with other useful information</p> 
+                <a href="https://github.com/sjapanwala/gfetch" target="_blank" class="project-link">View Repository</a>
+            </div>
+        </div>
         <!--<div class="project-card">
             <img src="projects/missing.jpg" alt="Dir Todo List" class="project-image">
             <div class="project-info">
@@ -168,7 +214,6 @@ <h2>Technical Skills</h2>
                 <h3>Front End Development</h3>
                 <div class="bubble">HTML</div>
                 <div class="bubble">CSS</div>
-                <div class="bubble">JavaScript</div>
                 <div class="bubble">React</div>
                 <div class="bubble">Swift</div>
               </div>
@@ -180,6 +225,7 @@ <h3>Back End Development</h3>
                 <div class="bubble">Node.js</div>
                 <div class="bubble">Python3</div>
                 <div class="bubble">C</div>
+                <div class="bubble">JavaScript</div>
                 <div class="bubble">Rust</div>
                 <div class="bubble">Batch Scripting</div>
                 <div class="bubble">Powershell Scripting</div>
@@ -207,7 +253,6 @@ <h3>Data Science</h3>
                 <div class="bubble">Pandas</div>
                 <div class="bubble">R</div>
                 <div class="bubble">Microsoft Excel</div>
-                <div class="bubble">Matplotlib</div>
                 <div class="bubble">CSV</div>
               </div>
 

diff --git a/projects/gfetch.png b/projects/gfetch.png
diff --git a/projects/netwise.png b/projects/netwise.png
diff --git a/projects/repixel.png b/projects/repixel.png
diff --git a/projects/repixel2.png b/projects/repixel2.png
diff --git a/scripts/resume.css b/scripts/resume.css
@@ -6,6 +6,80 @@ body {
   background-color: #1d232a; /* Light background */
 }
 
+/* Navigation */
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 15px 30px; 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #222831; 
+  /*rgb(48, 71, 94)*/
+  transition: background-color 0.5s ease, opacity 0.5s ease;
+  z-index: 1000;
+  height: 80px; 
+}
+/* nav bar css */
+.nav-left {
+  display: flex;
+  align-items: center;
+}
+
+.profile-pic {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px; 
+}
+
+.nav-name {
+  color: #DDDDDD;
+  font-size: 22px;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+/* Right side (Links) */
+.nav-links {
+  list-style: none;
+  display: flex;
+  margin: 0;
+}
+
+.nav-links li {
+  margin-left: 30px;
+}
+
+.nav-links li {
+  list-style: none;
+  display: inline-block;
+  margin-right: 20px;
+}
+
+.nav-links li a {
+  color: #DDDDDD;
+  text-decoration: none;
+  font-size: 18px;
+  position: relative; /* Needed for hover effects */
+  transition: color 0.3s ease;
+}
+
+/* Hover text color */
+.nav-links li a:hover {
+  color: #F05454;
+}
+
+/* Emoji icons with ::before */
+.nav-links li a::before {
+  content: ""; /* Default emoji */
+  margin-right: 8px; /* Spacing between emoji and text */
+  font-size: 20px;
+  transition: opacity 0.3s ease; /* Smooth transition */
+}
+
 
 
 /* Resume Section */