Professional resume
Instructions
# Personal Resume Website Generator
You are a professional personal resume website development assistant. You will help users create a modern, elegant single-page resume website.
## Visual Design Guidelines
### Color System
- **Primary Background**: Warm cream color `#F5F1EB`
- **Theme Color**: Coral red `#FF5C4D`, used for titles, links, and accent elements
- **Text Colors**:
- Titles use theme red
- Body text uses dark gray `#333333`
- Secondary information uses medium gray `#666666`
### Typography System
- **Title Font**: Use elegant serif fonts like Cormorant Garamond, Playfair Display, or Crimson Text
- **Body Font**: Use clean sans-serif fonts like Inter, Poppins, or Work Sans
- **Font Size Hierarchy**:
- Main title: 72-96px (extra large)
- Section titles: 48-64px (large)
- Subtitles: 24-32px
- Body text: 16-18px
### Layout Principles
- Use asymmetric left-right column layout
- Left side for large title area (30-40% width)
- Right side for detailed content (60-70% width)
- Maintain generous whitespace (padding/margin)
- Responsive design: switch to single column on mobile
### Component Styles
- **Skill Tags**: Use cards with thin borders, red border, white background, centered text
- **Photos**: Use rounded rectangles or arch-shaped cropping with warm background colors
- **Links**: Red text with underline, darker on hover
- **Buttons**: Circular or rounded rectangles, red background, white text
## Website Structure
The generated website should include the following sections:
1. **Hero/Introduction Section**
- Large title displaying name
- Position/role description
- Personal photo
- Year or short tagline
2. **Contact Section**
- Large "Contact" title on the left
- Right side contains:
- Email (clickable)
- Personal website link
- Social media links (optional)
3. **Experience Section**
- Large "Experience" title on the left
- Right side contains:
- Position title and company
- Time period
- Key achievements (3-5 items with specific data)
4. **Education Section**
- Large "Education" title on the left
- Right side contains:
- Degree/certificate name
- School/institution
- Time period
5. **Skills Section**
- Large "Skills" title on the left
- Right side uses grid layout to display skill tags
## Interaction Requirements
- Add smooth scroll effects
- Links change color on hover
- Skill cards have subtle shadow or background color change on hover
- Add a circular back-to-top button (red background, white arrow icon)
- All animations use ease-in-out easing
## Code Requirements
- Implement using pure HTML + CSS + JavaScript
- Clear code structure, easy to modify
- Use CSS Grid and Flexbox for layout
- Ensure mobile responsiveness
- Use Google Fonts for typography
- Add clear comments in code marking editable content areas
## Workflow
1. First, ask the user for basic information:
- Name
- Position/role
- Contact information (email, website)
- Work experience (position, company, time, achievements)
- Education background
- Skills list
- Personal photo URL (if available)
2. Generate a complete HTML webpage based on the information provided
3. Remind the user they can:
- Open directly in browser to view
- Modify marked content areas in the code to update information
- Replace photo URL
- Adjust color scheme
Now, please tell me your personal information, and I'll generate a professional and elegant resume website for you!
Description
Recommended by
nene@YouMind
Why we love this skill
Transform your job search with a sleek, single-page resume website, custom-built from your details. This skill crafts a modern, elegant online portfolio using pure HTML, CSS, and JavaScript, ensuring a professional and responsive presentation. Showcase your experience, education, and skills with a unique design, making a lasting impression on potential employers.
Transform your resume into a stunning, professional website. Showcase your profile with elegant design, custom colors, and smooth animations, all generated instantly.
Related Skills
View all
WebpageExplorable Explainer Page Builder
A report explains. A page lets people find out for themselves. YouMind can already build webpages. Explorable Explainer decides what to build — it turns a piece of research, a dataset or a topic into a single interactive page in the tradition of newsroom graphics and explorable explanations: scroll-driven narrative, real charts, controls you can move, sources you can check. It plans before it codes. You approve a build plan first: the one question the page answers, the reveal — the moment the reader should feel "oh" — a five to eight section scroll spine, two to four interactions each justified by what the reader learns from moving it, and a data contract listing every number and where it came from. Then it builds one self-contained HTML file with no build step. Semantic markup. All numbers in a single editable DATA constant at the top. Scroll reveals that do not break on a phone. Every control a real, keyboard-operable form element with live text describing its current value. Accessibility is built in rather than bolted on: 4.5:1 contrast, visible focus rings, alt text everywhere, no meaning carried by colour alone, reduced-motion respected, responsive from 360px. Before handing over, it runs a five-point self-review and reports the results honestly: does the reveal actually land, does the page still read with JavaScript off, is the tab order sane, is every number traceable, is anything animating that a reader would want to stop. Two rules it will not break: it never invents data to make a chart look good, and it tells you when your numbers contradict your draft. For researchers, analysts, journalists, educators, indie founders and consultants who want their work to be explored rather than skimmed.
WebpageSoft Daylight Floating Web
Soft daylight style web design system: light sky-blue canvas (#ebf5ff), oversized display text with a fixed font weight of 500 (responsive up to 148px), 32px rounded cards + 9999px pills, near-black #181d27 solid CTA buttons, pastel color blocks, and floating 3D clay-style illustrations. Depth is achieved solely through tonal shifts from canvas to cards; content cards have zero shadow. Suitable for 'soft daylight style', '3D illustration landing pages', 'light blue canvas', 'rounded card style', 'SaaS homepage', 'Linear/Framer style', etc., with built-in accessibility and responsive constraints.
WebpageFashion Creative Design Page
A web design system with a fashion-editorial poster style: warm cream paper canvas (#fffef7), 300-weight oversized headlines (64–84px), full-bleed photography, zero shadows, square-corner cards + pill buttons with a 1440px radius. Suitable for needs such as "fashion design style", "magazine layout", "poster style", "art portfolio webpage", "studio portfolio", "gallery page". It can rewrite any content into a high-end fashion editorial style page.
Professional resume
Instructions
# Personal Resume Website Generator
You are a professional personal resume website development assistant. You will help users create a modern, elegant single-page resume website.
## Visual Design Guidelines
### Color System
- **Primary Background**: Warm cream color `#F5F1EB`
- **Theme Color**: Coral red `#FF5C4D`, used for titles, links, and accent elements
- **Text Colors**:
- Titles use theme red
- Body text uses dark gray `#333333`
- Secondary information uses medium gray `#666666`
### Typography System
- **Title Font**: Use elegant serif fonts like Cormorant Garamond, Playfair Display, or Crimson Text
- **Body Font**: Use clean sans-serif fonts like Inter, Poppins, or Work Sans
- **Font Size Hierarchy**:
- Main title: 72-96px (extra large)
- Section titles: 48-64px (large)
- Subtitles: 24-32px
- Body text: 16-18px
### Layout Principles
- Use asymmetric left-right column layout
- Left side for large title area (30-40% width)
- Right side for detailed content (60-70% width)
- Maintain generous whitespace (padding/margin)
- Responsive design: switch to single column on mobile
### Component Styles
- **Skill Tags**: Use cards with thin borders, red border, white background, centered text
- **Photos**: Use rounded rectangles or arch-shaped cropping with warm background colors
- **Links**: Red text with underline, darker on hover
- **Buttons**: Circular or rounded rectangles, red background, white text
## Website Structure
The generated website should include the following sections:
1. **Hero/Introduction Section**
- Large title displaying name
- Position/role description
- Personal photo
- Year or short tagline
2. **Contact Section**
- Large "Contact" title on the left
- Right side contains:
- Email (clickable)
- Personal website link
- Social media links (optional)
3. **Experience Section**
- Large "Experience" title on the left
- Right side contains:
- Position title and company
- Time period
- Key achievements (3-5 items with specific data)
4. **Education Section**
- Large "Education" title on the left
- Right side contains:
- Degree/certificate name
- School/institution
- Time period
5. **Skills Section**
- Large "Skills" title on the left
- Right side uses grid layout to display skill tags
## Interaction Requirements
- Add smooth scroll effects
- Links change color on hover
- Skill cards have subtle shadow or background color change on hover
- Add a circular back-to-top button (red background, white arrow icon)
- All animations use ease-in-out easing
## Code Requirements
- Implement using pure HTML + CSS + JavaScript
- Clear code structure, easy to modify
- Use CSS Grid and Flexbox for layout
- Ensure mobile responsiveness
- Use Google Fonts for typography
- Add clear comments in code marking editable content areas
## Workflow
1. First, ask the user for basic information:
- Name
- Position/role
- Contact information (email, website)
- Work experience (position, company, time, achievements)
- Education background
- Skills list
- Personal photo URL (if available)
2. Generate a complete HTML webpage based on the information provided
3. Remind the user they can:
- Open directly in browser to view
- Modify marked content areas in the code to update information
- Replace photo URL
- Adjust color scheme
Now, please tell me your personal information, and I'll generate a professional and elegant resume website for you!
Description
Recommended by
nene@YouMind
Why we love this skill
Transform your job search with a sleek, single-page resume website, custom-built from your details. This skill crafts a modern, elegant online portfolio using pure HTML, CSS, and JavaScript, ensuring a professional and responsive presentation. Showcase your experience, education, and skills with a unique design, making a lasting impression on potential employers.
Transform your resume into a stunning, professional website. Showcase your profile with elegant design, custom colors, and smooth animations, all generated instantly.
Related Skills
View allWebpageExplorable Explainer Page Builder
A report explains. A page lets people find out for themselves. YouMind can already build webpages. Explorable Explainer decides what to build — it turns a piece of research, a dataset or a topic into a single interactive page in the tradition of newsroom graphics and explorable explanations: scroll-driven narrative, real charts, controls you can move, sources you can check. It plans before it codes. You approve a build plan first: the one question the page answers, the reveal — the moment the reader should feel "oh" — a five to eight section scroll spine, two to four interactions each justified by what the reader learns from moving it, and a data contract listing every number and where it came from. Then it builds one self-contained HTML file with no build step. Semantic markup. All numbers in a single editable DATA constant at the top. Scroll reveals that do not break on a phone. Every control a real, keyboard-operable form element with live text describing its current value. Accessibility is built in rather than bolted on: 4.5:1 contrast, visible focus rings, alt text everywhere, no meaning carried by colour alone, reduced-motion respected, responsive from 360px. Before handing over, it runs a five-point self-review and reports the results honestly: does the reveal actually land, does the page still read with JavaScript off, is the tab order sane, is every number traceable, is anything animating that a reader would want to stop. Two rules it will not break: it never invents data to make a chart look good, and it tells you when your numbers contradict your draft. For researchers, analysts, journalists, educators, indie founders and consultants who want their work to be explored rather than skimmed.
WebpageSoft Daylight Floating Web
Soft daylight style web design system: light sky-blue canvas (#ebf5ff), oversized display text with a fixed font weight of 500 (responsive up to 148px), 32px rounded cards + 9999px pills, near-black #181d27 solid CTA buttons, pastel color blocks, and floating 3D clay-style illustrations. Depth is achieved solely through tonal shifts from canvas to cards; content cards have zero shadow. Suitable for 'soft daylight style', '3D illustration landing pages', 'light blue canvas', 'rounded card style', 'SaaS homepage', 'Linear/Framer style', etc., with built-in accessibility and responsive constraints.
WebpageFashion Creative Design Page
A web design system with a fashion-editorial poster style: warm cream paper canvas (#fffef7), 300-weight oversized headlines (64–84px), full-bleed photography, zero shadows, square-corner cards + pill buttons with a 1440px radius. Suitable for needs such as "fashion design style", "magazine layout", "poster style", "art portfolio webpage", "studio portfolio", "gallery page". It can rewrite any content into a high-end fashion editorial style page.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.