Vibe Code Your Way to a $100K Job

Vibe Code Your Way to a $100K Job: Build an Excel-Inspired Personal Website Without Writing a Single Line of Code

You know that feeling when you want to stand out in a sea of job applicants but all your resumes look like carbon copies? Imagine if your personal website looked exactly like your job title—a data analyst’s site that looks like a spreadsheet. Sounds quirky? Absolutely. But it’s also a brilliant way to catch eyes and get noticed. Now, here’s the kicker: you don’t have to write a single line of code to pull this off. No, seriously. In this post, I’m going to take you on a journey where I built a unique, Excel-inspired portfolio website using an AI-powered tool called Windsurf, and hosted it live on the internet for free. Along the way, I’ll share some tips, pitfalls, and fun tidbits, including how to automate your contact form with a webhook and publish your site on GitHub Pages—all without needing to be a coding wizard.

The Big Idea: A Website Inspired by Your Job Title

Let’s set the stage. You’re a data analyst, and you want your personal website to scream “data” the moment someone lands on it. Instead of the usual sleek and minimal portfolio layouts, why not design it to look like an Excel spreadsheet? Think of it as wearing a digital business suit tailored to your profession. This approach is not just about aesthetics—it’s a statement. It says you’re creative, detail-oriented, and you understand your craft deeply. Plus, it’s memorable, which is half the battle when applying for jobs. But here’s the challenge: building such a site from scratch usually requires a decent amount of coding skills. Styling a website to mimic Excel’s interface, adding interactive elements, and making it mobile-friendly? That’s a lot to juggle. That’s where AI-powered coding tools like Windsurf come in. They let you set up a prompt describing what you want, and then handle the heavy lifting of generating code, organizing files, and even setting up a local server for you to preview your work.

Getting Started: Why Windsurf?

Now, you might be wondering why I chose Windsurf over other popular AI coding assistants like Cursor or Lovable. Honestly, it’s simple—I hadn’t tried those yet. Windsurf was my go-to, and I was using the Pro version, which gave me access to a powerful AI model (Cloud 3.7 Sonnet). But don’t worry if you don’t have the Pro version; Windsurf offers a free tier that’s good enough to follow along and get great results. The workflow is straightforward: open an empty folder in Windsurf, set your prompt, and watch the magic happen.

Crafting the Perfect Prompt: Setting Expectations for AI

To get the AI to build exactly what I wanted, I had to be specific in my prompt. Here’s what I asked for:

• Build a one-page interactive portfolio website with an Excel-inspired theme to make it unique.
• Add a touch of gamification to make the site more engaging.
• Include an easily configurable section in the code for simple text and link updates without touching the main logic.
• Use only HTML, Tailwind CSS (to save time on styling), and JavaScript, leveraging existing JS packages for interactive elements.
• Make the website fully mobile-responsive.
• Include a contact form that sends data to a webhook, with a place in the config to paste the webhook URL.
• Generate the website in small chunks to avoid errors from writing too much code at once.

Why all these specifics? Because AI is smart but not psychic. The more detailed and clear your instructions, the better your end result. Plus, the request for a configurable section is a lifesaver—it means I won’t have to dive into messy code every time I want to update my projects or contact details.

Watching the AI Build: From Folders to Files

Once I hit enter, Windsurf started by creating the basic folder structure:

• CSS folder for styles
• images folder for any pictures
• JavaScript folder for interactive scripts

Next, it tackled the main files—index.html, styles.css (leveraging Tailwind CSS classes), and JavaScript files with clear comments separating sections like main content, projects, and contact form. There were a few hiccups (like an initial error creating the HTML file), but the AI quickly retried and recovered. I even took a coffee break while it worked—because honestly, watching AI code while you sip coffee is a pretty sweet deal.

Unpacking the Code: What’s Inside Our Excel-Inspired Website?

After Windsurf finished generating the code, I dove into the JavaScript configuration file. This is where the magic happens for customization:

• Personal Info: Name, job title, bio, email, phone, location
• Social Links: LinkedIn, GitHub, Twitter (or X, as it’s now called)
• Resume Link: A place to link your CV for download
• Webhook URL: Where contact form submissions get sent
• Skills: List of skills with proficiency levels (though I wasn’t a fan of self-rating myself—more on that later)
• Projects: Each with a description and technologies used
• Experience and Education: Displayed like a digital CV with timelines
• Achievements: Adding a gamification touch

This config is a user-friendly hub for updates—no need to hunt through code to tweak your info. Just open this file, change a few lines, and your website reflects those changes.

Seeing It Live: The First Preview of Our Portfolio

With the local server running, I opened the website on my second screen to check it out. The Excel theme was everywhere—the green color palette, navigation buttons labeled like Excel menus (File, Home, Insert, Data View), and even an A1 cell-style about section. The “Download Resume” button was prominently placed at the top—perfect for recruiters who prefer the classic CV format. The projects section looked neat, though without images, it felt a bit plain. Clicking “View Details” popped up a notification, but it wasn’t linked to external pages yet, so that’s something to fix. The skills section had a cool animation, but the self-rating percentages felt a bit off. Why rate Tableau 85% and Python 80%? Python is vast, and such ratings can feel arbitrary or even off-putting. So I decided to remove those ratings for a cleaner, more professional look.

Refining the Website: Bug Fixes and Feature Tweaks

Next up was fixing bugs and making the site more polished. The navigation menu didn’t work initially, so I updated project links and added image placeholders to make the portfolio visually appealing. In the skills section, I removed self-rating and trimmed down the list to focus on core competencies like Excel, SQL, Python, and Power BI. Adding icons to the skills made it feel more engaging without breaking the Excel theme. The experience and education sections were my favorites—the spreadsheet style made timelines and job descriptions easy to scan, adding a professional yet unique touch. As for gamification, I liked the idea but felt it was overkill for a professional portfolio. Achievements with flashy highlights felt distracting, so I toned it down to keep the focus on the content.

Setting Up the Resume Download and Contact Form Webhook

One of the trickier parts was getting the “Download Resume” button to work. Initially, it was a plain button without functionality, so clicking did nothing. A quick tweak added the code to link it to a CV file placed in the root directory—problem solved. For the contact form, I wanted submissions to be sent to a webhook URL. Why? Because this opens up automation possibilities like sending notification emails, saving data to Google Sheets, or triggering workflows without writing backend code. I used a no-code tool called Pabbly Connect (similar to Zapier or Make.com) to handle this. It offers a lifetime deal, so you pay once and use it forever—no pesky monthly subscriptions. I created a workflow triggered by the webhook, copied the webhook URL, and pasted it into the website’s config. Testing the form sent data (name, email, message) successfully to Pabbly Connect, meaning I could automate follow-ups or data storage with ease. This is a game-changer for those who want functionality without backend headaches.

Publishing Your Website: From Local Server to the World

Once the site was polished and functional, I pushed it to GitHub to make it publicly accessible. GitHub Pages is a fantastic free hosting service for static websites like this portfolio. Steps included:

1. Initializing a Git repository locally
2. Committing the code with a descriptive message
3. Publishing the branch to a new GitHub repository
4. Configuring GitHub Pages in the repository settings to serve the site

After a short wait, the website was live with a URL like https://username.github.io/repository-name. You can even set up a custom domain (like yourname.com) by buying one from providers like Namecheap and linking it to GitHub Pages. This opens up professional branding opportunities that go beyond just a GitHub URL.

Final Touches: Mobile Responsiveness and Easter Eggs

Before wrapping up, I checked the site’s mobile responsiveness. Initially, the mobile menu button didn’t work, but after reporting the issue back to Windsurf, the AI fixed it for me—talk about having a helpful coding buddy! I also added a personal image and replaced project placeholders with real images to add personality. For a fun twist, I asked Windsurf to add some “Easter eggs” — hidden little surprises. Clicking the “File” or “About” buttons triggers popup messages, and the “View” button toggles a dark mode. It’s a playful touch that makes the site memorable without detracting from professionalism.

Why This Approach Works and How You Can Try It

This project shows how AI can radically simplify web development, especially for people who want to focus on content and creativity rather than wrestling with code. With tools like Windsurf, you:

• Set clear, detailed prompts that guide the AI
• Let the AI generate code, structure, and styles
• Customize via a single config file for easy updates
• Use no-code automation tools to handle backend tasks like contact forms
• Publish effortlessly on free hosting platforms

This workflow is perfect for job seekers, freelancers, or anyone wanting a standout online presence without the traditional coding grind.

Some Friendly Tips Before You Dive In

• Be specific in your prompt: The more details you provide, the better your AI-generated site will match your vision.
• Break down large tasks: Ask the AI to build your website in chunks to avoid errors and make troubleshooting easier.
• Use Tailwind CSS: It saves tons of time on styling and keeps your design consistent.
• Keep configuration centralized: A single config file where you update your info makes maintenance a breeze.
• Test on multiple devices: Don’t forget mobile responsiveness—it’s crucial.
• Automate smartly: Use webhook tools like Pabbly Connect to handle form data without backend coding.
• Have fun with it: Add personal touches like Easter eggs to make your site memorable.

Wrapping It Up: From Vibe Coding to Real-World Impact

Building this Excel-inspired personal website without typing a single line of code felt like having a superpower. It’s like ordering a custom suit and having it magically tailored to your size and style. The AI handled the heavy lifting, while I got to focus on the creative vision and fine-tuning. If you’re dreaming of landing that $100K job or just want a portfolio that truly stands out, this approach is a game-changer. It combines the best of AI, no-code automation, and classic web hosting to deliver something unique, functional, and professional. So, why not give it a try? Set up your prompt, let the AI vibe code your site, and watch your personal brand come to life. And who knows? Your next employer might just be impressed enough to hit “Hire.” Happy vibe coding—and remember, sometimes the best code is the code you don’t have to write!