chore: Refactor CSS styles and remove unused code

schmelto · Nov 25, 2023 · f0c1ac0 · f0c1ac0
1 parent e48da45
commit f0c1ac0
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 147 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -115,19 +115,6 @@ a.nav-link:hover {
   font-size: 1rem;
 }
 
-.highlight-red {
-  color: #ef5350;
-}
-.highlight-orange {
-  color: rgba(253, 149, 90, 0.8);
-}
-.highlight-pink {
-  color: blueviolet;
-}
-.highlight-blue {
-  color: #6ac4ff;
-}
-
 .carousel {
   width: 100%;
   font-size: 4.5rem;
@@ -370,14 +357,6 @@ a.nav-link:hover {
   columns: 2;
 }
 
-@media (max-width: 768px) {
-  .flex-col-2 {
-    width: 100%;
-    height: auto;
-    columns: 1;
-  }
-}
-
 .flex-card {
   width: 100%;
   overflow: hidden;
@@ -421,12 +400,15 @@ a.nav-link:hover {
   }
 }
 
-#contact {
-  margin-bottom: 32px;
+.highlight-red {
+  color: #ef5350;
 }
-
-/* Remove box shadow of chat icon */
-.RecastApp .RecastAppExpander,
-.CaiApp .CaiAppExpander {
-  box-shadow: none !important;
+.highlight-orange {
+  color: rgba(253, 149, 90, 0.8);
+}
+.highlight-pink {
+  color: blueviolet;
+}
+.highlight-blue {
+  color: #6ac4ff;
 }
diff --git a/index.html b/index.html
@@ -19,10 +19,6 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="css/styles.css" />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
 
     <meta property="og:title" content="schmelto" />
     <meta
@@ -78,13 +74,6 @@
             >
               <a class="nav-link" href="#about">about</a>
             </li>
-            <li
-              class="nav-item"
-              data-toggle="collapse"
-              data-target=".navbar-collapse.show"
-            >
-              <a class="nav-link" href="#projects">projects</a>
-            </li>
             <li
               class="nav-item"
               data-toggle="collapse"
@@ -160,14 +149,6 @@ <h2>About</h2>
         </div>
       </div>
 
-      <div id="projects" class="row padding-top">
-        <h2>Projects</h2>
-      </div>
-
-      <div class="flex-col-2" id="githubprojects">
-        <!-- GitHub Projects from scripts.js goes here -->
-      </div>
-
       <div id="background" class="row padding-top">
         <h2>Background</h2>
       </div>
@@ -323,41 +304,6 @@ <h6 class="card-subtitle mb-2 text-muted">IHK</h6>
         </div>
       </div>
 
-      <h3>Tech-Stack</h3>
-
-      <div class="flex-col-2">
-        <div class="flex-card">
-          <pre class="text">
-<span class="highlight-red">let</span> languages = [
-	<span class="highlight-blue">'ABAP'</span>, 
-	<span class="highlight-blue">'HTML'</span>,
-	<span class="highlight-blue">'TypeScript'</span>,
-	<span class="highlight-blue">'CSS'</span>,
-	<span class="highlight-blue">'JavaScript'</span>,
-	<span class="highlight-blue">'Java'</span>,
-	<span class="highlight-blue">'PHP'</span>,
-	<span class="highlight-blue">'Python'</span>,
-	<span class="highlight-blue">'Dart'</span>,
-	<span class="highlight-blue">'C#'</span>]
-</pre>
-        </div>
-        <div class="flex-card">
-          <pre class="text">
-<span class="highlight-red">let</span> frameworks = [
-	<span class="highlight-blue">'Bootstrap'</span>, 
-	<span class="highlight-blue">'Angular'</span>,
-	<span class="highlight-blue">'Ionic'</span>,
-	<span class="highlight-blue">'Flutter'</span>,
-	<span class="highlight-blue">'SAP UI5'</span>]
-</pre>
-          <div class="flex-card">
-            <pre class="text">
-<span class="highlight-red">let</span> other = [<span class="highlight-blue">'git'</span>]
-</pre>
-          </div>
-        </div>
-      </div>
-
       <div class="row">
         <div class="col-6 col-md-4">
           <a
@@ -420,10 +366,6 @@ <h3>Tech-Stack</h3>
 
       <div class="center">
         <footer class="footer">
-          Made with &#10084; by
-          <a href="https://github.com/schmelto" target="_blank" rel="noopener"
-            >schmelto</a
-          ><br />
           Feel free to contribute on
           <a href="https://github.com/schmelto/Portfolio">GitHub</a>
           <span id="version"></span>
@@ -435,7 +377,7 @@ <h3>Tech-Stack</h3>
     </div>
 
     <script src="js/scripts.js"></script>
-    <script src="../js/version.js" type="module"></script>
+    <script src="/js/version.js" type="module"></script>
     <script
       src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
       integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

diff --git a/js/scripts.js b/js/scripts.js
@@ -81,48 +81,3 @@ function setColorSheme() {
   }
 }
 setColorSheme();
-
-// API
-var githubprojectsdomelement = document.getElementById('githubprojects');
-// using https://fonts.google.com/icons
-let githubprojects = [
-  {
-    name: 'schmelto/100-days-of-code',
-    icon: 'description',
-  },
-  {
-    name: 'schmelto/Portfolio',
-    icon: 'person',
-  },
-];
-
-githubprojects.forEach((project) => {
-  getproject(project.name, project.icon);
-});
-
-function getproject(project, icon) {
-  fetch(`https://api.github.com/repos/${project}`)
-    .then((response) => {
-      return response.json();
-    })
-    .then((project) => {
-      githubprojectsdomelement.innerHTML += createprojectcard(project, icon);
-    });
-}
-
-function createprojectcard(project, icon) {
-  project.description = project.description.replace(/:[^}]*:/, '');
-  let projectcard = `<div class="flex-card">
-       <a href="${project.html_url}" target="_blank" rel="noopener">
-         <div class="card">
-           <div class="card-body">
-             <h5 class="card-title"><span class="material-icons">
-                 ${icon}
-               </span> ${project.name}</h5>
-             <p class="card-text">${project.description}</p>
-           </div>
-         </div>
-       </a>
-     </div>`;
-  return projectcard;
-}
diff --git a/js/version.js b/js/version.js
@@ -4,8 +4,9 @@ function getVersionOfPortfolio() {
       return response.json();
     })
     .then((release) => {
-      document.getElementById('version').innerHTML =
-        `- <a href="${release.html_url}" target="_blank" rel="noopener">${release.tag_name}</a>`;
+      document.getElementById(
+        'version',
+      ).innerHTML = `- <a href="${release.html_url}" target="_blank" rel="noopener">${release.tag_name}</a>`;
     });
 }
 getVersionOfPortfolio();
diff --git a/package-lock.json b/package-lock.json