Refactoring

README.md

@@ -0,0 +1,32 @@
+# Portfolio
+
+This repository is related to the course [[Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript](https://www.youtube.com/watch?v=xV7S8BhIeBo&t)] available on the freeCodeCamp's YouTube channel.
+
+## Description
+In this course, you will learn how to build a portfolio website using JavaScript, HTML, and CSS. This is a great project to improve you frontend development skills.
+
+✏️ MacLinz developed this course course. Check out his [channel](https://www.youtube.com/c/MacLinzUniversalChannel).
+
+## ⚠️ Important notice
+The current version of this repository can contain code which differs from the original code shown in the video. The code has been improved or customized by [Dyrits](https://github.com/Dyrits), adding semantic elements, and a more optimized JavaScript script, but the visual rendering of the portfolio remains globally the same.
+
+The original code is available [here](https://github.com/Maclinz/JS_CSS_PortfolioProject/tree/1f1c0205c0b3a8caa623c96402775974f39ab5cb).
+
+### Main differences from the original
+- Multiple scripts have been added to the code, including data objects that can be filled in order to automatically generate some elements.
+- The stylesheets have been divided in multiple partial files, each one containing a specific style for a specific section.
+- A lot of identifiers and class names have been modified.
+- The tiles in the portfolio and blog section have been modified, in order to have a fixed size.
+- The breakpoints for the media queries have been modified.
+- The sections are displayed differently with different titles, and are all centered on smaller screens.
+
+## Changelog
+
+### Last updates [06/05/2022-20/05/2022]
+The portfolio is now responsive.  
+It is now possible to add new articles for the blog section in the dedicated object in the `data/articles.js`, generating automatically the tiles.  
+It is now possible to add new projects for the portfolio section in the dedicated object in the `data/projects.js`, generating automatically the tiles.  
+It is now possible to add new skills for the about section in the dedicated object in the `data/skills.js`, generating automatically the progression bars.  
+
+### Update [06/05/2022]
+It is now possible to add new skills in the dedicated object in the `stastistics.js`, generating automatically new progression bars.  The label of the progression bars has been replaced by an icon.

scripts/blog.js

@@ -0,0 +1,28 @@
+import { articles } from "./data/articles.js";
+
+(function() {
+    const create = {
+        element: function(type, className) {
+            const element = document.createElement(type);
+            element.classList.add(className);
+            return element;
+        }
+    }
+
+    for (const article of articles) {
+        const item = create.element("article", "article");
+        const image = document.createElement("img");
+        image.src = `./images/blog/${article.image}`;
+        const text = create.element("div", "article-text");
+        const h4 = document.createElement("h4");
+        const link = document.createElement("a");
+        link.href = article.url;
+        link.innerHTML = article.title;
+        h4.append(link);
+        const paragraph = document.createElement("p");
+        paragraph.innerHTML = article.summary;
+        text.append(h4, paragraph);
+        item.append(image, text);
+        document.querySelector("#articles").append(item);
+    }
+})();

app.js → scripts/controls.js

@@ -1,13 +1,13 @@
 (function () {
     [...document.querySelectorAll(".control")].forEach(button => {
         button.addEventListener("click", function() {
-            document.querySelector(".active-btn").classList.remove("active-btn");
-            this.classList.add("active-btn");
+            document.querySelector(".active-button").classList.remove("active-button");
+            this.classList.add("active-button");
             document.querySelector(".active").classList.remove("active");
             document.getElementById(button.dataset.id).classList.add("active");
         })
     });
-    document.querySelector(".theme-btn").addEventListener("click", () => {
+    document.querySelector("#switch-mode").addEventListener("click", () => {
         document.body.classList.toggle("light-mode");
     })
 })();

scripts/data/articles.js

@@ -0,0 +1,46 @@
+const articles = [
+    {
+        title: "How to Create Your Own Website",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "port6.jpg",
+        url: "#"
+    },
+    {
+        title: "How to Become an Expert in Web Design",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "blog1.jpg",
+        url: "#"
+    },
+    {
+        title: "Become a Web Designer in 10 Days",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "blog2.jpg",
+        url: "#"
+    },
+    {
+        title: "Debbuging made easy with Web Inspector",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "blog3.jpg",
+        url: "#"
+    },
+    {
+        title: "Get started with Web Design and UI Design",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "port1.jpg",
+        url: "#"
+    },
+    {
+        title: "This is what you need to know about Web Design",
+        summary: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus voluptas, eos obcaecati recusandae amet?",
+        image: "port3.jpg",
+        url: "#"
+    },
+    /*
+    Objects can be added here. The title of the object is the name of the article.
+    The summary is the text that appears in the paragraph.
+    The image is the name of the image file.
+    The url is a link to the article.
+     */
+];
+
+export { articles };

scripts/data/projects.js

@@ -0,0 +1,72 @@
+const projects = [
+    {
+        name: "Project #1",
+        image: "port1.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #2",
+        image: "port2.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #3",
+        image: "port3.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #4",
+        image: "port4.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #5",
+        image: "port5.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #6",
+        image: "port6.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    {
+        name: "Project #7",
+        image: "port7.jpg",
+        icons: [
+            { url: "#", icon: "fab fa-github" },
+            { url: "#", icon: "fab fa-behance" },
+            { url: "#", icon: "fab fa-youtube" }
+        ]
+    },
+    /*
+    Objects can be added here. The name of the object is the name of the project.
+    The image is the name of the image file.
+    The icons are an array of objects. Each object has a url and an icon from the Font Awesome library.
+     */
+];
+
+export { projects };

scripts/data/skills.js

@@ -0,0 +1,15 @@
+const skills = {
+    "HTML5": "80%",
+    "CSS3": "95%",
+    "JavaScript": "75%",
+    "React": "75%",
+    "NodeJS": "87%",
+    "Python": "70%"
+    /*
+    Skills can be added here.
+    The image use for the skills are from the following website: https://devicon.dev/
+    Please, use the same naming as the website.
+    */
+};
+
+export { skills };

scripts/portfolio.js

@@ -0,0 +1,35 @@
+import { projects } from "./data/projects.js";
+
+(function() {
+    const create = {
+        element: function(type, className) {
+            const element = document.createElement(type);
+            element.classList.add(`portfolio-${className}`);
+            return element;
+        }
+    }
+
+    for (const project of projects) {
+        const item = create.element("article", "item");
+        const image = create.element("div", "item-image");
+        const img = document.createElement("img");
+        img.src = `./images/portfolio/${project.image}`;
+        image.append(img);
+        const hover = create.element("div", "item-hover");
+        const h3 = document.createElement("h3");
+        h3.innerHTML = project.name;
+        const icons = create.element("div", "item-hover-icons");
+        project.icons.forEach(icon => {
+            const a = document.createElement("a");
+            a.href = icon.url;
+            a.target = "_blank";
+            const i = document.createElement("i");
+            i.className = icon.icon;
+            a.append(i);
+            icons.appendChild(a);
+        })
+        hover.append(h3, icons);
+        item.append(image, hover);
+        document.querySelector("#portfolio-container").append(item);
+    }
+})();

scripts/statistics.js

@@ -0,0 +1,28 @@
+import { skills } from "./data/skills.js";
+
+(function() {
+    const create = {
+        element: function(type, className) {
+            const element = document.createElement(type);
+            element.classList.add(className);
+            return element;
+        }
+    }
+
+    for (const [label, progression] of Object.entries(skills)) {
+        const item = create.element("article", "skill");
+        const image = create.element("img", "skill-image");
+        image.src = `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${label.toLowerCase()}/${label.toLowerCase()}-original.svg`;
+        const container = create.element("div", "skill-container");
+        const text = create.element("p", "skill-container-text");
+        text.innerHTML = progression;
+        const indicator = create.element("div", "skill-container-indicator");
+        const span = document.createElement("span");
+        span.style.width = progression;
+        indicator.append(span);
+        container.append(text, indicator);
+        item.append(image, container);
+        document.querySelector("#statistics").append(item);
+    }
+})();
+