From d2a1b063774ff2dd710a714e4a1660d26f94a28a Mon Sep 17 00:00:00 2001 From: iturres Date: Tue, 6 Feb 2024 23:02:17 -0300 Subject: [PATCH 01/19] Syles: remove margin 0 from '.line-count' class --- src/styles/UI/LineCount.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/UI/LineCount.scss b/src/styles/UI/LineCount.scss index ab0d3a0..0807985 100644 --- a/src/styles/UI/LineCount.scss +++ b/src/styles/UI/LineCount.scss @@ -18,7 +18,6 @@ $light-gray: colors.$light-gray; top: 0; left: 0; height: 100vh; - margin: 0; width: 40px; padding: 1.2rem 0.3rem 0 0.3rem; text-align: right; From 385264d90ae38ed5a28059544c262f9d73029e19 Mon Sep 17 00:00:00 2001 From: iturres Date: Tue, 6 Feb 2024 23:04:55 -0300 Subject: [PATCH 02/19] Styles: remove unnecesary parent reference for '.line-count' class --- src/styles/UI/LineCount.scss | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/styles/UI/LineCount.scss b/src/styles/UI/LineCount.scss index 0807985..10641da 100644 --- a/src/styles/UI/LineCount.scss +++ b/src/styles/UI/LineCount.scss @@ -7,22 +7,19 @@ $light-gray: colors.$light-gray; display: none; @media (min-width: 768px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + background: rgba(0, 0, 0, 0.289); + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 40px; + padding: 1.2rem 0.3rem 0 0.3rem; + text-align: right; margin-top: 2.6rem; - & { - display: flex; - flex-direction: column; - justify-content: flex-start; - background: rgba(0, 0, 0, 0.289); - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 40px; - padding: 1.2rem 0.3rem 0 0.3rem; - text-align: right; - } - &__line { font-size: 1rem; font-family: sans-serif; From e24a74d2dd4f3957619190657144af5e893675e4 Mon Sep 17 00:00:00 2001 From: iturres Date: Tue, 6 Feb 2024 23:06:06 -0300 Subject: [PATCH 03/19] Chore: Update 'expertiseSummary.json' data --- src/db/expertiseSummary.json | 42 +++++++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/src/db/expertiseSummary.json b/src/db/expertiseSummary.json index 9aeec43..5ef4e74 100644 --- a/src/db/expertiseSummary.json +++ b/src/db/expertiseSummary.json @@ -1,5 +1,41 @@ { - "languages": ["TypeScript", "JavaScript", "Ruby", "SASS", "CSS", "HTML"], - "frameworks": ["React.js", "Ruby on Rails", "RSpec"], - "skills": ["Version Control", "CLI", "Web Development"] + "languages": ["TypeScript", "JavaScript", "Ruby", "Python", "c"], + "frameworks & libraries": [ + "React.js", + "Redux", + "Jest", + "Ruby on Rails", + "RSpec", + "Bootstrap", + "D3.js", + "Flask" + ], + "web development": [ + "HTML", + "CSS3", + "SASS", + "Responsive design", + "Cross-browser compatibility", + "Web accessibility", + "SEO" + ], + "database management": ["PostgreSQL", "SQLite"], + "OS and tools": [ + "Windows", + "Linux", + "Git", + "CLI", + "VSCode", + "Postman", + "Render" + ], + "skills": [ + "TDD", + "Agile", + "Pair Programming", + "Teamwork", + "Project planning", + "Problem solving", + "Communication" + ] } From 594c18350b8a17c143a321ce083ea605ccef07cd Mon Sep 17 00:00:00 2001 From: iturres Date: Tue, 6 Feb 2024 23:06:49 -0300 Subject: [PATCH 04/19] Styles: update styles to accomodate more cards at 'ExpertiseSummaryPage.scss' --- src/styles/pages/ExpertiseSummaryPage.scss | 41 +++++++--------------- 1 file changed, 12 insertions(+), 29 deletions(-) diff --git a/src/styles/pages/ExpertiseSummaryPage.scss b/src/styles/pages/ExpertiseSummaryPage.scss index 0db4c1c..b985d18 100644 --- a/src/styles/pages/ExpertiseSummaryPage.scss +++ b/src/styles/pages/ExpertiseSummaryPage.scss @@ -34,17 +34,19 @@ $font-family-regular: fonts.$font-family-regular; 0 // * bottom-desktop ); - display: flex; - flex-direction: column; - align-items: center; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); + align-items: end; min-height: 100vh; &__card { min-width: 250px; - max-width: 350px; + // stylelint-disable-next-line + height: fit-content; margin: 1rem; - padding: 1rem; - border: 2px solid rgba(255, 255, 255, 0.042); + padding: 0.5rem; + padding-bottom: 0.8rem; + border: 2px solid rgba(255, 255, 255, 0.063); border-radius: 0.5rem; &:nth-child(1) { @@ -71,7 +73,7 @@ $font-family-regular: fonts.$font-family-regular; margin: 0.3rem; padding: 0.5rem; border-radius: 0.5rem; - background-color: rgba(255, 255, 255, 0.073); + background-color: rgba(13, 30, 40, 0.495); } } @@ -96,7 +98,7 @@ $font-family-regular: fonts.$font-family-regular; } } - @media screen and (min-width: 768px) { + @media (min-width: 768px) { @include mixins.component-code-snippet( 'const Expertise = () => {', $dark, @@ -105,31 +107,12 @@ $font-family-regular: fonts.$font-family-regular; // * top 1, // * bottom - 0 // * bottom-desktop + 1 // * bottom-desktop ); - padding-top: 3rem; - } - - @media (min-width: 1366px) { - // flex-direction: row; + padding-top: 4rem; padding-left: 6rem; - &__card { - h2 { - text-align: end; - } - - &:nth-child(1) { - margin-top: 4rem; - align-self: flex-start; - } - - &:nth-child(3) { - align-self: flex-end; - } - } - .squares--container { justify-content: flex-end; padding-right: 0.7rem; From 9660f1c5631ecd497824e39b51ad03d05b2ca52a Mon Sep 17 00:00:00 2001 From: iturres Date: Tue, 6 Feb 2024 23:47:44 -0300 Subject: [PATCH 05/19] Feat: Important Updates to 'ContactForm.tsx' UI component - Add new waving alien icon when form is successfully submitted. - Update 'message' regex to allow white space characters. - Update all inputs placeholder text to be more descriptive. - Disable submit button when form has been successfully submitted. - Conditionally render the new waving alien icon when form has been successfully submitted. --- src/components/UI/ContactForm.tsx | 35 +++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/components/UI/ContactForm.tsx b/src/components/UI/ContactForm.tsx index 0ff0852..0333276 100644 --- a/src/components/UI/ContactForm.tsx +++ b/src/components/UI/ContactForm.tsx @@ -1,9 +1,14 @@ import React, { - useRef, useEffect, useMemo, useState, + useRef, + useEffect, + useMemo, + useState, } from 'react'; import '../../styles/UI/ContactForm.scss'; +const successButtonIcon = 'https://camo.githubusercontent.com/b55970b1d4c6e5d8d09a07556bce08ff3cfec080b680ad6b5be3ed46546e6f77/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b52654b6366727331596f546d74324151742f67697068792e676966'; + const ContactForm: React.FC = () => { const [formContent, setFormContent] = useState( JSON.parse(sessionStorage.getItem('formContent')!) || null, @@ -36,9 +41,8 @@ const ContactForm: React.FC = () => { () => ({ name: /[a-z]{2,}/, company: /[a-z]{3,}/, - email: - /^[\w.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, - message: /[\w.!,.@#%&'"*+/=-]{20,}/, + email: /^[\w.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, + message: /[\w\s.!,.@#%&'"*+/=-]{20,}/, }), [], ); @@ -235,7 +239,7 @@ const ContactForm: React.FC = () => { type="text" ref={$nameInputRef} name="name" - placeholder="tell me your name" + placeholder="your name, at least 2 characters long" minLength={2} required /> @@ -244,7 +248,7 @@ const ContactForm: React.FC = () => { type="text" ref={$companyInputRef} name="company" - placeholder="your company name here!" + placeholder="your company name, at least 3 characters long" minLength={3} required /> @@ -253,21 +257,34 @@ const ContactForm: React.FC = () => { type="email" ref={$emailInputRef} name="email" - placeholder="an email so I can contact you back!" + placeholder="an email, e.g example@gmail.com" required />