a11y
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m36s

This commit is contained in:
2025-06-12 16:16:38 -06:00
parent 2ad6585a07
commit df33b94e38
12 changed files with 284 additions and 336 deletions

View File

@ -101,9 +101,14 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
return (
<li key={item.id} class="mx-0.5 sm:mx-1">
<a href={item.path} class={isActive ? "menu-active" : ""}>
<div class="tooltip" data-tip={item.tooltip}>
<a
href={item.path}
class={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center ${isActive ? "menu-active" : ""}`}
aria-label={item.tooltip}
>
<div class="tooltip md:before:-translate-x-1/2 md:before:-translate-y-full md:before:top-auto md:before:bottom-full md:after:-translate-x-1/2 md:after:-translate-y-full md:after:top-auto md:after:bottom-full" data-tip={item.tooltip}>
<Icon size={18} class="sm:w-5 sm:h-5" />
<span class="sr-only">{item.name}</span>
</div>
</a>
</li>

View File

@ -11,7 +11,7 @@ const { slug } = post;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-3">
<div class="card-body p-3 break-words">
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
{title}
</h2>

View File

@ -10,7 +10,7 @@ const { project } = Astro.props;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-6">
<div class="card-body p-6 break-words">
<h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
{project.name}
</h2>

View File

@ -21,7 +21,6 @@ export default function ResumeSkills({ skills }: ResumeSkillsProps) {
entries.forEach((entry) => {
if (entry.isIntersecting && !hasAnimated.value) {
hasAnimated.value = true;
// Start animation for all skills
skills.forEach((skill) => {
animateSkill(skill.id, skill.level);
});
@ -67,19 +66,23 @@ export default function ResumeSkills({ skills }: ResumeSkillsProps) {
<div id="skills-section" class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
{skills.map((skill) => {
const currentLevel = animatedLevels.value[skill.id] || 0;
const progressValue = currentLevel * 20; // Convert 1-5 scale to 0-100
const progressValue = currentLevel * 20;
return (
<div key={skill.id}>
<label class="label p-1 sm:p-2">
<span class="label-text text-sm sm:text-base">
<div class="flex justify-between items-center p-1 sm:p-2">
<span class="text-sm sm:text-base font-medium">
{skill.name}
</span>
</label>
<span class="text-xs sm:text-sm text-base-content/70">
{Math.round(currentLevel)}/5
</span>
</div>
<progress
class="progress progress-primary w-full h-2 sm:h-3 transition-all duration-100 ease-out"
class="progress progress-primary w-full h-2 sm:h-3 min-h-2 transition-all duration-100 ease-out"
value={progressValue}
max="100"
aria-label={`${skill.name} skill level: ${Math.round(currentLevel)} out of 5`}
></progress>
</div>
);

View File

@ -31,7 +31,7 @@ export default function ScrollUpButton() {
type="button"
onClick={scrollToTop}
class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
p-3 rounded-full shadow-lg transition-all duration-300
p-3 rounded-full shadow-lg transition-all duration-300 min-h-[44px] min-w-[44px] inline-flex items-center justify-center
${
isVisible.value
? "opacity-70 translate-y-0"

View File

@ -12,7 +12,7 @@ const { talk } = Astro.props;
<div
class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
>
<div class="card-body p-6">
<div class="card-body p-6 break-words">
<h2
class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100"
>

View File

@ -36,12 +36,6 @@ const Terminal = () => {
}
}, [commandHistory]);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
// Load command history from localStorage
useEffect(() => {
const history = loadCommandHistory();
@ -219,7 +213,6 @@ __/ =| o |=-O=====O=====O=====O \\ ____Y___________|__|_________________________
}
onKeyDown={handleKeyDown}
className="flex-1 bg-transparent border-none outline-none text-accent ml-1"
autoFocus
spellcheck={false}
/>
</form>