Personal Portfolio Website with Next.js

A portfolio usually starts with three or four projects, so beginners often write every project card manually inside the page component. This seems harmless, but it quickly becomes difficult to maintain. When you add more projects, change card layout, update links, or add filtering later, you have to edit repeated JSX in many places.

Problematic approach:

          export default function ProjectsPage() {
            return (
              <section>
                <div className="project-card">
                  <h2>Weather App</h2>
                  <p>React, API, CSS</p>
                  <a href="https://github.com/example/weather">GitHub</a>
                </div>

                <div className="project-card">
                  <h2>Movie Search</h2>
                  <p>Next.js, API, UI</p>
                  <a href="https://github.com/example/movies">GitHub</a>
                </div>
              </section>
            );
          }

This repeats the same structure for every project. If you later add a live demo link, image, category, or featured badge, every card must be edited manually.

Better approach:

          export const projects = [
            {
              title: "Weather App",
              description: "A small weather dashboard using an external API.",
              stack: ["React", "API", "CSS"],
              githubUrl: "https://github.com/example/weather",
              demoUrl: "https://weather.example.com",
              image: "/projects/weather-app.png"
            },
            {
              title: "Movie Search",
              description: "A movie search interface with filters and detail views.",
              stack: ["Next.js", "API", "UI"],
              githubUrl: "https://github.com/example/movies",
              demoUrl: "https://movies.example.com",
              image: "/projects/movie-search.png"
            }
          ];

Reusable component example:

          function ProjectCard({ project }) {
            return (
              <article>
                <h2>{project.title}</h2>
                <p>{project.description}</p>

                <ul>
                  {project.stack.map((technology) => (
                    <li key={technology}>{technology}</li>
                  ))}
                </ul>

                <a href={project.githubUrl} target="_blank" rel="noreferrer">
                  View code
                </a>
              </article>
            );
          }

          export default function ProjectsPage() {
            return (
              <section>
                {projects.map((project) => (
                  <ProjectCard key={project.title} project={project} />
                ))}
              </section>
            );
          }

Pay attention to: Store portfolio content as structured data. Then render it through reusable components. This makes the site easier to update when your portfolio grows.

Next.js provides routing tools for a reason. A common mistake is using normal <a> tags for internal navigation between Home, Projects, About, and Contact pages. The links may still work, but they can trigger full page reloads instead of using Next.js client-side navigation.

Problematic code:

          function Navbar() {
            return (
              <nav>
                <a href="/">Home</a>
                <a href="/projects">Projects</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
              </nav>
            );
          }

This does not use the routing behavior that makes Next.js navigation feel fast and app-like.

Better approach:

          import Link from "next/link";

          const navItems = [
            { label: "Home", href: "/" },
            { label: "Projects", href: "/projects" },
            { label: "About", href: "/about" },
            { label: "Contact", href: "/contact" }
          ];

          function Navbar() {
            return (
              <nav aria-label="Main navigation">
                {navItems.map((item) => (
                  <Link key={item.href} href={item.href}>
                    {item.label}
                  </Link>
                ))}
              </nav>
            );
          }

External links are different:

          <a
            href="https://github.com/yourname"
            target="_blank"
            rel="noreferrer"
          >
            GitHub
          </a>

Pay attention to: Use next/link for internal routes and regular anchor tags for external links. This keeps navigation fast, semantic, and predictable.

Portfolio sites rely heavily on screenshots. Large unoptimized images can make an otherwise simple Next.js site feel slow. Beginners often export screenshots at huge sizes, place them directly in the page, and render them with ordinary <img> tags. This can hurt loading speed and make the first impression weaker.

Problematic approach:

          function ProjectPreview() {
            return (
              <img
                src="/projects/dashboard-full-size.png"
                alt="Dashboard project"
              />
            );
          }

This image may be too large, may shift layout while loading, and does not take advantage of Next.js image tooling.

Better approach:

          import Image from "next/image";

          function ProjectPreview() {
            return (
              <Image
                src="/projects/dashboard-preview.png"
                alt="Screenshot of analytics dashboard project"
                width={960}
                height={540}
                priority={false}
              />
            );
          }

Image data example:

          export const projects = [
            {
              title: "Analytics Dashboard",
              image: {
                src: "/projects/analytics-dashboard.png",
                alt: "Analytics dashboard with charts and summary cards",
                width: 960,
                height: 540
              }
            }
          ];

Rendering from data:

          <Image
            src={project.image.src}
            alt={project.image.alt}
            width={project.image.width}
            height={project.image.height}
          />

Pay attention to: Use compressed images, meaningful alt text, and explicit dimensions. Portfolio screenshots should support your work, not slow the page down.

A portfolio is meant to be shared with recruiters, clients, and other developers. If every page has the same generic title or no description, shared links look unfinished. Next.js gives you tools for metadata, but beginners often focus only on the visual page and forget the document-level information.

Problematic result:

          <title>Create Next App</title>

This tells visitors nothing about you, your role, or the purpose of the page.

Better approach in the App Router:

          export const metadata = {
            title: "Katerina Pidan | Frontend Developer Portfolio",
            description:
              "Frontend developer portfolio with Next.js projects, UI work, and contact information.",
            openGraph: {
              title: "Katerina Pidan | Frontend Developer Portfolio",
              description:
                "Explore frontend projects, skills, and contact information.",
              type: "website",
              images: [
                {
                  url: "/og-image.png",
                  width: 1200,
                  height: 630,
                  alt: "Frontend developer portfolio preview"
                }
              ]
            }
          };

Page-specific metadata example:

          export const metadata = {
            title: "Projects | Frontend Developer Portfolio",
            description:
              "Selected frontend projects built with React, Next.js, APIs, and responsive UI patterns."
          };

Pay attention to: Add clear titles and descriptions for important pages. Your portfolio is not only a website; it is also a link people will preview in messages, emails, and social platforms.

Portfolio websites are often viewed on phones first: from LinkedIn, Telegram, email, or a recruiter’s mobile browser. A common mistake is designing a large desktop hero section and project grid first, then trying to patch mobile layout with random overrides. This usually creates cramped text, broken navigation, and project cards that are difficult to scan.

Problematic layout:

          .hero {
            width: 1200px;
            display: flex;
            gap: 80px;
          }

          .projects {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
          }

Fixed widths and desktop-first grids can break on smaller screens.

Better responsive structure:

          .hero {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 32px 16px;
            display: grid;
            gap: 32px;
          }

          @media (min-width: 768px) {
            .hero {
              grid-template-columns: 1fr 1fr;
              padding: 64px 24px;
            }
          }

          .projects {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
          }

          @media (min-width: 768px) {
            .projects {
              grid-template-columns: repeat(2, 1fr);
            }
          }

          @media (min-width: 1024px) {
            .projects {
              grid-template-columns: repeat(3, 1fr);
            }
          }

Chakra UI-style layout idea:

          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
            {projects.map((project) => (
              <ProjectCard key={project.title} project={project} />
            ))}
          </SimpleGrid>

Pay attention to: Build mobile-friendly structure from the beginning. Hero text, navigation, project cards, and contact links should remain readable before you add desktop polish.