Create Your Own Portfolio Site — A Designer's Guide (Free & Step-by-Step)

You don’t need to be a developer. This tutorial assumes you’re a designer who’s comfortable with concepts like folders, files, and clicking buttons — not writing code from scratch. By the end, you’ll have your own portfolio site live on the web.

Part 1 — What You Need First

Before starting, make sure you have:

1. A GitHub account — github.com (free)
2. A Netlify account — netlify.com (free)
3. Node.js installed — nodejs.org — download the LTS version, run the installer, and accept the defaults
4. A code editor — VS Code or Cursor (free)

Part 2 — Get the Code Onto Your Computer

Step 1: Go to the repository

Open your browser and go to the GitHub repository that contains this portfolio (or wherever the code lives).

Step 2: Fork the repository

1. Click the Fork button (top right)
2. Choose your account when asked
3. Click Create fork

This creates a copy of the project under your own GitHub account.

Step 3: Clone it to your computer

1. On your forked repo page, click the green Code button
2. Copy the URL (e.g. https://github.com/yourusername/repo-name.git)
3. Open Terminal (on Mac: press Cmd + Space, type “Terminal”, press Enter)
4. Go to a folder where you keep projects (e.g. Documents):

cd ~/Documents

5. Run (replace the URL with your own):

git clone https://github.com/yourusername/repo-name.git

6. Press Enter. The project will download into a new folder.

Step 4: Open the project in your editor

1. Open VS Code or Cursor
2. File → Open Folder
3. Select the folder you just cloned
4. Click Open

Part 3 — Install Dependencies

The project needs some packages to run. You’ll do this once.

Step 5: Open Terminal inside the editor

1. In VS Code/Cursor, go to Terminal → New Terminal
2. A terminal panel will appear at the bottom

Step 6: Go into the frontend folder

Type this and press Enter:

cd frontend

Step 7: Install packages

Type this and press Enter:

npm install

Wait until it finishes (it can take 1–2 minutes). When you see the command prompt again, you’re done.

Part 4 — Run the Site Locally (Optional but Recommended)

Before deploying, test that everything works on your computer.

Step 8: Start the development server

In the same terminal (inside the frontend folder), type:

npm run dev

Press Enter.

Step 9: View the site in your browser

1. The terminal will show a URL, usually http://localhost:5173
2. Hold Cmd (Mac) or Ctrl (Windows) and click the URL
3. Your portfolio should open in the browser

To stop the server, press Ctrl + C in the terminal.

Part 5 — Customize Your Content

All content is controlled by simple files — no coding required.

Step 10: Change the homepage hero

1. In the project, go to: frontend/src/content/config/homepage.mdx
2. Open it and edit the text under hero:
3. Update title, subtitle, and the titles list
4. Save the file — if the dev server is running, the page will refresh automatically

Step 11: Change the About section

In the same homepage.mdx file, find the about: section and edit the content text.

Step 12: Change site navigation and tags

1. Open frontend/src/content/config/site.mdx
2. Edit the navigation: links and tagOrder: list
3. Save

Step 13: Add or edit a project / case study

1. Go to frontend/src/content/posts/
2. Duplicate an existing .mdx file and rename it (e.g. my-new-project.mdx)
3. Edit the top section (frontmatter) between the --- lines:

• title — project name
• summary — short description
• year — year (e.g. 2024)
• tags — categories (e.g. ["UX Design", "Case Study"])
• order — lower numbers appear first
• thumbnail or hero — image path (put images in frontend/public/images/)

4. Edit the rest of the file with your project description in markdown.
5. Save.

Step 14: Add images

1. Put your images in frontend/public/images/
2. In your MDX, reference them like: /images/your-image.jpg

Part 6 — Deploy to Netlify (Step-by-Step)

Follow these steps in order. Do not skip ahead.

Step 15: Push your changes to GitHub

If you edited anything, save it, then:

1. In VS Code/Cursor, open the Source Control panel (icon on the left, or Cmd + Shift + G)
2. Type a message in the box (e.g. “Customize my portfolio”)
3. Click the checkmark to Commit
4. Click Sync or Push to send changes to GitHub

Step 16: Sign in to Netlify

1. Go to app.netlify.com
2. Sign in (or create an account) — you can use “Sign up with GitHub” for convenience

Step 17: Create a new site from Git

1. On the Netlify dashboard, click Add new site → Import an existing project
2. Choose GitHub
3. If prompted, authorize Netlify to access your GitHub account
4. Search for and select your repository (the one you forked earlier)
5. Click it to continue

Step 18: Configure the build settings

Netlify needs to know where the code lives and how to build it. This project has the frontend in a subfolder.

Set these exactly:

• Base directory = frontend (because the app lives inside the frontend folder)
• Build command = npm run build (this creates the production site)
• Publish directory = dist (Vite outputs the built files here)

Step 19: Deploy

1. Click Deploy site
2. Wait 1–3 minutes — Netlify will run the build
3. When you see “Published”, the site is live
4. Click the generated URL (e.g. random-name-123.netlify.app) to view your portfolio

Step 20: Add a custom domain (optional)

1. In the Netlify dashboard, open your site
2. Go to Domain settings → Add custom domain
3. Enter your domain (e.g. yourname.com)
4. Follow Netlify’s instructions to point your domain’s DNS to Netlify
5. Netlify will handle SSL (HTTPS) automatically

Part 7 — Checklist Before You Ship

Use this list before going live:

• Hero headline and subtitle updated in frontend/src/content/config/homepage.mdx
• About section reflects your background
• Contact links (LinkedIn, email, etc.) updated in homepage.mdx or frontend/src/content/config/site.mdx
• At least one project/case study in frontend/src/content/posts/
• Favicon/logo updated (replace files in frontend/public/)
• Browser title changed in frontend/index.html (the <title> tag)
• All changes committed and pushed to GitHub
• Netlify build completed successfully
• Site opens and looks correct at the Netlify URL

Quick Reference — File Map

Troubleshooting

“npm: command not found” — Install Node.js from nodejs.org and restart your terminal.

Build fails on Netlify — Double-check that Base directory is frontend, Build command is npm run build, and Publish directory is dist.

Site is blank or 404 — Ensure the Publish directory is dist, not frontend/dist.

Images don’t show — Put them in frontend/public/images/ and reference them as /images/filename.jpg.

Summary

1. Fork the repo → clone it → open in an editor
2. Run cd frontend then npm install
3. Edit homepage.mdx, site.mdx, and files in content/posts/
4. Commit and push to GitHub
5. In Netlify: Add site → Connect GitHub → Set Base: frontend, Build: npm run build, Publish: dist
6. Deploy and share your live portfolio URL

That’s it. You’ve just built and shipped your own portfolio.