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/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