🚀 How I Built This Website

Get Your Tools Ready

First things first, you'll need a few things installed on your computer. Don't worry, they're all free and pretty easy to set up:

• A code editor (I use VS Code - it's free and lightweight)
• Git (for version control - trust me, you need this)
• A GitHub account (where your code will live)
• A Netlify account (this makes your site go live)

Create Your Project Folder

Make a folder somewhere on your computer for your website. I called mine "NetlifyPage" but you can name it whatever you want. This is where all your files will live.

mkdir NetlifyPage
cd NetlifyPage

Initialize Git in Your Project

Open your terminal (or Git Bash) in your project folder and run this command:

git init

This tells Git to start tracking changes in your folder. It's like turning on auto-save but way cooler.

Create a Repository on GitHub

Head over to GitHub and create a new repository. Don't add any files yet - we'll push our local files to it. Name as you wish.

After creating it, GitHub will show you some commands. We need these two:

git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
git branch -M main

Push Your First Code

Create a simple index.html file (even just "Hello World" is fine), then:

git add .
git commit -m "First commit - let's go!"
git push -u origin main

Boom! Your code is now on GitHub! 🎉

Connect GitHub to Netlify

This is where the magic happens. Go to Netlify and:

1. Click "Add new site" → "Import an existing project"
2. Choose "Deploy with GitHub"
3. Authorize Netlify to access your GitHub
4. Select your repository
5. Leave all the settings as default (they're smart like that)
6. Click "Deploy site"

In like 30 seconds, your site is LIVE ON THE INTERNET! 🌍

Custom Domain (Optional)

Netlify gives you a random URL like "amazing-albert.netlify.app". You can change this to something cooler in Site settings → Domain management. Or buy a custom domain...

Using Claude as Your Coding Buddy

Okay, here's where it gets really fun. Claude AI is insanely good at helping you build stuff. Here's how I used it:

• HTML Structure: "Hey Claude, can you help me create a portfolio website with a hero section, projects grid, and contact info?"
• Styling: "Make this look modern with a glassmorphism effect and smooth animations"
• JavaScript: "I want an interactive background that responds to mouse movement"

The key is being specific about what you want. Claude can literally write entire components for you! (I personally recommend getting Claude's Pro Plan. It's not very expensive, and it lets you use Claude Opus 4 many more times. It's more powerful for managing larger scripts.)

The CodePen Trick

Here's something super cool - Claude can read and understand CodePen links! Found a sick effect on CodePen? Just share the link with Claude and say something like:

"Hey Claude, I found this cool cursor trail effect on CodePen: [link]
Can you help me implement something similar for my site?"

Claude will analyze the code and create a version that fits perfectly into your project. That's how I got those sweet background effects and cursor trails! 🎨

The Magic Auto-Upload Script

Typing git commands every time gets old FAST. So I made a simple .bat file (Windows) that does everything in one click:

git add . && git commit -m "Auto commit" && git push

Save this in a file called upload.bat in your project folder. Now you just double-click it and BAM - your changes are live in 30 seconds!

Better Commit Messages

"Auto commit" is lazy (guilty 🙋‍♂️). Here's a better version that asks for a message:

@echo off
set /p msg="Enter commit message: "
git add . && git commit -m "%msg%" && git push
pause

Now you can write meaningful commit messages without typing all the Git commands!

Adding Those Sweet Effects

Want your site to stand out? Here's what I added to mine:

• Animated gradient background: Asked Claude for a WebGL gradient that moves
• Cursor trail effect: Found one on CodePen, Claude adapted it
• Glassmorphism cards: That frosted glass look is just CSS backdrop-filter
• Smooth animations: CSS transitions and transforms everywhere!

Resources That Saved My Life

Here are the places I go when I need inspiration or help:

You Did It!

That's literally it! You now have a website that:

• ✅ Lives on the internet for FREE
• ✅ Updates automatically when you push changes
• ✅ Looks professional AF
• ✅ Was built with help from AI

The best part? You can keep improving it. Every time you learn something new or see something cool, just add it to your site. It's YOUR space on the internet!