Skip to content

Aria improvements #371

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

Draft
Scc33 wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Aria improvements #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e93a3f
Aria improvements
Scc33 Jun 25, 2025
23d55d8
Merge branch 'master' into ariaImprovements
Scc33 Jul 8, 2025
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
204 changes: 142 additions & 62 deletions __tests__/__snapshots__/Page.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<DocumentFragment>
<main
<div
class="flex flex-col items-center px-4"
>
<section
aria-labelledby="intro-heading"
class="mb-24 max-w-[50rem] text-center sm:mb-0 scroll-mt-[100rem]"
id="home"
>
Expand All @@ -28,6 +29,7 @@
/>
</div>
<span
aria-hidden="true"
class="absolute bottom-0 right-0 text-4xl animate-scale-in-delay-1"
>
👋
Expand All @@ -36,6 +38,7 @@
</div>
<h1
class="mb-10 mt-4 px-4 text-2xl font-medium leading-[1.5]! sm:text-4xl animate-fade-in-up"
id="intro-heading"
>
Hello, I'm
<span
Expand Down Expand Up @@ -64,15 +67,20 @@
. My focus is web development.
</h1>
<div
aria-label="Professional links and resume download"
class="flex flex-row flex-wrap items-center justify-center gap-2 px-4 text-lg font-medium animate-fade-in-up-delay-1"
role="group"
>
<a
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
aria-label="Visit Sean Coughlin's LinkedIn profile (opens in new tab)"
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
href="https://www.linkedin.com/in/sean-m-coughlin/"
rel="noopener noreferrer"
target="_blank"
>
LinkedIn
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
Expand All @@ -87,12 +95,15 @@
</svg>
</a>
<a
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
aria-label="Visit Sean Coughlin's GitHub profile (opens in new tab)"
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
href="https://github.com/scc33"
rel="noopener noreferrer"
target="_blank"
>
GitHub
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
Expand All @@ -107,12 +118,15 @@
</svg>
</a>
<a
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
aria-label="Visit Sean Coughlin's blog (opens in new tab)"
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
href="https://blog.seancoughlin.me"
rel="noopener noreferrer"
target="_blank"
>
Blog
<svg
aria-hidden="true"
class="opacity-60"
fill="none"
height="1em"
Expand Down Expand Up @@ -149,12 +163,15 @@
</svg>
</a>
<a
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
aria-label="Visit Sean Coughlin's portfolio (opens in new tab)"
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
href="https://portfolio.seancoughlin.me"
rel="noopener noreferrer"
target="_blank"
>
Portfolio
<svg
aria-hidden="true"
class="opacity-60"
fill="none"
height="1em"
Expand All @@ -172,7 +189,8 @@
</svg>
</a>
<a
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
aria-label="Download Sean Coughlin's resume (PDF file)"
class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
download=""
href="/Resume.pdf"
>
Expand All @@ -198,78 +216,140 @@
</div>
</section>
<div
aria-hidden="true"
class="bg-gray-200 my-24 h-16 w-1 rounded-full hidden sm:block dark:bg-opacity-20 animate-fade-in-delay-125"
role="presentation"
/>
<section
aria-labelledby="about-heading"
class="mb-24 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28 animate-fade-in-up-delay-175"
id="about"
>
<h2
class="text-3xl font-medium capitalize mb-8 text-center"
id="about-heading"
>
About me
</h2>
<p
class="mb-3"
<div
aria-label="Personal background and experience"
role="region"
>
I have my undergraduate and graduate degrees in
<span
class="font-medium"
>
computer science
</span>
. I am currently a
<span
class="font-medium"
<p
class="mb-3"
>
full-stack web developer
</span>
with Capital One (formerly Discover).
<span
class="italic"
>
My favorite part of programming
</span>
is seeing creations come to life. I
<span
class="underline"
I have my undergraduate and graduate degrees in
<span
class="font-medium"
>
computer science
</span>
. I am currently a
<span
class="font-medium"
>
full-stack web developer
</span>
with Capital One (formerly Discover).
<span
class="italic"
>
My favorite part of programming
</span>
is seeing creations come to life. I
<span
class="underline"
>
love
</span>
the feeling of finally shipping code.
</p>
<p
class="mb-3"
>
love
</span>
the feeling of finally shipping code.
</p>
<p
class="mb-3"
My core stack is
<span
class="font-medium"
>
React, Next.js, Java, and Spring Boot
</span>
. I am also familiar with TypeScript and cloud development. I am always looking to learn new technologies. Currently, I am studying for
<span
class="font-medium"
>
cloud certifications
</span>
.
</p>
<p>
When I'm not coding, I enjoy
<span
class="font-medium"
>
working out, hiking, exploring National Parks, and reading
</span>
.
</p>
</div>
</section>
<div
aria-label="Loading skills section"
class="mb-24 max-w-[53rem] scroll-mt-28 text-center sm:mb-40"
>
<div
class="animate-pulse"
>
My core stack is
<span
class="font-medium"
>
React, Next.js, Java, and Spring Boot
</span>
. I am also familiar with TypeScript and cloud development. I am always looking to learn new technologies. Currently, I am studying for
<span
class="font-medium"
>
cloud certifications
</span>
.
</p>
<p>
When I'm not coding, I enjoy
<span
class="font-medium"
<div
class="h-8 bg-gray-200 rounded mb-8 mx-auto w-48 dark:bg-gray-700"
/>
<div
class="flex flex-wrap justify-center gap-2"
>
working out, hiking, exploring National Parks, and reading
</span>
.
</p>
</section>
<div>
Loading...
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
<div
class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
/>
</div>
</div>
</div>
<div>
Loading...
<div
aria-label="Loading experience timeline"
class="mb-24 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28"
>
<div
class="animate-pulse"
>
<div
class="h-8 bg-gray-200 rounded mb-8 mx-auto w-48 dark:bg-gray-700"
/>
<div
class="space-y-4"
>
<div
class="h-20 bg-gray-200 rounded dark:bg-gray-700"
/>
<div
class="h-20 bg-gray-200 rounded dark:bg-gray-700"
/>
<div
class="h-20 bg-gray-200 rounded dark:bg-gray-700"
/>
</div>
</div>
</div>
</main>
</div>
</DocumentFragment>
23 changes: 20 additions & 3 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,29 @@ export default function RootLayout({
<body
className={`${inter.className} bg-gray-50 text-gray-950 relative pt-28 sm:pt-36 dark:bg-gray-900 dark:text-gray-50 dark:text-opacity-90`}
>
<div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"></div>
<div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394]"></div>
{/* Skip to main content link for screen readers */}
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded-md z-50"
>
Skip to main content
</a>

<div
className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"
aria-hidden="true"
></div>
<div
className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394]"
aria-hidden="true"
></div>

<ThemeContextProvider>
<ActiveSectionContextProvider>
<Header />
{children}
<main id="main-content" role="main">
{children}
</main>
<Footer />
<ThemeSwitch />
</ActiveSectionContextProvider>
Expand Down
Loading
Loading