GivFNZ/my-website
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ref: use keen slider to improve skills view

Browse Source
This commit is contained in:
GivFNZ 2025-03-22 19:47:10 -03:00
parent 68710d14d7
commit 85b36bfaf8
No known key found for this signature in database
GPG Key ID: 63DD92181B575322
6 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

1
src/assets/c.svg Normal file
View File

@ -0,0 +1 @@
<svg width="2222" height="2500" viewBox="0 0 256 288" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.569 84.72c-.002-4.83-1.035-9.098-3.124-12.761-2.052-3.602-5.125-6.621-9.247-9.008-34.025-19.619-68.083-39.178-102.097-58.817-9.17-5.294-18.061-5.101-27.163.269C100.395 12.39 32.59 51.237 12.385 62.94 4.064 67.757.015 75.129.013 84.711 0 124.166.013 163.62 0 203.076c.002 4.724.991 8.909 2.988 12.517 2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252 1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-.013-118.345" fill="#5C8DBC"/><path d="M128.182 143.509L2.988 215.593c2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252l-124.413-72.074" fill="#1A4674"/><path d="M91.101 164.861c7.285 12.718 20.98 21.296 36.69 21.296 15.807 0 29.58-8.687 36.828-21.541l-36.437-21.107-37.081 21.352" fill="#1A4674"/><path d="M255.569 84.72c-.002-4.83-1.035-9.098-3.124-12.761l-124.263 71.55 124.413 72.074c1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-.013-118.345" fill="#1B598E"/><path d="M248.728 148.661h-9.722v9.724h-9.724v-9.724h-9.721v-9.721h9.721v-9.722h9.724v9.722h9.722v9.721M213.253 148.661h-9.721v9.724h-9.722v-9.724h-9.722v-9.721h9.722v-9.722h9.722v9.722h9.721v9.721" fill="#FFF"/><path d="M164.619 164.616c-7.248 12.854-21.021 21.541-36.828 21.541-15.71 0-29.405-8.578-36.69-21.296a42.062 42.062 0 0 1-5.574-20.968c0-23.341 18.923-42.263 42.264-42.263 15.609 0 29.232 8.471 36.553 21.059l36.941-21.272c-14.683-25.346-42.096-42.398-73.494-42.398-46.876 0-84.875 38-84.875 84.874 0 15.378 4.091 29.799 11.241 42.238 14.646 25.48 42.137 42.637 73.634 42.637 31.555 0 59.089-17.226 73.714-42.781l-36.886-21.371" fill="#FFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

2
src/components/Footer/index.tsx
View File

@ -2,7 +2,7 @@ export default function Footer() {
return (
<footer>
<p>© 2025 GivFNZ</p>
<p>Version: 1.2.4</p>
<p>Version: 1.3.0</p>
</footer>
)
}

95
src/pages/skills/index.tsx
View File

@ -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 (
<MainContainer>
<h1>{t("skills")}</h1>
<SkillsContainer>
<FontAwesomeIcon size="2x" style={{ color: '#fff' }} icon={faAndroid} />
<p>Android</p>
<FontAwesomeIcon size="2x" icon={faLinux} />
<p>Linux</p>
<FontAwesomeIcon size="2x" icon={faNode} />
<p>Node</p>
<FontAwesomeIcon size="2x" icon={faReact} />
<p>React</p>
<FontAwesomeIcon size="2x" icon={faAngular} />
<p>Angular</p>
<FontAwesomeIcon size="2x" icon={faWindows} />
<p>Windows</p>
<FontAwesomeIcon size="2x" icon={faGit} />
<p>Git</p>
<SkillsContainer ref={sliderRef} className="keen-slider">
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" style={{ color: '#fff' }} icon={faAndroid} />
<p>Android</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faLinux} />
<p>Linux</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faNode} />
<p>Node</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faReact} />
<p>React</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faAngular} />
<p>Angular</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faWindows} />
<p>Windows</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faGit} />
<p>Git</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faJava} />
<p>Java</p>
</Skill>
<Skill className="keen-slider__slide">
<FontAwesomeIcon size="4x" icon={faAtlassian} />
<p>Atlassian</p>
</Skill>
<Skill className="keen-slider__slide">
<img src={cLogo} alt="C logo" />
<p>C/C++</p>
</Skill>
</SkillsContainer>
<ButtonsContainer>
<SlideButton
onClick={() => instanceRef.current?.prev()}
>
<ChevronLeft color="gray" size={48} />
</SlideButton>
<SlideButton
onClick={() => instanceRef.current?.next()}
>
<ChevronRight color="gray" size={48} />
</SlideButton>
</ButtonsContainer>
</MainContainer>
)
}

36
src/pages/skills/styles.ts
View File

@ -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;
`