Work
When Wireframes Meet Code
Before my focus on UX/UI design, I explored front-end development and designed my portfolio site using React
My tech journey began a long time ago. At 16, I landed my first job as an intern programmer in São Paulo. Despite enjoying coding, when choosing what to do at university, I was drawn to a completely different path: publishing. The allure of working with text and art led me to graduate in this field and build a successful career as a book editor.
Years later, after moving to Berlin with my partner and two cats, I felt drawn back to tech. In 2018, I joined a coding boot camp and rediscovered the fun of building digital things. By the end of the boot camp, I started a portfolio project.
My goal was to create something simple yet easy on the eyes. Avoiding ready-made templates, I let my own ideas guide the design and development process.
Development Process
1.
Planning and Design: I began by sketching wireframes and creating a basic design concept using Sketch, a tool I had recently started using. My background in graphic design helped me focus on a clean, user-friendly layout to showcase my work. I conceived a geometric ribbon-like form for the site's structure to create visual interest and guide the user's journey through the content.
2.
Technology Selection: I chose React for its component-based architecture and Gatsby for its performance and SEO benefits. I also incorporated Styled Components for more maintainable and dynamic CSS-in-JS styling. This combination allowed me to create a fast, modern website while learning industry-standard tools.
3.
Implementation:
Built reusable React components for consistent design and maintenance
Leveraged Gatsby's features for optimized performance and SEO
Implemented the ribbon-like structure using CSS and SVG, ensuring responsiveness across devices
Created a bilingual [English and German] feature using React Context for language switching
Developed a responsive design for cross-device compatibility
Final Implementation
The portfolio showcases a range of projects, including an e-commerce app built with the MERN stack (MongoDB, Express, React, Node.js) and Ant Design, a book-related application for tracking reading, and an educative Roman numeral calculator that combines algorithmic problem-solving with intuitive UI.
You can see it live here.
Key Outcomes
This project resulted in both tangible outcomes and valuable insights that have shaped my approach to design and development.
Developed a fully functional, responsive portfolio website using React and Gatsby
Created a bilingual site with seamless language switching functionality
Implemented a clean, user-friendly design that effectively showcases projects
Conclusion
This project marked a pivotal point in my journey, blending my interest in code with my passion for design. While my career has since focused on UX/UI design, this experience remains invaluable. It enables me to create more implementable designs and bring a technically-informed perspective to design challenges.
I continue to use and experiment with React, maintaining coding as an enduring passion alongside my design career. This ongoing engagement with development keeps me current with front-end technologies, allows me to prototype ideas efficiently, and bridges the gap between design concepts and technical implementation.
The portfolio project solidified my position at the intersection of design and development – a space where I leverage my diverse background to create holistic, user-centered digital experiences.