chore: 🔍 Improve lighthouse score and update docs (#5)

* chore: 🔍 Improve lighthouse score and update docs * chore: 🎨 format using 2 spaces
AnilSeervi · Mar 13, 2023 · 650cbbe · 650cbbe
1 parent 4d1385a
commit 650cbbe
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 39 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["glenn2223.live-sass", "ms-vscode.live-server"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "liveSassCompile.settings.formats": [
+    {
+      "format": "compressed",
+      "extensionName": ".css",
+      "savePath": "/css",
+      "savePathReplacementPairs": null
+    }
+  ],
+  "liveSassCompile.settings.includeItems": ["/style/**/*.scss"],
+  "liveSassCompile.settings.generateMap": false,
+  "liveSassCompile.settings.watchOnLaunch": true,
+  "liveSassCompile.settings.useNewCompiler": true
+}
diff --git a/README.md b/README.md
@@ -30,22 +30,7 @@ Here's a **Complete Guide** to walk you through the process of setting your own
 
 You'll need [VSCode](https://code.visualstudio.com/) and [Git](https://git-scm.com/) installed on your computer.
 
-You'll also need these two extensions [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) and [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) installed in your VSCode.
-
-Press <kbd>F1</kbd> and Search for _Open Settings(JSON)_ and paste the below code before the closing braces( `}` ).
-
-```json
-"liveSassCompile.settings.generateMap": false,
-"liveSassCompile.settings.formats": [
-    {
-      "format": "compressed",
-      "savePath": "/css",
-      "extensionName": ".css"
-    }
-  ],
-"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
-
-```
+You'll also need these two extensions [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) and [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) installed in your VSCode. You will be automatically promted to install these extensions once you open this project in VSCode.
 
 ---
 
@@ -66,13 +51,14 @@ $ git remote remove origin
 
 And delete the [`.github`](./.github) folder as you don't need it.
 
-Now Simply click on **Watch Sass** and **Go Live** in the Status Bar.
+Now Simply click on **Watch Sass** in the bottom status bar to watch all your `.scss` file chages and compile them to vanilla `.css`.
+And also open `index.html`, right click inside the file and select _Show Preview_ to start a preview at `http://127.0.0.1:3000/`.
 
 <h3 align="center">
 OR
 </h3>
 
-Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> or <kbd>F1</kbd> to Show Command Palette, Search for **Watch Sass** and turn it on. Also search for **Open With Live Server** and turn it on. Doing this will watch all your Sass files for changes and will open the website in your browser to preview live.
+Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> or <kbd>F1</kbd> to Show Command Palette, Search for **Live Sass: Watch Sass** and turn it on. Also search for **Live Preview: Start Server** and turn it on. Doing this will watch all your Sass files for changes and will spin up a live server for you at `http://127.0.0.1:3000/`.
 
 ---
 
@@ -235,7 +221,7 @@ Open [`index.html`](./index.html) and fill your information, there are 6 section
 ### Footer Section
 
 - Put your social media link on each `<a>` links.
-- If you have more social-media accounts, see [Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/) to put the corresponding additional social icon classNames.
+- If you have more social-media accounts, see [Font Awesome Icons](https://fontawesome.com/icons) to put the corresponding additional social icon classNames.
 - You can delete or add as many `<a>` links your want.
 
 ```html
@@ -244,19 +230,19 @@ Open [`index.html`](./index.html) and fill your information, there are 6 section
   ...
   <div class="social-links">
     <a href="#!" target="_blank">
-      <i class="fa fa-twitter"></i>
+      <i class="fa-brands fa-twitter"></i>
     </a>
     <a href="#!" target="_blank">
-      <i class="fa fa-instagram"></i>
+      <i class="fa-brands fa-instagram"></i>
     </a>
     <a href="#!" target="_blank">
-      <i class="fa fa-codepen"></i>
+      <i class="fa-brands fa-codepen"></i>
     </a>
     <a href="#!" target="_blank">
-      <i class="fa fa-linkedin"></i>
+      <i class="fa-brands fa-linkedin"></i>
     </a>
     <a href="#!" target="_blank">
-      <i class="fa fa-github"></i>
+      <i class="fa-brands fa-github"></i>
     </a>
   </div>
   ...

diff --git a/assets/profile.png b/assets/profile.png
diff --git a/assets/project.png b/assets/project.png
diff --git a/css/main.css b/css/main.css
diff --git a/index.html b/index.html
@@ -14,6 +14,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
 
     <!-- Title: add your Portfolio websites's title here -->
     <title>[Your name here] | Developer</title>
@@ -63,12 +65,18 @@
     />
 
     <!-- link tags -->
+    <link rel="preload" as="style" href="./css/main.css" />
     <link rel="stylesheet" href="./css/main.css" />
+
+    <!-- FontAwesome Icons link -->
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
     />
-    <script src="./javascript/scrollreveal.min.js"></script>
+    <script defer src="./javascript/scrollreveal.min.js"></script>
     <script
       defer
       type="text/javascript"
@@ -82,13 +90,13 @@
       src="https://www.googletagmanager.com/gtag/js?id=UA-122228201-4"
     ></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
+      window.dataLayer = window.dataLayer || []
       function gtag() {
-        dataLayer.push(arguments);
+        dataLayer.push(arguments)
       }
-      gtag("js", new Date());
+      gtag("js", new Date())
 
-      gtag("config", "UA-122228201-4");
+      gtag("config", "UA-122228201-4")
     </script>
     <!-- End of Google Analytics -->
   </head>
@@ -121,6 +129,8 @@ <h2 class="section-title">About Me</h2>
               class="img-fluid"
               src="./assets/profile.png"
               alt="Profile Image"
+              width="450"
+              height="350"
             />
           </div>
           <div class="about-wrapper__info">
@@ -182,6 +192,8 @@ <h3 class="project-wrapper__text-title">Project Title</h3>
                     src="./assets/project.png"
                     class="img-fluid"
                     alt="Project Image"
+                    width="1366"
+                    height="767"
                   />
                 </div>
               </a>
@@ -220,6 +232,8 @@ <h3 class="project-wrapper__text-title">Project Title</h3>
                     src="./assets/project.png"
                     class="img-fluid"
                     alt="Project Image"
+                    width="1366"
+                    height="767"
                   />
                 </div>
               </a>
@@ -258,6 +272,8 @@ <h3 class="project-wrapper__text-title">Project Title</h3>
                     src="./assets/project.png"
                     class="img-fluid"
                     alt="Project Image"
+                    width="1366"
+                    height="767"
                   />
                 </div>
               </a>
@@ -294,39 +310,39 @@ <h2 class="section-title">Contact</h2>
             rel="noopener noreferrer"
             aria-label="twitter"
           >
-            <i class="fa fa-twitter"></i>
+            <i class="fa-brands fa-twitter"></i>
           </a>
           <a
             href="#!"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="instagram"
           >
-            <i class="fa fa-instagram"></i>
+            <i class="fa-brands fa-instagram"></i>
           </a>
           <a
             href="#!"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="codepen"
           >
-            <i class="fa fa-codepen"></i>
+            <i class="fa-brands fa-codepen"></i>
           </a>
           <a
             href="#!"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="linkedin"
           >
-            <i class="fa fa-linkedin"></i>
+            <i class="fa-brands fa-linkedin"></i>
           </a>
           <a
             href="#!"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="github"
           >
-            <i class="fa fa-github"></i>
+            <i class="fa-brands fa-github"></i>
           </a>
         </div>
         <hr />
@@ -344,7 +360,7 @@ <h2 class="section-title">Contact</h2>
     <!-- END Footer Section -->
 
     <script>
-      document.getElementById("year").textContent = new Date().getFullYear();
+      document.getElementById("year").textContent = new Date().getFullYear()
     </script>
     <script src="./javascript/vanilla-tilt.min.js"></script>
     <script type="text/javascript" src="./javascript/valtilt.js"></script>

diff --git a/style/layout/_footer.scss b/style/layout/_footer.scss
@@ -3,10 +3,10 @@
   padding: 4.8rem 0;
   &__text {
     font-size: 1.3rem;
-    color: darken($white-color, 50%);
+    color: darken($white-color, 30%);
     a {
       font-size: 1.3rem;
-      color: darken($white-color, 50%);
+      color: darken($white-color, 25%);
       transition: all 0.2s ease-in-out;
       display: inline-block;
       &:hover,