From 3af3f3a6aa9aa1f3c8b97747dc258de9a77da638 Mon Sep 17 00:00:00 2001 From: Jakub Chojna Date: Sun, 21 Apr 2024 22:20:52 +0200 Subject: [PATCH 1/3] fix: fix issue with not used calc() --- src/components/Accordion.module.scss | 2 +- src/components/BlockTitle.module.scss | 2 +- src/components/Menu.module.scss | 4 ++-- src/components/MobileMenu.module.scss | 2 +- src/components/resume/ResumeDetails.module.scss | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Accordion.module.scss b/src/components/Accordion.module.scss index 8be1ca5..fd4c877 100644 --- a/src/components/Accordion.module.scss +++ b/src/components/Accordion.module.scss @@ -52,7 +52,7 @@ transition: padding $accordion-time; &::before { - border-radius: $border-radius / 2; + border-radius: calc($border-radius / 2); content: ''; height: $separator-height; left: 0; diff --git a/src/components/BlockTitle.module.scss b/src/components/BlockTitle.module.scss index afb548d..0bdf851 100644 --- a/src/components/BlockTitle.module.scss +++ b/src/components/BlockTitle.module.scss @@ -19,7 +19,7 @@ text-transform: uppercase; &::before { - border-radius: $border-radius / 2; + border-radius: calc($border-radius / 2); content: ''; position: absolute; top: 0; diff --git a/src/components/Menu.module.scss b/src/components/Menu.module.scss index 3a2608d..531fe33 100644 --- a/src/components/Menu.module.scss +++ b/src/components/Menu.module.scss @@ -76,7 +76,7 @@ .indicator { background-color: #fff; - border-radius: 0 $border-radius / 2 $border-radius / 2 0; + border-radius: 0 calc($border-radius / 2) calc($border-radius / 2) 0; height: $menu-item-height; left: 0; position: absolute; @@ -88,7 +88,7 @@ z-index: 9999; &.intro { - border-radius: $border-radius / 2; + border-radius: calc($border-radius / 2); } &.about { diff --git a/src/components/MobileMenu.module.scss b/src/components/MobileMenu.module.scss index 41d4df4..578cb44 100644 --- a/src/components/MobileMenu.module.scss +++ b/src/components/MobileMenu.module.scss @@ -51,7 +51,7 @@ .indicator { background-color: #fff; - border-radius: 0 $border-radius / 2 $border-radius / 2 0; + border-radius: 0 calc($border-radius / 2) calc($border-radius / 2) 0; height: $menu-item-height; left: 0; position: absolute; diff --git a/src/components/resume/ResumeDetails.module.scss b/src/components/resume/ResumeDetails.module.scss index f5fa848..80b9897 100644 --- a/src/components/resume/ResumeDetails.module.scss +++ b/src/components/resume/ResumeDetails.module.scss @@ -51,7 +51,7 @@ $gap: 10px; &::before { background-color: $color-resume-black; - border-radius: $border-radius / 2; + border-radius: calc($border-radius / 2); content: ''; height: 1rem; margin-right: 0.5rem; From 87acd2a7a9e0581f7781430f8dd6726ba98322ce Mon Sep 17 00:00:00 2001 From: Jakub Chojna Date: Sun, 21 Apr 2024 22:36:39 +0200 Subject: [PATCH 2/3] style: add small styling adjustments --- src/components/MobileMenu.module.scss | 5 --- src/components/icons/IconLink.module.scss | 11 ++--- .../resume/ResumeDetails.module.scss | 6 +-- src/content/resume.json | 44 +++++++++---------- src/styles/mixins.scss | 4 -- src/views/Contact.module.scss | 2 +- src/views/Project.module.scss | 1 + src/views/Resume.module.scss | 1 + 8 files changed, 34 insertions(+), 40 deletions(-) diff --git a/src/components/MobileMenu.module.scss b/src/components/MobileMenu.module.scss index 578cb44..8969dc9 100644 --- a/src/components/MobileMenu.module.scss +++ b/src/components/MobileMenu.module.scss @@ -26,13 +26,8 @@ display: flex; height: $menu-item-height; padding-right: 10px; - // pointer-events: none; width: 100%; - &--active { - // pointer-events: all; - } - &--mobileHeader { left: 0; margin: 0; diff --git a/src/components/icons/IconLink.module.scss b/src/components/icons/IconLink.module.scss index 98331ad..1a48392 100644 --- a/src/components/icons/IconLink.module.scss +++ b/src/components/icons/IconLink.module.scss @@ -85,10 +85,7 @@ &.about { .link { - background-color: rgba( - $color: $color-about-dark, - $alpha: $background-opacity - ); + background-color: $color-about-dark; fill: $color-about-light; &::before { @@ -107,7 +104,7 @@ } .name { - color: $color-about-white; + color: $color-about-light; } } @@ -128,5 +125,9 @@ background-color: $color-contact-black; } } + + .name { + color: $color-contact-light; + } } } diff --git a/src/components/resume/ResumeDetails.module.scss b/src/components/resume/ResumeDetails.module.scss index 80b9897..9588359 100644 --- a/src/components/resume/ResumeDetails.module.scss +++ b/src/components/resume/ResumeDetails.module.scss @@ -22,14 +22,14 @@ $gap: 10px; .detail { color: $color-resume-accent; - font-size: 1.1rem; + font-size: 1.2rem; font-weight: 700; line-height: 1.5; margin: 0; &-2, &-3 { - border-left: $separator-width solid $color-resume-black; + border-left: $separator-width solid $color-resume-dark; padding-left: $gap; } @@ -50,7 +50,7 @@ $gap: 10px; position: relative; &::before { - background-color: $color-resume-black; + background-color: $color-resume-dark; border-radius: calc($border-radius / 2); content: ''; height: 1rem; diff --git a/src/content/resume.json b/src/content/resume.json index af98e20..59755b7 100644 --- a/src/content/resume.json +++ b/src/content/resume.json @@ -7,6 +7,28 @@ "experience": { "label": "Experience", "items": [ + { + "label": "Frontend Development", + "items": [ + { + "label": "Jun 2021 - Present", + "items": ["Frontend Developer", "Appsilon", "Remote"], + "description": [ + "collaborating in a multinational team within a rapidly growing company, providing consultancy services to a diverse range of clients, including Fortune 500 companies from Pharma, Biodiversity, Energy, and Sport industries", + "contributed to the development of complex dashboard applications, with a primary focus on frontend development and occasional contributions to backend development in R. Projects examples: Mbaza - a biodiversity project [TypeScript | React | Electron], Supply Chain application [TypeScript | Next.js | ReactFlow], dashboard applications [VanillaJS | Sass | R]", + "tech leader in a few small-scale projects since Q4 2022" + ] + }, + { + "label": "Jun 2020 - Jun 2021", + "items": ["Junior Frontend Developer", "Appsilon", "Remote"], + "description": [ + "focused on frontend development for commercial dashboard applications, involving UI/UX design preparation in Figma", + "undertook internal tasks such as website maintenance (e.g., appsilon.com [Typescript | Gatsby | GraphQL]), creation of landing pages (e.g., shiny.tools, shinymanifesto.com [Vanilla JS]), and maintenance of open-source projects" + ] + } + ] + }, { "label": "Architecture", "items": [ @@ -52,28 +74,6 @@ "items": ["3d software tutor", "Euro Info Group", "Warsaw, Poland"] } ] - }, - { - "label": "Frontend Development", - "items": [ - { - "label": "Jun 2021 - Present", - "items": ["Frontend Developer", "Appsilon", "Remote"], - "description": [ - "collaborating in a multinational team within a rapidly growing company, providing consultancy services to a diverse range of clients, including Fortune 500 companies from Pharma, Biodiversity, Energy, and Sport industries", - "contributed to the development of complex dashboard applications, with a primary focus on frontend development and occasional contributions to backend development in R. Projects examples: Mbaza - a biodiversity project [TypeScript | React | Electron], Supply Chain application [TypeScript | Next.js | ReactFlow], dashboard applications [VanillaJS | Sass | R]", - "tech leader in a few small-scale projects since Q4 2022" - ] - }, - { - "label": "Jun 2020 - Jun 2021", - "items": ["Junior Frontend Developer", "Appsilon", "Remote"], - "description": [ - "focused on frontend development for commercial dashboard applications, involving UI/UX design preparation in Figma", - "undertook internal tasks such as website maintenance (e.g., appsilon.com [Typescript | Gatsby | GraphQL]), creation of landing pages (e.g., shiny.tools, shinymanifesto.com [Vanilla JS]), and maintenance of open-source projects" - ] - } - ] } ] }, diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 5006f0f..e4354f5 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -129,10 +129,6 @@ padding: 0; margin-right: 100px; } - - @media screen and (min-width: $media-l) { - max-width: 1800px; - } } @mixin sectionTitle { diff --git a/src/views/Contact.module.scss b/src/views/Contact.module.scss index bb4812a..9b50c1a 100644 --- a/src/views/Contact.module.scss +++ b/src/views/Contact.module.scss @@ -33,7 +33,7 @@ @include sectionTitle; border-color: $color-contact-accent; - color: $color-contact-accent; + color: $color-contact-light; font-size: 3rem; margin: 0; text-align: center; diff --git a/src/views/Project.module.scss b/src/views/Project.module.scss index 8411ba5..725db3b 100644 --- a/src/views/Project.module.scss +++ b/src/views/Project.module.scss @@ -14,6 +14,7 @@ display: flex; flex-direction: column; gap: 50px; + max-width: 1400px; width: 100%; @media screen and (min-width: var.$media-m) { diff --git a/src/views/Resume.module.scss b/src/views/Resume.module.scss index e723464..39482e9 100644 --- a/src/views/Resume.module.scss +++ b/src/views/Resume.module.scss @@ -11,6 +11,7 @@ 'title' 'info' 'accordions'; + max-width: 1200px; padding: $menu-item-height $offset-right-s $menu-item-height $offset-left-s; @media only screen and (min-width: $media-m) { From 36e377b70afbf00acc4561919b979e13fd5a4a9c Mon Sep 17 00:00:00 2001 From: Jakub Chojna Date: Sun, 21 Apr 2024 22:54:39 +0200 Subject: [PATCH 3/3] feat: change text on contact view --- src/styles/mixins.scss | 2 +- src/views/Contact.module.scss | 2 +- src/views/Contact.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index e4354f5..788c8cb 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -143,7 +143,7 @@ @media only screen and (min-width: $media-m) { border: none; - font-size: 72px; + font-size: 60px; margin: 0; max-width: 60%; min-width: 380px; diff --git a/src/views/Contact.module.scss b/src/views/Contact.module.scss index 9b50c1a..24e0cd0 100644 --- a/src/views/Contact.module.scss +++ b/src/views/Contact.module.scss @@ -16,6 +16,7 @@ 'form' 'social' 'footer'; + max-width: 1000px; width: 100%; @media only screen and (min-width: $media-m) { @@ -34,7 +35,6 @@ border-color: $color-contact-accent; color: $color-contact-light; - font-size: 3rem; margin: 0; text-align: center; } diff --git a/src/views/Contact.tsx b/src/views/Contact.tsx index 1b0c5a2..ffbe8c3 100644 --- a/src/views/Contact.tsx +++ b/src/views/Contact.tsx @@ -27,7 +27,7 @@ const Contact = () => { )} >

- Feel free to contact me! I'm open for new opportunities + Looking to bring my talents to an innovative team. Let's chat!

{contactDetails.map((details, index) => (