Skip to content

Lighthouse optimizing #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 24, 2024
Merged

Lighthouse optimizing #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9326a18
chore: Accessibility for About section
carsonSgit Aug 24, 2024
64f7272
chore: Accessibility
carsonSgit Aug 24, 2024
f96b962
chore: Aria-label accessbility
carsonSgit Aug 24, 2024
fffead7
chore: Aria-label accessibility
carsonSgit Aug 24, 2024
6c2bef7
chore: Accessibility improvements
carsonSgit Aug 24, 2024
fb737b2
chore: Aria-labels on projects
carsonSgit Aug 24, 2024
f58112f
chore: More project accessibility
carsonSgit Aug 24, 2024
4922313
chore: More accessibility
carsonSgit Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import './App.scss';

const App: React.FC = () => {
return (
<div className="App">
<div className="App" role="document">
<Navbar />
<Content />
<main>
<Content />
</main>
<Footer />
</div>
);
Expand Down
5 changes: 5 additions & 0 deletions src/Components/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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&#39;ed
</a>{' '}
Expand All @@ -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
</a>
Expand All @@ -57,6 +59,7 @@ const About: React.FC = () => {
href="https://github.com/carsonSgit"
target="_blank"
rel="noreferrer"
aria-label="Visit my GitHub profile"
>
GitHub
</a>
Expand All @@ -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
</a>{' '}
Expand All @@ -75,6 +79,7 @@ const About: React.FC = () => {
href="https://medium.com/@carsonspriggs6"
target="_blank"
rel="noreferrer"
aria-label="Visit my Medium profile"
>
Medium
</a>{' '}
Expand Down
223 changes: 67 additions & 156 deletions src/Components/Experience/ExperienceTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ const ExperienceTimeline = () => {

return (
<div className="experience-grid">
<div className="timeline">
<div className="timeline" aria-label="Experience Timeline">
<motion.div className="particle-background" />

<div className="timeline-section">
<h2 className="timeline-section-title">Education</h2>
<h2 className="timeline-section-title" id="education">Education</h2>
{education.map((item, index) => (
<motion.div
key={index}
Expand All @@ -79,26 +79,28 @@ const ExperienceTimeline = () => {
animate={controls}
exit={{ opacity: 0, y: 20 }}
className="timeline-item"
aria-labelledby={`education-item-${index}`}
>
<div className="timeline-step education-step"></div>
<div className="timeline-step education-step" aria-hidden="true"></div>
<div className="timeline-content">
<h3>
<h3 id={`education-item-${index}`}>
{item.title} <span className="timeline-atsign">@ </span>
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
className="timeline-institution"
aria-label={`Link to ${item.institution}`}
>
{item.institution}
</a>
</h3>
<div className="timeline-date">{item.date}</div>
<div className="timeline-date" aria-label="Date of education">{item.date}</div>
<p>{item.description}</p>
<div className="timeline-stats">
<div className="timeline-stats" aria-label="Statistics related to education">
{Object.entries(statistics[item.statsKey] || {}).map(
([key, value]: [string, number | string]) => (
<div key={key} className="stat-item">
<div key={key} className="stat-item" aria-label={`${key.replace(/([A-Z])/g, ' $1').toLowerCase()}: ${value}`}>
<strong>{value}</strong>{' '}
{key.replace(/([A-Z])/g, ' $1').toLowerCase()}
</div>
Expand All @@ -111,7 +113,7 @@ const ExperienceTimeline = () => {
</div>

<div className="timeline-section">
<h2 className="timeline-section-title">Experience</h2>
<h2 className="timeline-section-title" id="experience">Experience</h2>
{experience.map((item, index) => (
<motion.div
key={index}
Expand All @@ -120,21 +122,22 @@ const ExperienceTimeline = () => {
animate={controls}
exit={{ opacity: 0, y: 20 }}
className="timeline-item"
aria-labelledby={`experience-item-${index}`}
>
<div className="timeline-step experience-step"></div>
<div className="timeline-step experience-step" aria-hidden="true"></div>
<div className="timeline-content">
<h3>
<a href={item.link} target="_blank" rel="noopener noreferrer">
<h3 id={`experience-item-${index}`}>
<a href={item.link} target="_blank" rel="noopener noreferrer" aria-label={`Link to ${item.title} at ${item.company}`}>
{item.title} <span className="timeline-atsign">@ </span>
<span className="timeline-company">{item.company}</span>
</a>
</h3>
<div className="timeline-date">{item.date}</div>
<div className="timeline-date" aria-label="Date of experience">{item.date}</div>
<p>{item.description}</p>
<div className="timeline-stats">
<div className="timeline-stats" aria-label="Statistics related to experience">
{Object.entries(statistics[item.statsKey] || {}).map(
([key, value]: [string, number | string]) => (
<div key={key} className="stat-item">
<div key={key} className="stat-item" aria-label={`${key.replace(/([A-Z])/g, ' $1').toLowerCase()}: ${value}`}>
<strong>{value}</strong>{' '}
{key.replace(/([A-Z])/g, ' $1').toLowerCase()}
</div>
Expand All @@ -147,160 +150,68 @@ const ExperienceTimeline = () => {
</div>
</div>

<div className="category-containers">
<div className="category-containers" aria-label="Technical skills">
<div className="CategoryContainer">
<h3 className="CategoryTitle">Languages</h3>
<ul className="TechList programming-languages">
<li>
<FaPython /> Python
</li>
<li>
<FaJava /> Java
</li>
<li>
<FaJsSquare /> JavaScript
</li>
<li>
<SiTypescript /> TypeScript
</li>
<li>
<SiCsharp /> C#
</li>
<li>
<SiKotlin /> Kotlin
</li>
<li>
<FaPhp /> PHP
</li>
<li>
<SiPowershell /> PowerShell
</li>
<li>
<SiGnubash /> Bash
</li>
<li>
<FaHtml5 /> HTML
</li>
<li>
<FaCss3Alt /> CSS
</li>
<li>
<SiMicrosoftsqlserver /> MSSQL
</li>
<li>
<SiSqlite /> SQLite
</li>
<li>
<SiMysql /> MySQL
</li>
<ul className="TechList programming-languages" role="list">
<li role="listitem" aria-label="Python"><FaPython /> Python</li>
<li role="listitem" aria-label="Java"><FaJava /> Java</li>
<li role="listitem" aria-label="JavaScript"><FaJsSquare /> JavaScript</li>
<li role="listitem" aria-label="TypeScript"><SiTypescript /> TypeScript</li>
<li role="listitem" aria-label="C#"><SiCsharp /> C#</li>
<li role="listitem" aria-label="Kotlin"><SiKotlin /> Kotlin</li>
<li role="listitem" aria-label="PHP"><FaPhp /> PHP</li>
<li role="listitem" aria-label="PowerShell"><SiPowershell /> PowerShell</li>
<li role="listitem" aria-label="Bash"><SiGnubash /> Bash</li>
<li role="listitem" aria-label="HTML"><FaHtml5 /> HTML</li>
<li role="listitem" aria-label="CSS"><FaCss3Alt /> CSS</li>
<li role="listitem" aria-label="MSSQL"><SiMicrosoftsqlserver /> MSSQL</li>
<li role="listitem" aria-label="SQLite"><SiSqlite /> SQLite</li>
<li role="listitem" aria-label="MySQL"><SiMysql /> MySQL</li>
</ul>
</div>

<div className="CategoryContainer">
<h3 className="CategoryTitle">Frameworks & Libraries</h3>
<ul className="TechList frameworks-libraries">
<li>
<SiDotnet /> ASP.NET
</li>
<li>
<SiDotnet /> .NET MAUI
</li>
<li>
<SiDotnet /> WPF
</li>
<li>
<SiXamarin /> Xamarin
</li>
<li>
<FaReact /> React
</li>
<li>
<SiNextdotjs /> Next.js
</li>
<li>
<SiJquery /> jQuery
</li>
<li>
<FaAngular /> Angular
</li>
<li>
<FaBootstrap /> Bootstrap
</li>
<li>
<FaNodeJs /> Node.js
</li>
<li>
<FaSass /> SCSS
</li>
<li>
<SiTailwindcss /> TailwindCSS
</li>
<li>
<SiExpress /> Express.js
</li>
<li>
<SiKeras /> Keras
</li>
<li>
<SiPytorch /> PyTorch
</li>
<li>
<SiScikitlearn /> scikit-learn
</li>
<ul className="TechList frameworks-libraries" role="list">
<li role="listitem" aria-label="ASP.NET"><SiDotnet /> ASP.NET</li>
<li role="listitem" aria-label=".NET MAUI"><SiDotnet /> .NET MAUI</li>
<li role="listitem" aria-label="WPF"><SiDotnet /> WPF</li>
<li role="listitem" aria-label="Xamarin"><SiXamarin /> Xamarin</li>
<li role="listitem" aria-label="React"><FaReact /> React</li>
<li role="listitem" aria-label="Next.js"><SiNextdotjs /> Next.js</li>
<li role="listitem" aria-label="jQuery"><SiJquery /> jQuery</li>
<li role="listitem" aria-label="Angular"><FaAngular /> Angular</li>
<li role="listitem" aria-label="Bootstrap"><FaBootstrap /> Bootstrap</li>
<li role="listitem" aria-label="Node.js"><FaNodeJs /> Node.js</li>
<li role="listitem" aria-label="Firebase"><SiFirebase /> Firebase</li>
<li role="listitem" aria-label="MongoDB"><SiMongodb /> MongoDB</li>
<li role="listitem" aria-label="SCSS"><FaSass /> SCSS</li>
<li role="listitem" aria-label="TailwindCSS"><SiTailwindcss /> TailwindCSS</li>
<li role="listitem" aria-label="Express.js"><SiExpress /> Express.js</li>
<li role="listitem" aria-label="Keras"><SiKeras /> Keras</li>
<li role="listitem" aria-label="PyTorch"><SiPytorch /> PyTorch</li>
<li role="listitem" aria-label="scikit-learn"><SiScikitlearn /> scikit-learn</li>
</ul>
</div>

<div className="CategoryContainer">
<h3 className="CategoryTitle">Tools</h3>
<ul className="TechList tools-platforms">
<li>
<FaGitAlt /> Git
</li>
<li>
<SiMongodb /> MongoDB
</li>
<li>
<FaDocker /> Docker
</li>
<li>
<SiAzuredevops /> Azure
</li>
<li>
<FaAws /> AWS
</li>
<li>
<SiCloudflare /> Cloudflare
</li>
<li>
<SiFirebase /> Firebase
</li>
<li>
<SiVercel /> Vercel
</li>
<li>
<SiNginx /> Nginx
</li>
<li>
<SiUnity /> Unity
</li>
<li>
<SiKubernetes /> Kubernetes
</li>
<li>
<SiPostman /> Postman
</li>
<li>
<SiSwagger /> Swagger
</li>
<li>
<SiJira /> Jira
</li>
<li>
<FaRaspberryPi /> Rasp Pi
</li>
<li>
<FaFigma /> Figma
</li>
<ul className="TechList tools-platforms" role="list">
<li role="listitem" aria-label="Git"><FaGitAlt /> Git</li>
<li role="listitem" aria-label="Docker"><FaDocker /> Docker</li>
<li role="listitem" aria-label="AWS"><FaAws /> AWS</li>
<li role="listitem" aria-label="Azure DevOps"><SiAzuredevops /> Azure DevOps</li>
<li role="listitem" aria-label="Postman"><SiPostman /> Postman</li>
<li role="listitem" aria-label="Swagger"><SiSwagger /> Swagger</li>
<li role="listitem" aria-label="Jira"><SiJira /> Jira</li>
<li role="listitem" aria-label="Figma"><FaFigma /> Figma</li>
<li role="listitem" aria-label="Cloudflare"><SiCloudflare /> Cloudflare</li>
<li role="listitem" aria-label="Vercel"><SiVercel /> Vercel</li>
<li role="listitem" aria-label="Nginx"><SiNginx /> Nginx</li>
<li role="listitem" aria-label="Raspberry Pi"><FaRaspberryPi /> Raspberry Pi</li>
<li role="listitem" aria-label="Kubernetes"><SiKubernetes /> Kubernetes</li>
<li role="listitem" aria-label="Unity"><SiUnity /> Unity</li>
</ul>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/Components/Home/Hero/AnimatedImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,12 @@ const AnimatedImage: React.FC<AnimatedImageProps> = ({
return (
<img
src={`${process.env.PUBLIC_URL}/${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`}
alt={`Sprite ${currentIndex}`}
alt={`Animated image showing ${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`}
onMouseEnter={() => handleMouseEnter(currentIndex)}
onMouseLeave={handleMouseLeave}
width="280"
aria-live="polite"
aria-label={`Current animated image: ${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`}
/>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/Components/Home/Hero/LeftContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import './Hero.scss';
const LeftContainer: React.FC = () => {
return (
<div className="LeftContainer">
<h1 className="HeroText">
<h1 className="HeroText" aria-label="Introduction">
Hi, I&#39;m <span className="AnimatedText">Carson</span>
</h1>
<p>
<p aria-live="polite" aria-label="Typewriter effect text">
<Typewriter
words={[
'I like building cool things.',
Expand Down
Loading