Starting Fresh: Building a Modern Portfolio with Next.js

Starting a new project often brings the temptation to over-engineer from day one. When I sat down to initialize the codebase for my new portfolio project, theolitzler/portfolio, the primary goal wasn't just building a site—it was setting up a robust, scalable foundation that can grow alongside my career.

The Philosophy of Initializing Right

Choosing the right tools for a personal portfolio is a balancing act between developer experience and production performance. By leveraging the modern web stack, I wanted to ensure that the site remained lightning-fast while staying easy to maintain.

Starting with create-next-app provides an immediate industry-standard structure. It allows for seamless integration with platforms like Vercel, meaning zero-configuration deployments and global performance right out of the box.

Establishing the Stack

For this project, I chose a stack that prioritizes type safety and styling efficiency:

• Framework: Next.js (React) for server-side rendering and routing.
• Language: TypeScript to catch runtime errors during development.
• Styling: Tailwind CSS for rapid, maintainable design iterations.
• Testing: Playwright to ensure cross-browser stability as the project grows.

Here is how the initial project structure looks, keeping the Repository Pattern in mind to keep data fetching separate from UI components:

// Example structure for data fetching
interface ProjectRepository {
  getAllProjects(): Promise<Project[]>;
}

export const getProjects = async (): Promise<Project[]> => {
  // Implementation here
  return [];
};

Why This Matters

By keeping the initial setup clean, we avoid "technical debt by design." Whether it is using Tailwind's utility-first approach to CSS:

/* Tailwind usage example */
.card {
  @apply p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow;
}

or setting up a solid TypeScript foundation, every decision made at commit #1 is about reducing friction for the next developer—which, in a portfolio's case, is usually me six months from now.

Actionable Takeaway

Don't let the "blank canvas" syndrome stall your progress. Start by initializing a standard project template, enforce type safety immediately, and establish a clear separation of concerns (like the repository pattern) before you start building your complex UI components. This ensures your project is ready to scale from day one.

Generated with Gitvlg.com