Skip to content

Commit 3afbe04

Browse files
pintoderianpintoderian
committed
Skills
1 parent 25be8aa commit 3afbe04

File tree

8 files changed

+332
-8
lines changed

8 files changed

+332
-8
lines changed

‎app/components/about-me.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import useTranslate from '@/hooks/useTranslate';
4+
import Title from './title';
45

56
const AboutMe = () => {
67
const { translate } = useTranslate();
@@ -11,9 +12,7 @@ const AboutMe = () => {
1112
id="about"
1213
className="description prose prose-neutral dark:prose-invert"
1314
>
14-
<div className="title font-bold text-2xl text-black dark:text-white">
15-
{translate('about')}
16-
</div>
15+
<Title text={translate('about')} />
1716
{data &&
1817
data.map((line, index) => {
1918
return <p key={index}>{line}</p>;

‎app/components/experiences/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22

33
import useTranslate from '@/hooks/useTranslate';
44
import Resume from './_children/resume';
5+
import Title from '../title';
56

67
const Experiences = () => {
78
const { translate } = useTranslate();
89
const data = translate('experiences');
910

1011
return (
1112
<section id="experience">
12-
<div className="title font-bold text-2xl text-black dark:text-white my-5">
13-
{translate('experience')}
14-
</div>
13+
<Title className="my-5" text={translate('experience')} />
1514
<div className="flex flex-col gap-4 border-l border-neutral-100 dark:border-neutral-800">
1615
{data &&
1716
data.map((experience, index) => {

‎app/components/header/_children/menu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ const Menu = ({ className = 'flex-col md:flex-row' }) => {
3030
{translate('experience')}
3131
</Link>
3232
</li>
33-
<li className={activeClass('proyects')}>
33+
{/*<li className={activeClass('proyects')}>
3434
<Link href="#proyects" onClick={() => setActive('proyects')}>
3535
{translate('proyects')}
3636
</Link>
37-
</li>
37+
</li>*/}
3838
<li className={activeClass('skills')}>
3939
<Link href="#skills" onClick={() => setActive('skills')}>
4040
{translate('skills')}

‎app/components/icons.js‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,209 @@ export const IconMenu = ({ size = 25 }) => {
6161
</svg>
6262
);
6363
};
64+
65+
export const IconLaravel = () => {
66+
return (
67+
<svg
68+
stroke="currentColor"
69+
fill="currentColor"
70+
strokeWidth="0"
71+
viewBox="0 0 512 512"
72+
height="1em"
73+
width="1em"
74+
xmlns="http://www.w3.org/2000/svg"
75+
>
76+
<path d="M504.4,115.83a5.72,5.72,0,0,0-.28-.68,8.52,8.52,0,0,0-.53-1.25,6,6,0,0,0-.54-.71,9.36,9.36,0,0,0-.72-.94c-.23-.22-.52-.4-.77-.6a8.84,8.84,0,0,0-.9-.68L404.4,55.55a8,8,0,0,0-8,0L300.12,111h0a8.07,8.07,0,0,0-.88.69,7.68,7.68,0,0,0-.78.6,8.23,8.23,0,0,0-.72.93c-.17.24-.39.45-.54.71a9.7,9.7,0,0,0-.52,1.25c-.08.23-.21.44-.28.68a8.08,8.08,0,0,0-.28,2.08V223.18l-80.22,46.19V63.44a7.8,7.8,0,0,0-.28-2.09c-.06-.24-.2-.45-.28-.68a8.35,8.35,0,0,0-.52-1.24c-.14-.26-.37-.47-.54-.72a9.36,9.36,0,0,0-.72-.94,9.46,9.46,0,0,0-.78-.6,9.8,9.8,0,0,0-.88-.68h0L115.61,1.07a8,8,0,0,0-8,0L11.34,56.49h0a6.52,6.52,0,0,0-.88.69,7.81,7.81,0,0,0-.79.6,8.15,8.15,0,0,0-.71.93c-.18.25-.4.46-.55.72a7.88,7.88,0,0,0-.51,1.24,6.46,6.46,0,0,0-.29.67,8.18,8.18,0,0,0-.28,2.1v329.7a8,8,0,0,0,4,6.95l192.5,110.84a8.83,8.83,0,0,0,1.33.54c.21.08.41.2.63.26a7.92,7.92,0,0,0,4.1,0c.2-.05.37-.16.55-.22a8.6,8.6,0,0,0,1.4-.58L404.4,400.09a8,8,0,0,0,4-6.95V287.88l92.24-53.11a8,8,0,0,0,4-7V117.92A8.63,8.63,0,0,0,504.4,115.83ZM111.6,17.28h0l80.19,46.15-80.2,46.18L31.41,63.44Zm88.25,60V278.6l-46.53,26.79-33.69,19.4V123.5l46.53-26.79Zm0,412.78L23.37,388.5V77.32L57.06,96.7l46.52,26.8V338.68a6.94,6.94,0,0,0,.12.9,8,8,0,0,0,.16,1.18h0a5.92,5.92,0,0,0,.38.9,6.38,6.38,0,0,0,.42,1v0a8.54,8.54,0,0,0,.6.78,7.62,7.62,0,0,0,.66.84l0,0c.23.22.52.38.77.58a8.93,8.93,0,0,0,.86.66l0,0,0,0,92.19,52.18Zm8-106.17-80.06-45.32,84.09-48.41,92.26-53.11,80.13,46.13-58.8,33.56Zm184.52,4.57L215.88,490.11V397.8L346.6,323.2l45.77-26.15Zm0-119.13L358.68,250l-46.53-26.79V131.79l33.69,19.4L392.37,178Zm8-105.28-80.2-46.17,80.2-46.16,80.18,46.15Zm8,105.28V178L455,151.19l33.68-19.4v91.39h0Z"></path>
77+
</svg>
78+
);
79+
};
80+
81+
export const IconReact = () => {
82+
return (
83+
<svg
84+
stroke="currentColor"
85+
fill="currentColor"
86+
strokeWidth="0"
87+
viewBox="0 0 512 512"
88+
height="1em"
89+
width="1em"
90+
xmlns="http://www.w3.org/2000/svg"
91+
>
92+
<path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path>
93+
</svg>
94+
);
95+
};
96+
97+
export const IconExpress = () => {
98+
return (
99+
<svg
100+
stroke="currentColor"
101+
fill="currentColor"
102+
strokeWidth="0"
103+
role="img"
104+
viewBox="0 0 24 24"
105+
height="1em"
106+
width="1em"
107+
xmlns="http://www.w3.org/2000/svg"
108+
>
109+
<path d="M24 18.588a1.529 1.529 0 01-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 01-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 011.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 011.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 000 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 002.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 01-2.589 3.957 6.272 6.272 0 01-7.306-.933 6.575 6.575 0 01-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 010 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z"></path>
110+
</svg>
111+
);
112+
};
113+
114+
export const IconGit = () => {
115+
return (
116+
<svg
117+
stroke="currentColor"
118+
fill="currentColor"
119+
strokeWidth="0"
120+
viewBox="0 0 16 16"
121+
height="1em"
122+
width="1em"
123+
xmlns="http://www.w3.org/2000/svg"
124+
>
125+
<path d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457"></path>
126+
</svg>
127+
);
128+
};
129+
130+
export const IconNodeJS = () => {
131+
return (
132+
<svg
133+
stroke="currentColor"
134+
fill="currentColor"
135+
strokeWidth="0"
136+
viewBox="0 0 448 512"
137+
height="1em"
138+
width="1em"
139+
xmlns="http://www.w3.org/2000/svg"
140+
>
141+
<path d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"></path>
142+
</svg>
143+
);
144+
};
145+
146+
export const IconPHP = () => {
147+
return (
148+
<svg
149+
stroke="currentColor"
150+
fill="currentColor"
151+
strokeWidth="0"
152+
viewBox="0 0 640 512"
153+
height="1em"
154+
width="1em"
155+
xmlns="http://www.w3.org/2000/svg"
156+
>
157+
<path d="M320 104.5c171.4 0 303.2 72.2 303.2 151.5S491.3 407.5 320 407.5c-171.4 0-303.2-72.2-303.2-151.5S148.7 104.5 320 104.5m0-16.8C143.3 87.7 0 163 0 256s143.3 168.3 320 168.3S640 349 640 256 496.7 87.7 320 87.7zM218.2 242.5c-7.9 40.5-35.8 36.3-70.1 36.3l13.7-70.6c38 0 63.8-4.1 56.4 34.3zM97.4 350.3h36.7l8.7-44.8c41.1 0 66.6 3 90.2-19.1 26.1-24 32.9-66.7 14.3-88.1-9.7-11.2-25.3-16.7-46.5-16.7h-70.7L97.4 350.3zm185.7-213.6h36.5l-8.7 44.8c31.5 0 60.7-2.3 74.8 10.7 14.8 13.6 7.7 31-8.3 113.1h-37c15.4-79.4 18.3-86 12.7-92-5.4-5.8-17.7-4.6-47.4-4.6l-18.8 96.6h-36.5l32.7-168.6zM505 242.5c-8 41.1-36.7 36.3-70.1 36.3l13.7-70.6c38.2 0 63.8-4.1 56.4 34.3zM384.2 350.3H421l8.7-44.8c43.2 0 67.1 2.5 90.2-19.1 26.1-24 32.9-66.7 14.3-88.1-9.7-11.2-25.3-16.7-46.5-16.7H417l-32.8 168.7z"></path>
158+
</svg>
159+
);
160+
};
161+
162+
export const IconVue = () => {
163+
return (
164+
<svg
165+
stroke="currentColor"
166+
fill="currentColor"
167+
strokeWidth="0"
168+
viewBox="0 0 448 512"
169+
height="1em"
170+
width="1em"
171+
xmlns="http://www.w3.org/2000/svg"
172+
>
173+
<path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z"></path>
174+
</svg>
175+
);
176+
};
177+
178+
export const IconWordpress = () => {
179+
return (
180+
<svg
181+
stroke="currentColor"
182+
fill="currentColor"
183+
strokeWidth="0"
184+
viewBox="0 0 512 512"
185+
height="1em"
186+
width="1em"
187+
xmlns="http://www.w3.org/2000/svg"
188+
>
189+
<path d="M61.7 169.4l101.5 278C92.2 413 43.3 340.2 43.3 256c0-30.9 6.6-60.1 18.4-86.6zm337.9 75.9c0-26.3-9.4-44.5-17.5-58.7-10.8-17.5-20.9-32.4-20.9-49.9 0-19.6 14.8-37.8 35.7-37.8.9 0 1.8.1 2.8.2-37.9-34.7-88.3-55.9-143.7-55.9-74.3 0-139.7 38.1-177.8 95.9 5 .2 9.7.3 13.7.3 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l77.5 230.4L249.8 247l-33.1-90.8c-11.5-.7-22.3-2-22.3-2-11.5-.7-10.1-18.2 1.3-17.5 0 0 35.1 2.7 56 2.7 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l76.9 228.7 21.2-70.9c9-29.4 16-50.5 16-68.7zm-139.9 29.3l-63.8 185.5c19.1 5.6 39.2 8.7 60.1 8.7 24.8 0 48.5-4.3 70.6-12.1-.6-.9-1.1-1.9-1.5-2.9l-65.4-179.2zm183-120.7c.9 6.8 1.4 14 1.4 21.9 0 21.6-4 45.8-16.2 76.2l-65 187.9C426.2 403 468.7 334.5 468.7 256c0-37-9.4-71.8-26-102.1zM504 256c0 136.8-111.3 248-248 248C119.2 504 8 392.7 8 256 8 119.2 119.2 8 256 8c136.7 0 248 111.2 248 248zm-11.4 0c0-130.5-106.2-236.6-236.6-236.6C125.5 19.4 19.4 125.5 19.4 256S125.6 492.6 256 492.6c130.5 0 236.6-106.1 236.6-236.6z"></path>
190+
</svg>
191+
);
192+
};
193+
194+
export const IconNextjs = () => {
195+
return (
196+
<svg
197+
stroke="currentColor"
198+
fill="none"
199+
strokeWidth="2"
200+
viewBox="0 0 24 24"
201+
strokeLinecap="round"
202+
strokeLinejoin="round"
203+
height="1em"
204+
width="1em"
205+
xmlns="http://www.w3.org/2000/svg"
206+
>
207+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
208+
<path d="M9 15v-6l7.745 10.65a9 9 0 1 1 2.255 -1.993"></path>
209+
<path d="M15 12v-3"></path>
210+
</svg>
211+
);
212+
};
213+
214+
export const IconTailwindCss = () => {
215+
return (
216+
<svg
217+
stroke="currentColor"
218+
fill="currentColor"
219+
strokeWidth="0"
220+
role="img"
221+
viewBox="0 0 24 24"
222+
height="1em"
223+
width="1em"
224+
xmlns="http://www.w3.org/2000/svg"
225+
>
226+
<title></title>
227+
<path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"></path>
228+
</svg>
229+
);
230+
};
231+
232+
export const IconTypescript = () => {
233+
return (
234+
<svg
235+
stroke="currentColor"
236+
fill="none"
237+
strokeWidth="2"
238+
viewBox="0 0 24 24"
239+
strokeLinecap="round"
240+
strokeLinejoin="round"
241+
height="1em"
242+
width="1em"
243+
xmlns="http://www.w3.org/2000/svg"
244+
>
245+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
246+
<path d="M15 17.5c.32 .32 .754 .5 1.207 .5h.543c.69 0 1.25 -.56 1.25 -1.25v-.25a1.5 1.5 0 0 0 -1.5 -1.5a1.5 1.5 0 0 1 -1.5 -1.5v-.25c0 -.69 .56 -1.25 1.25 -1.25h.543c.453 0 .887 .18 1.207 .5"></path>
247+
<path d="M9 12h4"></path>
248+
<path d="M11 12v6"></path>
249+
<path d="M21 19v-14a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2z"></path>
250+
</svg>
251+
);
252+
};
253+
254+
export const IconJavascript = () => {
255+
return (
256+
<svg
257+
stroke="currentColor"
258+
fill="currentColor"
259+
strokeWidth="0"
260+
version="1.1"
261+
viewBox="0 0 32 32"
262+
height="1em"
263+
width="1em"
264+
xmlns="http://www.w3.org/2000/svg"
265+
>
266+
<path d="M9.633 7.968h3.751v10.514c0 4.738-2.271 6.392-5.899 6.392-0.888 0-2.024-0.148-2.764-0.395l0.42-3.036c0.518 0.173 1.185 0.296 1.925 0.296 1.58 0 2.567-0.716 2.567-3.282v-10.489zM16.641 20.753c0.987 0.518 2.567 1.037 4.171 1.037 1.728 0 2.641-0.716 2.641-1.826 0-1.012-0.79-1.629-2.789-2.32-2.764-0.987-4.59-2.517-4.59-4.961 0-2.838 2.394-4.985 6.293-4.985 1.9 0 3.258 0.37 4.245 0.839l-0.839 3.011c-0.642-0.321-1.851-0.79-3.455-0.79-1.629 0-2.419 0.765-2.419 1.604 0 1.061 0.913 1.53 3.085 2.369 2.937 1.086 4.294 2.616 4.294 4.985 0 2.789-2.122 5.158-6.688 5.158-1.9 0-3.776-0.518-4.714-1.037l0.765-3.085z"></path>
267+
</svg>
268+
);
269+
};

‎app/components/skills/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use client';
2+
3+
import useTranslate from '@/hooks/useTranslate';
4+
import skills from '@/data/skills';
5+
import Title from '../title';
6+
7+
const SkillSection = () => {
8+
const { translate } = useTranslate();
9+
10+
return (
11+
<section id="skills">
12+
<Title className="my-5" text={translate('skills')} />
13+
<div className="w-full grid grid-cols-3 lg:grid-cols-4 gap-4">
14+
{skills &&
15+
skills.map((skill, index) => {
16+
const Icon = skill.icon;
17+
return (
18+
<div
19+
className="bg-gray-200 rounded-lg dark:bg-neutral-800 flex flex-col justify-center gap-2 w-full items-center py-3"
20+
key={index}
21+
>
22+
<i className="text-2xl">
23+
<Icon />
24+
</i>
25+
<span className="text-sm">{skill.name}</span>
26+
</div>
27+
);
28+
})}
29+
</div>
30+
</section>
31+
);
32+
};
33+
34+
export default SkillSection;

‎app/components/title.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
3+
const Title = ({ className, text }) => {
4+
if (!text) {
5+
return null;
6+
}
7+
8+
return (
9+
<div
10+
className={`title font-bold text-2xl text-black dark:text-white ${className}`}
11+
>
12+
{text}
13+
</div>
14+
);
15+
};
16+
17+
export default Title;

‎app/page.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Header from './components/header';
44
import Sidebar from './components/sidebar';
55
import AboutMe from './components/about-me';
66
import Experiences from './components/experiences';
7+
import Skills from './components/skills';
78

89
export default function Home() {
910
return (
@@ -14,6 +15,7 @@ export default function Home() {
1415
<div className="info-content flex flex-col gap-4 py-14">
1516
<AboutMe />
1617
<Experiences />
18+
<Skills />
1719
</div>
1820
</main>
1921
<footer></footer>

‎data/skills.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {
2+
IconReact,
3+
IconLaravel,
4+
IconExpress,
5+
IconGit,
6+
IconNodeJS,
7+
IconPHP,
8+
IconWordpress,
9+
IconVue,
10+
IconNextjs,
11+
IconTailwindCss,
12+
IconTypescript,
13+
IconJavascript
14+
} from '@/app/components/icons';
15+
16+
const skills = [
17+
{
18+
name: 'React',
19+
icon: IconReact
20+
},
21+
{
22+
name: 'JavaScript',
23+
icon: IconJavascript
24+
},
25+
{
26+
name: 'TypeScript',
27+
icon: IconTypescript
28+
},
29+
{
30+
name: 'NodeJs',
31+
icon: IconNodeJS
32+
},
33+
{
34+
name: 'PHP',
35+
icon: IconPHP
36+
},
37+
{
38+
name: 'Laravel',
39+
icon: IconLaravel
40+
},
41+
{
42+
name: 'Wordpress',
43+
icon: IconWordpress
44+
},
45+
{
46+
name: 'TailwindCss',
47+
icon: IconTailwindCss
48+
},
49+
{
50+
name: 'Express',
51+
icon: IconExpress
52+
},
53+
{
54+
name: 'Git',
55+
icon: IconGit
56+
},
57+
{
58+
name: 'NextJs',
59+
icon: IconNextjs
60+
},
61+
{
62+
name: 'Vue.js',
63+
icon: IconVue
64+
}
65+
];
66+
67+
export default skills;

0 commit comments

Comments
 (0)