Personal Portfolio

Personal Portfolio

This portfolio brings together my projects and profile in a bilingual Next.js application. It includes internationalization, dark mode, animated UI, dynamic navigation, project pages, responsive sections, and structured content that presents my work across frontend, backend, desktop, and full-stack projects.

Implemented technologies

  • NEXTJS
  • REACT
  • JAVASCRIPT

Process and challenges

  1. As a first step I set out to make a header that stays on top all the time and, in turn, shows the different sections dynamically (using the interception observer)

  2. I had to implement a couple of things in other projects, and this was the perfect opportunity: dark theme and language support. For the first one, I used a methodology known as React Context, where I would change the variables main ones according to preferences (background color and text color). I had never applied (nor did I know about) i18n, I did a little research and found a library that handled it effectively and giving the possibility of saving the information in json files.

  3. Sections (where everything goes). I started to design the different sections, I mainly focused on deciding the content to style it in the future. This is where I faltered the most, I don't think I have provided the best user experience for intuitive navigation.

  4. I had thought of making a page for each project detailing the process, technologies and conclusions. Again I focused on functionality to style it later.

  5. In this step I styled the things I had left to do. Along the way, I learned quite a bit about animations and transitions,

  6. And last but not least, I sat down to write the projects and my main skills to later translate and format them.

  7. The final deployment was that of the portfolio, like the previous front-ends, it was extremely simple thanks to Vercel's capabilities for it.

Technical Decisions

  • IntersectionObserver-based nav

    Built a header that stays fixed and dynamically highlights the active section using the Intersection Observer API.

  • React Context for theming, next-translate for i18n

    Implemented dark/light theme with React Context and added bilingual support via a JSON-based i18n library, both new to me at the time.

Challenges

  • Section UX iteration

    Struggled most with designing an intuitive navigation experience across sections and don't consider the original result fully successful.

Current Status

Active

Conclusion and next steps

I think that the style of some sections can be improved and a better dynamic can be created.