From e3aab977f9581be34d46fbc76f80f0f084cdaf7d Mon Sep 17 00:00:00 2001 From: avo Date: Sun, 27 Oct 2024 16:14:39 -0500 Subject: [PATCH] refine --- src/core/Button.tsx | 2 +- src/layout/MainSection.tsx | 8 ++++++++ src/routes/About.tsx | 41 +++++++++++++++++++------------------- src/routes/AboutSite.tsx | 2 ++ src/styles/Mixins.ts | 3 ++- 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/src/core/Button.tsx b/src/core/Button.tsx index 13d6f66..de7e189 100644 --- a/src/core/Button.tsx +++ b/src/core/Button.tsx @@ -29,7 +29,7 @@ const primaryButtonStyle = css` :active, :visited:active { color: var(--av-color-link-fg-active); - background-color: var(--av-color-primary-bg); + background-color: var(--av-color-primary-bg-active); border: 1px solid var(--av-color-primary-border-active); } `; diff --git a/src/layout/MainSection.tsx b/src/layout/MainSection.tsx index 5f2b31b..ab54eec 100644 --- a/src/layout/MainSection.tsx +++ b/src/layout/MainSection.tsx @@ -65,9 +65,17 @@ const contentWrapperStyle = css` width: 93%; z-index: -1; + @media (max-width: ${breakpointMaxWidth.lg}) { + top: -100px; + } + @media (max-width: ${breakpointMaxWidth.md}) { top: -80px; } + + @media (max-width: ${breakpointMaxWidth.sm}) { + top: -60px; + } } /* bottom right small pentagon */ diff --git a/src/routes/About.tsx b/src/routes/About.tsx index 3f4171e..7db5472 100644 --- a/src/routes/About.tsx +++ b/src/routes/About.tsx @@ -11,28 +11,29 @@ export function About() {

Hello and welcome!

- I’m a frontend developer from the Midwest, specializing in building user-friendly UI - components with a strong emphasis on accessibility, consistency, and usability. Currently, - as a principal software engineer on the frontend services team at Acquia, I have - consistently driven improvements in the developer experience, established standards and best - practices, and mentored and onboarded new team members. My contributions include writing - code, end-to-end tests, and documentation. Additionally, I perform code reviews and - collaborate across departments to drive consistency, usability, and accessibility across - multiple applications. + I’m a frontend developer specializing in building user-friendly UI components with a strong + emphasis on accessibility, consistency, and usability. Currently, as a principal software + engineer on the frontend services team at Acquia, I consistently drive improvements in the + developer experience, establish standards and best practices, and onboard and mentor new + team members. My contributions include reviewing designs for pattern reuse and technical + feasibility, writing code, unit and end-to-end tests, and documentation. Additionally, I + perform code reviews and collaborate across departments to drive consistency, usability, and + accessibility across multiple applications.

- With a focus on detail and a certification in UX, I strive to create accessible and - inclusive experiences while enhancing the developer experience for any team I join. My - journey began as a fullstack developer, but my joy for the frontend led me to specialize. - With nearly two decades of development experience, predominantly in an agile CI/CD - environment, I have worked with teams creating software as a service (SaaS). This includes - working on older monolithic software, newer microservices, mono-repos, and micro-frontends. + With a focus on detail and a certification in UX, I create accessible and inclusive + experiences while enhancing the developer experience for any team I join. My journey began + as a fullstack developer, but my joy for the frontend led me to specialize. With nearly two + decades of development experience, predominantly in an agile CI/CD environment, I have + worked with teams creating software as a service (SaaS). This includes working on older + monolithic software, newer microservices, mono-repos, and micro-frontends.

My current tech stack includes, but is not limited to, React, Typescript, Jest and - Playwright. For more about my work experience, check out my{' '} + Playwright with the occasional update to a Java backend for frontend (BFF). For more about + my work experience, check out my{' '} LinkedIn profile {' '} @@ -74,18 +75,18 @@ export function About() { developer experience

  • - Accessibility advocate - experience taking a company with no accessibility to one that - includes accessibility in the software project lifecyle + Accessibility advocate - experience introducing and implementing a software accessibility + practice within the software project lifecyle

    • Personal

    - Outside of work, I enjoy reading, listening to audiobooks, crocheting, sewing, and exploring + Outside of work, I enjoy reading, listening to audiobooks, and staying active by running, + biking, hiking and other workouts. I also enjoy painting, crocheting, sewing, and exploring various arts and crafts. I'm a huge fan of science fiction and fantasy. In my downtime, I - enjoy gaming, having spent countless hours in World of Warcraft and Diablo. I also love - staying active with running, biking, hiking, and other workouts. + enjoy gaming, having spent countless hours in the World of Warcraft and Diablo.

    What others say about me

    diff --git a/src/routes/AboutSite.tsx b/src/routes/AboutSite.tsx index c63c440..f7bd5db 100644 --- a/src/routes/AboutSite.tsx +++ b/src/routes/AboutSite.tsx @@ -28,6 +28,8 @@ export function AboutSite() { using Axe DevTools, VoiceOver, and keyboard.

    +

    Stylistically, the background shapes were created using pseudo-elements.

    +

    Feel free to{' '} diff --git a/src/styles/Mixins.ts b/src/styles/Mixins.ts index 43b14a4..af12acd 100644 --- a/src/styles/Mixins.ts +++ b/src/styles/Mixins.ts @@ -9,7 +9,8 @@ export const breakpointMaxWidth = { xs: '444px', sm: '599px', md: '767px', - lg: '1023px', + lg: '929px', + xl: '1023px', }; /* eslint-enable sort/object-properties */