xfox111/my-website
1
0
Fork 0
mirror of https://github.com/XFox111/my-website.git synced 2026-04-22 07:28:01 +03:00
Code Activity

feat!: site refresh + dependency update

Browse Source
This commit is contained in:
Eugene Fox
2025-12-11 05:51:44 +00:00
parent aac9140830
commit 57b3a72fa2
48 changed files with 4943 additions and 1743 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/_page_sections/SkillsSection.tsx
+67 -30
View File
@@ -1,13 +1,15 @@
"use client";
import Button from "@/_components/Button";
import links from "@/_data/links";
import skills from "@/_data/skills";
import shared from "@/_styles/gallery.module.scss";
import { ArrowDownload24Regular } from "@fluentui/react-icons";
import ArrowDownload24Regular from "@fluentui/svg-icons/icons/arrow_download_24_regular.svg";
import ChevronLeft24Regular from "@fluentui/svg-icons/icons/chevron_left_24_regular.svg";
import ChevronRight24Regular from "@fluentui/svg-icons/icons/chevron_right_24_regular.svg";
import Image from "next/image";
import React, { useCallback, useId, useState } from "react";
import cls from "./SkillsSection.module.scss";
import links from "@/_data/links";
const SkillsSection: React.FC = () =>
{
@@ -24,39 +26,74 @@ const SkillsSection: React.FC = () =>
<section id="skills" className={ cls.section }>
<div id={ illustrations } className={ cls.illustrations } aria-live="polite" aria-atomic>
{ skills.map((i, index) =>
<Image key={ index }
src={ i.image.src } alt={ i.image.alt }
hidden={ selection !== index } loading="eager" />
<div key={ index } className={ cls.item } hidden={ selection !== index }>
<Image src={ i.image.src } alt={ i.image.alt } loading="eager" />
<h3>{ i.title }</h3>
<p>{ i.description }</p>
{ selection === 4 &&
// [SPECIAL] It's a surprize tool that will help us later
<div role="button" aria-label="Click me"
className={ cls.whatsThis }
onClick={ () =>
{
window.clarity?.("event", "ngguu");
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
} } />
}
{ selection === 7 &&
// [SPECIAL] sus
<div role="button" aria-label="Click me"
className={ cls.sus }
onClick={ () =>
{
window.clarity?.("event", "sus");
const track = new Audio("sus.mp3");
track.volume = 0.1;
track.play();
} } />
}
</div>
) }
{ selection === 4 &&
// [SPECIAL] It's a surprize tool that will help us later
<div role="button" aria-label="Click me"
className={ cls.whatsThis }
onClick={ () =>
{
window.clarity?.("event", "ngguu");
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
} } />
}
<div className={ cls.mobileNav }>
<Button type="button"
icon={ <ChevronLeft24Regular /> }
aria-label="Previous skill"
disabled={ selection < 1 }
onClick={ () => setSelection(selection - 1) } />
{ selection < skills.length - 1 &&
<Button type="button" className={ cls.next }
icon={ <ChevronRight24Regular /> }
onClick={ () => setSelection(selection + 1) } >
Next skill: { skills[selection + 1].title }
</Button>
}
</div>
</div>
<div className={ `${shared.list} ${cls.list}` }>
<h2>My skillset</h2>
<div className={ cls.content }>
<h2>My skills &amp; tools</h2>
{ skills.map((skill, index) =>
<Button key={ index } type="button" aria-current={ selection === index } aria-controls={ illustrations }
className={ shared.listItem } appearance={ selection === index ? "primary" : "secondary" }
data-selected={ selection === index }
onClick={ () => select(index) }
aria-label={ `${skill.title} skills. Associated stack: ${skill.description}` }
icon={ <skill.icon /> } >
<div className={ `${shared.list} ${cls.list}` }>
{ skills.map((skill, index) =>
<Button key={ index } type="button" aria-current={ selection === index } aria-controls={ illustrations }
className={ shared.listItem } appearance={ selection === index ? "primary" : "secondary" }
data-selected={ selection === index }
onClick={ () => select(index) }
aria-label={ `${skill.title} skills. Associated stack: ${skill.caption}` }
icon={ <skill.icon /> } >
<div className={ shared.content }>
<span className={ shared.title }>{ skill.title }</span>
<span>{ skill.description }</span>
</div>
</Button>
) }
<div className={ shared.content }>
<span className={ shared.title }>{ skill.title }</span>
<span>{ skill.caption }</span>
</div>
</Button>
) }
</div>
<Button appearance="secondary" className={ cls.cta }
as="next" href={ links.resume }