diff --git a/src/App.tsx b/src/App.tsx index c2f35a1..d83ff40 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,9 +6,11 @@ import './App.scss'; const App: React.FC = () => { return ( -
+
- +
+ +
); diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 76dc6ad..152966e 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -28,6 +28,7 @@ const About: React.FC = () => { href="https://www.tailed.ca/en" target="_blank" rel="noreferrer" + aria-label="Visit Tail'ed's website" > Tail'ed {' '} @@ -48,6 +49,7 @@ const About: React.FC = () => { href="https://linkedin.com/in/carsonspriggs" target="_blank" rel="noreferrer" + aria-label="Visit my LinkedIn profile" > LinkedIn @@ -57,6 +59,7 @@ const About: React.FC = () => { href="https://github.com/carsonSgit" target="_blank" rel="noreferrer" + aria-label="Visit my GitHub profile" > GitHub @@ -66,6 +69,7 @@ const About: React.FC = () => { href="https://dev.to/carsonsgit" target="_blank" rel="noreferrer" + aria-label="Visit my Dev.to profile" > Dev.to {' '} @@ -75,6 +79,7 @@ const About: React.FC = () => { href="https://medium.com/@carsonspriggs6" target="_blank" rel="noreferrer" + aria-label="Visit my Medium profile" > Medium {' '} diff --git a/src/Components/Experience/ExperienceTimeline.tsx b/src/Components/Experience/ExperienceTimeline.tsx index 5189b78..4dd8a5f 100644 --- a/src/Components/Experience/ExperienceTimeline.tsx +++ b/src/Components/Experience/ExperienceTimeline.tsx @@ -66,11 +66,11 @@ const ExperienceTimeline = () => { return (
-
+
-

Education

+

Education

{education.map((item, index) => ( { animate={controls} exit={{ opacity: 0, y: 20 }} className="timeline-item" + aria-labelledby={`education-item-${index}`} > -
+
-

+

{item.title} @ {item.institution}

-
{item.date}
+
{item.date}

{item.description}

-
+
{Object.entries(statistics[item.statsKey] || {}).map( ([key, value]: [string, number | string]) => ( -
+
{value}{' '} {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
@@ -111,7 +113,7 @@ const ExperienceTimeline = () => {
-

Experience

+

Experience

{experience.map((item, index) => ( { animate={controls} exit={{ opacity: 0, y: 20 }} className="timeline-item" + aria-labelledby={`experience-item-${index}`} > -
+
-

- +

+ {item.title} @ {item.company}

-
{item.date}
+
{item.date}

{item.description}

-
+
{Object.entries(statistics[item.statsKey] || {}).map( ([key, value]: [string, number | string]) => ( -
+
{value}{' '} {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
@@ -147,160 +150,68 @@ const ExperienceTimeline = () => {
-
+

Languages

-
    -
  • - Python -
    • -
  • - Java -
    • -
  • - JavaScript -
    • -
  • - TypeScript -
    • -
  • - C# -
    • -
  • - Kotlin -
    • -
  • - PHP -
    • -
  • - PowerShell -
    • -
  • - Bash -
    • -
  • - HTML -
    • -
  • - CSS -
    • -
  • - MSSQL -
    • -
  • - SQLite -
    • -
  • - MySQL -
    • +
      +
    • Python
      • +
    • Java
      • +
    • JavaScript
      • +
    • TypeScript
      • +
    • C#
      • +
    • Kotlin
      • +
    • PHP
      • +
    • PowerShell
      • +
    • Bash
      • +
    • HTML
      • +
    • CSS
      • +
    • MSSQL
      • +
    • SQLite
      • +
    • MySQL

Frameworks & Libraries

-
    -
  • - ASP.NET -
    • -
  • - .NET MAUI -
    • -
  • - WPF -
    • -
  • - Xamarin -
    • -
  • - React -
    • -
  • - Next.js -
    • -
  • - jQuery -
    • -
  • - Angular -
    • -
  • - Bootstrap -
    • -
  • - Node.js -
    • -
  • - SCSS -
    • -
  • - TailwindCSS -
    • -
  • - Express.js -
    • -
  • - Keras -
    • -
  • - PyTorch -
    • -
  • - scikit-learn -
    • +
      +
    • ASP.NET
      • +
    • .NET MAUI
      • +
    • WPF
      • +
    • Xamarin
      • +
    • React
      • +
    • Next.js
      • +
    • jQuery
      • +
    • Angular
      • +
    • Bootstrap
      • +
    • Node.js
      • +
    • Firebase
      • +
    • MongoDB
      • +
    • SCSS
      • +
    • TailwindCSS
      • +
    • Express.js
      • +
    • Keras
      • +
    • PyTorch
      • +
    • scikit-learn

Tools

-
    -
  • - Git -
    • -
  • - MongoDB -
    • -
  • - Docker -
    • -
  • - Azure -
    • -
  • - AWS -
    • -
  • - Cloudflare -
    • -
  • - Firebase -
    • -
  • - Vercel -
    • -
  • - Nginx -
    • -
  • - Unity -
    • -
  • - Kubernetes -
    • -
  • - Postman -
    • -
  • - Swagger -
    • -
  • - Jira -
    • -
  • - Rasp Pi -
    • -
  • - Figma -
    • +
      +
    • Git
      • +
    • Docker
      • +
    • AWS
      • +
    • Azure DevOps
      • +
    • Postman
      • +
    • Swagger
      • +
    • Jira
      • +
    • Figma
      • +
    • Cloudflare
      • +
    • Vercel
      • +
    • Nginx
      • +
    • Raspberry Pi
      • +
    • Kubernetes
      • +
    • Unity
diff --git a/src/Components/Home/Hero/AnimatedImage.tsx b/src/Components/Home/Hero/AnimatedImage.tsx index 90a7381..b21f1bd 100644 --- a/src/Components/Home/Hero/AnimatedImage.tsx +++ b/src/Components/Home/Hero/AnimatedImage.tsx @@ -56,10 +56,12 @@ const AnimatedImage: React.FC = ({ return ( {`Sprite handleMouseEnter(currentIndex)} onMouseLeave={handleMouseLeave} width="280" + aria-live="polite" + aria-label={`Current animated image: ${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`} /> ); }; diff --git a/src/Components/Home/Hero/LeftContainer.tsx b/src/Components/Home/Hero/LeftContainer.tsx index 3b2c737..1f77bc6 100644 --- a/src/Components/Home/Hero/LeftContainer.tsx +++ b/src/Components/Home/Hero/LeftContainer.tsx @@ -5,10 +5,10 @@ import './Hero.scss'; const LeftContainer: React.FC = () => { return (
-

+

Hi, I'm Carson

-

+

{ }; return ( -