Key Portfolio Sections

// components/hero.tsx
export default function Hero() {
  return <section>Hero</section>
}

// app/projects/page.tsx
export default function Projects() {
  return <div>Projects</div>
}

// app/about/page.tsx
export default function About() {
  return <div>About Me</div>
}

// app/contact/page.tsx
export default function Contact() {
  return <form>Contact</form>
}

🔹 Hero Section Component

Create an eye-catching hero section with your name and title. This is the first thing visitors see, making a strong impression with a clear introduction and call-to-action buttons.

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <section className="hero">
        <h1>Hi, I'm John Doe</h1>
        <p>Full Stack Developer & UI/UX Designer</p>
        <p>I build beautiful and functional web applications</p>
        <div>
          <a href="/projects">View My Work</a>
          <a href="/contact">Contact Me</a>
        </div>
      </section>
    </div>
  )
}

🔹 Projects Grid

Display your portfolio projects in an organized grid layout with images and descriptions. Each project card shows key information and links to detailed case studies or live demos.

// app/projects/page.tsx
const projects = [
  {
    id: 1,
    title: 'E-commerce Platform',
    description: 'Full-stack online store with payment integration',
    image: '/project1.jpg',
    tech: ['Next.js', 'Stripe', 'PostgreSQL']
  },
  {
    id: 2,
    title: 'Task Management App',
    description: 'Collaborative project management tool',
    image: '/project2.jpg',
    tech: ['React', 'Node.js', 'MongoDB']
  },
  {
    id: 3,
    title: 'Weather Dashboard',
    description: 'Real-time weather data visualization',
    image: '/project3.jpg',
    tech: ['Next.js', 'API', 'Charts']
  }
]

export default function ProjectsPage() {
  return (
    <div>
      <h1>My Projects</h1>
      <div className="projects-grid">
        {projects.map(project => (
          <div key={project.id} className="project-card">
            <img src={project.image} alt={project.title} />
            <h3>{project.title}</h3>
            <p>{project.description}</p>
            <div>
              {project.tech.map(t => (
                <span key={t}>{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

🔹 About Page

Share your background, skills, and experience on a dedicated about page. This section helps visitors understand your expertise and what makes you unique as a professional.

// app/about/page.tsx
export default function AboutPage() {
  const skills = ['JavaScript', 'React', 'Next.js', 'Node.js', 'CSS', 'TypeScript']
  
  return (
    <div>
      <h1>About Me</h1>
      <p>
        I'm a passionate web developer with 5 years of experience 
        building modern web applications. I love creating beautiful, 
        user-friendly interfaces and solving complex problems.
      </p>
      
      <h2>Skills</h2>
      <div>
        {skills.map(skill => (
          <span key={skill}>{skill}</span>
        ))}
      </div>
      
      <h2>Experience</h2>
      <ul>
        <li>Senior Developer at Tech Corp (2022-Present)</li>
        <li>Full Stack Developer at StartupXYZ (2020-2022)</li>
        <li>Junior Developer at WebAgency (2019-2020)</li>
      </ul>
    </div>
  )
}

🔹 Contact Form

Add a contact form for visitors to reach out to you easily. This form collects messages and sends them via email or stores them in a database for follow-up.

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server'
    const name = formData.get('name')
    const email = formData.get('email')
    const message = formData.get('message')
    
    console.log('Contact form:', { name, email, message })
  }

  return (
    <div>
      <h1>Get In Touch</h1>
      <p>Have a project in mind? Let's work together!</p>
      
      <form action={handleSubmit}>
        <input 
          type="text" 
          name="name" 
          placeholder="Your Name" 
          required 
        />
        <input 
          type="email" 
          name="email" 
          placeholder="Your Email" 
          required 
        />
        <textarea 
          name="message" 
          placeholder="Your Message" 
          rows={5} 
          required
        ></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  )
}

🔹 Navigation Component

Create a reusable navigation bar for consistent site-wide navigation. This component appears on all pages providing easy access to main sections of your portfolio.

// components/navbar.tsx
export default function Navbar() {
  return (
    <nav>
      <a href="/">John Doe</a>
      <div>
        <a href="/">Home</a>
        <a href="/projects">Projects</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </div>
    </nav>
  )
}