Build a portfolio site with Cursor

What you'll make

A deployed one-page portfolio site — hero section, about blurb, project cards with screenshots, and a contact form. Built with Cursor in under an hour, ready to send to prospective clients.

What you need

• Cursor installed
• Node.js installed (version 18 or later)
• 3–5 projects to showcase (even small ones count — a landing page, a blog, a client site)
• Screenshots of each project (take them at 1440px wide if possible)
• 60 minutes

Steps

1. Open Cursor, create a new project, and describe what you want:

Build a one-page portfolio website using React and Vite. It should have these sections in order:

1. Hero — my name, one line about what I do, and a "Get in touch" button that scrolls to the contact section
2. About — 2–3 sentences about me and my skills
3. Work — a grid of project cards. Each card has: a screenshot image, project name, one-sentence description, and a link to the live site. Make it a 2-column grid on desktop, single column on mobile.
4. Contact — a simple form with name, email and message fields, plus a submit button. The form should post to [your form endpoint — see step 4 below].

Use Tailwind CSS for styling. Keep the design minimal: lots of white space, clean typography, no animations beyond a subtle fade-in on scroll. Use a neutral colour palette — dark text on white background, one accent colour for buttons and links.

Make it fully responsive. Mobile layout should stack everything in one column.

2. Add your project data. Create a file with your project info:

Create a file called projects.ts that exports an array of project objects. Each object has: name, description, screenshot (file path), url, and tags (array of strings like "React", "Shopify", "WordPress"). I'll add my real projects to this file.

For now, put 3 placeholder projects with sample data so the layout works.

3. Replace the placeholder data with your real projects. Add your screenshots to the public folder and update the file paths. Update the hero section with your name and tagline.

4. Set up the contact form. If you don't have a backend, use a free form service:

• Formspree: create a free account, get your form endpoint URL, and set it as the form's action
• Or Netlify Forms: if you deploy to Netlify, forms work automatically with no backend

Ask Cursor to wire up the form:

Make the contact form submit to [your formspree endpoint URL] using fetch. Show a success message after submission and an error message if it fails. Disable the submit button while sending and show "Sending..." text.

5. Build and deploy:

npm run build

Deploy the dist folder to Netlify (drag and drop) or Vercel (connect your repo). Your portfolio is now live with a URL you can send to clients.

Check your result

• The site loads on mobile and desktop with no layout issues
• All project screenshots display correctly and links open in a new tab
• The contact form submits and shows a success message (test it yourself)
• The site loads in under 3 seconds (no large uncompressed images)
• The URL is clean (use a custom domain or a short Netlify subdomain)

If the form doesn't work, it's almost always the endpoint URL. Double-check you copied the full Formspree URL (it starts with https://formspree.io/f/). If images are slow, compress your screenshots before adding them — a 2MB screenshot should be under 200KB after compression.