Skip to content

Commit 2ecbdab

Browse files
pintoderianpintoderian
committed
Multilanguage page
1 parent ad1e5d2 commit 2ecbdab

File tree

14 files changed

+282
-246
lines changed

14 files changed

+282
-246
lines changed

‎app/components/about-me.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use client';
2+
3+
import useTranslate from '@/hooks/useTranslate';
4+
5+
const AboutMe = () => {
6+
const { translate } = useTranslate();
7+
const data = translate('aboutme');
8+
9+
return (
10+
<section
11+
id="about"
12+
className="description prose prose-neutral dark:prose-invert"
13+
>
14+
<div className="title font-bold text-2xl text-black dark:text-white">
15+
{translate('about')}
16+
</div>
17+
{data &&
18+
data.map((line, index) => {
19+
return <p key={index}>{line}</p>;
20+
})}
21+
</section>
22+
);
23+
};
24+
25+
export default AboutMe;

‎app/components/experiences.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use client';
2+
3+
import Image from 'next/image';
4+
5+
const Experiences = () => {
6+
return (
7+
<section id="experience">
8+
<div className="title font-bold text-2xl text-black dark:text-white my-5">
9+
Demo
10+
</div>
11+
<div className="flex flex-col gap-4">
12+
<div className="flex flex-row gap-4">
13+
<Image
14+
className="w-10 h-10"
15+
src="https://media.licdn.com/dms/image/C4E0BAQF9sb4qBxMzRQ/company-logo_100_100-alternative/0/1630642344776/diario_el_universo_logo?e=1701302400&v=beta&t=feNsogSkDkHA1Mp6UcwwAa5FtGjS9gAYuyArEM6fUOo"
16+
alt="demo"
17+
width={48}
18+
height={48}
19+
/>
20+
<div className="flex flex-col gap-2">
21+
<span>otc. 2020 - sep-2020</span>
22+
<p>
23+
Desarrollo de componentes en React con ARC PUBLISHING para
24+
eluniverso.com Creación de micrositios con Next.js y tailwindcss
25+
Adaptación de componentes con tailwindcss para mejorar la
26+
experiencia de usuario Implementación de metodología SCRUM para el
27+
despliegue de tareas Configuración y mantenimiento de servidores
28+
utilizando Nginx Migración de sitios web a Digital Ocean para
29+
mejorar la escalabilidad y eficiencia Integración de DoubleClick
30+
for Publishers (DFP) con Piano y mantenimiento de módulos
31+
publicitarios Desarrollo de APIs con Express, Typescript, Jest,
32+
Husky y Prettier Implementación de Directus Headles CMS para
33+
optimizar los procesos empresariales de la compañía
34+
</p>
35+
<div className="flex flex-row gap-2">
36+
<a className="aptitude" href="#">
37+
Demo
38+
</a>
39+
<a className="aptitude" href="#">
40+
Demo
41+
</a>
42+
<a className="aptitude" href="#">
43+
Demo
44+
</a>
45+
</div>
46+
</div>
47+
</div>
48+
<div className="flex flex-row gap-4">
49+
<Image
50+
className="w-10 h-10"
51+
src="https://media.licdn.com/dms/image/C4E0BAQF9sb4qBxMzRQ/company-logo_100_100-alternative/0/1630642344776/diario_el_universo_logo?e=1701302400&v=beta&t=feNsogSkDkHA1Mp6UcwwAa5FtGjS9gAYuyArEM6fUOo"
52+
alt="demo"
53+
width={48}
54+
height={48}
55+
/>
56+
<div className="flex flex-col gap-2">
57+
<span>otc. 2020 - sep-2020</span>
58+
<p>
59+
Desarrollo de componentes en React con ARC PUBLISHING para
60+
eluniverso.com Creación de micrositios con Next.js y tailwindcss
61+
Adaptación de componentes con tailwindcss para mejorar la
62+
experiencia de usuario Implementación de metodología SCRUM para el
63+
despliegue de tareas Configuración y mantenimiento de servidores
64+
utilizando Nginx Migración de sitios web a Digital Ocean para
65+
mejorar la escalabilidad y eficiencia Integración de DoubleClick
66+
for Publishers (DFP) con Piano y mantenimiento de módulos
67+
publicitarios Desarrollo de APIs con Express, Typescript, Jest,
68+
Husky y Prettier Implementación de Directus Headles CMS para
69+
optimizar los procesos empresariales de la compañía
70+
</p>
71+
<div className="flex flex-row gap-2">
72+
<a className="aptitude" href="#">
73+
Demo
74+
</a>
75+
<a className="aptitude" href="#">
76+
Demo
77+
</a>
78+
<a className="aptitude" href="#">
79+
Demo
80+
</a>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</section>
86+
);
87+
};
88+
89+
export default Experiences;

‎app/components/header/_children/btn-language.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useLanguageStore } from '@/store/language';
2-
import dataES from '@/data/es/data';
3-
import dataEN from '@/data/en/data';
2+
import dataES from '@/data/languages/es';
3+
import dataEN from '@/data/languages/en';
44

55
const BtnLanguage = () => {
66
const { language, setLanguage, setData } = useLanguageStore();
@@ -10,7 +10,14 @@ const BtnLanguage = () => {
1010
setData(language === 'ES' ? dataES : dataEN);
1111
};
1212

13-
return <button onClick={handleLanguage}>{language}</button>;
13+
return (
14+
<button
15+
className="bg-gray-200 rounded-lg dark:bg-neutral-800 text-sm px-1.5 py-1.5 hover:ring-2 ring-gray-300 transition-all"
16+
onClick={handleLanguage}
17+
>
18+
{language}
19+
</button>
20+
);
1421
};
1522

1623
export default BtnLanguage;

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client';
2+
3+
import useTranslate from '@/hooks/useTranslate';
4+
import Link from 'next/link';
5+
6+
const Menu = ({ className = 'flex-col md:flex-row' }) => {
7+
const { translate } = useTranslate();
8+
9+
return (
10+
<ul className={`flex gap-4 ${className}`}>
11+
<li className="font-semibold text-neutral-800 dark:text-white">
12+
<Link href="#about">{translate('about')}</Link>
13+
</li>
14+
<li className="font-normal text-neutral-600 dark:text-neutral-500">
15+
<Link href="#experience">{translate('experience')}</Link>
16+
</li>
17+
<li className="font-normal text-neutral-600 dark:text-neutral-500">
18+
<Link href="#proyects">{translate('proyects')}</Link>
19+
</li>
20+
<li className="font-normal text-neutral-600 dark:text-neutral-500">
21+
<Link href="#skills">{translate('skills')}</Link>
22+
</li>
23+
</ul>
24+
);
25+
};
26+
27+
export default Menu;

‎app/components/header/index.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
'use client';
22

3-
import Link from 'next/link';
43
import BtnLanguage from './_children/btn-language';
54
import BtnTheme from './_children/btn-theme';
6-
import useTranslate from '@/hooks/useTranslate';
5+
import Menu from './_children/menu';
76

87
const Header = () => {
9-
const { translate } = useTranslate();
108
return (
119
<header className="flex items-center justify-between flex-row w-full py-4 border-b border-neutral-100 dark:border-neutral-800">
1210
<nav className="w-8/12">
13-
<ul className="flex flex-row gap-4">
14-
<li className="font-semibold text-neutral-800 dark:text-white">
15-
<Link href="#about">{translate('about')}</Link>
16-
</li>
17-
<li className="font-normal text-neutral-600 dark:text-neutral-500">
18-
{translate('experience')}
19-
</li>
20-
<li className="font-normal text-neutral-600 dark:text-neutral-500">
21-
{translate('proyects')}
22-
</li>
23-
<li className="font-normal text-neutral-600 dark:text-neutral-500">
24-
{translate('skills')}
25-
</li>
26-
</ul>
11+
<Menu />
2712
</nav>
2813
<div className="btn-actions flex flex-row justify-end gap-4 w-4/12">
2914
<BtnLanguage />

‎app/components/icons/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,23 @@ export const IconLight = () => {
4141
</svg>
4242
);
4343
};
44+
45+
export const IconMenu = ({ size = 25 }) => {
46+
return (
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
width={size}
50+
height={size}
51+
viewBox="0 0 24 24"
52+
fill="none"
53+
stroke="currentColor"
54+
strokeWidth="1.7"
55+
strokeLinecap="round"
56+
strokeLinejoin="round"
57+
>
58+
<line x1="4" y1="12" x2="20" y2="12"></line>
59+
<line x1="4" y1="6" x2="20" y2="6"></line>
60+
<line x1="4" y1="18" x2="20" y2="18"></line>
61+
</svg>
62+
);
63+
};

‎app/components/sidebar.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client';
2+
3+
import useScroll from '@/hooks/useScroll';
4+
import useTranslate from '@/hooks/useTranslate';
5+
import { useEffect, useState } from 'react';
6+
import Menu from './header/_children/menu';
7+
import { IconMenu } from './icons';
8+
9+
const Sidebar = () => {
10+
const [openMenu, setOpenMenu] = useState(false);
11+
const { isScroll } = useScroll();
12+
const { translate } = useTranslate();
13+
const classScroll = isScroll ? 'lg:pt-5' : '';
14+
15+
useEffect(() => {
16+
if (!isScroll) {
17+
setOpenMenu(false);
18+
}
19+
}, [isScroll]);
20+
21+
return (
22+
<aside className="relative overflow-visible h-full">
23+
<div
24+
id="side-content"
25+
className={`sticky block top-0 transition-all ${classScroll}`}
26+
>
27+
{isScroll && (
28+
<div className="menu-scroll relative hidden lg:block">
29+
<button
30+
className="bg-gray-200 rounded-lg dark:bg-neutral-800 text-sm px-1.5 py-1.5 hover:ring-2 ring-gray-300 transition-all"
31+
onClick={() => setOpenMenu(!openMenu)}
32+
>
33+
<IconMenu />
34+
</button>
35+
{openMenu && (
36+
<div className="absolute top-14 bg-gray-200 dark:bg-neutral-800 p-4 rounded-lg">
37+
<Menu className="flex-col" />
38+
</div>
39+
)}
40+
</div>
41+
)}
42+
<div className="py-14 flex flex-col">
43+
<h1 className="font-bold text-3xl md:text-5xl mb-1 text-black dark:text-white lg:ml-[-2px]">
44+
Derian Pinto
45+
</h1>
46+
<h2 className="text-neutral-700 dark:text-neutral-400 font-semibold mb-4">
47+
{translate('badge')}
48+
</h2>
49+
<p className="prose prose-neutral dark:prose-invert">
50+
{translate('resume')}
51+
</p>
52+
</div>
53+
</div>
54+
</aside>
55+
);
56+
};
57+
58+
export default Sidebar;

‎app/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
html {
6+
scroll-behavior: smooth;
7+
}

0 commit comments

Comments
 (0)