Hello World: Building a Modern Developer Portfolio

Welcome to my blog! This is my first post where I'll share the journey of building this portfolio and blog from scratch. If you're a developer looking to create your own site, this might give you some useful insights.

Why Build a Custom Portfolio?

There are plenty of template options out there, but I wanted something that truly represents my style and technical capabilities. A custom portfolio allows me to:

• Showcase my design sensibilities
• Demonstrate my technical skills in action
• Have complete control over performance optimizations
• Create a platform for sharing my thoughts and learnings

"The best way to learn is by doing. Building your own portfolio teaches you more than any tutorial ever could."

Tech Stack Overview

Here's what powers this site:

Frontend Framework

I chose Next.js 15 for its excellent developer experience and built-in optimizations. The App Router provides a clean way to organize routes and leverage React Server Components.

Styling

Tailwind CSS 4 makes it incredibly fast to build responsive, beautiful interfaces. Combined with custom CSS variables for theming, it provides both flexibility and consistency.

Content Management

For the blog, I went with a file-based approach using MDX. This gives me:

1. Full control over my content
2. The ability to use React components in posts
3. Version control through Git
4. No external dependencies or databases

Code Example

Here's a simple example of how the blog utility fetches posts:

export function getAllPosts(): PostMeta[] {
  const fileNames = fs.readdirSync(postsDirectory);
 
  return fileNames
    .filter((fileName) => fileName.endsWith('.mdx'))
    .map((fileName) => {
      const slug = fileName.replace(/\.mdx$/, '');
      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = fs.readFileSync(fullPath, 'utf8');
      const { data, content } = matter(fileContents);
 
      return {
        slug,
        frontmatter: data as PostFrontmatter,
        readingTime: readingTime(content).text,
      };
    })
    .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
}

The function reads all MDX files from the content directory, parses their frontmatter, and returns them sorted by date.

Performance Considerations

Performance was a key priority. Here are some techniques I employed:

Key Metrics

The site achieves excellent Core Web Vitals scores:

• LCP: Under 1.5s
• FID: Under 100ms
• CLS: Near zero

What's Next?

I have several features planned for the future:

• Dark mode toggle
• RSS feed for blog posts
• Search functionality
• Comment system
• Newsletter integration

Conclusion

Building a portfolio from scratch is a rewarding experience. It's a chance to experiment with new technologies, showcase your skills, and create something uniquely yours.

If you have any questions or want to discuss the implementation details, feel free to reach out. I'm always happy to chat about web development!

Thanks for reading, and stay tuned for more posts!