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/ProjectsSection.tsx
+36 -15
View File
@@ -5,7 +5,9 @@ import Button from "@/_components/Button";
import links from "@/_data/links";
import projects from "@/_data/projects";
import shared from "@/_styles/gallery.module.scss";
import { ArrowRight24Regular } from "@fluentui/react-icons";
import ArrowRight24Regular from "@fluentui/svg-icons/icons/arrow_right_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, useState } from "react";
import { networkFor } from "react-social-icons";
@@ -23,23 +25,25 @@ const ProjectsSection: React.FC = () =>
return (
<section id="projects" className={ cls.section }>
<div className={ shared.list }>
<div className={ cls.content }>
<h2>My pet projects</h2>
{ projects.map((project, index) =>
<Button key={ index } type="button"
className={ `${shared.listItem} ${cls.listItem}` }
appearance={ selection === index ? "primary" : "secondary" }
data-selected={ selection === index }
onClick={ () => select(selection == index ? undefined : index) }
aria-label={ `"${project.title}". ${project.subtitle}` }>
<div className={ `${shared.list} ${cls.list}` }>
{ projects.map((project, index) =>
<Button key={ index } type="button"
className={ `${shared.listItem} ${cls.listItem}` }
appearance={ selection === index ? "primary" : "secondary" }
data-selected={ selection === index }
onClick={ () => select(selection == index ? undefined : index) }
aria-label={ `"${project.title}". ${project.subtitle}` }>
<div className={ shared.content }>
<span className={ shared.title }>{ project.title }</span>
<span>{ project.subtitle }</span>
</div>
</Button>
) }
<div className={ shared.content }>
<span className={ shared.title }>{ project.title }</span>
<span>{ project.subtitle }</span>
</div>
</Button>
) }
</div>
<Button className={ cls.cta } appearance="secondary" href={ links.github } target="_blank"
iconAfter={ <ArrowRight24Regular /> }>
@@ -85,6 +89,23 @@ const ProjectsSection: React.FC = () =>
) }
<Image className={ cls.defaultImg } hidden={ selection !== undefined }
src={ projectsImg.src } alt={ projectsImg.alt } loading="eager" />
<div className={ cls.mobileNav }>
<Button type="button"
icon={ <ChevronLeft24Regular /> }
aria-label="Previous project"
disabled={ selection === undefined }
onClick={ () => setSelection(selection! < 1 ? undefined : selection! - 1) } />
{ (selection ?? -1) < projects.length - 1 &&
<Button type="button" className={ cls.next }
icon={ <ChevronRight24Regular /> }
onClick={ () => setSelection((selection ?? -1) + 1) } >
Next project: { projects[(selection ?? -1) + 1].title }
</Button>
}
</div>
</div>
</section>
);