tiagobasilio.com — Next.js & Astro Blog & Portfolio
How Tedbin designed and developed a modern blog with Next.js, Astro, React, Tailwind CSS, optimized hosting, and SEO foundations for a personal developer portfolio.
View site
Project Overview
tiagobasilio.com is a personal blog and developer portfolio built from the ground up using modern web technologies. The project aimed to create a fast, visually appealing, and SEO-optimized platform for publishing technical articles, sharing project experiences, and showcasing professional work. Starting from a blank canvas, Tedbin handled everything from architecture decisions and content structure to hosting setup and performance optimization, delivering a complete solution ready for content creation.
Design & User Experience
The design philosophy centered on clean readability and effortless navigation. We created a minimalist layout that puts content first, with thoughtful typography choices, generous whitespace, and a carefully curated color palette that works in both light and dark modes. The responsive design ensures an optimal reading experience across all devices — from wide desktop monitors to mobile phones. Navigation was simplified to essential paths: home, blog posts, and project showcases, with smooth transitions and subtle animations that enhance without distracting.
Technical Implementation
Built with Next.js, Astro, and React, the blog leverages server-side rendering and static site generation for fast initial page loads and excellent SEO performance. Tailwind CSS provides a utility-first styling approach that keeps the design consistent and maintainable. The content architecture supports markdown-based blog posts with syntax highlighting for code examples, image optimization, and automatic table of contents generation. Astro's island architecture complements Next.js by shipping minimal JavaScript to the client, achieving sub-second page load times across the entire site.
Hosting & Infrastructure
Tedbin set up and manages the complete hosting infrastructure for the blog. This includes server provisioning, SSL certificate configuration and automatic renewal, DNS management, and continuous monitoring with automated alerts. Regular backups ensure data safety, while the deployment pipeline enables quick content updates and feature additions. The hosting environment is optimized for Next.js applications, with edge caching and CDN distribution for global performance.
SEO & Performance Results
The blog was built with SEO as a foundational concern, not an afterthought. Every page includes optimized meta tags, Open Graph data for social sharing, structured data markup, and semantic HTML. The site achieves consistently high Lighthouse scores across all categories — performance, accessibility, best practices, and SEO. Core Web Vitals are well within Google's recommended thresholds, with Largest Contentful Paint under 1.5 seconds and Cumulative Layout Shift near zero. The clean URL structure and sitemap implementation support efficient crawling and indexing by search engines.
