diff --git a/src/components/skills/skills.js b/src/components/skills/skills.js index bcd357e..3d35b08 100644 --- a/src/components/skills/skills.js +++ b/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); }; diff --git a/src/data/json/skills/skills-data.json b/src/data/json/skills/skills-data.json index a3a6994..fd33bbd 100644 --- a/src/data/json/skills/skills-data.json +++ b/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" } ] \ No newline at end of file diff --git a/src/images/design/3px-tile.png b/src/images/design/3px-tile.png deleted file mode 100644 index 8588147..0000000 Binary files a/src/images/design/3px-tile.png and /dev/null differ diff --git a/src/images/design/45-degree-fabric-dark.png b/src/images/design/45-degree-fabric-dark.png deleted file mode 100644 index b2705e5..0000000 Binary files a/src/images/design/45-degree-fabric-dark.png and /dev/null differ diff --git a/src/images/design/asfalt-dark.png b/src/images/design/asfalt-dark.png deleted file mode 100644 index 286f884..0000000 Binary files a/src/images/design/asfalt-dark.png and /dev/null differ diff --git a/src/images/design/axiom-pattern.png b/src/images/design/axiom-pattern.png deleted file mode 100644 index 77e7abd..0000000 Binary files a/src/images/design/axiom-pattern.png and /dev/null differ diff --git a/src/images/design/binding-dark.png b/src/images/design/binding-dark.png deleted file mode 100644 index 3e4942b..0000000 Binary files a/src/images/design/binding-dark.png and /dev/null differ diff --git a/src/images/design/black-felt.png b/src/images/design/black-felt.png deleted file mode 100644 index 67d6069..0000000 Binary files a/src/images/design/black-felt.png and /dev/null differ diff --git a/src/images/design/black-linen-2.png b/src/images/design/black-linen-2.png deleted file mode 100644 index e91b667..0000000 Binary files a/src/images/design/black-linen-2.png and /dev/null differ diff --git a/src/images/design/bo-play.png b/src/images/design/bo-play.png deleted file mode 100644 index 125ef76..0000000 Binary files a/src/images/design/bo-play.png and /dev/null differ diff --git a/src/images/design/broken-noise.png b/src/images/design/broken-noise.png deleted file mode 100644 index 42939f1..0000000 Binary files a/src/images/design/broken-noise.png and /dev/null differ diff --git a/src/images/design/carbon-fibre-big.png b/src/images/design/carbon-fibre-big.png deleted file mode 100644 index ee6a75a..0000000 Binary files a/src/images/design/carbon-fibre-big.png and /dev/null differ diff --git a/src/images/design/carbon-fibre.png b/src/images/design/carbon-fibre.png deleted file mode 100644 index 1ae2a7d..0000000 Binary files a/src/images/design/carbon-fibre.png and /dev/null differ diff --git a/src/images/design/checkered-pattern.png b/src/images/design/checkered-pattern.png deleted file mode 100644 index 52266bd..0000000 Binary files a/src/images/design/checkered-pattern.png and /dev/null differ diff --git a/src/images/design/classy-fabric.png b/src/images/design/classy-fabric.png deleted file mode 100644 index 4e48915..0000000 Binary files a/src/images/design/classy-fabric.png and /dev/null differ diff --git a/src/images/design/concrete-wall.png b/src/images/design/concrete-wall.png deleted file mode 100644 index a0aeb0c..0000000 Binary files a/src/images/design/concrete-wall.png and /dev/null differ diff --git a/src/images/design/cream-pixels.png b/src/images/design/cream-pixels.png deleted file mode 100644 index 191c84c..0000000 Binary files a/src/images/design/cream-pixels.png and /dev/null differ diff --git a/src/images/design/dark-matter.png b/src/images/design/dark-matter.png deleted file mode 100644 index d9f0c71..0000000 Binary files a/src/images/design/dark-matter.png and /dev/null differ diff --git a/src/images/design/diagonal-striped-brick.png b/src/images/design/diagonal-striped-brick.png deleted file mode 100644 index c8d6023..0000000 Binary files a/src/images/design/diagonal-striped-brick.png and /dev/null differ diff --git a/src/images/design/graphy.png b/src/images/design/graphy.png deleted file mode 100644 index e62346f..0000000 Binary files a/src/images/design/graphy.png and /dev/null differ diff --git a/src/images/design/handmade-paper.png b/src/images/design/handmade-paper.png deleted file mode 100644 index 6443442..0000000 Binary files a/src/images/design/handmade-paper.png and /dev/null differ diff --git a/src/images/design/otis-redding.png b/src/images/design/otis-redding.png deleted file mode 100644 index 68b8608..0000000 Binary files a/src/images/design/otis-redding.png and /dev/null differ diff --git a/src/images/design/rough-cloth-light.png b/src/images/design/rough-cloth-light.png deleted file mode 100644 index 41d2c92..0000000 Binary files a/src/images/design/rough-cloth-light.png and /dev/null differ diff --git a/src/images/design/shattered-dark.png b/src/images/design/shattered-dark.png deleted file mode 100644 index cd4e03a..0000000 Binary files a/src/images/design/shattered-dark.png and /dev/null differ diff --git a/src/images/design/shattered.png b/src/images/design/shattered.png deleted file mode 100644 index 9e29312..0000000 Binary files a/src/images/design/shattered.png and /dev/null differ diff --git a/src/images/design/simple-horizontal-light.png b/src/images/design/simple-horizontal-light.png deleted file mode 100644 index 601268d..0000000 Binary files a/src/images/design/simple-horizontal-light.png and /dev/null differ diff --git a/src/images/design/subtle-dark-vertical.png b/src/images/design/subtle-dark-vertical.png deleted file mode 100644 index 808a80b..0000000 Binary files a/src/images/design/subtle-dark-vertical.png and /dev/null differ diff --git a/src/images/design/subtle-zebra-3d.png b/src/images/design/subtle-zebra-3d.png deleted file mode 100644 index 4c6201c..0000000 Binary files a/src/images/design/subtle-zebra-3d.png and /dev/null differ diff --git a/src/images/design/top1.avif b/src/images/design/top1.avif deleted file mode 100644 index 6288846..0000000 Binary files a/src/images/design/top1.avif and /dev/null differ diff --git a/src/images/design/white-diamond-dark.png b/src/images/design/white-diamond-dark.png deleted file mode 100644 index 8c1246e..0000000 Binary files a/src/images/design/white-diamond-dark.png and /dev/null differ diff --git a/src/images/svg/node.svg b/src/images/svg/node.svg new file mode 100644 index 0000000..d111b8e --- /dev/null +++ b/src/images/svg/node.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 8e23c17..4b15fd0 100644 --- a/src/index.html +++ b/src/index.html @@ -30,29 +30,18 @@ - - - - - - + - -
+
- +
+ +
+

+
    +
    +
    @@ -666,6 +661,7 @@

    Send Direct Message

    + \ No newline at end of file diff --git a/src/styles/gradients/headerGradient.css b/src/styles/gradients/headerGradient.css index 4ec1763..3a1d7a4 100644 --- a/src/styles/gradients/headerGradient.css +++ b/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; diff --git a/src/styles/header.css b/src/styles/header.css index 2b43aa2..b02851c 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -1,17 +1,4 @@ -/* 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; @@ -19,43 +6,33 @@ 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%; diff --git a/src/styles/main.css b/src/styles/main.css index b0259cb..63d4be3 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -5,8 +5,6 @@ height: 100%; flex-direction: column; align-items: center; - - /* padding-top: .75rem; */ } /* ------------------------ */ diff --git a/src/styles/root.css b/src/styles/root.css index 0ee426d..04dce51 100644 --- a/src/styles/root.css +++ b/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; diff --git a/src/styles/sections/contact.css b/src/styles/sections/contact.css index 9ce707e..c4776f3 100644 --- a/src/styles/sections/contact.css +++ b/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; diff --git a/src/styles/sections/intro.css b/src/styles/sections/intro.css index 4c59b07..7b71bb0 100644 --- a/src/styles/sections/intro.css +++ b/src/styles/sections/intro.css @@ -2,7 +2,8 @@ ============================ */ .intro-container { position: relative; - z-index: 101; + + /* z-index: 902; */ max-width: var(--max-width-lg); height: calc(100vh - var(--intro-offset) + 2px); margin: 0 auto; @@ -27,14 +28,14 @@ flex-direction: column; align-items: center; justify-content: center; + padding-bottom: 4rem; margin: 0 auto; - margin-top: var(--header-height); } .intro-header__subtitles h1 { position: relative; + z-index:-1; width: auto; - padding-top: 4rem; background: transparent; color: #e7ecf4; font-family: var(--secondaryFont); @@ -60,26 +61,19 @@ } .intro-container--links { - position: relative; - z-index: 9999; + position: absolute; + z-index: 201; + bottom: 0; display: flex; - width: auto; + width: 100%; height: 14rem; - align-items: flex-end; - justify-content: space-between; - padding: 0 1rem; + align-items: center; + justify-content: center; + margin: 0 auto; } .intro-container--links a { position: relative; - - /* background: rgba(0, 0, 0, .4); */ - - /* background:rgba(8, 8, 8, 1); */ - - /* background:rgba(8, 8, 8, .7); */ - - /* background: black; */ display: flex; height: 2.5rem; align-items: center; @@ -87,7 +81,7 @@ border: 1px solid rgba(36, 39, 44, 0.5); border-radius: 6px; margin: 0 .5rem; - background: #000; + background: rgba(8, 8, 8, 0.85); color: #e7ecf4; font-size: .9rem; letter-spacing: .02em; @@ -103,7 +97,7 @@ } .intro-container--links a:hover { - border-color: #6d6e77; + border-color: var(--grey6); background: #141516; transition-duration: .15s; transition-property: color, background-color, border-color, fill, stroke; @@ -123,11 +117,11 @@ .intro-observer-ref--top { position: absolute; - z-index: -1; + z-index: 9999; top:0; - left: 0; + left:0; width: 100%; - height: var(--header-height); + height: 2px; pointer-events: none; user-select: none; } diff --git a/src/styles/sections/sectionprojects/projectCard.css b/src/styles/sections/sectionprojects/projectCard.css index c30bef9..b2cac88 100644 --- a/src/styles/sections/sectionprojects/projectCard.css +++ b/src/styles/sections/sectionprojects/projectCard.css @@ -35,24 +35,8 @@ width: 100%; height: 100%; content: ''; - - /* background-image: url('../../../images/design/3px-tile.png'); */ - - /* opacity: 100%; */ - - /* opacity: .2; */ pointer-events: none; user-select: none; - - /* background-blend-mode:overlay; */ - - /* background-image: url('../../../images/design/binding-dark.png'); */ - - /* filter: url("#grainy"); */ - - /* opacity: 5%; */ - - /* background: rgba(0,0,0,0); */ } /* .project-cell::before { diff --git a/src/styles/sections/sectionprojects/projectImages.css b/src/styles/sections/sectionprojects/projectImages.css index 7853df7..7d7c433 100644 --- a/src/styles/sections/sectionprojects/projectImages.css +++ b/src/styles/sections/sectionprojects/projectImages.css @@ -18,19 +18,10 @@ top:0; left:0; width:100%; - - /* filter: contrast(140%); */ - - /* backdrop-filter:contrast(140%); */ height:100%; - backdrop-filter: saturate(85%) contrast(120%); - - /* background-image: url('../../images/design/shattered-dark.png'); */ - - /* background-image: url('../../images/design/brilliant.png'), url('../../images/design/simple-horizontal-light.png'); */ + backdrop-filter: saturate(85%) contrast(110%); background-image: url('../../images/design/brilliant.png'); content: ''; - opacity: 1; pointer-events: none; user-select: none; } diff --git a/src/styles/sections/sectionprojects/projectsLayout.css b/src/styles/sections/sectionprojects/projectsLayout.css index df0f8cc..2e2d1ba 100644 --- a/src/styles/sections/sectionprojects/projectsLayout.css +++ b/src/styles/sections/sectionprojects/projectsLayout.css @@ -17,30 +17,18 @@ background-repeat: no-repeat; */ background: var(--black0); /* background: linear-gradient(to bottom, transparent 0, var(--black0) 50%); */ - scroll-margin-top: 4rem; + scroll-margin-top: calc(4rem + 20px); } .projects-container::before { position: absolute; - top:0; - left:0; - width:100%; - height:100%; - - /* background: rgba(0,0,0,.1); */ - background-image:url('../../images/design/graphy-dark.png'); + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('../../images/design/graphy-dark.png'); content: ''; opacity: .13; - - /* background-image: url('../../images/design/brilliant.png'), url('../../images/design/shattered-dark.png'); */ - - /* backdrop-filter: contrast(1.4); */ - - /* filter:invert(1); */ - - /* filter: url(#grainy); */ - - /* opacity: .1; */ } .projects-container .section-title { @@ -60,16 +48,16 @@ background-repeat: no-repeat; */ } .project-cell-divider { - z-index:2000; - width:1px; - height:5rem; + z-index: 2000; + width: 1px; + height: 5rem; margin: 1.5rem auto 1.5rem auto; opacity: .3; outline: 1px dotted var(--white1); } .project-cell-divider:last-child { - height:8rem; + height: 8rem; margin-top: 3rem; margin-bottom: 0; } diff --git a/src/styles/sections/skills.css b/src/styles/sections/skills.css index 3ac61db..b635252 100644 --- a/src/styles/sections/skills.css +++ b/src/styles/sections/skills.css @@ -29,7 +29,7 @@ } .skills-grid { - position:relative; + position: relative; display: grid; width: 100%; max-width: 1200px; @@ -41,50 +41,35 @@ margin-bottom: 2rem; grid-auto-columns: 1fr; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - - /* background-image: url(../../images/design/noisy-net.png); */ } .skills-grid::before { position: absolute; z-index: -1; - top:0; - left:0; - width:100%; - height:100%; - - /* background: rgba(0,0,0,.1); */ - background-image:url('../../images/design/graphy-dark.png'); + top: 0; + left: 0; + width: 100%; + height: 100%; + backdrop-filter: grayscale(1) contrast(1.4); + background-image: url('../../images/design/noisy-net.png'); content: ''; - opacity: .2; - - /* background-image: url('../../images/design/brilliant.png'), url('../../images/design/shattered-dark.png'); */ - - /* backdrop-filter: contrast(1.4); */ - - /* filter:invert(1); */ - - /* filter: url(#grainy); */ - - /* opacity: .1; */ + opacity: .8; } - .skills-cell { position: relative; - display: grid; + display: flex; width: 100%; height: 100%; - min-height: 240px; - padding: 1rem 0; + min-height: var(--skill-section-height); + max-height: var(--skill-section-height); + flex-direction: column; border-top: 1px solid var(--grey2); border-left: 1px solid var(--grey2); margin: 0 auto; - - /* background: var(--black0); */ + background: var(--offsetblack1); font-size: 1rem; font-weight: 500; - grid-template-columns: 1fr 4rem; } .skills-cell:nth-child(even) { @@ -99,70 +84,56 @@ border-right: 1px solid var(--grey2); } -.skill-content { - display: flex; - width: 100%; - height: 240px; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 3rem 1rem 1rem 1rem; -} - .skill-title { position: absolute; z-index: 3; - top: 1.75rem; - left: 1.325rem; + top: 1.25rem; + left: 1.25rem; width: auto; - - /* -webkit-text-stroke: 1px var(--primary1); */ - - /* -webkit-text-stroke: 1px #e7ecf4; */ font-family: var(--secondaryFont); font-size: 16px; - - /* background: rgba(8,8,8,.6); */ - - /* width: 100%; */ - - /* color: var(--white1); */ - - /* text-shadow: 1px 1px 6px var(--primary1); */ - - /* background-clip: text; */ - - /* color: transparent; */ letter-spacing: .05rem; opacity: .8; transform: scaleY(1.2); } +.skill-content { + display: flex; + width: 100%; + height: calc(var(--skill-section-height) - 4rem); + flex-direction: column; + align-items: center; + padding: .5rem 2rem 0 1rem; + margin-top: 4rem; + list-style-type: none; + overflow-y: auto; +} + .skill-content li { position: relative; z-index: 3; width: 100%; padding-bottom: 10px; - color: var(--white1); - font-size: 1rem; + color: var(--grey7); + font-size: .9rem; line-height: 20px; - opacity: .8; } .skill-img--wrapper { - position: relative; + position: absolute; + top: .75rem; + right: .75rem; display: flex; - width: 2.5rem; - height: 2.5rem; - flex-direction: column; - align-items: center; - justify-content: center; - border-radius: 50%; + width: 2rem; + height: 2rem; + align-items: flex-start; + justify-content: flex-end; } .skill-img--wrapper img { - width: 2.5rem !important; - height: 2.5rem !important; + width: 100%; + height: 100%; + filter: var(--convert-to-primary); pointer-events: none !important; user-select: none !important; } @@ -171,7 +142,16 @@ filter: invert(1) !important; } -.skills-cell:hover { +.slills-cell:hover .skill-title { + background-color: var(--offsetblack3); + color: green !important; + opacity: 1; + transition-duration: .15s; + transition-property: opacity, background-color; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +/* .skills-cell:hover { background: var(--offsetblack4); transition-duration: .15s; transition-property: background; @@ -190,6 +170,21 @@ transition-duration: .15s; transition-property: opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} */ + +.skill-content::-webkit-scrollbar { + width: 6px; + background: var(--black1); +} + +.skill-content::-webkit-scrollbar-thumb { + border-radius: 10px; + background: var(--accent-5); +} + +.skill-content::-webkit-scroll-track { + border-radius: 10px; + background: var(--black1) !important; } @media screen and (max-width: 640px) { diff --git a/src/styles/themes.css b/src/styles/themes.css index def73ea..9e51c27 100644 --- a/src/styles/themes.css +++ b/src/styles/themes.css @@ -16,6 +16,8 @@ --grey3: #000; --grey4: #27272a; --grey5: #262b30; + --grey6: #6d6e77; + --grey7: #a3a5ad; --white0: #fff; --white1: #f7f5f5; --white2: #cccbcb; @@ -67,6 +69,8 @@ --grey3: #fff; --grey4: #f7f7f8; --grey5: #94989c; + --grey6: #6d6e77; + --grey7: #212122; --white0: #000; --white1: #171717; --white2: #4c4c4c; diff --git a/src/utilities/get-svg.js b/src/utilities/get-svg.js index 53c500f..80234aa 100644 --- a/src/utilities/get-svg.js +++ b/src/utilities/get-svg.js @@ -6,6 +6,7 @@ import cssSvg from '../images/svg/css.svg'; import githubSvg from '../images/svg/githuboutline.svg'; import lockSvg from '../images/svg/lock.svg'; import mailtoSvg from '../images/svg/mailto.svg'; +import nodeSvg from '../images/svg/node.svg'; import nextSvg from '../images/svg/next.svg'; import reactSvg from '../images/svg/react.svg'; import typescriptSvg from '../images/svg/typescript.svg'; @@ -24,6 +25,7 @@ const svgIcons = { 'lock': lockSvg, 'mailto': mailtoSvg, 'next': nextSvg, + 'node': nodeSvg, 'react': reactSvg, 'typescript': typescriptSvg, 'vanilla': vanillaSvg,