SimpleUPDocs Log in
Docs › Step-by-step tutorials

Build a Personal Website

Build a personal website that showcases your skills, experience, and personality.

What You’ll Create

A professional personal website featuring:

Step 1: Generate the Website

Enter this prompt in your workspace:

Create a modern personal website for a software developer named "Alex Chen" with:
- Hero section with professional photo placeholder and tagline
- About me section with bio
- Skills section: JavaScript, React, Node.js, Python, AWS
- Featured projects (3 projects with descriptions)
- Work experience timeline
- Contact form
- Social links: GitHub, LinkedIn, Twitter
- Minimal, professional design

Step 2: Personalize the Hero

Use Element Editor to customize:

Update the hero section with:
- Animated greeting text
- Professional title
- Brief one-line description
- Call-to-action buttons: "View Work" and "Contact Me"
- Subtle background pattern

Step 3: Add Project Showcase

Use Block Creator for project cards:

Create a projects section with 3 cards showing:
- Project screenshot
- Project name
- Tech stack tags
- Brief description
- "View Project" and "GitHub" buttons

Step 4: Create Experience Timeline

Add work history:

Design a vertical timeline showing:
- Company name and logo
- Job title
- Date range
- Key achievements (2-3 bullet points)
- Alternating left/right layout

Step 5: Add Skills Visualization

Enhance skills section:

Display skills with:
- Skill name
- Proficiency level indicator
- Years of experience
- Grouped by category (Frontend, Backend, Tools)

Step 6: Set Up Contact Form

Configure the contact section:

Create a contact form with:
- Name field
- Email field
- Subject dropdown
- Message textarea
- Send button
- Alternative: direct email link

Step 7: Connect Custom Domain

In Settings → Domains:

  1. Add your personal domain (e.g., alexchen.dev)
  2. Configure DNS records
  3. Wait for SSL certificate

Tips for Personal Websites