Build a Portfolio Website with AI as a Non-Developer

Problem

Required Tools

Solution Steps

# === Portfolio planning notes example ===
# (Replace the content below with your own and organize in a notepad)

# Basic Info
# Name: Jisoo Kim
# Title: UI/UX Designer
# One-line bio: I create user-centered, intuitive designs
# Detailed bio: I have 3 years of experience designing UI/UX for various apps
#               and web services. I handle everything from user research to prototyping.

# Project List
# 1. Mobile Banking App Redesign
#    - Description: Redesigned the complex UI of an existing banking app based on user testing
#    - Technologies: Figma, User Research, Prototype
#
# 2. Travel Platform Web Design
#    - Description: A single platform for booking trips and managing itineraries
#    - Technologies: Responsive Design, Figma, Adobe XD
#
# 3. Brand Identity Design
#    - Description: Designed logo, color system, and brand guidelines for a startup
#    - Technologies: Illustrator, Photoshop, Branding

# Skills
# Figma, Sketch, Adobe XD, Photoshop, Illustrator

# Contact
# Email: jisoo@email.com
# LinkedIn: linkedin.com/in/jisoo
# Behance: behance.net/jisoo

# === Paste into claude.ai - Code generation prompt ===

"Create a portfolio website as a single HTML file with the following requirements.
Include all CSS and JavaScript inside the HTML file.

## Basic Info
- Name: Jisoo Kim
- Title: UI/UX Designer
- Bio: I create user-centered, intuitive designs.
  I have 3 years of experience designing UI/UX for various apps and web services.

## Section Structure
1. Hero: Name, title, bio, CTA buttons (View Projects, Contact Me)
2. About: Detailed self-introduction (profile photo on the left + text on the right)
3. Projects: 3 cards
   - Mobile Banking App Redesign (Figma, User Research)
   - Travel Platform Web Design (Responsive, Figma)
   - Brand Identity Design (Illustrator, Branding)
4. Skills: Display as tags (Figma, Sketch, Adobe XD, Photoshop, Illustrator)
5. Contact: Email, LinkedIn links + simple contact form

## Design Requirements
- Minimal and modern design
- Main color: #2563eb (blue)
- Dark mode / light mode toggle button (top right)
- Smooth scroll + fade-in animations
- Responsive for mobile/tablet/desktop
- Hover effect on project cards
- Written in English
- Use placeholders for images (with comments for easy replacement later)

Show me the Artifact preview as well."

# ^ Replace the name, title, projects, skills, and colors with your own.

# === Design modification prompt examples for Claude ===
# (Continue in the same conversation)

# [Change colors]
"Change the main color to green (#10b981).
Make it look good in dark mode too."

# [Modify hero section]
"Add a gradient animation to the hero section background.
A slow transition from blue to purple."

# [Modify project cards]
"Make the project cards bigger.
Widen the image area and show more description text."

# [Modify skills section]
"Display skills as progress bars (proficiency bars) instead of tags.
Figma 90%, Photoshop 80%, etc."

# [Add profile photo area]
"Add a round profile photo area to the About section.
Use a placeholder for now, so I can replace it later."

# [Modify contact section]
"Remove the email input form from the contact section,
and instead cleanly display 3 icon links: email, LinkedIn, GitHub."

# [Add navigation]
"Add a fixed navigation bar at the top.
With Home, About, Projects, Skills, Contact menu items,
and clicking each one smoothly scrolls to that section."

# === Final review prompt for Claude ===

"Do a final review of this portfolio code:
1. Check that all elements are visible in dark mode
2. Responsive: Support 375px (mobile), 768px (tablet), 1280px (desktop)
3. Add SEO meta tags and Open Graph tags
4. Add a favicon
5. Smooth fade-in animations on scroll
6. Proper href links on all a tags
7. Add alt text to images (accessibility)

Fix everything that needs fixing and show me the final code."

# === If dark mode is not working ===
"Add a dark mode toggle button:
- Fixed in the top right corner
- Clicking toggles between light and dark
- Use the system setting (OS dark mode) as default
- Remember the chosen theme so it persists on next visit"

# === Checking share preview ===
# When you share the URL on social media, the title, description,
# and image appear as a preview.
# OG tags must be properly configured for this to work.

# === Deployment without terminal (recommended for non-developers) ===
#
# [GitHub Pages]
# 1. Go to github.com -> Log in
# 2. Click + button -> New repository
# 3. Name: yourusername.github.io -> Create
# 4. Click "uploading an existing file"
# 5. Drag and drop index.html + images folder
# 6. Click "Commit changes"
# 7. In 5 minutes, check at https://yourusername.github.io!
#
# [Vercel]
# 1. After creating the GitHub repository above
# 2. Go to vercel.com -> Log in with GitHub
# 3. New Project -> Select repository -> Deploy
# 4. Done! A URL is generated.
#
# === When making changes ===
# 1. Ask Claude for changes -> Copy new code
# 2. Click index.html in the GitHub repository
# 3. Click the pencil icon (Edit)
# 4. Select all existing code (Ctrl+A) -> Paste new code (Ctrl+V)
# 5. Click "Commit changes"
# 6. Auto-reflects in a few minutes!

# === Repository name important note ===
# For GitHub Pages, the repository name must be exactly:
#   yourusername.github.io (yourusername = your GitHub username)
# Using a different name requires additional configuration.
# Case must match exactly!

# === Frequently used expansion prompts ===

# [Add a project]
"Add one more card to the projects section:
- Title: Healthcare App Dashboard
- Description: Designed a dashboard UI for visualizing user health data
- Technologies: Figma, Data Visualization, Responsive
- Image: Use a placeholder"

# [Add blog links]
"Add a 'Writing' section below the projects section.
- 3 blog post links
- In title, date, one-line description format"

# [Add testimonials section]
"Add a 'Testimonials' section below the projects section.
- 2 cards: Name, title, one-line testimonial, profile avatar
- Display in a slider/carousel format"

# [Add animation]
"Add a typing animation to the hero section.
'UI/UX Designer | Product Designer | Freelancer'
should type out one character at a time and cycle through."

# [Multi-language support]
"Create a French version too. Save as fr.html.
Add a language toggle button in the hero section."

# [Performance optimization]
"Load images with lazy loading.
Also optimize scroll animations with Intersection Observer."

Core Code

Ask Claude to build your portfolio based on this structure. It uses CSS variables for dark mode, Grid auto-fill for responsive project cards, and is contained in a single HTML file ready for deployment anywhere.

<!-- Portfolio core structure - Ask Claude to build on this structure -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jisoo Kim | UI/UX Designer Portfolio</title>
  <meta name="description" content="The portfolio of Jisoo Kim, creating user-centered, intuitive designs">
  <meta property="og:title" content="Jisoo Kim | UI/UX Designer">
  <meta property="og:description" content="I create user-centered, intuitive designs">
  <style>
    /* CSS variables for light/dark mode management */
    :root {
      --bg: #ffffff; --bg2: #f8fafc; --text: #1e293b;
      --text2: #64748b; --accent: #2563eb; --card: #fff;
    }
    [data-theme="dark"] {
      --bg: #0f172a; --bg2: #1e293b; --text: #f1f5f9;
      --text2: #94a3b8; --accent: #3b82f6; --card: #1e293b;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }

    /* Hero: Full screen, gradient background */
    .hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--accent), #7c3aed);
      color: #fff; text-align: center; padding: 2rem;
    }
    .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }

    /* Project cards: responsive grid */
    .projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
    .card {
      background: var(--card); border-radius: 16px; overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s; /* Slight lift on hover */
    }
    .card:hover { transform: translateY(-8px); }
    .card img { width: 100%; height: 200px; object-fit: cover; }
    .card-body { padding: 1.5rem; }

    /* Responsive: single column on mobile */
    .container { max-width: 1100px; margin: 0 auto; padding: 4rem 1.5rem; }
    @media (max-width: 768px) { .projects { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <!-- Dark mode toggle -->
  <button onclick="toggleTheme()" style="position:fixed;top:1.5rem;right:1.5rem;z-index:1000">
    Toggle Theme
  </button>

  <!-- Hero -->
  <section class="hero">
    <div>
      <h1>Hi, I'm Jisoo Kim</h1>
      <p>I create user-centered, intuitive designs</p>
    </div>
  </section>

  <!-- Projects -->
  <section id="projects" class="container">
    <h2>Projects</h2>
    <div class="projects">
      <div class="card">
        <img src="images/project1.png" alt="Mobile Banking App Redesign">
        <div class="card-body">
          <h3>Mobile Banking App Redesign</h3>
          <p>User testing-based UI redesign</p>
        </div>
      </div>
      <!-- Repeat cards -->
    </div>
  </section>

  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.dataset.theme === 'dark' ? 'light' : 'dark';
      html.dataset.theme = next;
      localStorage.setItem('theme', next);
    }
    // Apply system preference or saved value
    const saved = localStorage.getItem('theme');
    if (saved) document.documentElement.dataset.theme = saved;
    else if (matchMedia('(prefers-color-scheme:dark)').matches)
      document.documentElement.dataset.theme = 'dark';
  </script>
</body>
</html>

Common Mistakes

Related liminfo Services