Creating a Personal Portfolio Website with Windsurf (Step-by-Step)

Your portfolio website is your digital business card. It needs to look professional, load fast, and showcase your work effectively.

With Windsurf and its Flow mode, you can build a portfolio that stands out—without writing CSS from scratch.

What We're Building

Portfolio Features:
* Hero section with animated introduction
* About me section
* Projects gallery with filtering
* Skills section with progress bars
* Contact form
* Dark mode toggle
* Fully responsive design

Tech Stack:
* HTML/CSS/JavaScript (vanilla, no frameworks)
* Tailwind CSS for styling
* EmailJS for contact form
* Netlify for hosting

Step 1: Initialize the Project

“`bash
mkdir my-portfolio
cd my-portfolio
“`

Open in Windsurf:
“`bash
windsurf .
“`

Step 2: The Initial Prompt

Open Windsurf's Cascade panel and prompt:

> “Create a personal portfolio website for a web developer.
>
> Structure:
> – Hero section with my name, title, and a call-to-action button
> – About section with a photo and bio
> – Projects section showing 6 projects in a grid
> – Skills section with skill bars (HTML, CSS, JavaScript, React, Node.js)
> – Contact form with name, email, message fields
> – Footer with social links
>
> Design:
> – Modern, minimalist design
> – Use Tailwind CSS
> – Dark blue and white color scheme
> – Smooth scroll between sections
> – Responsive (mobile-first)
>
> Create index.html, styles.css, and script.js”

Step 3: Review the Generated Structure

Windsurf creates:

`index.html`

“`html

“`

Step 4: Customize the Content

Prompt to Cascade:
> “Update the hero section with my actual name: [Your Name]. Change the title to ‘AI-Powered Developer'. Update the about section with this bio: [Your Bio]”

Windsurf updates the content while preserving the structure.

Step 5: Add Animations

Prompt:
> “Add smooth animations:
> – Fade-in animation for hero text
> – Slide-up animation for project cards when they come into view
> – Hover effects on project cards (scale up slightly)
> – Smooth color transitions on buttons”

Windsurf adds CSS animations and JavaScript for scroll-triggered effects.

Step 6: Enhance the Projects Section

Prompt:
> “Improve the projects section:
> – Add filter buttons (All, Web Apps, Mobile Apps, Tools)
> – Add a modal that opens when you click a project, showing more details
> – Include project screenshots (use placeholder images for now)
> – Add GitHub and Live Demo links for each project”

Step 7: Make the Contact Form Functional

Prompt:
> “Make the contact form work using EmailJS:
> 1. Integrate EmailJS library
> 2. When the form is submitted, send an email to my email address
> 3. Show a success message after sending
> 4. Add form validation (required fields, valid email format)”

Windsurf generates:

“`javascript
// script.js
emailjs.init(‘YOUR_USER_ID');

document.getElementById(‘contact-form').addEventListener(‘submit', function(e) {
e.preventDefault();

const name = document.getElementById(‘name').value;
const email = document.getElementById('email').value;
const message = document.getElementById(‘message').value;

emailjs.send(‘YOUR_SERVICE_ID', ‘YOUR_TEMPLATE_ID', {
from_name: name,
from_email: email,
message: message
}).then(function() {
alert(‘Message sent successfully!');
document.getElementById(‘contact-form').reset();
}, function(error) {
alert(‘Failed to send message. Please try again.');
});
});
“`

Step 8: Add Dark Mode

Prompt:
> “Add a dark mode toggle:
> – Add a sun/moon icon button in the navigation
> – When clicked, switch between light and dark themes
> – Save the preference in localStorage
> – Apply smooth transitions when switching themes”

Step 9: Optimize for SEO

Prompt:
> “Optimize the website for SEO:
> – Add proper meta tags (description, keywords, og:image)
> – Add structured data (JSON-LD) for a Person schema
> – Ensure all images have alt text
> – Add a sitemap.xml file”

Step 10: Test Responsiveness

Open the browser dev tools and test on different screen sizes. If something looks off:

Prompt:
> “The projects grid looks cramped on mobile. Make it a single column on screens smaller than 768px.”

Cascade adjusts the Tailwind classes automatically.

Step 11: Deploy to Netlify

Option 1: Drag and Drop

1. Go to netlify.com/drop
2. Drag your project folder
3. Done! You get a live URL.

Option 2: Git-Based Deployment

“`bash
git init
git add .
git commit -m “Initial commit”
git remote add origin YOUR_GITHUB_REPO
git push -u origin main
“`

Then connect the repo to Netlify for automatic deployments.

Step 12: Add Custom Domain

1. Buy a domain (e.g., `johndoe.dev`)
2. In Netlify, go to Domain Settings
3. Add your custom domain
4. Update DNS records as instructed

Your portfolio is now live at `https://johndoe.dev`!

Advanced Enhancements

Add a Blog Section

Prompt:
> “Add a blog section. Create a simple blog with 3 sample posts. Each post should have a title, date, excerpt, and ‘Read More' link.”

Add Analytics

Prompt:
> “Integrate Google Analytics to track visitors.”

Add a Resume Download

Prompt:
> “Add a ‘Download Resume' button in the about section that downloads a PDF.”

Conclusion

Building a portfolio website used to take days of design and coding. With Windsurf's Flow mode, you can build a professional portfolio in a few hours.

At BYS Marketing, we help professionals and businesses create stunning web presences. We use AI to accelerate development while maintaining high design standards.

—

Need a professional website?
Contact BYS Marketing. We build websites that convert visitors into customers.