Resume Download

A compact call to action with a download button and file details for your CV. Lets recruiters grab your resume in one click from a portfolio page.

import { Button } from '@/components/ui/button';
import { Download, Mail, ArrowRight } from 'lucide-react';

export default function ResumeDownload() {
  return (
    <div className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4 2xl:max-w-[1400px]">
        {/* Resume Download Section */}
        <div className="bg-card flex flex-col overflow-hidden rounded-xl border md:flex-row">
          {/* Resume Preview */}
          <div className="relative w-full md:w-2/5">
            <div className="aspect-[3/4] md:h-full md:min-h-[400px]">
              <img
                src="https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3"
                alt="Resume Preview"
                className="object-cover"
              />
              <div className="bg-foreground/40 dark:bg-background/40 absolute inset-0 backdrop-blur-sm"></div>

              {/* Overlay content */}
              <div className="text-foreground absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
                <h2 className="dark:text-foreground text-background text-3xl font-bold">
                  Resume
                </h2>
                <p className="dark:text-foreground/90 text-background/90 mt-2 mb-4 max-w-xs">
                  Download my resume to learn more about my experience,
                  education, and qualifications.
                </p>
                <Button variant="default" size="lg" className="gap-2">
                  <Download className="h-4 w-4" />
                  Download PDF
                </Button>
              </div>
            </div>
          </div>

          {/* Resume Information */}
          <div className="flex flex-1 flex-col justify-center p-6 md:p-8 lg:p-12">
            <h2 className="text-2xl font-bold md:text-3xl">
              Hire Me For Your Next Project
            </h2>
            <p className="text-muted-foreground mt-4 max-w-lg">
              I&apos;m currently available for freelance projects, full-time
              positions, or consulting opportunities. Let&apos;s discuss how I
              can contribute to your team.
            </p>

            {/* Highlights */}
            <div className="my-6 grid gap-4 md:grid-cols-2">
              <div className="bg-muted/50 rounded-lg p-4">
                <h3 className="font-semibold">Experience</h3>
                <p className="text-muted-foreground text-sm">
                  8+ years in full stack development with expertise in modern
                  web technologies.
                </p>
              </div>
              <div className="bg-muted/50 rounded-lg p-4">
                <h3 className="font-semibold">Education</h3>
                <p className="text-muted-foreground text-sm">
                  B.S. Computer Science, Stanford University with specialization
                  in software engineering.
                </p>
              </div>
              <div className="bg-muted/50 rounded-lg p-4">
                <h3 className="font-semibold">Industries</h3>
                <p className="text-muted-foreground text-sm">
                  Experience in fintech, healthcare, e-commerce, and enterprise
                  software solutions.
                </p>
              </div>
              <div className="bg-muted/50 rounded-lg p-4">
                <h3 className="font-semibold">Services</h3>
                <p className="text-muted-foreground text-sm">
                  Web & mobile development, UI/UX design, system architecture,
                  technical consultation.
                </p>
              </div>
            </div>

            {/* Call to action buttons */}
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <Button className="gap-2" asChild>
                <a href="/resume.pdf" download>
                  Download Resume
                  <Download className="h-4 w-4" />
                </a>
              </Button>
              <Button variant="outline" className="gap-2" asChild>
                <a href="#contact">
                  Contact Me
                  <ArrowRight className="h-4 w-4" />
                </a>
              </Button>
            </div>
          </div>
        </div>

        {/* Additional info */}
        <div className="mt-8 flex flex-col justify-between rounded-lg border p-6 sm:flex-row sm:items-center">
          <div className="mb-4 sm:mb-0">
            <h3 className="text-lg font-semibold">Need more information?</h3>
            <p className="text-muted-foreground">
              Feel free to contact me directly for a more detailed resume or
              portfolio.
            </p>
          </div>
          <Button
            variant="secondary"
            className="gap-2 whitespace-nowrap"
            asChild
          >
            <a href="mailto:hello@example.com">
              <Mail className="h-4 w-4" />
              hello@example.com
            </a>
          </Button>
        </div>
      </div>
    </div>
  );
}

About this block

Resume Download is a two-part card. On the left a blurred document image fills a portrait panel, and centered over it sits a heading, a short pull quote, and a primary download button. On the right a content column opens with a headline and a short availability pitch, then a two-column grid of four muted highlight cards covering experience, education, industries, and services. Below the grid two buttons sit in a row: a filled download link and an outlined contact anchor. A second row beneath the card holds a "Need more information?" strip with a label, a supporting sentence, and a mailto button showing the contact address.

All text sections are independent of each other. The four highlight cards can be relabelled or reworded to suit any profession, the download href and mailto address are plain anchor attributes, and the contact anchor points to a local id so you can connect it to any contact block lower on the page.

When to use

Use this block when a recruiter or hiring manager lands on a portfolio and you want the resume grab to feel deliberate rather than buried in a nav link. The layout pairs the visual proof of a document with the reasons to hire you, which makes it stronger than a bare download link or a generic CTA banner. In a real estate marketplace context this works equally well for an agent profile page where visitors want a credential sheet before reaching out.

A natural flow around it on a Portfolio page:

Before

About Me to introduce the person before pitching the download
Work Experience Cards so the highlights grid reinforces a timeline the visitor just read

After

Contact Sections so the "Contact Me" button lands somewhere meaningful
Skills Display to give extra depth after the recruiter has grabbed the file

What you can customize

The block has three swappable regions that cover the most common adjustments:

Highlight cards. Replace the four labels and descriptions with any credentials that matter for your field, such as licenses, market coverage, or transaction volume for a property professional.
Download target. Point the two download buttons at your actual PDF path; both resolve to the same file so keeping them in sync is a single find-and-replace.
Contact strip. Swap the mailto address and supporting sentence to route inquiries to a form, a calendar link, or a direct phone number instead of email.

Tip: if your portfolio already has a dedicated contact section, change the "Contact Me" button href to match that section's id so the scroll anchor works without any extra routing.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

About Me to introduce the person before pitching the download
Work Experience Cards so the highlights grid reinforces a timeline the visitor just read

After

Contact Sections so the "Contact Me" button lands somewhere meaningful
Skills Display to give extra depth after the recruiter has grabbed the file

What you can customize

The block has three swappable regions that cover the most common adjustments:

Highlight cards. Replace the four labels and descriptions with any credentials that matter for your field, such as licenses, market coverage, or transaction volume for a property professional.
Download target. Point the two download buttons at your actual PDF path; both resolve to the same file so keeping them in sync is a single find-and-replace.
Contact strip. Swap the mailto address and supporting sentence to route inquiries to a form, a calendar link, or a direct phone number instead of email.

Tip: if your portfolio already has a dedicated contact section, change the "Contact Me" button href to match that section's id so the scroll anchor works without any extra routing.

Resume Download

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize