atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo and responsiveness changes

Browse Source
This commit is contained in:
Atridad Lahiji
2025-05-28 01:07:13 -06:00
parent 0b02d6d5a0
commit b2426a6071
10 changed files with 489 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/NavigationBar.tsx
View File

@ -44,49 +44,49 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
return (
<div
class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
class={`fixed bottom-3 sm:bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
isScrolling.value ? "opacity-30" : "opacity-100"
} ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
>
<div class="overflow-visible">
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
<li class="mx-1">
<ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
<li class="mx-0.5 sm:mx-1">
<a href="/" class={currentPath === "/" ? "menu-active" : ""}>
<div class="tooltip" data-tip="Home">
<Home />
<Home size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/posts"
class={isPostsPath(currentPath) ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Posts">
<NotebookPen />
<NotebookPen size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/resume"
class={currentPath === "/resume" ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Resume">
<FileText />
<FileText size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/projects"
class={currentPath.startsWith("/projects") ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Projects">
<CodeXml />
<CodeXml size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>

14
src/components/SkillsSection.tsx
View File

@ -66,21 +66,21 @@ export default function SkillsSection({ title, skills }: SkillsSectionProps) {
};
return (
<div id="skills-section" class="card bg-base-200 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title text-2xl">{title || "Skills"}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div id="skills-section" class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title text-xl sm:text-2xl">{title || "Skills"}</h2>
<div 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
return (
<div key={skill.id}>
<label class="label">
<span class="label-text">{skill.name}</span>
<label class="label p-1 sm:p-2">
<span class="label-text text-sm sm:text-base">{skill.name}</span>
</label>
<progress
class="progress progress-primary w-full transition-all duration-100 ease-out"
class="progress progress-primary w-full h-2 sm:h-3 transition-all duration-100 ease-out"
value={progressValue}
max="100"
>