As a photographer, building a portfolio often feels like a compromise. You either wrestle with bloated page builders that slow down your high-res images, or you settle for a generic template that looks exactly like a thousand other sites. I wanted something cinematic. Something that felt like you were stepping natively into my world, where the interface itself got out of the way of the art.
The Concept of Vibe Coding
Enter "vibe coding" – an iterative, AI-assisted development loop. Instead of writing every line of CSS from scratch, I focused on high-level directives and brand aesthetics. I defined the narrative, the pacing, the aspect ratios, and the absolute necessity of a dark, immersive theme. The AI served as the executor, turning my "vibes" into performant, responsive web components.
Prerequisites
Here is the tech stack you will need to get started. Once your site is live, the ongoing maintenance and hosting costs are incredibly low compared to traditional builder platforms.
| Tool | Purpose | Estimated Cost |
|---|---|---|
| Google AI Plus | Powers the advanced Gemini models required for heavy-lifting code generation. | $10.98 / MO |
| Google Antigravity | The agent-first IDE where the AI plans, codes, and tests your website. | FREE |
| Cloudflare Custom Domain | Your personalized web address. | $10 / YR |
| Cloudflare Pages | Lightning-fast, secure edge hosting for your deployed site. | FREE |
| GitHub | Version control to store and manage your codebase securely. | FREE |
| Tailwind CSS Framework | A utility-first styling framework to nail the exact visual aesthetic you want. | FREE |
Step 1: Setting Up Your Digital Foundation
Before you start generating code, you need a place to store it and a place to host it. The beauty of this modern stack is that the infrastructure handles itself once connected.
-
Create a GitHub Account: If you don't have one, sign up. Create
a new, empty repository (e.g.,
my-custom-website). This is the vault where your website's code will live. - Set Up Cloudflare: Create a free Cloudflare account. Navigate to Pages and select "Connect to Git."
- Link Them Up: Authorize Cloudflare to access your new GitHub repository. Every time new code is pushed to this repository, Cloudflare Pages will automatically build and deploy your site to a live URL in seconds.
Step 2: Firing Up Google Antigravity
This is where the actual "vibe coding" happens. Google Antigravity isn't just a text editor; it's an AI-native workspace that acts as your lead developer.
- Open Google Antigravity and ensure your Google AI Plus subscription is active so you have access to the most capable reasoning models.
- Connect Antigravity to your newly created GitHub repository.
- Initialize the project by telling the AI your foundational stack: "Set up a new web project using HTML and Tailwind CSS, optimized for fast loading and responsive design."
Step 3: The Art of Vibe Coding (Prompting)
You don't need to know how to write a CSS grid or configure a mobile hamburger menu. You just need to know how to describe what you want clearly. Think of yourself as the Creative Director.
Don't try to build the whole site in one massive prompt. Build it block by block. Here are the core prompts you will need to generate a complete, professional page:
| Website Section | Your Goal | Example "Vibe Code" Prompt |
|---|---|---|
| 1. The Navigation Bar | A way for users to move around your site that adapts to small screens. | "Create a sticky top navigation bar using Tailwind CSS. Put my logo placeholder on the left and links for Home, About, Gallery, and Contact on the right. It must collapse into a hamburger menu on mobile devices." |
| 2. The Hero Section | The very first thing people see. It needs to grab attention and explain what the site is about. | "Build a full-width hero section below the navbar. I want a large, bold headline, a short subheadline, and a high-contrast 'Get in Touch' button. Center everything and leave plenty of whitespace so it looks premium." |
| 3. The Main Content | Displaying your work, services, or features in an organized way. | "Generate a 3-column masonry grid layout to display a portfolio of images. Add a smooth, subtle zoom-in effect when hovering over the images. Ensure the grid automatically collapses into a single column on phone screens." |
| 4. The About Section | Introducing who you are with text and a photo. | "Create an 'About Me' section. Place a circular profile photo on the left and a paragraph of highly readable, dark gray text on the right. On mobile, stack the photo on top of the text." |
| 5. The Contact Form | Giving visitors a way to reach out without leaving the page. | "Design a clean, minimalist contact form with input fields for Name, Email, and a larger box for a Message. Make the 'Submit' button match the style of the button in the Hero section." |
| 6. The Footer | The bottom anchor of the site with final links and copyright info. | "Build a dark-themed footer at the very bottom. Include copyright text for 2026, and add placeholders for social media icons aligned to the right." |
Pro Tip: Once a section is generated, you can easily
ask the AI to tweak it. If the text in your Hero section feels too cramped, simply reply: "Increase the line height of the
subheadline and add more padding to the 'Get in Touch' button."
For inspiration for unique and good web designs, check out Awwwards.
Step 4: Iteration and Refinement
Antigravity will generate the files and show you a live preview. This is where you tweak the "vibe."
- If the image spacing feels too tight, just tell the AI: "Increase the padding between the gallery items and make the hover effect slightly slower."
- If the mobile view looks clunky: "Fix the mobile responsiveness so the masonry grid collapses into a single column on phone screens."
Step 5: Deploying to the World
Once you are happy with how the site looks and feels in your Antigravity preview, it's time to make it live.
- Instruct Antigravity to Commit and Push your changes to GitHub. (e.g., "Push these final layout changes to the main branch.")
- Because you connected Cloudflare Pages in Step 1, the moment that code hits GitHub, Cloudflare will automatically trigger a build.
-
Within minutes, your site will be live on a free
.pages.devsubdomain.
Step 6: Connecting Your Custom Domain
To make it truly yours, link your Cloudflare Custom Domain.
- In your Cloudflare Pages dashboard, go to the Custom Domains tab for your project.
-
Enter the domain you purchased (e.g.,
yourname.com). - Cloudflare will automatically handle the DNS routing and provision a free SSL certificate so your site is secure (HTTPS).