From 85b36bfaf849b7e2eda53c076796ae63ddebe994 Mon Sep 17 00:00:00 2001 From: GivFNZ Date: Sat, 22 Mar 2025 19:47:10 -0300 Subject: [PATCH] ref: use keen slider to improve skills view --- package-lock.json | 10 +++- package.json | 3 +- src/assets/c.svg | 1 + src/components/Footer/index.tsx | 2 +- src/pages/skills/index.tsx | 95 +++++++++++++++++++++++++++------ src/pages/skills/styles.ts | 36 +++++++++---- 6 files changed, 116 insertions(+), 31 deletions(-) create mode 100644 src/assets/c.svg diff --git a/package-lock.json b/package-lock.json index e945300..52e4766 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "givs-website-react", - "version": "1.1.13", + "version": "1.2.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "givs-website-react", - "version": "1.1.13", + "version": "1.2.4", "dependencies": { "@fontsource-variable/red-hat-display": "^5.1.1", "@fortawesome/fontawesome-svg-core": "^6.7.2", @@ -19,6 +19,7 @@ "fs": "^0.0.1-security", "i18next": "^24.2.2", "i18next-browser-languagedetector": "^8.0.4", + "keen-slider": "^6.8.6", "lucide-react": "^0.474.0", "path": "^0.12.7", "pnpm": "^9.15.4", @@ -2705,6 +2706,11 @@ "node": ">=6" } }, + "node_modules/keen-slider": { + "version": "6.8.6", + "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz", + "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/package.json b/package.json index 3bbffee..342676b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "givs-website-react", "private": true, - "version": "1.2.4", + "version": "1.3.0", "type": "module", "scripts": { "dev": "vite", @@ -21,6 +21,7 @@ "fs": "^0.0.1-security", "i18next": "^24.2.2", "i18next-browser-languagedetector": "^8.0.4", + "keen-slider": "^6.8.6", "lucide-react": "^0.474.0", "path": "^0.12.7", "pnpm": "^9.15.4", diff --git a/src/assets/c.svg b/src/assets/c.svg new file mode 100644 index 0000000..a177a90 --- /dev/null +++ b/src/assets/c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index a5a484a..a284ef6 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -2,7 +2,7 @@ export default function Footer() { return ( ) } \ No newline at end of file diff --git a/src/pages/skills/index.tsx b/src/pages/skills/index.tsx index 1852f4b..f33b3a0 100644 --- a/src/pages/skills/index.tsx +++ b/src/pages/skills/index.tsx @@ -1,30 +1,91 @@ import { MainContainer } from "../../components/MainContent/styles"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faAndroid, faAngular, faGit, faLinux, faNode, faReact, faWindows } from '@fortawesome/free-brands-svg-icons' -import { SkillsContainer } from "./styles"; +import { faAndroid, faAngular, faAtlassian, faGit, faJava, faLinux, faNode, faReact, faWindows } from '@fortawesome/free-brands-svg-icons' +import { ButtonsContainer, Skill, SkillsContainer, SlideButton } from "./styles"; import { useTranslation } from "react-i18next"; +import { useKeenSlider } from 'keen-slider/react' +import cLogo from '../../assets/c.svg' +import { ChevronLeft, ChevronRight } from "lucide-react"; export default function Skills() { const { t } = useTranslation(); + const [sliderRef, instanceRef] = useKeenSlider({ + slides: { + perView: 10, + spacing: 0, + }, + breakpoints: { + "(max-width: 1070px)": { + slides: { perView: 7 } + }, + "(max-width: 810px)": { + slides: { perView: 5 } + }, + "(max-width: 490px)": { + slides: { perView: 2 } + }, + "(max-width: 330px)": { + slides: { perView: 1 } + }, + } + }) return (

{t("skills")}

- - -

Android

- -

Linux

- -

Node

- -

React

- -

Angular

- -

Windows

- -

Git

+ + + +

Android

+ + + +

Linux

+ + + +

Node

+ + + +

React

+ + + +

Angular

+ + + +

Windows

+ + + +

Git

+ + + +

Java

+ + + +

Atlassian

+ + + C logo +

C/C++

+ + + instanceRef.current?.prev()} + > + + + instanceRef.current?.next()} + > + + + ) } \ No newline at end of file diff --git a/src/pages/skills/styles.ts b/src/pages/skills/styles.ts index 655d00f..818b0ff 100644 --- a/src/pages/skills/styles.ts +++ b/src/pages/skills/styles.ts @@ -2,18 +2,34 @@ import styled from "styled-components"; export const SkillsContainer = styled.div` display: flex; -flex-direction: row; margin-top: 1rem; +overflow: hidden; +` + +export const Skill = styled.div` +display: flex; +flex-direction: column; align-items: center; -justify-content: center; -p { - margin-left: 0.3rem; - margin-right: 2.5rem; +scroll-snap-type: "x-mandatory"; +img{ + display: flex; + height: 4rem; } -@media(max-width: 1090px){ - flex-direction: column; - p{ - margin: 0 0 1rem 0; - } +p{ + margin: 0.5rem; } +` + +export const SlideButton = styled.button` +background: transparent; +border: 0; +cursor: pointer; +margin-right: 2rem; +` + +export const ButtonsContainer = styled.div` + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; ` \ No newline at end of file