Nelson Mello - Main Site

A Portfolio to Connect and Inspire

This is my personal website, designed to showcase my journey as a software engineer, present my projects, and share insights through the blog. Every detail has been thoughtfully crafted to reflect my development style and attention to detail, with a modern, intuitive, and responsive interface.

Key Features

• Projects Section: Developed using Astro’s static blog system, it displays projects with detailed descriptions and direct links to demos or GitHub repositories.
• Blog: Managed through Storyblok CMS, allowing me to efficiently publish technical articles and reflections.
• Contact Forms: Validated with Zod and sent via email using Nodemailer, integrated into a custom API route on the site.
• Smooth Animations: Created with Framer Motion, adding a layer of interactivity and dynamism to the user experience.

Technologies Used

• Framework: Astro.build with React.js support for dynamic, reusable components.
• Styling: TailwindCSS combined with Shadcn UI for a modern and consistent design.
• Validation: Zod for robust and secure form validation.
• CMS: Storyblok for managing the blog content, offering flexibility and efficiency.
• Hosting: Vercel, ensuring fast response times and high availability.
• Animations: Framer Motion for smooth transitions and engaging experiences.

Challenges and Solutions

1. Integrating Modern Tools
   One of the challenges was integrating multiple modern tools like the Storyblok CMS and Framer Motion into a single workflow. I solved this by using Astro’s modularity and its excellent compatibility with React.js.

2. Dynamic and Secure Contact Forms
   I created an API system on the site to send form data via email using Nodemailer, keeping the back-end secure and simple.

3. Static Blog with Flexibility
   I used Astro’s static blog system for the project section and Storyblok CMS for the main blog, allowing each part of the site to have the most efficient approach.

Results

• Fast and Dynamic Experience: The site loads quickly thanks to Astro and hosting on Vercel.
• Improved Interactivity: Animations with Framer Motion ensure a unique and immersive browsing experience.
• Easy Content Updates: Content management through Storyblok makes publishing new blog articles simple.

Lessons Learned

This project was an amazing opportunity to deepen my skills in Astro and modern tools like Zod, Framer Motion, and Storyblok. It also highlighted the importance of combining an appealing design with a smooth user experience, reinforcing my commitment to creating solutions that inspire trust and creativity.