implement skills section with real data

src/components/skills/skills.js

@@ -10,7 +10,7 @@ const createSkill = (content, imgSrc, title, parent) => {
 
   const createSkillContent = (text) => {
     const skillListItem = document.createElement('li');
-    skillListItem.textContent = `- ${text}`;
+    skillListItem.textContent = text;
     skillContent.append(skillListItem);
   };
 

src/data/json/skills/skills-data.json

@@ -1,65 +1,67 @@
 [
   {
     "content": [
-      "Developed reusable React components for various projects.",
-      "Utilized hooks for state management and lifecycle methods.",
-      "Integrated third-party libraries for enhanced UI/UX."
+      "I have 1 year of experience with React, and 3 years of experience in JavaScript alltogether.",
+      "Every time I create a project in vanilla, I create a project in React. I find that I learn from both, and that I am able to apply what I learn in one to the other. I have no doubt that I would be able to implement my most verbose vanilla projects in React, and vice versa. With that being said, it's hard to pinpoint exactly where my React skills are at, but I will say that I have not yet encountered the roadblocks that I had to overcome in vanilla, the 2 years I spent imprisoned ",
+      "I do not feel limited by React in any way, and while I have yet to take on a project with the complexity of some of my vanilla projects, notably the Google Calendar Clone, I am confident that I would be able to do so. The real hill I have yet to climb is real-world react experience, and I am eager to do so.",
+      "No, I do not have any real-world experience with React, but I am confident that I am prepared to deliver. I have been working with React for a year now, and I have been working with JavaScript for 3 years counting my time in React. I have a deep understanding of the fundamentals of JavaScript, therefore I have a deep understanding of React. The 'in-between' variable declaration and execution are certainly different, but the underlying concepts are the same."
     ],
     "imgSrc": "react",
     "title": "React JS"
   },
   {
     "content": [
-      "Implemented complex features without relying on frameworks.",
-      "Optimized website performance and responsiveness.",
-      "Debugged and resolved cross-browser compatibility issues."
+      "My experience with Next.js is more or less the same as my experience with React. I have been using it for a year now, although I have only published one project publicly, but I think that project is a good representation that I am comfortable and capable with the framework",
+      "Built a Next.js blog application with the latest App Router, ContentLayer for CMS, CSS Modules and TypeScript.",
+      "Blog application scores a flawless 100 on Google Lighthouse and Vercel's Performance, Accessibility, Best Practices, and SEO audits. It is built with a mobile first approach in mind and the UI, though not my own design (I got it from basement.studio), is implemented from scratch using CSS Modules. Creating and updating blog posts is as simple as updating a MDX file, all in thanks to the ContentLayer SDK."
     ],
-    "imgSrc": "vanilla",
-    "title": "Vanilla JS"
+    "imgSrc": "next",
+    "title": "Next.js"
   },
   {
     "content": [
-      "Typed JavaScript for better maintainability and fewer runtime errors.",
-      "Integrated third-party libraries with custom type declarations.",
-      "Utilized advanced types and generics for complex logic."
+      "I have 1 year of experience with TypeScript. My most recent projects are all written in TypeScript, and I am well-versed in it's TSX syntax when used with React.",
+      "I have built two, Zero-dependency NPM packages using Typescript, the latest of which has over 1000 downloads (monthpicker-lite-js). My latest project is a Blog written in TSX using Next.js, and I am currently working on a few different React NPM Component packages using TSX."
     ],
     "imgSrc": "typescript",
     "title": "TypeScript"
   },
   {
     "content": [
-      "Configured Webpack for optimized bundling and chunking.",
-      "Set up loaders and plugins for transpiling and asset management.",
-      "Enhanced app performance through tree shaking and code splitting."
+      "3 years of experience with Vanilla JS.",
+      "Prioritized building a foundation through Vanilla and spent the first 2 years of my learning using it exclusively.",
+      "Pledged to not use any frameworks until I felt I had pushed Vanilla as far as I could, which came in the form of building a one for one clone of Google Calendar without the use of any frameworks or libraries.",
+      "The long time spent at ground zero without any third party code prepared me extremely well for modern frameworks.",
+      "Have solved at least 2 problems a day on Codewars for nearly 2 years. Began mixing in Leetcode 4 months ago, and in total I have solved over 1,000 problems on these sites and have reached the top .25% of codewars users."
     ],
-    "imgSrc": "webpack",
-    "title": "Webpack"
+    "imgSrc": "vanilla",
+    "title": "Vanilla JS"
   },
   {
     "content": [
-      "Designed responsive layouts with Flexbox and Grid.",
-      "Implemented animations and transitions for improved user interactions.",
-      "Ensured cross-browser styling consistency."
+      "Automation is important to me, unfortunately there are not many tools I'm aware of that are great at it. I have been honing with Node for a year now and have built several CLI tools to automate various tasks.",
+      "I do not publicly share the majority of these tools, but I will leave them in whatever project I am working on that requires them. This portfolio for example hass a CLI Image Handling Script that automates several annoying tasks relative to image handling such as resizing, applying filters, converting to webp, creating queries, data URIs, and more.",
+      "The majority of the time when I create a project that I do not intend on making public, I will use a custom Node build process to compile and bundle the project."
     ],
-    "imgSrc": "css",
-    "title": "CSS"
+    "imgSrc": "node",
+    "title": "Node JS"
   },
   {
     "content": [
-      "Built SEO-friendly web apps with static site generation.",
-      "Optimized page loads with incremental static regeneration.",
-      "Integrated with various data sources using Next.js API routes."
+      "I have over 5 years of experience with CSS, enough to know how to re-create any design so long as it doesn't involve canvas magic.",
+      "Am open to using any CSS framework or tooling, some of the ones I am familiar with are: Bootstrap, Tailwind, and Module CSS."
     ],
-    "imgSrc": "next",
-    "title": "Next.js"
+    "imgSrc": "css",
+    "title": "CSS"
   },
   {
     "content": [
-      "Set up and customized WordPress sites for various clients.",
-      "Implemented custom themes and plugins to enhance site functionality.",
-      "Optimized site speed and ensured security through regular updates."
+      "Over 2 years of experience with Webpack.",
+      "Familiar with all of the core loading and optimization features in standard webpack.",
+      "Have explored many of the more advanced features such as code splitting, tree shaking, and module federation.",
+      "Make it a habit to try out different configurations with each new project. For example, this portfolio utilizes a very underrated plugin called 'html-bundler-webpack-plugin' which allows you to resolve images, fonts, css, and js files from your html files."
     ],
-    "imgSrc": "wordpress",
-    "title": "WordPress"
+    "imgSrc": "webpack",
+    "title": "Webpack"
   }
 ]

src/index.html

@@ -30,29 +30,18 @@
   <aside class="gradient-overlay--two"></aside>
   <svg style="position:absolute;top:0;left:0;height:0;width:0;z-index:-1;opacity:0;visibility:hidden;">
   <filter id='grainy' x='0' y='0' width='100%' height='100%'>
-    <!-- <feTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/> -->
-    <!-- <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='5' stitchTiles='stitch' result='noise'/> -->
-    <feTurbulence 
-    type='fractalNoise' 
-    baseFrequency='0.6' 
-    stitchTiles='stitch'/>
-   <feColorMatrix in="colorNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
-      <feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
-      <feBlend in="SourceGraphic" in2="monoNoise" mode="screen" />
+    <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='5' stitchTiles='stitch' result='noise'/>
   </filter>
   </svg>
 
   <!-- HEADER (FIXED)-->
-  <!-- style="background-color:transparent;" -->
-  <header class="header" >
+  <header class="header">
     <div class="header-wrapper">
       <div class="header-logo--wrapper">
         <a class="header-logo" data-href="#header-top" title="Scroll To Top" aria-label="button" href="#page-top">
-          <!-- <img src="./images/svg/globe.svg" alt> -->
-          <!-- <img src="./images/svg/logo.svg" alt> -->
         </a>
       </div>
-
+      
       <div class="nav-wrapper">
         <nav class="header-nav">
           <ul class="nav-menu">
@@ -105,12 +94,12 @@
     <div class="intro-header">
       <div class="intro-header__subtitles">
         <h1>chase ottofy</h1>
-        <div class="intro-container--links">
-          <a href="mailto:[email protected]" title="Open Mail-to" class="mailto-link" data-tooltip-text="[email protected]"><img src="./images/svg/mailto.svg" alt>Email</a>
-          <a href="https://github.com/chaseottofy" title="Github Profile" target="_blank" rel="noreferrer" data-tooltip-text="github.com/chaseottofy"><img src="./images/svg/githuboutline.svg" alt>Github</a>
-        </div>
       </div>
     </div>
+    <div class="intro-container--links">
+      <a href="mailto:[email protected]" title="Open Mail-to" class="mailto-link" data-tooltip-text="[email protected]"><img src="./images/svg/mailto.svg" alt>Email</a>
+      <a href="https://github.com/chaseottofy" title="Github Profile" target="_blank" rel="noreferrer" data-tooltip-text="github.com/chaseottofy"><img src="./images/svg/githuboutline.svg" alt>Github</a>
+    </div>
 
     <aside class="intro-observer-ref--top"></aside>
     <aside class="intro-observer-ref"></aside>
@@ -461,6 +450,12 @@ <h4 class="skill-title"></h4>
           <ul class="skill-content"></ul>
           <div class="skill-img--wrapper"></div>
         </div>
+
+        <div class="skills-cell">
+          <h4 class="skill-title"></h4>
+          <ul class="skill-content"></ul>
+          <div class="skill-img--wrapper"></div>
+        </div>
       </div>
     </article>
 
@@ -666,6 +661,7 @@ <h3>Send Direct Message</h3>
     </span>
   </aside>
 
+
 </body>
 
 </html>

src/styles/gradients/headerGradient.css

@@ -48,7 +48,7 @@
 
 .gradient-overlay--two {
   position: absolute;
-  z-index: 900;
+  z-index: 200;
 
   /* z-index: 102; */
   top: 0;

src/styles/header.css

@@ -1,61 +1,38 @@
-/* background: rgba(9, 9, 10, 0.5); */
-
-/* border-bottom: 1px solid #0e0e0f; */
-
-/* transition: var(--tbg2); */
-
-/* box-shadow: 0 12px 48px rgba(1, 57, 72, .2); */
-
-/* box-shadow: 0 12px 48px rgba(1, 57, 72, .2); */
-
 .header {
-  /* backdrop-filter: saturate(180%) blur(5px); */
-
-  /* backdrop-filter: saturate(180%) blur(5px); */
   position: fixed;
   z-index: var(--z-header);
   top: 0;
   left: 0;
   width: 100%;
   max-width: 100vw;
   height: var(--header-height);
+  border-bottom: 1px solid transparent;
   background-color: transparent;
 }
 
 .header-has--filter {
+  border-bottom-color: rgba(109, 110, 119, .2);
   backdrop-filter: saturate(180%) blur(5px);
   background-color: rgba(0,0,0,.4);
 }
 
 .header-has--background {
   background-color: rgba(0, 0, 0, .95);
-
-  /* background-color: rgba(0, 0, 0, .9); */
   box-shadow: 0 12px 36px rgba(1, 57, 72, .15);
 }
 
-.header-has--background::before {
+/* .header-has--background::before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-
-  /* background-image: url('../../images/design/classy-fabric.png'); */
   background-image: url('../../images/design/noisy-net.png');
   content: '';
-
-  /* background-image: url('../../images/design/cartographer.png'); */
-
-  /* backdrop-filter: contrast(120%); */
-  opacity: .3;
-
-  /* filter: contrast(1.4); */
-
-  /* backdrop-filter: contrast(1.4); */
+  opacity: 1;
   pointer-events: none;
   user-select: none;
-}
+} */
 
 .header-wrapper {
   position: relative;
@@ -90,18 +67,6 @@
   cursor: pointer;
   opacity: 1;
   transform: scaleX(1.1);
-
-  /* filter: contrast(110%); */
-
-  /* box-shadow: 0 0 8px 4px rgba(1, 57, 72, .3); */
-
-  /* filter: brightness(2.2); */
-
-  /* filter: invert(33%) sepia(61%) saturate(1000%) hue-rotate(171deg) brightness(90%) contrast(101%); */
-
-  /* background-blend-mode: overlay; */
-
-  /* backdrop-filter: saturate(180%) blur(5px); */
 }
 
 .header-logo::after {
@@ -111,19 +76,14 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-
-  /* background: var(--primary1); */
   background: rgba(6, 70, 87, 0.3);
-
-  /* background: white; */
-
-  /* backdrop-filter: invert(.8); */
   content: '';
   opacity: .8;
   transform:scale(.9);
 }
 
 .header-nav {
+  position:relative;
   display: flex;
   width: 100%;
   height: 100%;

src/styles/main.css

@@ -5,8 +5,6 @@
   height: 100%;
   flex-direction: column;
   align-items: center;
-
-  /* padding-top: .75rem; */
 }
 
 /* ------------------------ */

src/styles/root.css

@@ -78,16 +78,26 @@
 
   /* ********************************** */
 
+  /* ********************************** */
+
+  /* html template heights */
+  --skill-section-height: 280px;
+
+  /* ********************************** */
+
   /* Shared colors between light/dark */
   --primary1: #0089ae;
   --primary2: #025b74;
   --primary3: #013948;
+
+  /* apply this value as a filter and the element color will be converted to primary2 */
+  --convert-to-primary: invert(33%) sepia(61%) saturate(1000%) hue-rotate(171deg) brightness(90%) contrast(101%);
   --red1: #cf007a;
 
   /* ********************************** */
 
   /* --intro-offset: 0vh; */
-  --intro-offset: 10vh;
+  --intro-offset: 17vh;
   --header-height: 4rem;
   --max-width-lg: 1280px;
   --max-width-md: 1140px;

src/styles/sections/contact.css

@@ -77,20 +77,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-
-  /* background-image: url('../../images/design/top1.avif'); */
   background-image: url('../../images/design/cartographer.png');
-
-  /* opacity: .4; */
-
-  /* background-position: center; */
-
-  /* background-repeat: no-repeat; */
-
-  /* background-size: cover; */
   content: "";
-
-  /* filter:invert(1); */
   opacity: .8;
   pointer-events: none;
   user-select: none;