ToolsWaves
Landing Page Template

Portfolio Landing Page

A minimal designer/developer portfolio website template with personal intro, project showcase grid, about section, skills tags, and contact CTA. Ideal for freelancers, designers, and creative professionals.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portfolio Landing Page</title>
  <meta name="description" content="A minimal designer/developer portfolio website template with personal intro, project showcase grid, about section, skills tags, and contact CTA. Ideal for freelancers, designers, and creative professionals." />
  <meta name="generator" content="ToolsWaves - https://toolswaves.in/landing-pages" />

  <!-- Open Graph -->
  <meta property="og:title" content="Portfolio Landing Page" />
  <meta property="og:description" content="A minimal designer/developer portfolio website template with personal intro, project showcase grid, about section, skills tags, and contact CTA. Ideal for freelancers, designers, and creative professionals." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://toolswaves.in/og?title=Portfolio%20Landing%20Page&category=Landing%20Page&icon=%F0%9F%93%84" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Portfolio Landing Page" />
  <meta name="twitter:description" content="A minimal designer/developer portfolio website template with personal intro, project showcase grid, about section, skills tags, and contact CTA. Ideal for freelancers, designers, and creative professionals." />
  <meta name="twitter:image" content="https://toolswaves.in/og?title=Portfolio%20Landing%20Page&category=Landing%20Page&icon=%F0%9F%93%84" />

  <!-- Bootstrap (used by template — replace with your own framework if you prefer) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />

  <style>
.portfolio__nav {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__nav-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.portfolio__logo {

  font-size: 20px;
  font-weight: 800;

}

.portfolio__logo-dot {

  color: #a855f7;

}

.portfolio__nav-links {

  display: flex;
  gap: 28px;
  align-items: center;

}

.portfolio__nav-link {

  text-decoration: none;
  color: #666;
  font-size: 14px;

}

.portfolio__nav-cta {

  text-decoration: none;
  padding: 10px 24px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;

}

.portfolio__hero {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__hero-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 48px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;

}

.portfolio__hero-content {
 flex: 1; 
}

.portfolio__hero-greeting {

  font-size: 16px;
  color: #a855f7;
  font-weight: 600;
  margin: 0 0 12px;

}

.portfolio__hero-title {

  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #111;

}

.portfolio__hero-accent {
 color: #a855f7; 
}

.portfolio__hero-desc {

  font-size: 17px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 32px;

}

.portfolio__hero-actions {

  display: flex;
  gap: 12px;

}

.portfolio__hero-media {
 flex-shrink: 0; 
}

.portfolio__hero-photo {

  width: 320px;
  height: 380px;
  object-fit: cover;
  border-radius: 24px;

}

.portfolio__btn {

  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;

}

.portfolio__btn--dark {
 background: #111; color: #fff; 
}

.portfolio__btn--outline {
 border: 1px solid #ddd; color: #333; background: transparent; 
}

.portfolio__btn--accent {
 background: #a855f7; color: #fff; 
}

.portfolio__btn--ghost {
 border: 1px solid rgba(255,255,255,0.3); color: #fff; background: transparent; 
}

.portfolio__work {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__work-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px;

}

.portfolio__work-heading {

  font-size: 32px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #111;

}

.portfolio__work-sub {

  color: #666;
  font-size: 15px;
  margin: 0 0 40px;

}

.portfolio__work-grid {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

}

.portfolio__project-card {

  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);

}

.portfolio__project-image {

  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;

}

.portfolio__project-info {
 padding: 20px; 
}

.portfolio__project-title {

  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111;

}

.portfolio__project-meta {

  font-size: 13px;
  color: #888;
  margin: 0;

}

.portfolio__about {

  background: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__about-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px;
  display: flex;
  gap: 60px;
  align-items: center;

}

.portfolio__about-media {
 flex: 1; 
}

.portfolio__about-image {

  width: 100%;
  border-radius: 16px;

}

.portfolio__about-content {
 flex: 1; 
}

.portfolio__about-heading {

  font-size: 32px;
  font-weight: 800;
  margin: 0 0 16px;
  color: #111;

}

.portfolio__about-text {

  font-size: 15px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 16px;

}

.portfolio__about-stats {

  display: flex;
  gap: 24px;
  margin-top: 24px;

}

.portfolio__stat {
 text-align: center; 
}

.portfolio__stat-value {

  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #a855f7;

}

.portfolio__stat-label {

  font-size: 12px;
  color: #888;
  margin-top: 4px;
  display: block;

}

.portfolio__skills {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__skills-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px;
  text-align: center;

}

.portfolio__skills-heading {

  font-size: 32px;
  font-weight: 800;
  margin: 0 0 40px;
  color: #111;

}

.portfolio__skills-tags {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

}

.portfolio__skill-tag {

  padding: 10px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;

}

.portfolio__contact {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;
  padding: 80px 48px;

}

.portfolio__contact-box {

  max-width: 700px;
  margin: 0 auto;
  background: #111;
  border-radius: 24px;
  padding: 56px 40px;
  color: #fff;
  text-align: center;

}

.portfolio__contact-heading {

  font-size: 32px;
  font-weight: 800;
  margin: 0 0 12px;

}

.portfolio__contact-desc {

  font-size: 16px;
  opacity: 0.7;
  margin: 0 0 32px;

}

.portfolio__contact-actions {

  display: flex;
  gap: 12px;
  justify-content: center;

}

.portfolio__footer {

  background: #fafaf9;
  font-family: 'Segoe UI', Arial, sans-serif;

}

.portfolio__footer-inner {

  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.portfolio__footer-logo {

  font-size: 16px;
  font-weight: 800;

}

.portfolio__footer-links {

  display: flex;
  gap: 20px;

}

.portfolio__footer-link {

  color: #888;
  text-decoration: none;
  font-size: 13px;

}

.portfolio__footer-copy {

  font-size: 13px;
  color: #999;
  margin: 0;

}
  </style>
</head>
<body>
<!-- SEO Meta Tags (add to your <head>):
<meta name="description" content="Maya Lin — Product designer and creative developer specializing in clean interfaces, design systems, and interactive web experiences." />
<meta name="keywords" content="portfolio, product designer, UI/UX, web developer, freelance designer" />
<title>Maya Lin — Product Designer & Developer</title>
-->

<!-- NAV -->
<nav class="portfolio__nav">
  <div class="portfolio__nav-inner">
    <div class="portfolio__logo">maya<span class="portfolio__logo-dot">.</span>lin</div>
    <div class="portfolio__nav-links">
      <a href="#work" class="portfolio__nav-link">Work</a>
      <a href="#about" class="portfolio__nav-link">About</a>
      <a href="#skills" class="portfolio__nav-link">Skills</a>
      <a href="#contact" class="portfolio__nav-cta">Hire Me</a>
    </div>
  </div>
</nav>

<!-- HERO -->
<section class="portfolio__hero">
  <div class="portfolio__hero-inner">
    <div class="portfolio__hero-content">
      <p class="portfolio__hero-greeting">Hi, I'm Maya &#128075;</p>
      <h1 class="portfolio__hero-title">I design &amp; build products people <span class="portfolio__hero-accent">love</span> to use</h1>
      <p class="portfolio__hero-desc">Product designer and creative developer with 6+ years of experience crafting clean interfaces, scalable design systems, and delightful web experiences.</p>
      <div class="portfolio__hero-actions">
        <a href="#work" class="portfolio__btn portfolio__btn--dark">View My Work</a>
        <a href="#contact" class="portfolio__btn portfolio__btn--outline">Get in Touch</a>
      </div>
    </div>
    <div class="portfolio__hero-media">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=350&h=400&fit=crop&crop=face" alt="Maya Lin" class="portfolio__hero-photo" />
    </div>
  </div>
</section>

<!-- WORK -->
<section id="work" class="portfolio__work">
  <div class="portfolio__work-inner">
    <h2 class="portfolio__work-heading">Selected Work</h2>
    <p class="portfolio__work-sub">A curated selection of my recent projects</p>
    <div class="portfolio__work-grid">
      <div class="portfolio__project-card">
        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=320&fit=crop" alt="Project" class="portfolio__project-image" />
        <div class="portfolio__project-info">
          <h3 class="portfolio__project-title">SaaS Dashboard Redesign</h3>
          <p class="portfolio__project-meta">UI/UX Design &bull; Figma &bull; React</p>
        </div>
      </div>
      <div class="portfolio__project-card">
        <img src="https://images.unsplash.com/photo-1555421689-d68471e189f2?w=600&h=320&fit=crop" alt="Project" class="portfolio__project-image" />
        <div class="portfolio__project-info">
          <h3 class="portfolio__project-title">E-Commerce Mobile App</h3>
          <p class="portfolio__project-meta">Product Design &bull; Prototyping</p>
        </div>
      </div>
      <div class="portfolio__project-card">
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=320&fit=crop" alt="Project" class="portfolio__project-image" />
        <div class="portfolio__project-info">
          <h3 class="portfolio__project-title">FinTech Landing Page</h3>
          <p class="portfolio__project-meta">Web Design &bull; Development</p>
        </div>
      </div>
      <div class="portfolio__project-card">
        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=320&fit=crop" alt="Project" class="portfolio__project-image" />
        <div class="portfolio__project-info">
          <h3 class="portfolio__project-title">Design System</h3>
          <p class="portfolio__project-meta">Component Library &bull; Documentation</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="portfolio__about">
  <div class="portfolio__about-inner">
    <div class="portfolio__about-media">
      <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=500&h=380&fit=crop" alt="Working" class="portfolio__about-image" />
    </div>
    <div class="portfolio__about-content">
      <h2 class="portfolio__about-heading">A Bit About Me</h2>
      <p class="portfolio__about-text">I'm a product designer and front-end developer based in San Francisco. I specialize in creating intuitive interfaces and design systems that bridge the gap between design and engineering.</p>
      <p class="portfolio__about-text">Previously, I've worked at startups and agencies including Dropbox, IDEO, and several YC-backed companies. I love collaborating with founders and product teams to ship products that make a real impact.</p>
      <div class="portfolio__about-stats">
        <div class="portfolio__stat">
          <strong class="portfolio__stat-value">6+</strong>
          <span class="portfolio__stat-label">Years Experience</span>
        </div>
        <div class="portfolio__stat">
          <strong class="portfolio__stat-value">40+</strong>
          <span class="portfolio__stat-label">Projects</span>
        </div>
        <div class="portfolio__stat">
          <strong class="portfolio__stat-value">25+</strong>
          <span class="portfolio__stat-label">Happy Clients</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SKILLS -->
<section id="skills" class="portfolio__skills">
  <div class="portfolio__skills-inner">
    <h2 class="portfolio__skills-heading">Skills & Tools</h2>
    <div class="portfolio__skills-tags">
      <span class="portfolio__skill-tag">Figma</span>
      <span class="portfolio__skill-tag">React</span>
      <span class="portfolio__skill-tag">Next.js</span>
      <span class="portfolio__skill-tag">Tailwind CSS</span>
      <span class="portfolio__skill-tag">TypeScript</span>
      <span class="portfolio__skill-tag">UI/UX Design</span>
      <span class="portfolio__skill-tag">Design Systems</span>
      <span class="portfolio__skill-tag">Framer Motion</span>
      <span class="portfolio__skill-tag">Prototyping</span>
      <span class="portfolio__skill-tag">User Research</span>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact" class="portfolio__contact">
  <div class="portfolio__contact-box">
    <h2 class="portfolio__contact-heading">Let's Work Together</h2>
    <p class="portfolio__contact-desc">Have a project in mind? I'm currently available for freelance work and collaborations.</p>
    <div class="portfolio__contact-actions">
      <a href="mailto:hello@mayalin.dev" class="portfolio__btn portfolio__btn--accent">Email Me</a>
      <a href="#" class="portfolio__btn portfolio__btn--ghost">Download CV</a>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="portfolio__footer">
  <div class="portfolio__footer-inner">
    <div class="portfolio__footer-logo">maya<span class="portfolio__logo-dot">.</span>lin</div>
    <div class="portfolio__footer-links">
      <a href="#" class="portfolio__footer-link">Twitter</a>
      <a href="#" class="portfolio__footer-link">Dribbble</a>
      <a href="#" class="portfolio__footer-link">GitHub</a>
      <a href="#" class="portfolio__footer-link">LinkedIn</a>
    </div>
    <p class="portfolio__footer-copy">&copy; 2025 Maya Lin</p>
  </div>
</footer>
</body>
</html>

Why use the Portfolio Landing Page

A portfolio is the highest-stakes piece of your professional presence. Hiring managers spend an average of 30 seconds reviewing a portfolio before deciding to dig deeper or move on, so the first viewport must communicate your level, your specialty, and the quality of your work in a single glance. This template is structured around that reality — your name, what you do, and a curated grid of your strongest work appear before any scrolling is required.

How to customize this template

1. Lead with what you do, not just who you are

A common portfolio mistake is leading with 'Hi, I'm Sarah — designer based in Brooklyn' as if it were a personal blog. Recruiters and hiring managers care first about your specialty and your level. Replace the hero with structure like 'Sarah Chen — Senior Product Designer specializing in B2B SaaS'. Add a one-line value statement: 'I help early-stage SaaS teams ship faster by building design systems that scale'. Then add the personality and location below the fold once they have decided you are worth their time.

2. Curate ruthlessly — three great projects beat ten average ones

Every weak project on your portfolio drags down your perceived skill level. Show three to six of your absolute strongest pieces of work and remove everything else. For each project, lead with the outcome, not the deliverable. Instead of 'Designed a mobile app for a fintech startup', write 'Increased fintech app retention from 42% to 67% by redesigning the onboarding flow'. If you can include before/after metrics, do it. Hiring managers are evaluating impact, not output.

3. Make case studies easy to scan, hard to skip

Each project should link to a longer case study page (or a section further down). For each case study include: the problem, your specific role on the team, the constraints (timeline, team size, budget), the approach, the outcome, and three to five visuals. Recruiters skim case studies in a Z-pattern — they read the headline, scan the visuals, then read the bottom-line outcome. Structure your content so the most important information lands at those three points. Avoid jargon and avoid 'I did everything' framing — be specific about your contribution versus your team's.

4. Make contact and next steps obvious

The single most important call to action on a portfolio is making it easy to reach you. Include your email address as plain text (not just a contact form — many recruiters copy emails directly). Link to LinkedIn and any platforms relevant to your role: GitHub for developers, Dribbble or Behance for designers, X or Substack for writers. Include a 'Status' line at the top of the page: 'Available for senior product design roles starting March 2026', or 'Open to freelance design system work'. This single line filters opportunities to the kind you actually want.

Frequently Asked Questions

Should I include every project I have ever worked on?

No. Three to six of your strongest projects beats ten of varying quality. Recruiters spend 30 seconds on a portfolio before deciding to dig deeper — every weak project on the front page makes them less likely to keep scrolling. Curate ruthlessly. Save older or weaker work for an archive page if you must include it at all.

Do I need a custom domain for my portfolio?

A custom domain (like sarahdesigns.com) signals professionalism and is highly recommended. You can buy domains for $10 to $20 per year on Namecheap, Cloudflare, or Google Domains. Connect the domain to your hosting via DNS records — most hosts have one-click instructions. A polished portfolio at yourname.com beats a fancier one at yourname.notion.site every time.

How do I show work that is under NDA?

For client work covered by NDA, describe the project in general terms ('A B2B SaaS company in healthcare') and the outcome ('Increased free-to-paid conversion by 18% over six weeks') without showing the actual visuals or naming the client. Many hiring managers respect NDA-protected case studies — what they want to see is your reasoning and your impact, not the specific brand.

Should I include a resume on my portfolio site?

Yes — link to a downloadable PDF resume in the hero or contact section. Many companies require formal resumes during the application process even when they have already seen your portfolio. Make the PDF easy to find with a clear 'Download Resume' button and keep it under 2MB for fast download. Update both your portfolio and resume together so they stay consistent.

Can I use this template if I am just starting my career?

Absolutely. Replace 'Featured Projects' with school projects, hackathon work, side projects, or contributions to open source. Frame each one with the same problem-approach-outcome structure professionals use. A junior portfolio with two or three thoughtfully presented projects often outperforms a senior portfolio with five hastily described ones.

More Landing Page Templates

Portfolio Landing Page - Free HTML & React Landing Page Template | ToolsWaves