adding stack section

Santipac · Jul 6, 2024 · 2bc43c4 · 2bc43c4
1 parent 6e454f3
commit 2bc43c4
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 1 deletion.
diff --git a/app/[lang]/resume/page.tsx b/app/[lang]/resume/page.tsx
@@ -12,6 +12,7 @@ import { experience } from '@/constants/experience';
 import { certifications } from '@/constants/certifications';
 import { BorderBeam } from '../components/borderBeam';
 import UdemyIcon from '../assets/svgs/media/udemy-icon';
+import { backend, frontend, stack, tools } from '@/constants/stack';
 
 export default async function ResumePage({ params: { lang } }: LangParams) {
   const t = await getTranslation(lang);
@@ -78,6 +79,46 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
             </section>
           </article>
 
+          {/* Stack */}
+          <article className="flex flex-col lg:flex-row w-full gap-4">
+            <section className="w-full lg:w-1/5">
+              <h2 className="text-xl font-semibold font-sans w-fit">
+                {t.links.stack}
+              </h2>
+            </section>
+            <section className="w-full lg:w-4/5 space-y-4">
+              <p className="text-zinc-300 text-sm font-light leading-7">
+                {t.stack.description}
+              </p>
+              <article className="flex flex-wrap gap-2">
+                {frontend.map(tec => (
+                  <span
+                    key={tec.label}
+                    className="px-2 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm shadow-md"
+                  >
+                    {tec.label}
+                  </span>
+                ))}
+                {backend.map(tec => (
+                  <span
+                    key={tec.label}
+                    className="px-2 py-1 bg-red-500/20 text-red-400 rounded-full text-sm shadow-md"
+                  >
+                    {tec.label}
+                  </span>
+                ))}
+                {tools.map(tec => (
+                  <span
+                    key={tec.label}
+                    className="px-2 py-1 bg-zinc-500/20 text-zinc-400 rounded-full text-sm shadow-md"
+                  >
+                    {tec.label}
+                  </span>
+                ))}
+              </article>
+            </section>
+          </article>
+
           {/* Certifications */}
           <article className="flex flex-col lg:flex-row w-full gap-2">
             <section className="w-full lg:w-1/5">
@@ -119,6 +160,7 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
               ))}
             </section>
           </article>
+
           {/* Experience */}
           <article className="flex flex-col lg:flex-row w-full gap-2">
             <section className="w-full lg:w-1/5">
@@ -135,7 +177,6 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
                     className="rounded object-contain h-11 w-11 mt-1 hidden lg:block"
                   />
                   <section className="relative border border-neutral-800 bg-neutral-900 p-4 flex flex-col rounded-xl w-full gap-3 shadow-md">
-                    {/* <BorderBeam colorFrom="#171717" colorTo="#f4f4f5" /> */}
                     <Image
                       src={exp.logo}
                       alt={`${exp.company} logo`}

diff --git a/constants/stack.ts b/constants/stack.ts
@@ -0,0 +1,39 @@
+
+export const languages = [
+    { label: 'JavaScript', type: 'language' },
+    { label: 'TypeScript', type: 'language' },
+];
+
+export const tools = [
+    { label: 'Figma', type: 'tools' },
+    { label: 'Postman', type: 'tools' },
+    { label: 'DataGrip', type: 'tools' },
+    { label: 'VSCode', type: 'tools' },
+    { label: 'Expo', type: 'tools' },
+];
+
+export const backend = [
+    { label: 'Node', type: 'backend' },
+    { label: 'Express', type: 'backend' },
+    { label: 'Nest', type: 'backend' },
+    { label: 'tRPC', type: 'backend' },
+    { label: 'PrismaORM', type: 'backend' },
+    { label: 'AWS', type: 'backend' },
+    { label: 'JsonWebToken', type: 'backend' },
+    { label: 'Docker', type: 'backend' },
+];
+
+export const frontend = [
+    { label: 'React', type: 'frontend' },
+    { label: 'React Native', type: 'frontend' },
+    { label: 'Next', type: 'frontend' },
+    { label: 'Astro', type: 'frontend' },
+    { label: 'Redux', type: 'frontend' },
+    { label: 'Zustand', type: 'frontend' },
+    { label: 'React Query', type: 'frontend' },
+    { label: 'Material UI', type: 'frontend' },
+    { label: 'Chraka UI', type: 'frontend' },
+    { label: 'TailwindCSS', type: 'frontend' },
+];
+
+export const stack = [...tools, ...frontend, ...backend, ...languages];
diff --git a/translations/en.json b/translations/en.json
@@ -18,6 +18,9 @@
     "firstParagraph": "I'm a frontend developer with +2 years of experience helping different companies achieve their goals through the building or improvement of applications/websites. I've extensive knowledge of the React ecosystem on the client side.",
     "secondParagraph": "I can also create highly scalable and robust backend applications using technologies like NodeJS or NestJS."
   },
+  "stack": {
+    "description": "Some of the technologies or tools I work with on a daily basis."
+  },
   "experience": {
     "title": "Experience",
     "button": "Visit Website"

diff --git a/translations/es.json b/translations/es.json
@@ -18,6 +18,9 @@
     "firstParagraph": "Soy un desarrollador frontend con +2 años de experiencia dedicados ayudando a empresas a lograr sus objetivos a través de la construcción o mejora de aplicaciones / sitios webs. Tengo un amplio conocimiento en el ecosistema de React en el lado del cliente. ",
     "secondParagraph": "También puedo crear aplicaciones backend altamente escalables y robutas utilizando tecnologías como NodeJS o NestJS."
   },
+  "stack": {
+    "description": "Algunas de las tecnologías o herramientas con las que trabajo diariamente."
+  },
   "experience": {
     "title": "Experiencia",
     "button": "Visitar Web"