This commit is contained in:
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
>
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user