diff --git a/README.md b/README.md
new file mode 100644
index 00000000..83e79857
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/img/blog1.jpg b/images/blog/blog1.jpg
similarity index 100%
rename from img/blog1.jpg
rename to images/blog/blog1.jpg
diff --git a/img/blog2.jpg b/images/blog/blog2.jpg
similarity index 100%
rename from img/blog2.jpg
rename to images/blog/blog2.jpg
diff --git a/img/blog3.jpg b/images/blog/blog3.jpg
similarity index 100%
rename from img/blog3.jpg
rename to images/blog/blog3.jpg
diff --git a/img/port1.jpg b/images/blog/port1.jpg
similarity index 100%
rename from img/port1.jpg
rename to images/blog/port1.jpg
diff --git a/img/port3.jpg b/images/blog/port3.jpg
similarity index 100%
rename from img/port3.jpg
rename to images/blog/port3.jpg
diff --git a/img/port6.jpg b/images/blog/port6.jpg
similarity index 100%
rename from img/port6.jpg
rename to images/blog/port6.jpg
diff --git a/img/hero.png b/images/hero.png
similarity index 100%
rename from img/hero.png
rename to images/hero.png
diff --git a/images/portfolio/port1.jpg b/images/portfolio/port1.jpg
new file mode 100644
index 00000000..b19d9619
Binary files /dev/null and b/images/portfolio/port1.jpg differ
diff --git a/img/port2.jpg b/images/portfolio/port2.jpg
similarity index 100%
rename from img/port2.jpg
rename to images/portfolio/port2.jpg
diff --git a/images/portfolio/port3.jpg b/images/portfolio/port3.jpg
new file mode 100644
index 00000000..e7ff37eb
Binary files /dev/null and b/images/portfolio/port3.jpg differ
diff --git a/img/port4.jpg b/images/portfolio/port4.jpg
similarity index 100%
rename from img/port4.jpg
rename to images/portfolio/port4.jpg
diff --git a/img/port5.jpg b/images/portfolio/port5.jpg
similarity index 100%
rename from img/port5.jpg
rename to images/portfolio/port5.jpg
diff --git a/images/portfolio/port6.jpg b/images/portfolio/port6.jpg
new file mode 100644
index 00000000..f5888fc0
Binary files /dev/null and b/images/portfolio/port6.jpg differ
diff --git a/img/port7.jpg b/images/portfolio/port7.jpg
similarity index 100%
rename from img/port7.jpg
rename to images/portfolio/port7.jpg
diff --git a/index.html b/index.html
index b3b2136c..e7342de3 100644
--- a/index.html
+++ b/index.html
@@ -5,559 +5,253 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portfolio</title>
-    <link rel="stylesheet" href="styles/styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="stylesheets/index.min.css">
+    <script src="scripts/controls.js" defer></script>
+    <script src="scripts/statistics.js" type="module" defer></script>
+    <script src="scripts/portfolio.js" type="module" defer></script>
+    <script src="./scripts/blog.js" type="module" defer></script>
 </head>
 <body class="main-content">
-    <header class="container header active" id="home">
-        <div class="header-content">
-            <div class="left-header">
-                <div class="h-shape"></div>
-                <div class="image">
-                    <img src="img/hero.png" alt="">
+    <header class="container active" id="home">
+        <section id="header-content">
+            <article id="header-content-left">
+                <div id="header-content-left-shape"></div>
+                <div id="header-content-left-image">
+                    <img src="images/hero.png" alt="A photography of myself~">
                 </div>
-            </div>
-            <div class="right-header">
-                <h1 class="name">
-                    Hi, I'm <span>Solano Milan Diaz.</span>
-                    A Web Developer.
-                </h1>
+            </article>
+            <article id="header-content-right">
+                <h1>Hi, I'm <span>Solano Milan Diaz</span>,<br> a Web Developer.</h1>
                 <p>
-                    I'm a Web Developer, I love to create beautiful and functional websites.
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis sed aut!
+                    I'm a Web Developer, I love to create beautiful and functional websites. <br>
+                    [This part can be filled with additional information.]
                 </p>
-                <div class="btn-con">
-                    <a href="" class="main-btn">
-                        <span class="btn-text">Download CV</span>
-                        <span class="btn-icon"><i class="fas fa-download"></i></span>
-                    </a>
+                <div class="cv">
+                    <a href="#" class="cv-link" target="_blank"><span class="cv-link-text">Download CV</span><span class="cv-link-icon"><i class="fas fa-download"></i></span></a>
                 </div>
-            </div>
-        </div>
+            </article>
+        </section>
     </header>
     <main>
         <section class="container about" id="about">
             <div class="main-title">
-                <h2>About <span>me</span><span class="bg-text">my stats</span></h2>
+                <h2>About <span>me</span><span class="background-text">My stats</span></h2>
             </div>
-            <div class="about-container">
-                <div class="left-about">
-                    <h4>Information About me</h4>
+            <div id="about-header">
+                <article id="about-header-left">
+                    <h4>Information about me</h4>
                     <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-                        Eveniet labore nihil obcaecati consequatur. Debitis error doloremque, 
-                        vero eos vel nemo eius voluptatem dicta tenetur modi. <br /> <br /> La musica
-                        delectus dolore fugiat exercitationem a, 
-                        ipsum quidem quo enim natus accusamus labore dolores nam. Unde.
-                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
-                        Harum non necessitatibus deleniti eum soluta.
+                        [This part will be filled with information.]
+                        <br><br>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt id in natus nihil rem rerum.
+                        <br><br>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt, exercitationem illo quae quis rerum?
                     </p>
-                    <div class="btn-con">
-                        <a href="#" class="main-btn">
-                            <span class="btn-text">Download CV</span>
-                            <span class="btn-icon"><i class="fas fa-download"></i></span>
-                        </a>
-                    </div>
-                </div>
-                <div class="right-about">
-                    <div class="about-item">
-                        <div class="abt-text">
-                            <p class="large-text">650+</p>
-                            <p class="small-text">Projects <br /> Completed</p>
+                    <div class="cv">
+                        <a href="#" class="cv-link" target="_blank"><span class="cv-link-text">Download CV</span><span class="cv-link-icon"><i class="fas fa-download"></i></span></a>
+                    </div>
+                </article>
+                <article id="about-header-right">
+                    <div class="header-item">
+                        <div class="header-item-text">
+                            <p class="header-item-text-large">650+</p>
+                            <p class="header-item-text-small">Projects completed</p>
                         </div>
                     </div>
-                    <div class="about-item">
-                        <div class="abt-text">
-                            <p class="large-text">10+</p>
-                            <p class="small-text">Years of <br /> experience</p>
+                    <div class="header-item">
+                        <div class="header-item-text">
+                            <p class="header-item-text-large">10+</p>
+                            <p class="header-item-text-small">Years of experience</p>
                         </div>
                     </div>
-                    <div class="about-item">
-                        <div class="abt-text">
-                            <p class="large-text">300+</p>
-                            <p class="small-text">Happy <br /> Clients</p>
+                    <div class="header-item">
+                        <div class="header-item-text">
+                            <p class="header-item-text-large">300+</p>
+                            <p class="header-item-text-small">Happy clients</p>
                         </div>
                     </div>
-                    <div class="about-item">
-                        <div class="abt-text">
-                            <p class="large-text">400+</p>
-                            <p class="small-text">Customer <br /> reviews</p>
+                    <div class="header-item">
+                        <div class="header-item-text">
+                            <p class="header-item-text-large">400+</p>
+                            <p class="header-item-text-small">Customers reviews</p>
                         </div>
                     </div>
-                </div>
+                </article>
             </div>
-            <div class="about-stats">
-                <h4 class="stat-title">My Skills</h4>
-                <div class="progress-bars">
-                    <div class="progress-bar">
-                        <p class="prog-title">html5</p>
-                        <div class="progress-con">
-                            <p class="prog-text">80%</p>
-                            <div class="progress">
-                                <span class="html"></span>
-                            </div>
+            <div id="about-statistics">
+                <h4 class="about-title">My Skills</h4>
+                <div id="statistics"></div>
+            </div>
+            <div id="about-timeline">
+                <h4 class="about-title">My Timeline</h4>
+                <div id="timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2010 - present</p>
+                        <h5>Web Developer<span> - Vircrosoft</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
-                    <div class="progress-bar">
-                        <p class="prog-title">css3</p>
-                        <div class="progress-con">
-                            <p class="prog-text">95%</p>
-                            <div class="progress">
-                                <span class="css"></span>
-                            </div>
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2008 - 2011</p>
+                        <h5>Software Engineer<span> - Boogle, Inc.</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
-                    <div class="progress-bar">
-                        <p class="prog-title">javascript</p>
-                        <div class="progress-con">
-                            <p class="prog-text">75%</p>
-                            <div class="progress">
-                                <span class="js"></span>
-                            </div>
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2016 - 2017</p>
+                        <h5>C++ Programmer<span> - Slime Tech</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
-                    <div class="progress-bar">
-                        <p class="prog-title">ReactJS</p>
-                        <div class="progress-con">
-                            <p class="prog-text">75%</p>
-                            <div class="progress">
-                                <span class="react"></span>
-                            </div>
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2009 - 2013</p>
+                        <h5>Business Degree<span> - Sussex University</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
-                    <div class="progress-bar">
-                        <p class="prog-title">NodeJS</p>
-                        <div class="progress-con">
-                            <p class="prog-text">87%</p>
-                            <div class="progress">
-                                <span class="node"></span>
-                            </div>
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2013 - 2016</p>
+                        <h5>Computer Science Degree<span> - Brookes University</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
-                    <div class="progress-bar">
-                        <p class="prog-title">Python</p>
-                        <div class="progress-con">
-                            <p class="prog-text">70%</p>
-                            <div class="progress">
-                                <span class="python"></span>
-                            </div>
+                    <div class="timeline-item">
+                        <div class="timeline-item-icon">
+                            <i class="fas fa-briefcase"></i>
                         </div>
+                        <p class="timeline-item-duration">2017 - present</p>
+                        <h5>3d Animation<span> - Brighton University</span></h5>
+                        <p class="timeline-item-content">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
+                        </p>
                     </div>
                 </div>
             </div>
-            <h4 class="stat-title">My Timeline</h4>
-            <div class="timeline">
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2010 - present</p>
-                    <h5>Web Developer<span> - Vircrosoft</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2008 - 2011</p>
-                    <h5>Software Engineer<span> - Boogle, Inc.</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2016 - 2017</p>
-                    <h5>C++ Programmer<span> - Slime Tech</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2009 - 2013</p>
-                    <h5>Business Degree<span> - Sussex University</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2013 - 2016</p>
-                    <h5>Computer Science Degree<span> - Brookes University</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-                <div class="timeline-item">
-                    <div class="tl-icon">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <p class="tl-duration">2017 - present</p>
-                    <h5>3d Animation<span> - Brighton University</span></h5>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
-                    </p>
-                </div>
-            </div>
         </section>
         <section class="container" id="portfolio">
             <div class="main-title">
-                <h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
-            </div>
-            <p class="port-text">
-                Here is some of my work that I've done in various programming languages.
-            </p>
-            <div class="portfolios">
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port1.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port2.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port3.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port4.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port5.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port2.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="portfolio-item">
-                    <div class="image">
-                        <img src="img/port7.jpg" alt="">
-                    </div>
-                    <div class="hover-items">
-                        <h3>Project Source</h3>
-                        <div class="icons">
-                            <a href="#" class="icon">
-                                <i class="fab fa-github"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-behance"></i>
-                            </a>
-                            <a href="#" class="icon">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+                <h2>My <span>Portfolio</span><span class="background-text">My Work</span></h2>
             </div>
+            <p id="portfolio-subtitle">Here is a sample of minor project that I've done in various programming languages.</p>
+            <div id="portfolio-container"></div>
         </section>
         <section class="container" id="blogs">
             <div class="blogs-content">
                 <div class="main-title">
-                    <h2>My <span>Blogs</span><span class="bg-text">My Blogs</span></h2>
-                </div>
-                <div class="blogs">
-                    <div class="blog">
-                        <img src="img/port6.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                How to Create Your Own Website
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
-                    <div class="blog">
-                        <img src="img/blog1.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                How to Become an Expert in Web Design
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
-                    <div class="blog">
-                        <img src="img/blog2.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                Become a Web Designer in 10 Days
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
-                    <div class="blog">
-                        <img src="img/blog3.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                Debbuging made easy with Web Inspector
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
-                    <div class="blog">
-                        <img src="img/port1.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                Get started with Web Design and UI Design
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
-                    <div class="blog">
-                        <img src="img/port3.jpg" alt="">
-                        <div class="blog-text">
-                            <h4>
-                                This is what you need to know about Web Design
-                            </h4>
-                            <p>
-                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
-                                Doloribus natus voluptas, eos obcaecati recusandae amet?
-                            </p>
-                        </div>
-                    </div>
+                    <h2>My <span>Articles</span><span class="background-text ">My Blog</span></h2>
                 </div>
+                <div id="articles"></div>
             </div>
         </section>
         <section class="container contact" id="contact">
-            <div class="contact-container">
-                <div class="main-title">
-                    <h2>Contact <span>Me</span><span class="bg-text">Contact</span></h2>
-                </div>
-                <div class="contact-content-con">
-                    <div class="left-contact">
-                        <h4>Contact me here</h4>
-                        <p>
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-                            In, laborum numquam? Quam excepturi perspiciatis quas quasi.
-                        </p>
-                        <div class="contact-info">
-                            <div class="contact-item">
-                                <div class="icon">
-                                    <i class="fas fa-map-marker-alt"></i>
-                                    <span>Location</span>
-                                </div>
-                                <p>
-                                    : London, united Kingdom
-                                </p>
-                            </div>
-                            <div class="contact-item">
-                                <div class="icon">
-                                    <i class="fas fa-envelope"></i>
-                                    <span>Email</span>
-                                </div>
-                                <p>
-                                    <span>: maclinzuniversal@gmail.com</span>
-                                </p>
+            <div class="main-title">
+                <h2>My <span>Coordinates</span><span class="background-text">Contact</span></h2>
+            </div>
+            <div id="contact-content">
+                <div id="contact-content-left">
+                    <h4>Contact me here</h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, veritatis.</p>
+                    <div id="contact-content-left-information">
+                        <div class="contact-item">
+                            <div class="contact-item-icon">
+                                <p><i class="fas fa-map-marker-alt"></i> <span>Location:</span></p>
                             </div>
-                            <div class="contact-item">
-                                <div class="icon">
-                                    <i class="fas fa-user-graduate"></i>
-                                    <span>Education</span>
-                                </div>
-                                <p>
-                                    <span>: Sussex University, East Sussex</span>
-                                </p>
+                            <p>London, united Kingdom</p>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-item-icon">
+                                <p><i class="fas fa-envelope"></i> <span>Email:</span></p>
                             </div>
-                            <div class="contact-item">
-                                <div class="icon">
-                                    <i class="fas fa-user-graduate"></i>
-                                    <span>Mobile Number</span>
-                                </div>
-                                <p>
-                                    <span>: 07522670617</span>
-                                </p>
+                            <p>maclinzuniversal@gmail.com</p>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-item-icon">
+                                <p><i class="fas fa-user-graduate"></i> <span>Education:</span></p>
                             </div>
-                            <div class="contact-item">
-                                <div class="icon">
-                                    <i class="fas fa-globe-africa"></i>
-                                    <span>Languages</span>
-                                </div>
-                                <p>
-                                    <span>: Afrikaans, English, Spanish</span>
-                                </p>
+                            <p>Sussex University, East Sussex</p>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-item-icon">
+                                <p><i class="fa-solid fa-mobile"></i> <span>Phone number:</span></p>
                             </div>
+                            <p>07522670617</p>
                         </div>
-                        <div class="contact-icons">
-                            <div class="contact-icon">
-                                <a href="www.facebook.com" target="_blank">
-                                    <i class="fab fa-facebook-f"></i>
-                                </a>
-                                <a href="#" target="_blank">
-                                    <i class="fab fa-twitter"></i>
-                                </a>
-                                <a href="#" target="_blank">
-                                    <i class="fab fa-github"></i>
-                                </a>
-                                <a href="#" target="_blank">
-                                    <i class="fab fa-youtube"></i>
-                                </a>
+                        <div class="contact-item">
+                            <div class="contact-item-icon">
+                                <p><i class="fa-solid fa-language"></i> <span>Languages:</span></p>
                             </div>
+                            <p>Afrikaans, English, Spanish</p>
                         </div>
                     </div>
-                    <div class="right-contact">
-                        <form action="" class="contact-form">
-                            <div class="input-control i-c-2">
-                                <input type="text" required placeholder="YOUR NAME">
-                                <input type="email" required placeholder="YOUR EMAIL">
-                            </div>
-                            <div class="input-control">
-                                <input type="text" required placeholder="ENTER SUBJECT">
-                            </div>
-                            <div class="input-control">
-                                <textarea name="" id="" cols="15" rows="8" placeholder="Message Here..."></textarea>
-                            </div>
-                            <div class="submit-btn">
-                                <a href="#" class="main-btn">
-                                    <span class="btn-text">Download CV</span>
-                                    <span class="btn-icon"><i class="fas fa-download"></i></span>
-                                </a>
-                            </div>
-                        </form>
+                    <div id="contact-content-left-social">
+                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
+                        <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                     </div>
                 </div>
+                <div id="contact-content-right">
+                    <form action="" id="contact-content-right-form">
+                        <div class="input-control input-control-flex">
+                            <label>
+                                <input type="text" required placeholder="YOUR NAME~">
+                            </label>
+                            <label>
+                                <input type="email" required placeholder="YOUR EMAIL~">
+                            </label>
+                        </div>
+                        <div class="input-control">
+                            <label>
+                                <input type="text" required placeholder="ENTER SUBJECT~">
+                            </label>
+                        </div>
+                        <div class="input-control">
+                            <label>
+                                <textarea  cols="15" rows="8" placeholder="YOUR MESSAGE~"></textarea>
+                            </label>
+                        </div>
+                        <div class="cv">
+                            <a href="#" class="cv-link" target="_blank"><span class="cv-link-text">Download CV</span><span class="cv-link-icon"><i class="fas fa-download"></i></span></a>
+                        </div>
+                    </form>
+                </div>
             </div>
         </section>
     </main>
 
-    <div class="controls">
-        <div class="control active-btn" data-id="home" >
-            <i class="fas fa-home"></i>
-        </div>
-        <div class="control" data-id="about">
-            <i class="fas fa-user"></i>
-        </div>
-        <div class="control" data-id="portfolio">
-            <i class="fas fa-briefcase"></i>
-        </div>
-        <div class="control" data-id="blogs">
-            <i class="far fa-newspaper"></i>
-        </div>
-        <div class="control" data-id="contact">
-            <i class="fas fa-envelope-open"></i>
-        </div>
-    </div>
-    <div class="theme-btn">
-        <i class="fas fa-adjust"></i>
-    </div>
-    <script src="app.js"></script>
+    <aside id="controls">
+        <div class="control active-button" data-id="home"><i class="fas fa-home"></i></div>
+        <div class="control" data-id="about"><i class="fas fa-user"></i></div>
+        <div class="control" data-id="portfolio"><i class="fas fa-briefcase"></i></div>
+        <div class="control" data-id="blogs"><i class="far fa-newspaper"></i></div>
+        <div class="control" data-id="contact"><i class="fas fa-envelope-open"></i></div>
+    </aside>
+    <aside>
+        <div id="switch-mode"><i class="fas fa-adjust"></i></div>
+    </aside>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/blog.js b/scripts/blog.js
new file mode 100644
index 00000000..547a0840
--- /dev/null
+++ b/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);
+    }
+})();
diff --git a/app.js b/scripts/controls.js
similarity index 63%
rename from app.js
rename to scripts/controls.js
index df97f58c..97477264 100644
--- a/app.js
+++ b/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");
     })
 })();
diff --git a/scripts/data/articles.js b/scripts/data/articles.js
new file mode 100644
index 00000000..0020112f
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/scripts/data/projects.js b/scripts/data/projects.js
new file mode 100644
index 00000000..5a1f15a0
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/scripts/data/skills.js b/scripts/data/skills.js
new file mode 100644
index 00000000..537c2cfb
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/scripts/portfolio.js b/scripts/portfolio.js
new file mode 100644
index 00000000..56fef14e
--- /dev/null
+++ b/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);
+    }
+})();
diff --git a/scripts/statistics.js b/scripts/statistics.js
new file mode 100644
index 00000000..43e70ee1
--- /dev/null
+++ b/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);
+    }
+})();
+
diff --git a/styles/_media.scss b/styles/_media.scss
deleted file mode 100644
index bd7c045d..00000000
--- a/styles/_media.scss
+++ /dev/null
@@ -1,281 +0,0 @@
-.about-container .left-about p{
-    padding-left: 0;
-}
-
-@media screen and (max-width: 600px) {
-    header{
-        padding: 0 !important;
-    }
-    .theme-btn{
-        width: 50px;
-        height: 50px;
-    }
-    .header-content{
-        grid-template-columns: repeat(1, 1fr);
-        padding-bottom: 6rem;
-    }
-
-    .left-header{
-        .h-shape{
-            display: none;
-        }
-    }
-    .right-header{
-        grid-row: 1;
-        padding-right: 0rem !important;
-        width: 90%;
-        margin: 0 auto;
-        .name{
-            font-size: 2.5rem !important;
-            text-align: center;
-            padding-top: 3rem;
-        }
-    }
-    .header-content .left-header .image{
-        margin: 0 auto;
-        width: 90%;
-    }
-
-    .controls{
-        top: auto;
-        bottom: 0;
-        flex-direction: row;
-        justify-content: center;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 100%;
-        background-color: var(--color-grey-5);
-        .control{
-            margin: 1rem .3rem;
-        }
-    }
-
-    .about-container{
-        grid-template-columns: repeat(1, 1fr);
-        .right-about{
-            grid-template-columns: repeat(1, 1fr);
-            padding-top: 2.5rem;
-        }
-        .left-about{
-            padding-right: 0;
-            p{
-                padding-left: 0;
-            }
-        }
-    }
-
-    .timeline{
-        grid-template-columns: repeat(1, 1fr);
-        padding-bottom: 6rem;
-    }
-
-    .container{
-        padding: 2rem 2.5rem !important;
-    }
-
-    .about-stats{
-        .progress-bars{
-            grid-template-columns: repeat(1, 1fr);
-        }
-    }
-
-    .portfolios{
-        grid-template-columns: repeat(1, 1fr);
-        padding-bottom: 6rem;
-        margin-top: 1rem;
-    }
-
-    .blogs{
-        grid-template-columns: repeat(1, 1fr);
-        padding-bottom: 6rem;
-    }
-
-    .contact-content-con{
-        flex-direction: column;
-        .right-contact{
-            margin-left: 0;
-            margin-top: 2.5rem;
-        }
-        
-    }
-    .contact-content-con .right-contact .i-c-2{
-        flex-direction: column;
-    }
-    .contact-content-con .right-contact .i-c-2 :last-child{
-        margin-left: 0;
-        margin-top: 1.5rem;
-    }
-
-    .contact-content-con .right-contact{
-        margin-bottom: 6rem;
-    }
-
-    .contact-item{
-        flex-direction: column;
-        margin: 1rem 0;
-        p{
-            font-size: 15px;
-            color: var(--color-grey-2);
-        }
-        span{
-            font-size: 15px;
-        }
-        .icon{
-            grid-template-columns: 25px 1fr;
-        }
-    }
-
-
-    .main-title{
-        h2{
-            font-size: 2rem;
-            span{
-                font-size: 2.3rem;
-            }
-            .bg-text{
-                font-size: 2.3rem;
-            }
-        }
-    }
-}
-
-@media screen and (max-width:1432px){
-    .container{
-        padding: 7rem 11rem;
-    }
-
-    .contact-content-con{
-        flex-direction: column;
-        .right-contact{
-            margin-left: 0;
-            margin-top: 2.5rem;
-        }
-        
-    }
-    .contact-content-con .right-contact .i-c-2{
-        flex-direction: column;
-    }
-    .contact-content-con .right-contact .i-c-2 :last-child{
-        margin-left: 0;
-        margin-top: 1.5rem;
-    }
-
-    .contact-content-con .right-contact{
-        margin-bottom: 6rem;
-    }
-
-    .main-title{
-        h2{
-            .bg-text{
-                font-size: 5.5rem;
-            }
-        }
-    }
-    
-}
-
-
-
-
-@media screen and (max-width:1250px){
-    .blogs{
-        grid-template-columns: repeat(2, 1fr);
-        margin-top: 6rem;
-    }
-    .portfolios{
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .header-content .right-header{
-        padding-right: 9rem;
-    }
-
-}
-@media screen and (max-width:660px){
-    .blogs{
-        grid-template-columns: repeat(1, 1fr);
-    }
-    .portfolios{
-        grid-template-columns: repeat(1, 1fr);
-    }
-}
-
-@media screen and (max-width:1070px){
-    .about-container{
-        grid-template-columns: repeat(1, 1fr);
-        .right-about{
-            padding-top: 2.5rem;
-        }
-    }
-    .main-title{
-        h2{
-            font-size: 4rem;
-            span{
-                font-size: 4rem;
-            }
-            .bg-text{
-                font-size: 4.5rem;
-            }
-        }
-    }
-}
-
-@media screen and (max-width:970px){
-    .container{
-        padding: 7rem 6rem;
-    }
-    .about-container .left-about{
-        padding-right: 0rem;
-    }
-    .header-content{
-        grid-template-columns: repeat(1, 1fr);
-        padding-bottom: 6rem;
-    }
-
-    .left-header{
-        .h-shape{
-            display: none;
-        }
-        .image{
-            width: 90% !important;
-            margin: 0 auto !important;
-            
-        }
-    }
-    .right-header{
-        grid-row: 1;
-        padding-right: 0rem !important;
-        width: 90%;
-        margin: 0 auto;
-        .name{
-            font-size: 2.5rem !important;
-            text-align: center;
-            padding-top: 3rem;
-        }
-    }
-}
-@media screen and (max-width:700px){
-    .container{
-        padding: 7rem 3rem;
-    }
-    .about-stats .progress-bars{
-        grid-template-columns: repeat(1, 1fr);
-    }
-    .about-container .right-about{
-        grid-template-columns: repeat(1, 1fr);
-    }
-
-    .timeline{
-        grid-template-columns: repeat(1, 1fr);
-    }
-    .main-title{
-        h2{
-            font-size: 3rem;
-            span{
-                font-size: 3rem;
-            }
-            .bg-text{
-                font-size: 4rem;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
deleted file mode 100644
index 39aa6c58..00000000
--- a/styles/styles.css
+++ /dev/null
@@ -1,964 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  list-style: none;
-}
-
-:root {
-  --color-primary: #191d2b;
-  --color-secondary: #27AE60;
-  --color-white: #FFFFFF;
-  --color-black: #000;
-  --color-grey0: #f8f8f8;
-  --color-grey-1: #dbe1e8;
-  --color-grey-2: #b2becd;
-  --color-grey-3: #6c7983;
-  --color-grey-4: #454e56;
-  --color-grey-5: #2a2e35;
-  --color-grey-6: #12181b;
-  --br-sm-2: 14px;
-  --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
-}
-
-.light-mode {
-  --color-primary: #FFFFFF;
-  --color-secondary: #F56692;
-  --color-white: #454e56;
-  --color-black: #000;
-  --color-grey0: #f8f8f8;
-  --color-grey-1: #6c7983;
-  --color-grey-2: #6c7983;
-  --color-grey-3: #6c7983;
-  --color-grey-4: #454e56;
-  --color-grey-5: #f8f8f8;
-  --color-grey-6: #12181b;
-}
-
-body {
-  background-color: var(--color-primary);
-  font-family: "Poppins", sans-serif;
-  font-size: 1.1rem;
-  color: var(--color-white);
-  transition: all 0.4s ease-in-out;
-}
-
-a {
-  display: inline-block;
-  text-decoration: none;
-  color: inherit;
-  font-family: inherit;
-}
-
-header {
-  min-height: 100vh;
-  color: var(--color-white);
-  overflow: hidden;
-  padding: 0 !important;
-}
-
-section {
-  min-height: 100vh;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 3rem 18rem;
-}
-
-.container {
-  display: none;
-  transform: translateY(-100%) scale(0);
-  transition: all 0.4s ease-in-out;
-  background-color: var(--color-primary);
-}
-
-.active {
-  display: block;
-  animation: appear 1s ease-in-out;
-  transform: translateY(0) scaleY(1);
-}
-@keyframes appear {
-  0% {
-    transform: translateY(-100%) scaleY(0);
-  }
-  100% {
-    transform: translateY(0) scaleY(1);
-  }
-}
-
-.controls {
-  position: fixed;
-  z-index: 10;
-  top: 50%;
-  right: 3%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-50%);
-}
-.controls .control {
-  padding: 1rem;
-  cursor: pointer;
-  background-color: var(--color-grey-4);
-  width: 55px;
-  height: 55px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0.7rem 0;
-  box-shadow: var(--box-shadow-1);
-}
-.controls .control i {
-  font-size: 1.2rem;
-  color: var(--color-grey-2);
-  pointer-events: none;
-}
-.controls .active-btn {
-  background-color: var(--color-secondary);
-  transition: all 0.4s ease-in-out;
-}
-.controls .active-btn i {
-  color: var(--color-white);
-}
-
-.theme-btn {
-  top: 5%;
-  right: 3%;
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-  background-color: var(--color-grey-4);
-  cursor: pointer;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
-  transition: all 0.1s ease-in-out;
-}
-.theme-btn:active {
-  transform: translateY(-3px);
-}
-.theme-btn i {
-  font-size: 1.4rem;
-  color: var(--color-grey-2);
-  pointer-events: none;
-}
-
-/*Header-content*/
-.header-content {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  min-height: 100vh;
-}
-.header-content .left-header {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-.header-content .left-header .h-shape {
-  transition: all 0.4s ease-in-out;
-  width: 65%;
-  height: 100%;
-  background-color: var(--color-secondary);
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: -1;
-  clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
-}
-.header-content .left-header .image {
-  border-radius: var(--br-sm-2);
-  height: 90%;
-  width: 68%;
-  margin-left: 4rem;
-  background-color: var(--color-black);
-  transition: all 0.4s ease-in-out;
-}
-.header-content .left-header .image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: all 0.4s ease-in-out;
-  filter: grayscale(100%);
-}
-.header-content .left-header .image img:hover {
-  filter: grayscale(0);
-}
-.header-content .right-header {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding-right: 18rem;
-}
-.header-content .right-header .name {
-  font-size: 3rem;
-}
-.header-content .right-header .name span {
-  color: var(--color-secondary);
-}
-.header-content .right-header p {
-  margin: 1.5rem 0;
-  line-height: 2rem;
-}
-
-/*About*/
-.about-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  padding-top: 3.5rem;
-  padding-bottom: 5rem;
-}
-.about-container .right-about {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 2rem;
-}
-.about-container .right-about .about-item {
-  border: 1px solid var(--color-grey-5);
-  border-radius: 5px;
-  transition: all 0.4s ease-in-out;
-  box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
-}
-.about-container .right-about .about-item:hover {
-  cursor: default;
-  transform: translateY(-5px);
-  border: 1px solid var(--color-secondary);
-  box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32);
-}
-.about-container .right-about .about-item .abt-text {
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-.about-container .right-about .about-item .abt-text .large-text {
-  font-size: 3rem;
-  font-weight: 700;
-  color: var(--color-secondary);
-}
-.about-container .right-about .about-item .abt-text .small-text {
-  padding-left: 3rem;
-  position: relative;
-  text-transform: uppercase;
-  font-size: 1.2rem;
-  color: var(--color-grey-1);
-  letter-spacing: 2px;
-}
-.about-container .right-about .about-item .abt-text .small-text::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 15px;
-  width: 2rem;
-  height: 2px;
-  background-color: var(--color-grey-5);
-}
-.about-container .left-about {
-  padding-right: 5rem;
-}
-.about-container .left-about p {
-  line-height: 2rem;
-  padding: 1rem;
-  color: var(--color-grey-1);
-}
-.about-container .left-about h4 {
-  font-size: 2rem;
-  text-transform: uppercase;
-}
-
-.about-stats {
-  padding-bottom: 4rem;
-}
-.about-stats .progress-bars {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 2rem;
-}
-.about-stats .progress-bars .progress-bar {
-  display: flex;
-  flex-direction: column;
-}
-.about-stats .progress-bars .progress-bar .prog-title {
-  text-transform: uppercase;
-  font-weight: 500;
-}
-.about-stats .progress-bars .progress-bar .progress-con {
-  display: flex;
-  align-items: center;
-}
-.about-stats .progress-bars .progress-bar .progress-con .prog-text {
-  color: var(--color-grey-2);
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress {
-  width: 100%;
-  height: 0.45rem;
-  background-color: var(--color-grey-4);
-  margin-left: 1rem;
-  position: relative;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress span {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: var(--color-secondary);
-  transition: all 0.4s ease-in-out;
-  width: 60%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .html {
-  width: 80%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .css {
-  width: 95%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .js {
-  width: 75%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .react {
-  width: 60%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .node {
-  width: 87%;
-}
-.about-stats .progress-bars .progress-bar .progress-con .progress .python {
-  width: 70%;
-}
-
-.stat-title {
-  text-transform: uppercase;
-  font-size: 1.4rem;
-  text-align: center;
-  padding: 3.5rem 0;
-  position: relative;
-}
-.stat-title::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 0;
-  width: 40%;
-  height: 1px;
-  background-color: var(--color-grey-5);
-  transform: translateX(-50%);
-}
-
-/*Timeline*/
-.timeline {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 2rem;
-  padding-bottom: 3rem;
-}
-.timeline .timeline-item {
-  position: relative;
-  padding-left: 3rem;
-  border-left: 1px solid var(--color-grey-5);
-}
-.timeline .timeline-item .tl-icon {
-  position: absolute;
-  left: -27px;
-  top: 0;
-  background-color: var(--color-secondary);
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.timeline .timeline-item .tl-icon i {
-  font-size: 1.3rem;
-}
-.timeline .timeline-item .tl-duration {
-  padding: 0.2rem 0.6rem;
-  background-color: var(--color-grey-5);
-  border-radius: 15px;
-  display: inline-block;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  font-weight: 500;
-}
-.timeline .timeline-item h5 {
-  padding: 1rem 0;
-  text-transform: uppercase;
-  font-size: 1.3rem;
-  font-weight: 600;
-}
-.timeline .timeline-item h5 span {
-  color: var(--color-grey-2);
-  font-weight: 500;
-  font-size: 1.2rem;
-}
-.timeline .timeline-item p {
-  color: var(--color-grey-2);
-}
-
-.port-text {
-  padding: 2rem 0;
-  text-align: center;
-}
-
-.portfolios {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 2rem;
-  margin-top: 3rem;
-}
-.portfolios .portfolio-item {
-  position: relative;
-  border-radius: 15px;
-}
-.portfolios .portfolio-item img {
-  width: 100%;
-  height: 300px;
-  object-fit: cover;
-  border-radius: 15px;
-}
-.portfolios .portfolio-item .hover-items {
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-secondary);
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  opacity: 0;
-  transform: scale(0);
-  transition: all 0.4s ease-in-out;
-}
-.portfolios .portfolio-item .hover-items h3 {
-  font-size: 1.5rem;
-  color: var(--color-white);
-  margin-bottom: 1.5rem;
-}
-.portfolios .portfolio-item .hover-items .icons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.portfolios .portfolio-item .hover-items .icons .icon {
-  background-color: var(--color-primary);
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 1rem;
-  cursor: pointer;
-  transition: all 0.4s ease-in-out;
-}
-.portfolios .portfolio-item .hover-items .icons .icon i {
-  font-size: 1.5rem;
-  color: var(--color-white);
-  margin: 0 1rem;
-}
-.portfolios .portfolio-item .hover-items .icons .icon:hover {
-  background-color: var(--color-white);
-}
-.portfolios .portfolio-item .hover-items .icons .icon:hover i {
-  color: var(--color-primary);
-}
-
-.portfolio-item:hover .hover-items {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.blogs {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 2rem;
-  margin-top: 3rem;
-}
-.blogs .blog {
-  position: relative;
-  background-color: var(--color-grey-5);
-  border-radius: 5px;
-  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
-  transition: all 0.4s ease-in-out;
-}
-.blogs .blog:hover {
-  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
-  transform: translateY(-5px);
-  transition: all 0.4s ease-in-out;
-}
-.blogs .blog:hover img {
-  filter: grayscale(0);
-  transform: scale(1.1);
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
-}
-.blogs .blog img {
-  width: 100%;
-  height: 300px;
-  object-fit: cover;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  filter: grayscale(100%);
-  transition: all 0.4s ease-in-out;
-}
-.blogs .blog .blog-text {
-  margin-top: -7px;
-  padding: 1.1rem;
-  border-top: 8px solid var(--color-secondary);
-}
-.blogs .blog .blog-text h4 {
-  font-size: 1.5rem;
-  margin-bottom: 0.7rem;
-  transition: all 0.4s ease-in-out;
-  cursor: pointer;
-}
-.blogs .blog .blog-text h4:hover {
-  color: var(--color-secondary);
-}
-.blogs .blog .blog-text p {
-  color: var(--color-grey-2);
-  line-height: 2rem;
-  padding-bottom: 1rem;
-}
-
-.contact-content-con {
-  display: flex;
-  padding-top: 3.5rem;
-}
-.contact-content-con .left-contact {
-  flex: 2;
-}
-.contact-content-con .left-contact h4 {
-  margin-top: 1rem;
-  font-size: 2rem;
-  text-transform: uppercase;
-}
-.contact-content-con .left-contact p {
-  margin: 1rem 0;
-  line-height: 2rem;
-}
-.contact-content-con .left-contact .contact-info .contact-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.contact-content-con .left-contact .contact-info .contact-item p {
-  margin: 0.3rem 0 !important;
-  padding: 0 !important;
-}
-.contact-content-con .left-contact .contact-info .contact-item .icon {
-  display: grid;
-  grid-template-columns: 40px 1fr;
-}
-.contact-content-con .left-contact .contact-info .contact-item .icon i {
-  display: flex;
-  align-items: center;
-  font-size: 1.3rem;
-}
-.contact-content-con .left-contact .contact-icon {
-  display: flex;
-  margin-top: 2rem;
-}
-.contact-content-con .left-contact .contact-icon a {
-  display: flex;
-  align-items: center;
-  color: var(--color-white);
-  background-color: var(--color-grey-5);
-  cursor: pointer;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  margin: 0 0.4rem;
-  transition: all 0.4s ease-in-out;
-}
-.contact-content-con .left-contact .contact-icon a:hover {
-  background-color: var(--color-secondary);
-}
-.contact-content-con .left-contact .contact-icon a:hover i {
-  color: var(--color-primary);
-}
-.contact-content-con .left-contact .contact-icon a i {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.3rem;
-}
-.contact-content-con .right-contact {
-  flex: 3;
-  margin-left: 3rem;
-}
-.contact-content-con .right-contact .input-control {
-  margin: 1.5rem 0;
-}
-.contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea {
-  border-radius: 30px;
-  font-weight: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  padding: 0.8rem 1.1rem;
-  outline: none;
-  border: none;
-  background-color: var(--color-grey-5);
-  width: 100%;
-  color: var(--color-white);
-  resize: none;
-}
-.contact-content-con .right-contact .i-c-2 {
-  display: flex;
-}
-.contact-content-con .right-contact .i-c-2 :last-child {
-  margin-left: 1.5rem;
-}
-.contact-content-con .right-contact .submit-btn {
-  display: flex;
-  justify-content: flex-start;
-}
-
-/*Independed components*/
-.btn-con {
-  display: flex;
-  align-self: flex-start;
-}
-
-.main-btn {
-  border-radius: 30px;
-  color: inherit;
-  font-weight: 600;
-  position: relative;
-  border: 1px solid var(--color-secondary);
-  display: flex;
-  align-self: flex-start;
-  align-items: center;
-  overflow: hidden;
-}
-.main-btn .btn-text {
-  padding: 0 2rem;
-}
-.main-btn .btn-icon {
-  background-color: var(--color-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  padding: 1rem;
-}
-.main-btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translateX(100%);
-  transition: all 0.4s ease-out;
-  z-index: -1;
-}
-.main-btn:hover {
-  transition: all 0.4s ease-out;
-}
-.main-btn:hover::before {
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-secondary);
-  transform: translateX(0);
-  transition: all 0.4s ease-out;
-}
-
-.main-title {
-  text-align: center;
-}
-.main-title h2 {
-  position: relative;
-  text-transform: uppercase;
-  font-size: 4rem;
-  font-weight: 700;
-}
-.main-title h2 span {
-  color: var(--color-secondary);
-}
-.main-title h2 .bg-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  color: var(--color-grey-5);
-  transition: all 0.4s ease-in-out;
-  z-index: -1;
-  transform: translate(-50%, -50%);
-  font-weight: 800;
-  font-size: 6.3rem;
-}
-
-.about-container .left-about p {
-  padding-left: 0;
-}
-
-@media screen and (max-width: 600px) {
-  header {
-    padding: 0 !important;
-  }
-
-  .theme-btn {
-    width: 50px;
-    height: 50px;
-  }
-
-  .header-content {
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 6rem;
-  }
-
-  .left-header .h-shape {
-    display: none;
-  }
-
-  .right-header {
-    grid-row: 1;
-    padding-right: 0rem !important;
-    width: 90%;
-    margin: 0 auto;
-  }
-  .right-header .name {
-    font-size: 2.5rem !important;
-    text-align: center;
-    padding-top: 3rem;
-  }
-
-  .header-content .left-header .image {
-    margin: 0 auto;
-    width: 90%;
-  }
-
-  .controls {
-    top: auto;
-    bottom: 0;
-    flex-direction: row;
-    justify-content: center;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-    background-color: var(--color-grey-5);
-  }
-  .controls .control {
-    margin: 1rem 0.3rem;
-  }
-
-  .about-container {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .about-container .right-about {
-    grid-template-columns: repeat(1, 1fr);
-    padding-top: 2.5rem;
-  }
-  .about-container .left-about {
-    padding-right: 0;
-  }
-  .about-container .left-about p {
-    padding-left: 0;
-  }
-
-  .timeline {
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 6rem;
-  }
-
-  .container {
-    padding: 2rem 2.5rem !important;
-  }
-
-  .about-stats .progress-bars {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .portfolios {
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 6rem;
-    margin-top: 1rem;
-  }
-
-  .blogs {
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 6rem;
-  }
-
-  .contact-content-con {
-    flex-direction: column;
-  }
-  .contact-content-con .right-contact {
-    margin-left: 0;
-    margin-top: 2.5rem;
-  }
-
-  .contact-content-con .right-contact .i-c-2 {
-    flex-direction: column;
-  }
-
-  .contact-content-con .right-contact .i-c-2 :last-child {
-    margin-left: 0;
-    margin-top: 1.5rem;
-  }
-
-  .contact-content-con .right-contact {
-    margin-bottom: 6rem;
-  }
-
-  .contact-item {
-    flex-direction: column;
-    margin: 1rem 0;
-  }
-  .contact-item p {
-    font-size: 15px;
-    color: var(--color-grey-2);
-  }
-  .contact-item span {
-    font-size: 15px;
-  }
-  .contact-item .icon {
-    grid-template-columns: 25px 1fr;
-  }
-
-  .main-title h2 {
-    font-size: 2rem;
-  }
-  .main-title h2 span {
-    font-size: 2.3rem;
-  }
-  .main-title h2 .bg-text {
-    font-size: 2.3rem;
-  }
-}
-@media screen and (max-width: 1432px) {
-  .container {
-    padding: 7rem 11rem;
-  }
-
-  .contact-content-con {
-    flex-direction: column;
-  }
-  .contact-content-con .right-contact {
-    margin-left: 0;
-    margin-top: 2.5rem;
-  }
-
-  .contact-content-con .right-contact .i-c-2 {
-    flex-direction: column;
-  }
-
-  .contact-content-con .right-contact .i-c-2 :last-child {
-    margin-left: 0;
-    margin-top: 1.5rem;
-  }
-
-  .contact-content-con .right-contact {
-    margin-bottom: 6rem;
-  }
-
-  .main-title h2 .bg-text {
-    font-size: 5.5rem;
-  }
-}
-@media screen and (max-width: 1250px) {
-  .blogs {
-    grid-template-columns: repeat(2, 1fr);
-    margin-top: 6rem;
-  }
-
-  .portfolios {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .header-content .right-header {
-    padding-right: 9rem;
-  }
-}
-@media screen and (max-width: 660px) {
-  .blogs {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .portfolios {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-@media screen and (max-width: 1070px) {
-  .about-container {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .about-container .right-about {
-    padding-top: 2.5rem;
-  }
-
-  .main-title h2 {
-    font-size: 4rem;
-  }
-  .main-title h2 span {
-    font-size: 4rem;
-  }
-  .main-title h2 .bg-text {
-    font-size: 4.5rem;
-  }
-}
-@media screen and (max-width: 970px) {
-  .container {
-    padding: 7rem 6rem;
-  }
-
-  .about-container .left-about {
-    padding-right: 0rem;
-  }
-
-  .header-content {
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 6rem;
-  }
-
-  .left-header .h-shape {
-    display: none;
-  }
-  .left-header .image {
-    width: 90% !important;
-    margin: 0 auto !important;
-  }
-
-  .right-header {
-    grid-row: 1;
-    padding-right: 0rem !important;
-    width: 90%;
-    margin: 0 auto;
-  }
-  .right-header .name {
-    font-size: 2.5rem !important;
-    text-align: center;
-    padding-top: 3rem;
-  }
-}
-@media screen and (max-width: 700px) {
-  .container {
-    padding: 7rem 3rem;
-  }
-
-  .about-stats .progress-bars {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .about-container .right-about {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .timeline {
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .main-title h2 {
-    font-size: 3rem;
-  }
-  .main-title h2 span {
-    font-size: 3rem;
-  }
-  .main-title h2 .bg-text {
-    font-size: 4rem;
-  }
-}
-
-/*# sourceMappingURL=styles.css.map */
diff --git a/styles/styles.css.map b/styles/styles.css.map
deleted file mode 100644
index 39653e31..00000000
--- a/styles/styles.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss","_media.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;AACA;EACI;IAAI;;EACJ;IAAM;;;;AAKd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EAAI;;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACI;EACA;EACA;;;AAKR;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAO;;AAEX;EACI;EACA;;;AAKZ;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;;AAKZ;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAAQ;;AACR;EAAO;;AACP;EAAM;;AACN;EAAQ;;AACR;EAAO;;AACP;EAAS;;;AAM7B;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EAAG;;;AAKX;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EAAI;;;AAQ5B;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAU;;AAEd;EACI;EACA;EACA;;;AAQhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;;AACA;EACI;;AAGR;EACI;EACA;;;AAMZ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAY;;AACZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAMZ;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAO;;AACP;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzpBZ;EACI;;;AAGJ;EACI;IACI;;;EAEJ;IACI;IACA;;;EAEJ;IACI;IACA;;;EAIA;IACI;;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;EAGR;IACI;IACA;;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;;;EAIR;IACI;;EACA;IACI;IACA;;EAEJ;IACI;;EACA;IACI;;;EAKZ;IACI;IACA;;;EAGJ;IACI;;;EAIA;IACI;;;EAIR;IACI;IACA;IACA;;;EAGJ;IACI;IACA;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAGJ;IACI;IACA;;EACA;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;;EAMJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAKI;IACI;;;AAUhB;EACI;IACI;IACA;;;EAEJ;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;EACA;IACI;;;EAIJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;IACA;;;EAIA;IACI;;EAEJ;IACI;IACA;;;EAIR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;AAIZ;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;;;EAGJ;IACI;;;EAGA;IACI;;EACA;IACI;;EAEJ;IACI","file":"styles.css"}
\ No newline at end of file
diff --git a/styles/styles.scss b/styles/styles.scss
deleted file mode 100644
index 8c325ebd..00000000
--- a/styles/styles.scss
+++ /dev/null
@@ -1,671 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    list-style: none;
-}
-
-:root {
-    --color-primary: #191d2b;
-    --color-secondary: #27AE60;
-    --color-white: #FFFFFF;
-    --color-black: #000;
-    --color-grey0: #f8f8f8;
-    --color-grey-1: #dbe1e8;
-    --color-grey-2: #b2becd;
-    --color-grey-3: #6c7983;
-    --color-grey-4: #454e56;
-    --color-grey-5: #2a2e35;
-    --color-grey-6: #12181b;
-    --br-sm-2: 14px;
-    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
-}
-
-.light-mode {
-    --color-primary: #FFFFFF;
-    --color-secondary: #F56692;
-    --color-white: #454e56;
-    --color-black: #000;
-    --color-grey0: #f8f8f8;
-    --color-grey-1: #6c7983;
-    --color-grey-2: #6c7983;
-    --color-grey-3: #6c7983;
-    --color-grey-4: #454e56;
-    --color-grey-5: #f8f8f8;
-    --color-grey-6: #12181b;
-}
-
-body {
-    background-color: var(--color-primary);
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.1rem;
-    color: var(--color-white);
-    transition: all .4s ease-in-out;
-}
-
-a {
-    display: inline-block;
-    text-decoration: none;
-    color: inherit;
-    font-family: inherit;
-}
-
-header {
-    min-height: 100vh;
-    color: var(--color-white);
-    overflow: hidden;
-    padding: 0 !important;
-}
-
-section {
-    min-height: 100vh;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 3rem 18rem;
-}
-
-.container {
-    display: none;
-    transform: translateY(-100%) scale(0);
-    transition: all .4s ease-in-out;
-    background-color: var(--color-primary);
-}
-
-
-.active {
-    display: block;
-    animation: appear 1s ease-in-out;
-    transform: translateY(0) scaleY(1);
-    @keyframes appear {
-        0%{ transform: translateY(-100%) scaleY(0); }
-        100%{ transform: translateY(0) scaleY(1); }
-    }
-}
-
-//Controls
-.controls {
-    position: fixed;
-    z-index: 10;
-    top: 50%;
-    right: 3%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(-50%);
-    .control{
-        padding: 1rem;
-        cursor: pointer;
-        background-color: var(--color-grey-4);
-        width: 55px;
-        height: 55px;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: .7rem 0;
-        box-shadow: var(--box-shadow-1) ;
-        i {
-            font-size: 1.2rem;
-            color: var(--color-grey-2);
-            pointer-events: none;
-        }
-    }
-    .active-btn {
-        background-color: var(--color-secondary);
-        transition: all .4s ease-in-out;
-        i { color: var(--color-white); }
-    }
-}
-
-.theme-btn {
-    top: 5%;
-    right: 3%;
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    background-color: var(--color-grey-4);
-    cursor: pointer;
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 3px 15px rgba(0,0,0,.3);
-    transition: all .1s ease-in-out;
-    &:active{ transform: translateY(-3px); }
-    i{
-        font-size: 1.4rem;
-        color: var(--color-grey-2);
-        pointer-events: none;
-    }
-}
-
-
-/*Header-content*/
-.header-content {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    min-height: 100vh;
-    .left-header {
-        display: flex;
-        align-items: center;
-        position: relative;
-        .h-shape {
-            transition: all .4s ease-in-out;
-            width: 65%;
-            height: 100%;
-            background-color: var(--color-secondary);
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
-        }
-        .image {
-            border-radius: var(--br-sm-2);
-            height: 90%;
-            width: 68%;
-            margin-left: 4rem;
-            background-color: var(--color-black);
-            transition: all .4s ease-in-out;
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                transition: all .4s ease-in-out;
-                filter: grayscale(100%);
-                &:hover{
-                    filter: grayscale(0);
-                }
-            }
-        }
-    }
-
-    .right-header {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-right: 18rem;
-        .name {
-            font-size: 3rem;
-            span { color: var(--color-secondary); }
-        }
-        p {
-            margin: 1.5rem 0;
-            line-height: 2rem;
-        }
-    }
-}
-
-/*About*/
-.about-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    padding-top: 3.5rem;
-    padding-bottom: 5rem;
-    .right-about {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-gap: 2rem;
-        .about-item {
-            border: 1px solid var(--color-grey-5);
-            border-radius: 5px;
-            transition: all .4s ease-in-out;
-            box-shadow: 1px 2px 15px rgba(0,0,0,.1);
-            &:hover {
-                cursor: default;
-                transform: translateY(-5px);
-                border: 1px solid var(--color-secondary);
-                box-shadow: 1px 4px 15px rgba(0,0,0,.32);
-            }
-            .abt-text {
-                padding: 1.5rem;
-                display: flex;
-                flex-direction: column;
-                .large-text {
-                    font-size: 3rem;
-                    font-weight: 700;
-                    color: var(--color-secondary);
-                }
-                .small-text {
-                    padding-left: 3rem;
-                    position: relative;
-                    text-transform: uppercase;
-                    font-size: 1.2rem;
-                    color: var(--color-grey-1);
-                    letter-spacing: 2px;
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        left: 0;
-                        top: 15px;
-                        width: 2rem;
-                        height: 2px;
-                        background-color: var(--color-grey-5);
-                    }
-                }
-            }
-        }
-    }
-
-    .left-about {
-        padding-right: 5rem;
-        p {
-            line-height: 2rem;
-            padding: 1rem;
-            color: var(--color-grey-1);
-        }
-        h4 {
-            font-size: 2rem;
-            text-transform: uppercase;
-        }
-    }
-}
-
-.about-stats {
-    padding-bottom: 4rem;
-    .progress-bars {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-gap: 2rem;
-        .progress-bar {
-            display: flex;
-            flex-direction: column;
-            .prog-title {
-                text-transform: uppercase;
-                font-weight: 500;
-            }
-            .progress-con {
-                display: flex;
-                align-items: center;
-                .prog-text {
-                    color: var(--color-grey-2);
-                }
-                .progress {
-                    width: 100%;
-                    height: .45rem;
-                    background-color: var(--color-grey-4);
-                    margin-left: 1rem;
-                    position: relative;
-                    span {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        height: 100%;
-                        background-color: var(--color-secondary);
-                        transition: all .4s ease-in-out;
-                        width: 60%;
-                    }
-                    .html { width: 80%; }
-                    .css { width: 95%; }
-                    .js { width: 75%; }
-                    .react{ width: 60%; }
-                    .node{ width: 87%; }
-                    .python{ width: 70%; }
-                }
-            }
-        }
-    }
-}
-.stat-title {
-    text-transform: uppercase;
-    font-size: 1.4rem;
-    text-align: center;
-    padding: 3.5rem 0;
-    position: relative;
-    &::before {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 0;
-        width: 40%;
-        height: 1px;
-        background-color: var(--color-grey-5);
-        transform: translateX(-50%);
-    }
-}
-
-/*Timeline*/
-.timeline {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2rem;
-    padding-bottom: 3rem;
-    .timeline-item {
-        position: relative;
-        padding-left: 3rem;
-        border-left: 1px solid var(--color-grey-5);
-        .tl-icon {
-            position: absolute;
-            left: -27px;
-            top: 0;
-            background-color: var(--color-secondary);
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            i { font-size: 1.3rem; }
-        }
-        .tl-duration {
-            padding: .2rem .6rem;
-            background-color: var(--color-grey-5);
-            border-radius: 15px;
-            display: inline-block;
-            font-size: .8rem;
-            text-transform: uppercase;
-            font-weight: 500;
-        }
-        h5 {
-            padding: 1rem 0;
-            text-transform: uppercase;
-            font-size: 1.3rem;
-            font-weight: 600;
-            span {
-                color: var(--color-grey-2);
-                font-weight: 500;
-                font-size: 1.2rem;
-            }
-        }
-        p{ color: var(--color-grey-2); }
-    }
-}
-
-//Portfolios
-.port-text {
-    padding: 2rem 0;
-    text-align: center;
-}
-
-.portfolios {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 2rem;
-    margin-top: 3rem;
-    .portfolio-item {
-        position: relative;
-        border-radius: 15px;
-        img {
-            width: 100%;
-            height: 300px;
-            object-fit: cover;
-            border-radius: 15px;
-        }
-        .hover-items {
-            width: 100%;
-            height: 100%;
-            background-color: var(--color-secondary);
-            position: absolute;
-            left: 0;
-            top: 0;
-            border-radius: 15px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            opacity: 0;
-            transform: scale(0);
-            transition: all .4s ease-in-out;
-            h3 {
-                font-size: 1.5rem;
-                color: var(--color-white);
-                margin-bottom: 1.5rem;
-            }
-            .icons {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                .icon {
-                    background-color: var(--color-primary);
-                    border-radius: 50%;
-                    width: 50px;
-                    height: 50px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 1rem;
-                    cursor: pointer;
-                    transition: all .4s ease-in-out;
-                    i {
-                        font-size: 1.5rem;
-                        color: var(--color-white);
-                        margin: 0 1rem;
-                    }
-                    &:hover {
-                        background-color: var(--color-white);
-                        i { color: var(--color-primary); }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.portfolio-item:hover .hover-items {
-    opacity: 1;
-    transform: scale(1);
-}
-
-//Blogs Section
-.blogs {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 2rem;
-    margin-top: 3rem;
-    .blog {
-        position: relative;
-        background-color: var(--color-grey-5);
-        border-radius: 5px;
-        box-shadow: 1px 1px 20px rgba(0,0,0,.1);
-        transition: all .4s ease-in-out;
-        &:hover {
-            box-shadow: 1px 1px 20px rgba(0,0,0,.3);
-            transform: translateY(-5px);
-            transition: all .4s ease-in-out;
-            img {
-                filter: grayscale(0);
-                transform: scale(1.1);
-                box-shadow: 0px 4px 15px rgba(0,0,0,0.8);
-            }
-        }
-        img {
-            width: 100%;
-            height: 300px;
-            object-fit: cover;
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-            filter: grayscale(100%);
-            transition: all .4s ease-in-out;
-        }
-        .blog-text {
-            margin-top: -7px;
-            padding: 1.1rem;
-            border-top: 8px solid var(--color-secondary);
-            h4 {
-                font-size: 1.5rem;
-                margin-bottom: .7rem;
-                transition: all .4s ease-in-out;
-                cursor: pointer;
-                &:hover { color: var(--color-secondary); }
-            }
-            p{
-                color: var(--color-grey-2);
-                line-height: 2rem;
-                padding-bottom: 1rem;
-            }
-        }
-    }
-}
-
-
-//Contact section
-.contact-content-con {
-    display: flex;
-    padding-top: 3.5rem;
-    .left-contact {
-        flex: 2;
-        h4 {
-            margin-top: 1rem;
-            font-size: 2rem;
-            text-transform: uppercase;
-        }
-        p {
-            margin: 1rem 0;
-            line-height: 2rem;
-        }
-
-        .contact-info {
-            .contact-item {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                p {
-                    margin: .3rem 0 !important;
-                    padding: 0 !important;
-                }
-                .icon {
-                    display: grid;
-                    grid-template-columns: 40px 1fr;
-                    i {
-                        display: flex;
-                        align-items: center;
-                        font-size: 1.3rem;
-                    }
-                }
-            }
-        }
-
-        .contact-icon {
-            display: flex;
-            margin-top: 2rem;
-            a {
-                display: flex;
-                align-items: center;
-                color: var(--color-white);
-                background-color: var(--color-grey-5);
-                cursor: pointer;
-                justify-content: center;
-                width: 50px;
-                height: 50px;
-                border-radius: 50%;
-                margin: 0 .4rem;
-                transition: all .4s ease-in-out;
-                &:hover {
-                    background-color: var(--color-secondary);
-                    i { color: var(--color-primary); }
-                }
-                i {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 1.3rem;
-                }
-            }
-        }
-    }
-
-    .right-contact {
-        flex: 3;
-        margin-left: 3rem;
-        .input-control {
-            margin: 1.5rem 0;
-            input, textarea {
-                border-radius: 30px;
-                font-weight: inherit;
-                font-size: inherit;
-                font-family: inherit;
-                padding: .8rem 1.1rem;
-                outline: none;
-                border: none;
-                background-color: var(--color-grey-5);
-                width: 100%;
-                color: var(--color-white);
-                resize: none;
-            }
-        }
-        .i-c-2 {
-            display: flex;
-            :last-child{
-                margin-left: 1.5rem;
-            }
-        }
-        .submit-btn {
-            display: flex;
-            justify-content: flex-start;
-        }
-    }
-}
-
-
-/*Independed components*/
-.btn-con {
-    display: flex;
-    align-self: flex-start;
-}
-.main-btn {
-    border-radius: 30px;
-    color: inherit;
-    font-weight: 600;
-    position: relative;
-    border: 1px solid var(--color-secondary);
-    display: flex;
-    align-self: flex-start;
-    align-items: center;
-    overflow: hidden;
-    .btn-text { padding: 0 2rem; }
-    .btn-icon {
-        background-color: var(--color-secondary);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        padding: 1rem;
-    }
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translateX(100%);
-        transition: all .4s ease-out;
-        z-index: -1;
-    }
-    &:hover {
-        transition: all .4s ease-out;
-        &::before {
-            width: 100%;
-            height: 100%;
-            background-color: var(--color-secondary);
-            transform: translateX(0);
-            transition: all .4s ease-out;
-        }
-    }
-
-}
-
-.main-title {
-    text-align: center;
-    h2 {
-        position: relative;
-        text-transform: uppercase;
-        font-size: 4rem;
-        font-weight: 700;
-        span { color: var(--color-secondary); }
-        .bg-text {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            color: var(--color-grey-5);
-            transition: all .4s ease-in-out;
-            z-index: -1;
-            transform: translate(-50%, -50%);
-            font-weight: 800;
-            font-size: 6.3rem;
-        }
-    }
-}
-
-@import './media';
\ No newline at end of file
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
new file mode 100644
index 00000000..16c1afc7
--- /dev/null
+++ b/stylesheets/_mixins.scss
@@ -0,0 +1,36 @@
+@mixin flex-center-vertical {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex-center {
+  @include flex-center-vertical;
+  justify-content: center;
+}
+
+@mixin round-icon($size:50px)  {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+}
+
+@mixin absolute-top {
+  position: absolute;
+  top: 0;
+}
+
+@mixin absolute-top-left {
+  @include absolute-top;
+  left: 0;
+}
+
+@mixin absolute-top-right {
+  @include absolute-top;
+  right: 0;
+}
+
+@mixin grid-columns($columns) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  grid-gap: 2rem;
+}
\ No newline at end of file
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
new file mode 100644
index 00000000..99abf60b
--- /dev/null
+++ b/stylesheets/_variables.scss
@@ -0,0 +1,30 @@
+:root {
+  --color-primary: #191d2b;
+  --color-secondary: #27AE60;
+  --color-white: #FFFFFF;
+  --color-black: #000;
+  --color-grey0: #f8f8f8;
+  --color-grey-1: #dbe1e8;
+  --color-grey-2: #b2becd;
+  --color-grey-3: #6c7983;
+  --color-grey-4: #454e56;
+  --color-grey-5: #2a2e35;
+  --color-grey-6: #12181b;
+  --br-sm-2: 14px;
+  --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
+  --transition: all .4s ease-in-out;
+}
+
+.light-mode {
+  --color-primary: #FFFFFF;
+  --color-secondary: #F56692;
+  --color-white: #454e56;
+  --color-black: #000;
+  --color-grey0: #f8f8f8;
+  --color-grey-1: #6c7983;
+  --color-grey-2: #6c7983;
+  --color-grey-3: #6c7983;
+  --color-grey-4: #454e56;
+  --color-grey-5: #f8f8f8;
+  --color-grey-6: #12181b;
+}
\ No newline at end of file
diff --git a/stylesheets/components/_components.scss b/stylesheets/components/_components.scss
new file mode 100644
index 00000000..db0f4bc1
--- /dev/null
+++ b/stylesheets/components/_components.scss
@@ -0,0 +1,63 @@
+@import '../mixins';
+
+.cv {
+  display: flex;
+  align-self: flex-start;
+  &-link {
+    border-radius: 30px;
+    color: inherit;
+    font-weight: 600;
+    border: 1px solid var(--color-secondary);
+    display: flex;
+    align-self: flex-start;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    &-text { padding: 0 2rem; }
+    &-icon {
+      background-color: var(--color-secondary);
+      @include flex-center;
+      border-radius: 50%;
+      padding: 1rem;
+    }
+    &:before {
+      content: '';
+      @include absolute-top-right;
+      height: 100%;
+      width: 100%;
+      transform: translateX(100%);
+      transition: var(--transition);
+      background-color: var(--color-secondary);
+      z-index: -5;
+    }
+    &:hover:before { transform: translateX(0); }
+  }
+}
+
+.main-title {
+  text-align: center;
+  h2 {
+    position: relative;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 700;
+    span { color: var(--color-secondary); }
+    .background-text {
+      width: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      color: var(--color-grey-5);
+      transition: var(--transition);
+      transform: translate(-50%, -50%);
+      font-weight: 800;
+      font-size: 6rem;
+      z-index: -5;
+      @media screen and (max-width: 1200px) { font-size: 4.5rem; }
+      @media screen and (max-width: 600px) { font-size: 3rem; }
+    }
+    @media screen and (max-width: 1200px) { font-size: 3rem; }
+    @media screen and (max-width: 600px) { font-size: 2rem; }
+  }
+}
+
diff --git a/stylesheets/components/_controls.scss b/stylesheets/components/_controls.scss
new file mode 100644
index 00000000..d46d3ddc
--- /dev/null
+++ b/stylesheets/components/_controls.scss
@@ -0,0 +1,50 @@
+@import '../mixins';
+
+#controls {
+  position: fixed;
+  z-index: 10;
+  top: 50%;
+  right: 3%;
+  @include flex-center;
+  flex-direction: column;
+  transform: translateY(-50%);
+  .control {
+    padding: 1rem;
+    cursor: pointer;
+    background-color: var(--color-grey-5);
+    @include round-icon(55px);
+    @include flex-center;
+    margin: .75rem 0;
+    box-shadow: var(--box-shadow);
+    i {
+      font-size: 1.25rem;
+      color: var(--color-grey-1);
+      pointer-events: none;
+    }
+    @media screen and (max-width: 600px) { margin: 1rem 0.25rem; }
+  }
+  .active-button {
+    background-color: var(--color-secondary);
+    transition: var(--transition);
+    i { color: var(--color-white); }
+  }
+}
+
+#switch-mode {
+  top: 5%;
+  right: 2.5%;
+  @include round-icon(70px);
+  border: 2px solid var(--color-grey-1);
+  background-color: var(--color-grey-5);
+  cursor: pointer;
+  position: fixed;
+  @include flex-center;
+  box-shadow: 0 3px 15px rgba(0,0,0,.3);
+  transition: all .1s ease-in-out;
+  i {
+    font-size: 1.75rem;
+    color: var(--color-grey-1);
+    pointer-events: none;
+  }
+  @media screen and (max-width: 600px) { @include round-icon(); }
+}
\ No newline at end of file
diff --git a/stylesheets/index.min.css b/stylesheets/index.min.css
new file mode 100644
index 00000000..d558cba3
--- /dev/null
+++ b/stylesheets/index.min.css
@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box;list-style:none}:root{--color-primary: #191d2b;--color-secondary: #27AE60;--color-white: #FFFFFF;--color-black: #000;--color-grey0: #f8f8f8;--color-grey-1: #dbe1e8;--color-grey-2: #b2becd;--color-grey-3: #6c7983;--color-grey-4: #454e56;--color-grey-5: #2a2e35;--color-grey-6: #12181b;--br-sm-2: 14px;--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);--transition: all .4s ease-in-out}.light-mode{--color-primary: #FFFFFF;--color-secondary: #F56692;--color-white: #454e56;--color-black: #000;--color-grey0: #f8f8f8;--color-grey-1: #6c7983;--color-grey-2: #6c7983;--color-grey-3: #6c7983;--color-grey-4: #454e56;--color-grey-5: #f8f8f8;--color-grey-6: #12181b}body{background-color:var(--color-primary);font-family:"Poppins",sans-serif;font-size:1.1rem;color:var(--color-white);transition:all .4s ease-in-out}a{display:inline-block;text-decoration:none;color:inherit;font-family:inherit}header{min-height:100vh;color:var(--color-white);overflow:hidden;padding:0}section.container{min-height:100vh;width:100%;position:absolute;left:0;top:0;padding:3rem 18rem}@media screen and (max-width: 1600px){section.container{padding:2.75rem 12rem}}@media screen and (max-width: 1200px){section.container{padding:2.5rem 3rem}}@media screen and (max-width: 600px){section.container{padding:2.25rem 1.5rem}}.container{display:none;transform:translateY(-100%) scale(0);transition:all .4s ease-in-out;background-color:var(--color-primary)}.active{display:block;animation:appear 1s ease-in-out;transform:translateY(0) scaleY(1)}@keyframes appear{0%{transform:translateY(-100%) scaleY(0)}100%{transform:translateY(0) scaleY(1)}}#controls{position:fixed;z-index:10;top:50%;right:3%;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translateY(-50%)}#controls .control{padding:1rem;cursor:pointer;background-color:var(--color-grey-5);width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:.75rem 0;box-shadow:var(--box-shadow)}#controls .control i{font-size:1.25rem;color:var(--color-grey-1);pointer-events:none}@media screen and (max-width: 600px){#controls .control{margin:1rem .25rem}}#controls .active-button{background-color:var(--color-secondary);transition:var(--transition)}#controls .active-button i{color:var(--color-white)}#switch-mode{top:5%;right:2.5%;width:70px;height:70px;border-radius:50%;border:2px solid var(--color-grey-1);background-color:var(--color-grey-5);cursor:pointer;position:fixed;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 15px rgba(0,0,0,.3);transition:all .1s ease-in-out}#switch-mode i{font-size:1.75rem;color:var(--color-grey-1);pointer-events:none}@media screen and (max-width: 600px){#switch-mode{width:50px;height:50px;border-radius:50%}}#header-content{width:100%;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:2rem;height:100vh}#header-content-left{display:flex;align-items:center;position:relative}#header-content-left-shape{transition:var(--transition);width:65%;height:100%;background-color:var(--color-secondary);position:absolute;top:0;left:0;z-index:-5;clip-path:polygon(0 0, 45% 0, 80% 100%, 0% 100%)}@media screen and (max-width: 1200px){#header-content-left-shape{display:none}}#header-content-left-image{border-radius:15px;width:70%;height:90%;margin-left:4rem;background-color:var(--color-black);transition:var(--transition)}#header-content-left-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition);filter:grayscale(100%)}#header-content-left-image img:hover{filter:grayscale(0%)}@media screen and (max-width: 600px){#header-content-left-image{width:90%;margin-inline:auto}}#header-content-right{display:flex;flex-direction:column;justify-content:center;padding-right:18rem}#header-content-right h1{font-size:2rem}#header-content-right h1 span{color:var(--color-secondary)}@media screen and (max-width: 600px){#header-content-right h1{font-size:2.5rem}}#header-content-right p{margin:1.5rem 0;line-height:2rem}@media screen and (max-width: 1200px){#header-content-right{width:90%;margin:2.5rem auto;padding:0}}@media screen and (max-width: 1200px){#header-content{text-align:center;display:flex;flex-direction:column-reverse;justify-content:center;align-items:center}#header-content .cv{align-self:center}}.cv{display:flex;align-self:flex-start}.cv-link{border-radius:30px;color:inherit;font-weight:600;border:1px solid var(--color-secondary);display:flex;align-self:flex-start;align-items:center;position:relative;overflow:hidden}.cv-link-text{padding:0 2rem}.cv-link-icon{background-color:var(--color-secondary);display:flex;align-items:center;justify-content:center;border-radius:50%;padding:1rem}.cv-link:before{content:"";position:absolute;top:0;right:0;height:100%;width:100%;transform:translateX(100%);transition:var(--transition);background-color:var(--color-secondary);z-index:-5}.cv-link:hover:before{transform:translateX(0)}.main-title{text-align:center}.main-title h2{position:relative;text-transform:uppercase;font-size:4rem;font-weight:700}.main-title h2 span{color:var(--color-secondary)}.main-title h2 .background-text{width:100%;position:absolute;top:50%;left:50%;color:var(--color-grey-5);transition:var(--transition);transform:translate(-50%, -50%);font-weight:800;font-size:6rem;z-index:-5}@media screen and (max-width: 1200px){.main-title h2 .background-text{font-size:4.5rem}}@media screen and (max-width: 600px){.main-title h2 .background-text{font-size:3rem}}@media screen and (max-width: 1200px){.main-title h2{font-size:3rem}}@media screen and (max-width: 600px){.main-title h2{font-size:2rem}}#about-header{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:2rem;padding-top:3.5rem;padding-bottom:5rem}#about-header-right{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:2rem}#about-header-right .header-item{border:1px solid var(--color-grey-5);border-radius:5px;transition:var(--transition);box-shadow:1px 2px 15px rgba(0,0,0,.1019607843)}#about-header-right .header-item:hover{transform:translateY(-5px);border:1px solid var(--color-secondary);box-shadow:1px 2px 15px rgba(0,0,0,.2274509804)}#about-header-right .header-item-text{padding:1.5rem;display:flex;flex-direction:column}#about-header-right .header-item-text-large{font-size:3rem;font-weight:700;color:var(--color-secondary)}#about-header-right .header-item-text-small{padding-left:3rem;position:relative;text-transform:uppercase;font-size:1.2rem;color:var(--color-grey-1);letter-spacing:2px}#about-header-right .header-item-text-small:before{content:"";position:absolute;top:15px;left:0;width:2rem;height:2px;background-color:var(--color-grey-5)}@media screen and (max-width: 600px){#about-header-right{grid-template-columns:1fr;padding-bottom:6rem}}#about-header-left{padding-right:5rem}@media screen and (max-width: 1200px){#about-header-left{display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center}#about-header-left .cv{align-self:center}}#about-header-left h4{font-size:2rem;text-transform:uppercase}#about-header-left p{line-height:2rem;padding:1rem;color:var(--color-grey-1)}@media screen and (max-width: 1200px){#about-header-left p{padding-left:0}}@media screen and (max-width: 1200px){#about-header-left{padding-right:0}}@media screen and (max-width: 1200px){#about-header{grid-template-columns:1fr}}#about-statistics{padding-bottom:4rem}#about-statistics #statistics{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:2rem}#about-statistics #statistics .skill{display:flex;flex-direction:column}#about-statistics #statistics .skill-image{width:40px}#about-statistics #statistics .skill-container{display:flex;align-items:center}#about-statistics #statistics .skill-container-text{color:var(--color-grey-2)}#about-statistics #statistics .skill-container-indicator{width:100%;height:.5rem;background-color:var(--color-grey-4);margin-left:1rem;position:relative}#about-statistics #statistics .skill-container-indicator span{position:absolute;top:0;left:0;height:100%;background-color:var(--color-secondary)}@media screen and (max-width: 600px){#about-statistics #statistics{grid-template-columns:1fr}}#about-timeline{padding-bottom:3rem}#about-timeline #timeline{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:2rem}#about-timeline #timeline .timeline-item{position:relative;padding-left:3rem;border-left:1px solid var(--color-grey-5)}#about-timeline #timeline .timeline-item-icon{position:absolute;top:0;left:-27px;background-color:var(--color-secondary);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}#about-timeline #timeline .timeline-item-icon i{font-size:1.3rem}#about-timeline #timeline .timeline-item-duration{padding:.2rem .6rem;background-color:var(--color-grey-5);border-radius:15px;display:inline-block;font-size:.8rem;text-transform:uppercase;font-weight:500}#about-timeline #timeline .timeline-item h5{padding:1rem 0;text-transform:uppercase;font-size:1.3rem;font-weight:600}#about-timeline #timeline .timeline-item h5 span{color:var(--color-grey-2);font-weight:500;font-size:1.2rem}#about-timeline #timeline .timeline-item-content{color:var(--color-grey-2)}@media screen and (max-width: 600px){#about-timeline #timeline{grid-template-columns:1fr;padding-bottom:6rem}}.about-title{text-transform:uppercase;font-size:1.4rem;text-align:center;padding:3.5rem 0;position:relative}.about-title::before{content:"";position:absolute;top:0;left:50%;width:40%;height:1px;background-color:var(--color-grey-5);transform:translateX(-50%)}#portfolio-subtitle{padding:2rem 0;text-align:center}#portfolio-container{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:2rem;margin-top:3rem}#portfolio-container .portfolio-item{position:relative;margin:auto}#portfolio-container .portfolio-item-image img{aspect-ratio:6/4;height:250px;object-fit:cover;border-radius:15px}@media screen and (max-width: 1600px){#portfolio-container .portfolio-item-image img{height:275px}}@media screen and (max-width: 1200px){#portfolio-container .portfolio-item-image img{height:300px}}@media screen and (max-width: 600px){#portfolio-container .portfolio-item-image img{height:225px}}#portfolio-container .portfolio-item-hover{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--color-secondary);border-radius:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transform:scale(0);transition:var(--transition)}#portfolio-container .portfolio-item-hover h3{font-size:1.5rem;color:var(--color-white);margin-bottom:1.5rem}#portfolio-container .portfolio-item-hover-icons{display:flex;align-items:center;justify-content:center}#portfolio-container .portfolio-item-hover-icons a{background-color:var(--color-primary);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 1rem;cursor:pointer;transition:var(--transition)}#portfolio-container .portfolio-item-hover-icons a i{font-size:1.5rem;color:var(--color-white);margin:0 1rem;transition:var(--transition)}#portfolio-container .portfolio-item-hover-icons a:hover{background-color:var(--color-white)}#portfolio-container .portfolio-item-hover-icons a:hover i{color:var(--color-secondary)}#portfolio-container .portfolio-item:hover .portfolio-item-hover{opacity:1;transform:scale(1)}@media screen and (max-width: 1600px){#portfolio-container{grid-template-columns:1fr 1fr}}@media screen and (max-width: 1200px){#portfolio-container{grid-template-columns:1fr;padding-bottom:6rem}}#articles{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:2rem;margin-top:3rem}#articles .article{position:relative;margin:auto;background-color:var(--color-grey-5);border-radius:5px;box-shadow:1px 1px 20px rgba(0,0,0,.1);transition:var(--transition)}#articles .article img{aspect-ratio:7/4;height:200px;object-fit:cover;border-radius:5px 5px 0 0;filter:grayscale(100%);transition:var(--transition);transition-property:filter,transform,box-shadow}@media screen and (max-width: 1200px){#articles .article img{height:250px}}@media screen and (max-width: 600px){#articles .article img{height:200px}}#articles .article-text{margin-top:-7.5px;padding:1.25rem;border-top:8px solid var(--color-secondary);max-width:350px}@media screen and (max-width: 1200px){#articles .article-text{max-width:437.5px}}@media screen and (max-width: 600px){#articles .article-text{max-width:350px}}#articles .article-text h4{font-size:1.5rem;margin-bottom:.75rem}#articles .article-text h4 a{transition:var(--transition);cursor:pointer}#articles .article-text h4 a:hover{color:var(--color-secondary)}#articles .article-text h4 p{color:var(--color-grey-2);line-height:2rem;padding-bottom:1rem}#articles .article:hover{box-shadow:var(--box-shadow);transform:translateY(-5px)}#articles .article:hover img{filter:grayscale(0);transform:scale(1.1);box-shadow:1px 4px 20px rgba(0,0,0,.5)}@media screen and (max-width: 1600px){#articles{grid-template-columns:1fr 1fr}}@media screen and (max-width: 1200px){#articles{grid-template-columns:1fr;padding-bottom:6rem}}#contact-content{display:flex;padding-top:3.5rem}@media screen and (max-width: 1200px){#contact-content{text-align:center}}#contact-content-left{flex:2}#contact-content-left h4{margin-top:1rem;font-size:2rem;text-transform:uppercase}#contact-content-left>p{margin:1rem 0;line-height:2rem}#contact-content-left-information .contact-item{display:flex;align-items:center;justify-content:space-between}#contact-content-left-information .contact-item>p{margin:.25rem 0}@media screen and (max-width: 1200px){#contact-content-left-information .contact-item>p{font-size:15px}}#contact-content-left-information .contact-item-icon p{display:grid;grid-template-columns:40px 1fr}@media screen and (max-width: 1200px){#contact-content-left-information .contact-item-icon p{font-size:15px;color:var(--color-grey-variation-grey)}}#contact-content-left-information .contact-item-icon p i{display:flex;align-items:center;font-size:1.25rem}@media screen and (max-width: 1200px){#contact-content-left-information .contact-item-icon p i{grid-template-columns:25px 1fr}}@media screen and (max-width: 1200px){#contact-content-left-information .contact-item{flex-direction:column;margin:1rem 0}}#contact-content-left-social{display:flex;margin-top:2rem}#contact-content-left-social a{display:flex;align-items:center;justify-content:center;color:var(--color-white);background-color:var(--color-grey-5);width:50px;height:50px;border-radius:50%;margin-inline:.5rem;transition:var(--transition)}#contact-content-left-social a:hover{background-color:var(--color-secondary);color:var(--color-primary)}#contact-content-left-social a:hover i{display:flex;align-items:center;justify-content:center;font-size:1.25rem}@media screen and (max-width: 1200px){#contact-content-left-social{justify-content:center}}#contact-content-right{flex:3;margin-left:3rem}#contact-content-right .input-control{margin:1.5rem 0}#contact-content-right .input-control input,#contact-content-right .input-control textarea{border-radius:30px;font:inherit;padding:.75rem 1.25rem;outline:none;border:none;background-color:var(--color-grey-5);width:100%;color:var(--color-white);resize:none}#contact-content-right .input-control-flex{display:flex;gap:1.5rem}#contact-content-right .input-control-flex label{width:100%}@media screen and (max-width: 1200px){#contact-content-right .input-control-flex{flex-direction:column}}@media screen and (max-width: 1600px){#contact-content-right{margin-left:0;margin-top:2.5rem}}@media screen and (max-width: 1600px){#contact-content{flex-direction:column}}@media screen and (max-width: 1200px){#contact-content .cv{width:100%}#contact-content .cv-link{margin-inline:auto}}/*# sourceMappingURL=index.min.css.map */
diff --git a/stylesheets/index.min.css.map b/stylesheets/index.min.css.map
new file mode 100644
index 00000000..4d7cb914
--- /dev/null
+++ b/stylesheets/index.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss","_variables.scss","components/_controls.scss","_mixins.scss","sections/_header.scss","components/_components.scss","sections/_about.scss","sections/_portfolio.scss","sections/_blog.scss","sections/_contact.scss"],"names":[],"mappings":"AAAA,EACI,SACA,UACA,sBACA,gBCJJ,MACE,yBACA,2BACA,uBACA,oBACA,uBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBACA,gBACA,0CACA,kCAGF,YACE,yBACA,2BACA,uBACA,oBACA,uBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBDlBF,KACI,sCACA,iCACA,iBACA,yBACA,+BAGJ,EACI,qBACA,qBACA,cACA,oBAGJ,OACI,iBACA,yBACA,gBACA,UAGJ,kBACI,iBACA,WACA,kBACA,OACA,MACA,mBACA,sCAPJ,kBAO4C,uBACxC,sCARJ,kBAQ4C,qBACxC,qCATJ,kBAS2C,wBAG3C,WACI,aACA,qCACA,+BACA,sCAGJ,QACI,cACA,gCACA,kCACA,kBACI,yCACA,wCEvDR,UACE,eACA,WACA,QACA,SCLA,aACA,mBAKA,uBDCA,sBACA,2BACA,mBACE,aACA,eACA,qCCFF,MDGsB,KCFtB,ODEsB,KCDtB,kBAZA,aACA,mBAKA,uBDSE,gBACA,6BACA,qBACE,kBACA,0BACA,oBAEF,qCAbF,mBAayC,oBAEzC,yBACE,wCACA,6BACA,oDAIJ,aACE,OACA,WCvBA,MDwBoB,KCvBpB,ODuBoB,KCtBpB,kBDuBA,qCACA,qCACA,eACA,eCtCA,aACA,mBAKA,uBDkCA,qCACA,+BACA,eACE,kBACA,0BACA,oBAEF,qCAhBF,aCrBE,MADsB,KAEtB,OAFsB,KAGtB,mBCXF,gBACE,WD6BA,aACA,qCACA,cC7BA,aACA,qBDLA,aACA,mBCME,kBACA,2BACE,6BACA,UACA,YACA,wCDIJ,kBACA,MAKA,OCRI,WACA,iDACA,sCARF,2BAQyC,cAEzC,2BACE,mBACA,UACA,WACA,iBACA,oCACA,6BACA,+BACE,WACA,YACA,iBACA,6BACA,uBACA,0DAEF,qCAfF,2BAgBI,UACA,oBAIN,sBACE,aACA,sBACA,uBACA,oBACA,yBACE,eACA,2DACA,qCAHF,yBAGyC,kBAEzC,wBACE,gBACA,iBAEF,sCAdF,sBAeI,UACA,mBACA,WAGJ,sCA1DF,gBA2DI,kBACA,aACA,8BACA,uBACA,mBACA,uCChEJ,IACE,aACA,sBACA,SACE,mBACA,cACA,gBACA,wCACA,aACA,sBACA,mBACA,kBACA,gBACA,6BACA,cACE,wCFhBJ,aACA,mBAKA,uBEYI,kBACA,aAEF,gBACE,WFNJ,kBACA,MAUA,QEHI,YACA,WACA,2BACA,6BACA,wCACA,WAEF,8CAIJ,YACE,kBACA,eACE,kBACA,yBACA,eACA,gBACA,iDACA,gCACE,WACA,kBACA,QACA,SACA,0BACA,6BACA,gCACA,gBACA,eACA,WACA,sCAXF,gCAW0C,kBACxC,qCAZF,gCAYyC,gBAEzC,sCApBF,eAoB0C,gBACxC,qCArBF,eAqByC,gBCzD3C,cH8BE,aACA,qCACA,cG9BA,mBACA,oBACA,oBH0BA,aACA,qCACA,cG1BE,iCACE,qCACA,kBACA,6BACA,gDACA,uCACE,2BACA,wCACA,gDAEF,sCACE,eACA,aACA,sBACA,4CACE,eACA,gBACA,6BAEF,4CACE,kBACA,kBACA,yBACA,iBACA,0BACA,mBACA,mDACE,WACA,kBACA,SACA,OACA,WACA,WACA,qCAKR,qCAxCF,oBAyCI,0BACA,qBAGJ,mBACE,mBACA,sCAFF,mBAGI,aACA,sBACA,uBACA,kBACA,mBACA,0CAEF,sBACE,eACA,yBAEF,qBACE,iBACA,aACA,0BACA,sCAJF,qBAI0C,gBAE1C,sCApBF,mBAoB0C,iBAE1C,sCAvEF,cAuE0C,2BAG1C,kBACE,oBACA,8BH9CA,aACA,qCACA,cG8CE,qCACE,aACA,sBACA,sDACA,+CACE,aACA,mBACA,8EACA,yDACE,WACA,aACA,qCACA,iBACA,kBACA,8DH7ER,kBACA,MAKA,OGyEU,YACA,wCAKR,qCAxBF,8BAwByC,2BAI3C,gBACE,oBACA,0BH5EA,aACA,qCACA,cG4EE,yCACE,kBACA,kBACA,0CACA,8CHjGJ,kBACA,MGkGM,WACA,wCACA,WACA,YACA,kBHvHN,aACA,mBAKA,uBGmHM,iEAEF,kDACE,oBACA,qCACA,mBACA,qBACA,gBACA,yBACA,gBAEF,4CACE,eACA,yBACA,iBACA,gBACA,iDACE,0BACA,gBACA,iBAGJ,2EAEF,qCAtCF,0BAuCI,0BACA,qBAKN,aACE,yBACA,iBACA,kBACA,iBACA,kBACA,qBACE,WH/IF,kBACA,MGgJE,SACA,UACA,WACA,qCACA,2BCnKF,oBACE,eACA,kBAEF,qBJyBA,aACA,qCACA,cIzBE,gBACA,qCACE,kBACA,YAEE,+CACE,iBACA,aACA,iBACA,mBACA,sCALF,+CAK0C,cACxC,sCANF,+CAM0C,cACxC,qCAPF,+CAOyC,cAG3C,2CACE,WACA,YJTN,kBACA,MAKA,OIKM,wCACA,mBJ5BN,aACA,mBAKA,uBIwBM,sBACA,UACA,mBACA,6BACA,8CACE,iBACA,yBACA,qBAEF,iDJvCN,aACA,mBAKA,uBImCQ,mDACE,sCACA,kBACA,WACA,YJ7CV,aACA,mBAKA,uBIyCU,cACA,eACA,6BACA,qDACE,iBACA,yBACA,cACA,6BAEF,yDACE,oCACA,wFAKR,iEACE,UACA,mBAGJ,sCA9DF,qBA8D0C,+BACxC,sCA/DF,qBAgEI,0BACA,qBCtEN,UL8BE,aACA,qCACA,cK9BA,gBACA,mBACE,kBACA,YACA,qCACA,kBACA,uCACA,6BACA,uBACE,iBACA,aACA,iBACA,0BACA,uBACA,6BACA,gDACA,sCARF,uBAQ0C,cACxC,qCATF,uBASyC,cAEzC,wBACE,kBACA,gBACA,4CACA,gBACA,sCALF,wBAK0C,mBACxC,qCANF,wBAMyC,iBACvC,2BACE,iBACA,qBACA,6BACE,6BACA,eACA,gEAEF,6BACE,0BACA,iBACA,oBAKN,yBACE,6BACA,2BACA,6BACE,oBACA,qBACA,uCAIN,sCAtDF,UAsD0C,+BACxC,sCAvDF,UAwDI,0BACA,qBCzDJ,iBACE,aACA,mBACA,sCAHF,iBAG0C,mBACxC,sBACE,OACA,yBACE,gBACA,eACA,yBAEF,wBACE,cACA,iBAGA,gDNjBJ,aACA,mBMkBM,8BACA,kDACE,gBACA,sCAFF,kDAE0C,gBAE1C,uDACE,aACA,+BACA,sCAHF,uDAII,eACA,wCAEF,yDN/BR,aACA,mBMgCU,kBACA,sCAHF,yDAG0C,gCAG5C,sCApBF,gDAqBI,sBACA,eAIN,6BACE,aACA,gBACA,+BN9CJ,aACA,mBAKA,uBM0CM,yBACA,qCNvCN,MADsB,KAEtB,OAFsB,KAGtB,kBMuCM,oBACA,6BACA,qCACE,wCACA,2BACA,uCNxDR,aACA,mBAKA,uBMoDU,kBAIN,sCAnBF,6BAmB0C,wBAG5C,uBACE,OACA,iBACA,sCACE,gBACA,2FACE,mBACA,aACA,uBACA,aACA,YACA,qCACA,WACA,yBACA,YAEF,2CACE,aACA,WACA,4DACA,sCAJF,2CAI0C,uBAG5C,sCAvBF,uBAwBI,cACA,mBAGJ,sCA5FF,iBA4F0C,uBACxC,sCACE,qBACE,WACA","file":"index.min.css"}
\ No newline at end of file
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
new file mode 100644
index 00000000..bc53a1a2
--- /dev/null
+++ b/stylesheets/index.scss
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+}
+
+@import './variables';
+@import './mixins';
+
+body {
+    background-color: var(--color-primary);
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.1rem;
+    color: var(--color-white);
+    transition: all .4s ease-in-out;
+}
+
+a {
+    display: inline-block;
+    text-decoration: none;
+    color: inherit;
+    font-family: inherit;
+}
+
+header {
+    min-height: 100vh;
+    color: var(--color-white);
+    overflow: hidden;
+    padding: 0;
+}
+
+section.container {
+    min-height: 100vh;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 3rem 18rem;
+    @media screen and (max-width: 1600px) { padding: 2.75rem 12rem; }
+    @media screen and (max-width: 1200px) { padding: 2.5rem 3rem; }
+    @media screen and (max-width: 600px) { padding: 2.25rem 1.5rem; }
+}
+
+.container {
+    display: none;
+    transform: translateY(-100%) scale(0);
+    transition: all .4s ease-in-out;
+    background-color: var(--color-primary);
+}
+
+.active {
+    display: block;
+    animation: appear 1s ease-in-out;
+    transform: translateY(0) scaleY(1);
+    @keyframes appear {
+        0%{ transform: translateY(-100%) scaleY(0); }
+        100%{ transform: translateY(0) scaleY(1); }
+    }
+}
+
+@import './components/controls';
+@import './sections/header';
+@import './components/components';
+@import './sections/about';
+@import './sections/portfolio';
+@import './sections/blog';
+@import './sections/contact';
\ No newline at end of file
diff --git a/stylesheets/sections/_about.scss b/stylesheets/sections/_about.scss
new file mode 100644
index 00000000..0d68a60f
--- /dev/null
+++ b/stylesheets/sections/_about.scss
@@ -0,0 +1,169 @@
+@import '../mixins';
+
+#about-header {
+  @include grid-columns(2);
+  padding-top: 3.5rem;
+  padding-bottom: 5rem;
+  &-right {
+    @include grid-columns(2);
+    .header-item {
+      border: 1px solid var(--color-grey-5);
+      border-radius: 5px;
+      transition: var(--transition);
+      box-shadow: 1px 2px 15px #0000001A;
+      &:hover {
+        transform: translateY(-5px);
+        border: 1px solid var(--color-secondary);
+        box-shadow: 1px 2px 15px #0000003A;
+      }
+      &-text {
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        &-large {
+          font-size: 3rem;
+          font-weight: 700;
+          color: var(--color-secondary);
+        }
+        &-small {
+          padding-left: 3rem;
+          position: relative;
+          text-transform: uppercase;
+          font-size: 1.2rem;
+          color: var(--color-grey-1);
+          letter-spacing: 2px;
+          &:before {
+            content: "";
+            position: absolute;
+            top: 15px;
+            left: 0;
+            width: 2rem;
+            height: 2px;
+            background-color: var(--color-grey-5);
+          }
+        }
+      }
+    }
+    @media screen and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      padding-bottom: 6rem;
+    }
+  }
+  &-left {
+    padding-right: 5rem;
+    @media screen and (max-width: 1200px) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      .cv { align-self: center; }
+    }
+    h4 {
+      font-size: 2rem;
+      text-transform: uppercase;
+    }
+    p {
+      line-height: 2rem;
+      padding: 1rem;
+      color: var(--color-grey-1);
+      @media screen and (max-width: 1200px) { padding-left: 0; }
+    }
+    @media screen and (max-width: 1200px) { padding-right: 0; }
+  }
+  @media screen and (max-width: 1200px) { grid-template-columns: 1fr; }
+}
+
+#about-statistics {
+  padding-bottom: 4rem;
+  #statistics {
+    @include grid-columns(2);
+    .skill {
+      display: flex;
+      flex-direction: column;
+      &-image { width: 40px; }
+      &-container {
+        display: flex;
+        align-items: center;
+        &-text { color: var(--color-grey-2); }
+        &-indicator {
+          width: 100%;
+          height: .5rem;
+          background-color: var(--color-grey-4);
+          margin-left: 1rem;
+          position: relative;
+          span {
+            @include absolute-top-left;
+            height: 100%;
+            background-color: var(--color-secondary);
+          }
+        }
+      }
+    }
+    @media screen and (max-width: 600px) { grid-template-columns: 1fr; }
+  }
+}
+
+#about-timeline {
+  padding-bottom: 3rem;
+  #timeline {
+    @include grid-columns(2);
+    .timeline-item {
+      position: relative;
+      padding-left: 3rem;
+      border-left: 1px solid var(--color-grey-5);
+      &-icon {
+        @include absolute-top;
+        left: -27px;
+        background-color: var(--color-secondary);
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        @include flex-center;
+        i { font-size: 1.3rem; }
+      }
+      &-duration {
+        padding: .2rem .6rem;
+        background-color: var(--color-grey-5);
+        border-radius: 15px;
+        display: inline-block;
+        font-size: .8rem;
+        text-transform: uppercase;
+        font-weight: 500;
+      }
+      h5 {
+        padding: 1rem 0;
+        text-transform: uppercase;
+        font-size: 1.3rem;
+        font-weight: 600;
+        span {
+          color: var(--color-grey-2);
+          font-weight: 500;
+          font-size: 1.2rem;
+        }
+      }
+      &-content { color: var(--color-grey-2); }
+    }
+    @media screen and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      padding-bottom: 6rem;
+    }
+  }
+}
+
+.about-title {
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  text-align: center;
+  padding: 3.5rem 0;
+  position: relative;
+  &::before {
+    content: '';
+    @include absolute-top;
+    left: 50%;
+    width: 40%;
+    height: 1px;
+    background-color: var(--color-grey-5);
+    transform: translateX(-50%);
+  }
+}
diff --git a/stylesheets/sections/_blog.scss b/stylesheets/sections/_blog.scss
new file mode 100644
index 00000000..b9076a2a
--- /dev/null
+++ b/stylesheets/sections/_blog.scss
@@ -0,0 +1,62 @@
+@import '../mixins';
+
+#articles {
+  @include grid-columns(3);
+  margin-top: 3rem;
+  .article {
+    position: relative;
+    margin: auto;
+    background-color: var(--color-grey-5);
+    border-radius: 5px;
+    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+    img {
+      aspect-ratio: 7/4;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 5px 5px 0 0;
+      filter: grayscale(100%);
+      transition: var(--transition);
+      transition-property: filter, transform, box-shadow;
+      @media screen and (max-width: 1200px) { height: 250px; }
+      @media screen and (max-width: 600px) { height: 200px; }
+    }
+    &-text  {
+      margin-top: -7.5px;
+      padding: 1.25rem;
+      border-top: 8px solid var(--color-secondary);
+      max-width: 350px;
+      @media screen and (max-width: 1200px) { max-width: calc(250px * 7 / 4); }
+      @media screen and (max-width: 600px) { max-width: 350px; }
+      h4 {
+        font-size: 1.5rem;
+        margin-bottom: .75rem;
+        a {
+          transition: var(--transition);
+          cursor: pointer;
+          &:hover { color: var(--color-secondary); }
+        }
+        p {
+          color: var(--color-grey-2);
+          line-height: 2rem;
+          padding-bottom: 1rem;
+        }
+
+      }
+    }
+    &:hover {
+      box-shadow: var(--box-shadow);
+      transform: translateY(-5px);
+      img {
+        filter: grayscale(0);
+        transform: scale(1.1);
+        box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.5);;
+      }
+    }
+  }
+  @media screen and (max-width: 1600px) { grid-template-columns: 1fr 1fr; }
+  @media screen and (max-width: 1200px) {
+    grid-template-columns: 1fr;
+    padding-bottom: 6rem;
+  }
+}
\ No newline at end of file
diff --git a/stylesheets/sections/_contact.scss b/stylesheets/sections/_contact.scss
new file mode 100644
index 00000000..cdc97b5e
--- /dev/null
+++ b/stylesheets/sections/_contact.scss
@@ -0,0 +1,102 @@
+@import '../mixins';
+
+#contact-content {
+  display: flex;
+  padding-top: 3.5rem;
+  @media screen and (max-width: 1200px) { text-align: center; }
+  &-left {
+    flex: 2;
+    h4 {
+      margin-top: 1rem;
+      font-size: 2rem;
+      text-transform: uppercase;
+    }
+    > p {
+      margin: 1rem 0;
+      line-height: 2rem;
+    }
+    &-information {
+      .contact-item {
+        @include flex-center-vertical;
+        justify-content: space-between;
+        > p {
+          margin: 0.25rem 0;
+          @media screen and (max-width: 1200px) { font-size: 15px; }
+        }
+        &-icon p {
+          display: grid;
+          grid-template-columns: 40px 1fr;
+          @media screen and (max-width: 1200px) {
+            font-size: 15px;
+            color: var(--color-grey-variation-grey);
+          }
+          i {
+            @include flex-center-vertical;
+            font-size: 1.25rem;
+            @media screen and (max-width: 1200px) { grid-template-columns: 25px 1fr; }
+          }
+        }
+        @media screen and (max-width: 1200px) {
+          flex-direction: column;
+          margin: 1rem 0;
+        }
+      }
+    }
+    &-social {
+      display: flex;
+      margin-top: 2rem;
+      a {
+        @include flex-center;
+        color: var(--color-white);
+        background-color: var(--color-grey-5);
+        @include round-icon;
+        margin-inline: 0.5rem;
+        transition: var(--transition);
+        &:hover {
+          background-color: var(--color-secondary);
+          color: var(--color-primary);
+          i {
+            @include flex-center;
+            font-size: 1.25rem;
+          }
+        }
+      }
+      @media screen and (max-width: 1200px) { justify-content: center; }
+    }
+  }
+  &-right {
+    flex: 3;
+    margin-left: 3rem;
+    .input-control {
+      margin: 1.5rem 0;
+      input, textarea {
+        border-radius: 30px;
+        font: inherit;
+        padding: .75rem 1.25rem;
+        outline: none;
+        border: none;
+        background-color: var(--color-grey-5);
+        width: 100%;
+        color: var(--color-white);
+        resize: none;
+      }
+      &-flex {
+        display: flex;
+        gap: 1.5rem;
+        label { width: 100%;}
+        @media screen and (max-width: 1200px) { flex-direction: column; }
+      }
+    }
+    @media screen and (max-width: 1600px) {
+      margin-left: 0;
+      margin-top: 2.5rem;
+    }
+  }
+  @media screen and (max-width: 1600px) { flex-direction: column; }
+  @media screen and (max-width: 1200px) {
+    .cv {
+      width: 100%;
+      &-link{ margin-inline: auto; }
+    }
+  }
+}
\ No newline at end of file
diff --git a/stylesheets/sections/_header.scss b/stylesheets/sections/_header.scss
new file mode 100644
index 00000000..981cabca
--- /dev/null
+++ b/stylesheets/sections/_header.scss
@@ -0,0 +1,69 @@
+@import '../mixins';
+
+#header-content {
+  width: 100%;
+  @include grid-columns(2);
+  height: 100vh;
+  &-left {
+    @include flex-center-vertical;
+    position: relative;
+    &-shape {
+      transition: var(--transition);
+      width: 65%;
+      height: 100%;
+      background-color: var(--color-secondary);
+      @include absolute-top-left;
+      z-index: -5;
+      clip-path: polygon(0 0, 45% 0, 80% 100%, 0% 100%);
+      @media screen and (max-width: 1200px){ display: none; }
+    }
+    &-image {
+      border-radius: 15px;
+      width: 70%;
+      height: 90%;
+      margin-left: 4rem;
+      background-color: var(--color-black);
+      transition: var(--transition);
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: var(--transition);
+        filter: grayscale(100%);
+        &:hover { filter: grayscale(0%); }
+      }
+      @media screen and (max-width: 600px) {
+        width: 90%;
+        margin-inline: auto;
+      }
+    }
+  }
+  &-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-right: 18rem;
+    h1 {
+      font-size: 2rem;
+      span { color: var(--color-secondary); }
+      @media screen and (max-width: 600px) { font-size: 2.5rem;}
+    }
+    p {
+      margin: 1.5rem 0;
+      line-height: 2rem;
+    }
+    @media screen and (max-width: 1200px) {
+      width: 90%;
+      margin: 2.5rem auto;
+      padding : 0;
+    }
+  }
+  @media screen and (max-width: 1200px){
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+    align-items: center;
+    .cv { align-self: center;}
+  }
+}
\ No newline at end of file
diff --git a/stylesheets/sections/_portfolio.scss b/stylesheets/sections/_portfolio.scss
new file mode 100644
index 00000000..1bcdc109
--- /dev/null
+++ b/stylesheets/sections/_portfolio.scss
@@ -0,0 +1,76 @@
+@import '../mixins';
+
+#portfolio {
+  &-subtitle {
+    padding: 2rem 0;
+    text-align: center;
+  }
+  &-container {
+    @include grid-columns(3);
+    margin-top: 3rem;
+    .portfolio-item {
+      position: relative;
+      margin: auto;
+      &-image {
+        img {
+          aspect-ratio: 6/4;
+          height: 250px;
+          object-fit: cover;
+          border-radius: 15px;
+          @media screen and (max-width: 1600px) { height: 275px; }
+          @media screen and (max-width: 1200px) { height: 300px; }
+          @media screen and (max-width: 600px) { height: 225px; }
+        }
+      }
+      &-hover {
+        width: 100%;
+        height: 100%;
+        @include absolute-top-left;
+        background-color: var(--color-secondary);
+        border-radius: 15px;
+        @include flex-center;
+        flex-direction: column;
+        opacity: 0;
+        transform: scale(0);
+        transition: var(--transition);
+        h3 {
+          font-size: 1.5rem;
+          color: var(--color-white);
+          margin-bottom: 1.5rem;
+        }
+        &-icons {
+          @include flex-center;
+          a {
+            background-color: var(--color-primary);
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            @include flex-center;
+            margin: 0 1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            i {
+              font-size: 1.5rem;
+              color: var(--color-white);
+              margin: 0 1rem;
+              transition: var(--transition);
+            }
+            &:hover {
+              background-color: var(--color-white);
+              i { color: var(--color-secondary); }
+            }
+          }
+        }
+      }
+      &:hover .portfolio-item-hover {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @media screen and (max-width: 1600px) { grid-template-columns: 1fr 1fr; }
+    @media screen and (max-width: 1200px) {
+      grid-template-columns: 1fr;
+      padding-bottom: 6rem;
+    }
+  }
+}