> ## Documentation Index > Fetch the complete documentation index at: https://herwaka.shesharp.org.nz/llms.txt > Use this file to discover all available pages before exploring further. # Build Your Website > Use Gemini CLI to design and build your personal website — just describe what you want by speaking or typing and let AI write the code. This is the fun part. You'll describe what you want, and Gemini CLI will build it for you. No coding required — just clear descriptions, spoken or typed. With Wispr Flow running, just start speaking. Your words appear as text in Gemini CLI automatically. Say what you need naturally — Gemini understands and writes the code for you. Copy any prompt from this page and paste it into Gemini CLI. Or type your own request in natural language. No special syntax needed — just describe what you want. ## The Vibe Coding Loop Every step follows the same pattern: ```mermaid theme={null} flowchart LR A["You describe\nwhat you want"] -->|"speak or type"| B["Gemini CLI\nbuilds it"] B -->|"you review"| C{"Happy?"} C -->|"Not quite"| A C -->|"Yes!"| D["Next step"] ``` You describe. Gemini CLI builds. You review. Repeat until it's right, then move on. *** 1. Open **File Explorer** 2. Go to your **Documents** folder 3. Right-click in an empty space → **New** → **Folder** 4. Name it `my-website` 1. Open **Finder** 2. Go to your **Documents** folder 3. Right-click in an empty space → **New Folder** 4. Name it `my-website` Name it something simple like `my-website`. Use lowercase letters with no spaces — this will become part of your website URL later. Open your `my-website` folder in File Explorer. Click the **address bar** at the top, type `powershell`, and press **Enter**. Right-click the `my-website` folder in Finder and select **"Open Terminal at Folder"**. If you don't see this option, open Terminal and type: ```bash theme={null} cd ~/Documents/my-website ``` In your terminal, type: ```bash theme={null} gemini ``` Press Enter. You should see Gemini CLI start up with a prompt ready for your input. **If you have Wispr Flow running**, you can now speak directly into Gemini CLI. Just start talking — your words will appear as text in the terminal. Pick the style that appeals to you and say or copy the entire prompt into Gemini CLI. Replace `[Your Name]` and `[your field]` with your real information! ```text title="Say this or copy this prompt" theme={null} Create a simple personal website for me. My name is [Your Name]. I want a clean, modern design with: - A hero section with my name and a short tagline - An "About Me" section where I can introduce myself - A "Contact" section with links to my email and LinkedIn Use a single index.html file with inline CSS. Make it responsive so it looks good on both desktop and mobile phones. Use a professional color scheme. Make it look polished and modern. ``` ```text title="Say this or copy this prompt" theme={null} Create a personal portfolio website for me. My name is [Your Name]. I want a modern, eye-catching design with: - A bold hero section with a gradient background and my name - An "About Me" section with a circular photo placeholder - A "Skills" section showing my top skills with visual indicators - A "Projects" section with 3 placeholder project cards - A footer with social media icon links Use HTML and CSS. Make it fully responsive for mobile devices. Add smooth scroll behavior and subtle hover animations on buttons and cards. Use a vibrant but professional color palette. ``` ```text title="Say this or copy this prompt" theme={null} Create a professional resume-style website. My name is [Your Name]. I am looking for work in [your field]. Include these sections: - Professional header with my name, job title, and a brief summary - Work Experience section (use placeholder content for 2-3 roles) - Education section (use placeholder content) - Skills section organized by category - Contact section with email, LinkedIn, and phone placeholder Use HTML and CSS. Make it clean, minimal, and employer-friendly. Use a neutral, professional color scheme (navy blue or dark gray). Make it responsive and print-friendly so it can be saved as a PDF. ``` **Remember to replace `[Your Name]` and `[your field]`** with your actual information before pasting the prompt! If you are speaking with Wispr Flow, just say your real name and field naturally. Don't like the result? Just tell Gemini what to change — see Step 6 for ready-to-use follow-up prompts. Say or type this prompt: ```text title="Say this or copy this prompt" theme={null} Can you help me open this website in my browser so I can preview it? Please start a local server or just open the index.html file directly. ``` **Or do it yourself:** find `index.html` in your `my-website` folder and double-click it. It will open in your browser. Your website is only on your computer right now — not on the internet yet. We'll publish it in the next section. Not happy with the result? That's normal — and that's the whole point of vibe coding! Say or copy any of these follow-up prompts into Gemini CLI: ```text title="Say this or copy this prompt" theme={null} Change the color scheme to blue and white. Keep the overall layout the same. ``` ```text title="Say this or copy this prompt" theme={null} Add a profile photo section with a round border at the top of the page. Use a placeholder image for now. ``` ```text title="Say this or copy this prompt" theme={null} Add a sticky navigation bar at the top with links to each section of the page. It should stay visible when I scroll down. ``` ```text title="Say this or copy this prompt" theme={null} Add a dark mode toggle button in the top-right corner. When clicked, it should switch the entire website between light and dark themes. Save the user's preference so it persists when they refresh the page. ``` **The vibe coding loop:** describe → review → refine. Keep going until you love it! You can send as many prompts to Gemini CLI as you want — there's no limit on iterations. Speaking your requests often feels faster and more natural than typing them. ## Go Further — Try Your Own Requests The prompts above are just the beginning. Here are some creative requests to show how flexible natural language is: ```text title="Say this or copy this prompt" theme={null} Add a testimonials section with 3 placeholder quotes from colleagues. Use a card layout with a subtle shadow on each card. ``` ```text title="Say this or copy this prompt" theme={null} Add a timeline section showing my career journey. Use placeholder dates and roles. Make it visually interesting with a vertical line connecting each milestone. ``` ```text title="Say this or copy this prompt" theme={null} Make the hero section more dramatic — add a background image with a dark overlay and large white text. Use a placeholder image for now. ``` **This is the magic of natural language.** You do not need to know HTML or CSS — just describe what you want. If Gemini is not sure what you mean, it will ask you to clarify. ## Troubleshooting Make sure you're opening the `index.html` file, not a folder. If the file is empty, ask Gemini CLI: "The index.html file appears to be empty. Can you check and regenerate it?" Ask Gemini CLI to fix it: ```text theme={null} The layout looks broken — things are overlapping or not aligned properly. Can you fix the CSS so everything displays correctly? ``` Tell Gemini CLI: ```text theme={null} I want to start completely fresh. Delete the current files and create a new website from scratch. [Then describe what you want] ``` Wispr Flow may occasionally mishear technical terms or proper nouns. You can review and correct the text in Gemini CLI before pressing Enter. If voice input is causing too many errors, switch to typing or pasting prompts instead. Happy with your website? Head to [Deploy your website](/tutorial/personal-website/deploy) to put it on the internet for free!