Keep Going

Congratulations — you built and deployed your own website without writing a single line of code! Let's look at what you achieved, how to keep improving, and where to go next.

What You Built

A personal website that:

• Was designed by you and built by AI — using your voice or keyboard
• Is live on the internet for anyone to visit
• Can be updated anytime with a single spoken or typed prompt
• Cost you absolutely nothing

What You Learned

The skill that matters most isn't coding — it's communication. You learned to describe what you want clearly, review the result, and iterate until it's right. Whether you spoke your prompts or typed them, the core skill is the same — and it works with any AI tool, in any field.

Here's what you practised:

• Using the terminal — running commands and navigating folders
• Talking to AI — speaking or writing clear prompts that get the result you want
• Iterating — refining your website step by step
• Using git and GitHub — storing code and deploying a website
• Problem solving — describing issues and letting AI help fix them

---

How to Update Your Website

Whenever you want to make changes to your website:

1. Open your terminal in the project folder

   Navigate to your my-website folder and open a terminal there (just like you did before).

2. Start Gemini CLI

   gemini

3. Describe what you want to change

   Say or type what you want to update — just like you did when building.

4. Push your changes

   Say this or copy this prompt

   I've made changes to my website. Please:
   1. Add all changed files to git
   2. Create a commit with a descriptive message
   3. Push the changes to GitHub
   My website should automatically update on GitHub Pages in 1-2 minutes.

---

Ideas to Try

●Add a blog

Create a blog section with posts you can update over time.

●Custom domain

Use your own domain name (like yourname.com) instead of github.io.

●Animations

Add scroll animations and transitions to make your site feel alive.

●Dark mode

Let visitors switch between light and dark themes.

Here are ready-to-use prompts for each idea — say them or copy them into Gemini CLI:

Add a blog section

Say this or copy this prompt

Add a blog section to my website. I want:
- A "Blog" page linked from the navigation
- A list of blog posts with titles, dates, and short previews
- Create 2 sample blog posts with placeholder content
- Each blog post should have its own page with full content
- Add a "Back to blog" link on each post page
Make it match the existing design of my website.

Set up a custom domain

Say this or copy this prompt

I want to use a custom domain for my GitHub Pages website.
My domain is [your-domain.com]. Please:
1. Create a CNAME file in my repository with my domain
2. Tell me what DNS records I need to set up with my domain provider
3. Explain how to verify it's working

Add scroll animations

Say this or copy this prompt

Add smooth scroll animations to my website. I want sections to
fade in and slide up as the user scrolls down the page. Use CSS
animations with a JavaScript Intersection Observer — no external
libraries. Keep it subtle and professional.

Add a dark mode toggle

Say this or copy this prompt

Add a dark mode toggle button in the top-right corner of my website.
When clicked, it should switch the entire website between light and
dark themes. Save the user's preference in localStorage so it
persists when they refresh the page. Make sure all text remains
readable in both modes.

---

Supercharge Your AI: Agent Skills

Think of skills as superpowers you can install to make Gemini CLI even smarter at specific tasks.

Skills are based on the open Agent Skills standard. Gemini automatically detects when a skill is relevant and activates it.

How Skills Work

Installing Skills

1. Browse available skills

   Say this or copy this prompt

   Show me how to list and manage Agent Skills in Gemini CLI.
   Run the command to list all currently installed skills.

2. Install a skill from a Git repository

   Say this or copy this prompt

   I want to install an Agent Skill for Gemini CLI. Please help me
   install a skill from this repository: [paste skill repo URL here]
   
   Use the "gemini skills install" command.

3. Install a skill from a local directory

   Say this or copy this prompt

   I have a skill directory on my computer at [path]. Please help me
   install it as a Gemini CLI Agent Skill using "gemini skills install".

Try It: Install the Frontend Design Skill

Now let's install a real skill that will make a noticeable difference in your projects. The frontend-design skill teaches Gemini CLI to create distinctive, polished web interfaces instead of generic-looking output. It comes from Anthropic's open-source skills library.

1. Install the frontend-design skill

   Run this command in your terminal:

   gemini skills install https://github.com/anthropics/skills.git --path skills/frontend-design

2. Try it out on your website

   Now ask Gemini to redesign your personal website using its new skill:

   Say this or copy this prompt

   Redesign my personal website with a more polished, distinctive look.
   Use thoughtful typography, a cohesive color palette, subtle animations,
   and creative spatial composition. Avoid generic or cookie-cutter AI aesthetics.

The frontend-design skill focuses on typography choices, color themes, motion and animation, spatial composition, and backgrounds — guiding Gemini to produce designs that feel intentional and crafted rather than template-driven.

What does this skill teach Gemini?

Behind the scenes, the skill provides Gemini with design guidelines including:

• Typography — Use distinctive font pairings instead of defaults; vary weight, size, and spacing for visual hierarchy
• Color — Build cohesive color themes with purposeful contrast and accent colors, not generic palettes
• Motion & animation — Add subtle transitions and micro-interactions that feel natural and enhance usability
• Spatial composition — Use asymmetric layouts, intentional whitespace, and layered depth instead of rigid grids
• Backgrounds & texture — Incorporate gradients, patterns, or subtle textures to add richness and depth

These guidelines activate automatically whenever Gemini detects a frontend task.

This skill comes from Anthropic's open-source Agent Skills repository and follows the Agent Skills open standard. You can browse the repository for more skills or even create your own!

Managing Skills

List all skills

gemini skills list

Install from Git

gemini skills install https://github.com/user/repo.git

Install from subdirectory

gemini skills install https://github.com/org/repo.git --path skills/frontend-design

Install a .skill file

gemini skills install /path/to/my-expertise.skill

Enable or disable a skill

gemini skills enable my-skill

gemini skills disable my-skill

Uninstall a skill

gemini skills uninstall my-skill

In-session commands: While chatting with Gemini CLI, you can type /skills list to see all available skills, /skills enable <name> to enable one, or /skills disable <name> to turn one off.

Key Concepts

●Workspace Skills

.gemini/skills/ — shared with your team via git

●User Skills

~/.gemini/skills/ — personal skills across all projects

●Extension Skills

Bundled with installed extensions

Skills are like apps for your AI. The more relevant skills you install, the smarter Gemini CLI becomes for your specific needs. Explore agentskills.io for community-shared skills.

---

Reflect

Take a few minutes to think about your experience:

What surprised you about working with AI?

Many people are surprised by how much can be accomplished just by describing what they want clearly — whether spoken or typed. Was there a moment where Gemini CLI's output exceeded your expectations? What about a moment where you had to refine your prompt?

Did voice input change how you work?

If you tried Wispr Flow, did speaking your prompts feel different from typing them? Many people find that speaking produces more natural, detailed descriptions — which often leads to better results from AI. Think about where else voice input could speed up your workflow.

How could AI tools help your career?

Think about your job or job search. Could you use a personal website as an online portfolio? Could you automate parts of your workflow with AI tools? What other projects could you build?

What would you build next?

Now that you know the workflow — describe, build, review, iterate — what else could you create? A portfolio for your work? A website for a small business? A tool that helps with your daily tasks?

---

Resources

Resource	Description	Link
Gemini CLI docs	Official documentation for Gemini CLI	github.com/google-gemini/gemini-cli
Wispr Flow	Voice input for any application	wisprflow.ai
GitHub Pages docs	Learn more about hosting websites on GitHub	docs.github.com/pages
Agent Skills	Open standard for AI agent skills	agentskills.io
Unsplash	Free high-quality photos for your website	unsplash.com
Google Fonts	Free fonts to customise your website typography	fonts.google.com
Coolors	Generate beautiful colour schemes	coolors.co

Thank you for completing this tutorial! You've gone from zero to a live personal website — and more importantly, you've learned how to work with AI to build real things, using your voice or keyboard. Take these skills with you into your next project.