fix: fixing markup, fixing modules, fixing readme, feat: adding white…

…-space, console.log, saftyrel in links
Mateusz-Meler · Jul 21, 2020 · 5f80ee5 · 5f80ee5
1 parent 015ec3b
commit 5f80ee5
Show file tree

Hide file tree

Showing 14 changed files with 266 additions and 292 deletions.
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/service-worker.js b/public/service-worker.js
diff --git a/readme.md b/readme.md
@@ -4,9 +4,13 @@
 
 Summary of my programming course.
 
-## How to use it?
+## Tools
 
-Click on `Use this template` button to generate a new repository based on this starter kit. After that clone it to your computer, go to the project directory in console and type `npm install`.
+- WTF Webpack starterkit 
+- HTML5 + CSS3 + JS
+- Github API
+- CSS Grid, Flexbox
+- BEM 
 
 ## Available scripts
 

diff --git a/src/js/index.js b/src/js/index.js
@@ -1,19 +1,13 @@
 import "../scss/main.scss";
-
-// uncomment the lines below to enable PWA
-// import {registerSW} from './pwa.js';
-// registerSW();
-
-/* place your code below */
+console.log("Hello, I'm Mateusz - nice to meet you 😎");
 
 fetch("https://api.github.com/users/mateusz-meler/repos?sort=created")
   .then((resp) => resp.json())
   .then((resp) => {
     for (let repo of resp) {
       const { name, description, homepage, html_url } = repo;
       const myGithub = document.querySelector(".github--js");
-      const myTemplate = 
-      `<div class="github">
+      const myTemplate = `<div class="github">
   <div class="github__bar">
       <div class="github__circle"></div>
       <div class="github__circle"></div>
@@ -32,8 +26,8 @@ fetch("https://api.github.com/users/mateusz-meler/repos?sort=created")
     <ul class="date">
     <li class="date__name"> ${name}</li>
     <li class="date__description">${description}</li>
-    <li class="date__homepage--item"><a class="date__homepage" href="${homepage}">see here</a></li>
-    <li class="date__github--item"><a class="date__github" href="${html_url}">source code</a></li>
+    <li class="date__homepage--item"><a class="date__homepage" href="${homepage}" target="_blank"  rel="noopener noreferrer">see here</a></li>
+    <li class="date__github--item"><a class="date__github" href="${html_url}" target="_blank"  rel="noopener noreferrer">source code</a></li>
     </ul>
   </div>
   </div>

diff --git a/src/js/pwa.js b/src/js/pwa.js
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -19,8 +19,6 @@
       property="og:image"
       content="https://mateusz-meler.github.io/og.png"
     />
-    <!-- uncomment the line below to enable PWA  -->
-    <!-- <link rel="manifest" href="manifest.json" /> -->
   </head>
   <body>
     <main>
@@ -63,43 +61,93 @@ <h2 class="skills-section__header">My skills</h2>
             <p class="skills-section__emoji">💪</p>
             <h3 class="skills-article__header">Working knowledge</h3>
             <ul class="skills-article__list">
-              <li class="skills-article__list--item">Semantic HTML5</li>
-              <li class="skills-article__list--item">Flexbox</li>
-              <li class="skills-article__list--item">Markdown</li>
-              <li class="skills-article__list--item">JS: local storage</li>
-              <li class="skills-article__list--item">Figma</li>
-              <li class="skills-article__list--item">CSS grid</li>
-              <li class="skills-article__list--item">Forms</li>
-              <li class="skills-article__list--item">JS: DOM Manipulation</li>
-              <li class="skills-article__list--item">Webpack</li>
-              <li class="skills-article__list--item">BEM methodology</li>
-              <li class="skills-article__list--item">SASS</li>
+              <li class="skills-article__list skills-article__list--item">
+                Semantic HTML5
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                Flexbox
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                Markdown
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                JS: local storage
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                Figma
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                CSS grid
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                Forms
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                JS: DOM Manipulation
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                Webpack
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                BEM methodology
+              </li>
+              <li class="skills-article__list skills-article__list--item">
+                SASS
+              </li>
             </ul>
           </article>
           <article class="skills-article">
             <p class="skills-section__emoji">🤔</p>
             <h3 class="skills-article__header">Know something about</h3>
             <ul class="skills-article__list">
-              <li class="skills-article__list--other">JavaScript ES6</li>
-              <li class="skills-article__list--other">CSS animations</li>
-              <li class="skills-article__list--other">Working with API</li>
-              <li class="skills-article__list--other">NPM Scripts</li>
-              <li class="skills-article__list--other">Progressive web apps</li>
-              <li class="skills-article__list--other">Git</li>
-              <li class="skills-article__list--other">Kanban</li>
-              <li class="skills-article__list--other">Accessibility</li>
-              <li class="skills-article__list--other">Pull requests</li>
-              <li class="skills-article__list--other">Node JS</li>
+              <li class="skills-article__list skills-article__list--other">
+                JavaScript ES6
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                CSS animations
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Working with API
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                NPM Scripts
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Progressive web apps
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Git
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Kanban
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Accessibility
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Pull requests
+              </li>
+              <li class="skills-article__list skills-article__list--other">
+                Node JS
+              </li>
             </ul>
           </article>
           <article class="skills-article">
             <p class="skills-section__emoji">🎓</p>
             <h3 class="skills-article__header">Want to learn</h3>
             <ul class="skills-article__list">
-              <li class="skills-article__list--another">React JS</li>
-              <li class="skills-article__list--another">Node JS</li>
-              <li class="skills-article__list--another">Vue JS</li>
-              <li class="skills-article__list--another">Typecript</li>
+              <li class="skills-article__list skills-article__list--another">
+                React JS
+              </li>
+              <li class="skills-article__list skills-article__list--another">
+                Node JS
+              </li>
+              <li class="skills-article__list skills-article__list--another">
+                Vue JS
+              </li>
+              <li class="skills-article__list skills-article__list--another">
+                Typecript
+              </li>
             </ul>
           </article>
         </div>
@@ -125,6 +173,7 @@ <h2 class="contact-section__header">
               class="box__circle"
               href="https://github.com/mateusz-meler"
               target="_blank"
+              rel="noopener noreferrer"
             >
               <img
                 class="box__item"
@@ -135,6 +184,7 @@ <h2 class="contact-section__header">
               class="box__circle"
               href="https://www.instagram.com/melers93/"
               target="_blank"
+              rel="noopener noreferrer"
             >
               <img
                 class="box__item"
@@ -145,6 +195,7 @@ <h2 class="contact-section__header">
               class="box__circle"
               href="https://facebook.com/mateusz.meler"
               target="_blank"
+              rel="noopener noreferrer"
             >
               <img
                 class="box__item"