Simple website building test
Test simple website building capabilities and design
Prompt
Create and design a portfolio website for John Doe
A system prompt was added to support web rendering
Of course! Let's create a complete design and content plan for a portfolio website for "John Doe."
To make this portfolio compelling, we'll first invent a persona for John Doe.
**Persona: John Doe, UX/UI Designer & Front-End Developer**
* **Specialty:** Creating clean, user-centric, and accessible digital experiences.
* **Vibe:** Modern, minimalist, professional, but with a touch of personality.
* **Goal:** To attract freelance clients or a full-time position at a tech company.
---
### **Website Design & Structure**
Here is a comprehensive breakdown of the website, from its branding and color palette to the content of each page.
#### **1. Branding & Visual Identity**
* **Logo:** A simple, clean monogram: **"JD"**. It could be a custom-designed ligature or just two letters in a stylish, modern font.
* **Color Palette (Dark Mode Theme):** Dark themes are popular in the tech/design world. They are sleek and make visuals pop.
* **Background:** Near-Black (`#121212`)
* **Primary Text:** Off-White (`#E0E0E0`)
* **Accent Color:** Vibrant Electric Teal (`#00f5c3`) - Used for links, buttons, and highlights.
* **Secondary Color:** Muted Grey (`#333333`) - Used for card backgrounds and borders.
* **Typography:**
* **Headings:** **Poppins** (Bold, Semi-Bold) - A modern, geometric sans-serif that is friendly and clean.
* **Body Text:** **Inter** (Regular) - A highly readable sans-serif font designed for screens.
---
### **2. Website Pages & Content**
The site will be a single-page scrolling experience for the main sections, with dedicated pages for individual case studies.
**Navigation Bar (Sticky):**
* [ JD ] (Logo, links to Home)
* Work
* About
* Contact
* [ Get in Touch ] (Button)
---
#### **Page Section 1: Hero**
**(This is the first thing a visitor sees)**
* **Layout:** Full-screen. John Doe's name and title are prominent. A professional, friendly photo of John is on the right, slightly overlapping a subtle, abstract background graphic.
* **Headline (Large, Poppins Bold):**
> **John Doe.**
> **UX Designer & Front-End Developer.**
* **Sub-headline (Inter, slightly smaller):**
> I design and code beautiful, user-centric interfaces that are intuitive and accessible.
* **Call-to-Action (CTA) Buttons:**
* Primary Button (Teal background): `[ View My Work ]` (Scrolls down to the Work section)
* Secondary Button (Outlined): `[ Get in Touch ]` (Scrolls down to the Contact section)
---
#### **Page Section 2: Featured Work (The "Work" Section)**
* **Layout:** A curated grid of 3-4 of his best projects. Each project is a large, clickable card.
* **Section Title:** `Selected Work`
* **Project Card Design:**
* **Visual:** A high-quality mockup of the project (e.g., app on a phone, website on a laptop).
* **Hover Effect:** On hover, the image scales up slightly, an overlay with the accent color appears, and a "View Case Study" text fades in.
* **Content on Card:**
* **Project Title:** e.g., "Nova - Fintech Mobile App"
* **Tags:** `UX Research`, `UI Design`, `React Native`
**Example Projects:**
1. **Nova - Fintech Mobile App:** A mobile banking app focused on budgeting. (Showcases mobile UX/UI skills).
2. **Orion - E-commerce Platform:** A website redesign for a sustainable fashion brand. (Showcases web design and front-end development).
3. **Helios - SaaS Dashboard:** A data visualization dashboard for a marketing analytics company. (Showcases complex UI and data design).
---
#### **Page Section 3: About Me**
* **Layout:** A two-column layout. On the left, a more casual picture of John (e.g., at a coffee shop, looking thoughtful). On the right, his bio.
* **Section Title:** `About Me`
* **Bio Content:**
> Hello! I'm John, a designer and developer with over 5 years of experience in crafting engaging digital experiences. My journey into tech began with a fascination for how great design could solve real-world problems.
>
> My design philosophy is simple: clarity, function, and a touch of elegance. I believe in user-first design, backed by research and validated by testing. I'm proficient in the entire design process, from wireframing and prototyping in Figma to building pixel-perfect, responsive websites with HTML, CSS, and React.
>
> When I'm not pushing pixels or writing code, you can find me exploring hiking trails, brewing the perfect cup of coffee, or diving into a good sci-fi novel.
* **Skills Section (below the bio):**
* **Design:** UI/UX Design, Wireframing, Prototyping, Usability Testing, Atomic Design
* **Development:** HTML5, CSS3/SASS, JavaScript (ES6+), React, Next.js, Git
* **Tools:** Figma, Adobe XD, VS Code, GitHub
* **CTA Button:** `[ Download Resume (PDF) ]`
---
#### **Page Section 4: Contact**
* **Layout:** Simple, centered text with clear contact options.
* **Section Title:** `Let's Build Something Great`
* **Sub-headline:**
> Have a project in mind or just want to say hi? My inbox is always open.
* **Contact Information:**
* **Email Button:** `[ hello@johndoe.design ]` (This is a `mailto:` link)
* **Social Links:** Icons for **LinkedIn**, **GitHub**, and **Dribbble**.
---
### **3. The Case Study Page (Template)**
When a user clicks on a project from the "Work" section, they are taken to a new page dedicated to that project.
**Page Structure for a Case Study (e.g., "Nova - Fintech App"):**
1. **Project Hero:**
* **Title:** Nova - Fintech Mobile App
* **One-liner:** Redesigning a mobile banking app to improve user engagement and simplify budgeting.
* **Hero Image:** A stunning, full-width mockup of the app's main screens.
2. **Project Overview:**
* **Role:** Lead UX/UI Designer
* **Timeline:** 6 Weeks
* **Tools:** Figma, Miro, React Native
3. **The Challenge:**
* "The original Nova app had a high user drop-off rate. User feedback indicated the interface was cluttered and the budgeting tools were confusing. The challenge was to redesign the app to be intuitive, visually appealing, and encouraging for users trying to manage their finances."
4. **The Process (Visual Storytelling):**
* **Discovery & Research:** (Include images of user personas, journey maps). "I started by conducting user interviews to understand pain points..."
* **Wireframing & Prototyping:** (Include images of low-fidelity wireframes). "I created low-fidelity wireframes to map out the core user flows..."
* **UI Design & Visuals:** (Include images of the style guide: colors, typography, icons). "The visual direction aimed for a clean, trustworthy, and modern feel..."
5. **The Solution:**
* (Showcase the final high-fidelity mockups in device frames). "The final design features a simplified dashboard, a goal-oriented budgeting tool, and a clear visual hierarchy. A dark mode was also introduced to reduce eye strain."
6. **Results & Takeaways:**
* "The redesigned app led to a **30% increase in daily active users** and a **45% reduction in user-reported issues**. This project reinforced the importance of user-centered design in creating products that people love to use."
7. **Navigation (at the bottom):**
* `[ < Previous Project ]` `[ Next Project > ]`
---
### **4. Technical Implementation & Flair**
* **Technology Stack:**
* **Front-End:** **Next.js** (for performance, SEO, and static site generation) or **React**.
* **Styling:** **Styled Components** or **Tailwind CSS**.
* **Animations:** **Framer Motion** for subtle page transitions and scroll-based animations.
* **Micro-interactions:**
* Subtle fade-in animations as the user scrolls down the page.
* Hover effects on buttons and links that provide satisfying feedback.
* A custom cursor, perhaps a small dot that expands over clickable elements.
* **Accessibility:**
* Ensure all colors have proper contrast ratios (WCAG AA compliant).
* Use semantic HTML (`<nav>`, `<main>`, `<section>`).
* All images have descriptive `alt` tags.
* **Responsiveness:** The design is mobile-first and looks flawless on all screen sizes, from a phone to a large desktop monitor.Drag to resize
Absolutely! Below you’ll find a thoughtfully structured and visually appealing single-page **portfolio website** for "John Doe". This example uses **HTML** and **CSS** only, ensuring you can copy, edit, and run it immediately. The content and design are crafted for a professional, modern feel.
---
## 1. Folder Structure
You can keep everything in one file for simplicity, but for expansion, use this structure:
```
/portfolio/
index.html
style.css
images/
portrait.jpg
```
*(You can use a placeholder image for `portrait.jpg`.)*
---
## 2. HTML (index.html)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">John Doe</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section class="hero">
<img src="images/portrait.jpg" alt="John Doe">
<div>
<h1>Hello, I'm <span>John Doe</span></h1>
<p>Frontend Developer | UI/UX Enthusiast | Problem Solver</p>
<a href="#contact" class="btn">Contact Me</a>
</div>
</section>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>
I am a passionate frontend developer with 5+ years of experience building modern web applications. I love crafting engaging user experiences and bringing ideas to life through thoughtful code and design. Let's work together to create something amazing!
</p>
<ul class="skills">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React</li>
<li>Figma</li>
<li>Tailwind CSS</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project-list">
<div class="project">
<img src="https://source.unsplash.com/400x250/?website,code" alt="Project 1">
<h3>Modern Portfolio</h3>
<p>A sleek and responsive personal portfolio template built with React and Tailwind CSS.</p>
<a href="#" target="_blank">View Live</a>
</div>
<div class="project">
<img src="https://source.unsplash.com/400x250/?dashboard,app" alt="Project 2">
<h3>Analytics Dashboard</h3>
<p>An interactive dashboard for visualizing business analytics, featuring real-time updates.</p>
<a href="#" target="_blank">View Live</a>
</div>
<div class="project">
<img src="https://source.unsplash.com/400x250/?mobile,design" alt="Project 3">
<h3>UI Kit for Mobile</h3>
<p>A collection of customizable mobile UI components, designed in Figma and implemented in React Native.</p>
<a href="#" target="_blank">View Live</a>
</div>
</div>
</section>
</main>
<section id="contact">
<h2>Contact</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Email Address" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
<div class="social-links">
<a href="https://github.com/" target="_blank">GitHub</a>
<a href="https://linkedin.com/" target="_blank">LinkedIn</a>
<a href="mailto:john.doe@email.com">Email</a>
</div>
</section>
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
```
---
## 3. CSS (style.css)
```css
:root {
--main-bg: #f2f6fc;
--primary: #2563eb;
--secondary: #475569;
--white: #fff;
--shadow: 0 4px 14px rgba(0,0,0,0.05);
}
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: var(--main-bg);
color: #222;
line-height: 1.6;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--white);
padding: 1rem 2rem;
box-shadow: var(--shadow);
}
.logo {
font-weight: bold;
font-size: 1.5rem;
color: var(--primary);
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
margin: 0;
}
nav ul li a {
text-decoration: none;
color: var(--secondary);
transition: color 0.2s;
font-weight: 500;
}
nav ul li a:hover {
color: var(--primary);
}
.hero {
display: flex;
align-items: center;
gap: 2rem;
padding: 3rem 2rem 2rem 2rem;
background: var(--white);
}
.hero img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 50%;
box-shadow: var(--shadow);
}
.hero h1 {
font-size: 2.5rem;
margin: 0 0 0.5rem 0;
}
.hero h1 span {
color: var(--primary);
}
.hero p {
font-size: 1.1rem;
color: var(--secondary);
}
.btn {
display: inline-block;
margin-top: 1rem;
padding: 0.7rem 1.5rem;
background: var(--primary);
color: #fff;
border: none;
border-radius: 40px;
text-decoration: none;
font-weight: bold;
transition: background 0.2s;
}
.btn:hover {
background: #1742ad;
}
main {
max-width: 1000px;
margin: 2rem auto;
padding: 0 2rem;
}
section {
margin-bottom: 4rem;
background: var(--white);
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow);
}
section h2 {
margin-top: 0;
color: var(--primary);
}
.skills {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1.5rem 0 0 0;
list-style: none;
padding: 0;
}
.skills li {
background: var(--main-bg);
padding: 0.5rem 1rem;
border-radius: 20px;
color: var(--primary);
font-size: 1rem;
font-weight: 500;
}
.project-list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.project {
background: var(--main-bg);
border-radius: 16px;
box-shadow: var(--shadow);
flex: 1 1 280px;
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.project img {
width: 100%;
max-width: 320px;
border-radius: 12px;
margin-bottom: 1rem;
}
.project h3 {
margin: 0.5rem 0 0.3rem;
color: var(--primary);
}
.project p {
color: var(--secondary);
font-size: 1rem;
margin-bottom: 1rem;
}
.project a {
color: var(--white);
background: var(--primary);
padding: 0.5rem 1.3rem;
border-radius: 25px;
text-decoration: none;
font-size: 0.98rem;
font-weight: 500;
transition: background 0.2s;
}
.project a:hover {
background: #1e40af;
}
#contact form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 400px;
margin: 2rem auto 0 auto;
}
#contact input, #contact textarea {
padding: 0.8rem;
border-radius: 6px;
border: 1px solid #cbd5e1;
font-size: 1rem;
font-family: inherit;
}
#contact textarea {
min-height: 80px;
resize: vertical;
}
#contact button {
background: var(--primary);
color: var(--white);
border: none;
border-radius: 25px;
padding: 0.8rem 1.2rem;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
#contact button:hover {
background: #1742ad;
}
.social-links {
text-align: center;
margin-top: 1rem;
gap: 1.5rem;
}
.social-links a {
color: var(--primary);
margin: 0 0.7rem;
font-size: 1.1rem;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.social-links a:hover {
color: #1e40af;
}
footer {
text-align: center;
color: var(--secondary);
padding: 2rem 0;
font-size: 1rem;
background: none;
}
@media (max-width: 800px) {
.hero {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.project-list {
flex-direction: column;
}
}
@media (max-width: 600px) {
header nav {
flex-direction: column;
gap: 1rem;
}
main, section {
padding: 1rem;
}
}
```
---
## 4. Usage Notes
- You’ll need a profile image at `images/portrait.jpg` (use any placeholder image if you like).
- Replace the project links and descriptions as needed.
- For deployment, upload to [Netlify](https://netlify.com), [Vercel](https://vercel.com), or GitHub Pages.
- You can add or edit social links as required.
---
## Result
This template offers a clean, modern portfolio for **John Doe**, with section navigation, responsive layout, simple form, and project highlights.
**Feel free to ask for React, Bootstrap, or other advanced versions!**Drag to resize
Here's a structured portfolio website design for John Doe, balancing modern aesthetics with functionality. Let's break it down:
---
### **1. Project Structure (Basic HTML/CSS/JS)**
```markdown
project-folder/
│
├── index.html
├── projects.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
├── js/
│ └── script.js
├── assets/
│ ├── images/
│ └── fonts/
│
└── README.md
```
---
### **2. Key Features & Sections**
#### **A. Homepage (index.html)**
- **Navigation Bar**: Fixed top nav (Home, Projects, About, Contact)
- **Hero Section**:
- Title: *"Hi, I'm John Doe!"*
- Subtitle: *"Web Developer & Designer | Los Angeles"*
- CTA Buttons: "Download Resume", "Contact Me"
- Background: Custom pixel-art illustration of a keyboard/monitor.
- **About Section**:
- Profile Image (circle/rounded)
- Mini-bio: 3-4 short sentences about skills and interests.
- Timeline for experience/education
- **Skills Section**:
- Progress bars/icons (HTML/CSS/JS, Figma, SEO...)
- Tools: 📊 Figma, 🎨 Photoshop, ⚙️ Cloud Platforms (AWS)
- **Projects Preview**:
- Filter buttons: Web, App, Graphics
- Grid of 4-6 project thumbnails (image, title, 2-sentence summary, tech stack)
- **Testimonials**:
- Quotes from clients/use-cases
- "Hired John to build my portfolio: He finished 2 weeks early and it's perfect!" — Jane Doe
- **Contact Form**:
- Name | Email | Message | Submit
- Connect: 📧 johndoe@email.com | 📱 (123) 456-7890
- **Footer**:
- Social icons (LinkedIn, GitHub, Twitter)
- Copyright: "© 2024 John Doe"
---
#### **B. Projects/Portfolio Page (projects.html)**
- **Search Filter by Tag** (portfolio)
- **Project Cards**:
- **Title**: E-Commerce Redesign
- **Thumbnail**: 👁️ 1,200 views
- **Description**: Used Figma to improve usability via A/B testing.
- **CTA Button**: View Case Study →
- **Pagination** if >15 projects
---
#### **C. About Page (about.html)**
- **Visuals**: Split layout (left = photo/illustration, right = content block)
- **Education Timeline**:
- UX Certificate — MIT (2022)
- BS in CS — Stanford (2020)
- **Soft Skills**: Communication, Problem-Solving
- **Tool Path Progress** animation
---
#### **D. Contact Page (contact.html)**
- **Fullscreen Contact Form** with address and map embed.
- **Projects Ready Email Template**:
"I’d love to discuss your next project. Let’s collaborate!"
---
### **3. Tech Stack & Design Elements**
- **HTML5**: Semantic markup
- **CSS3**:
- Flexbox/Grid for layout
- Custom properties for theme colors
- **JavaScript**:
- Lightbox modals for project images
- Jump animations, scroll tracking
- **Frameworks**:
- Tailwind CSS for utility classes (or Bootstrap)
- **Icons**: Font Awesome (nav/social)
- **Fonts**:
- Primary: IBM Plex Sans (light, medium, bold)
- Secondary: JetBrains Mono (for code snippets)
- **AnimationsModule**: AOS.js for fade-ins
---
### **4. Responsive Design (Mobile-First)**
- **Breakpoints**:
- Desktop: 1024px+, tablet: 768–1023px, mobile: <768px
- **Hamburger Menu** for mobile navigation
- **Grid Images**: 1-column on mobile, 2-column on tablet
- **Forms**: Full-width fields with `font-size: 16px` for ease.
---
### **5. Example HTML Template Snippet**
```html
<!-- Navbar -->
<nav class="navbar">
<div class="brand">John Doe</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<h1>Hello, I’m John Doe!</h1>
<p>UX Designer with 4+ years of experience in scalable web apps</p>
<a href="/resume.pdf" class="btn">Download Resume</a>
</section>
```
---
### **6. Example CSS Theme**
```css
:root {
--primary: #5D5CE7;
--secondary: #3B82F6;
--dark: #111827;
--light: #F9FAFB;
}
body {
font-family: 'IBM Plex Sans', sans-serif;
background: var(--light);
color: var(--dark);
}
.btn {
background: var(--primary);
color: white;
}
```
---
### **7. Deployment Options**
- **Free**: GitHub Pages (good for simple sites)
- **Professional**: Vercel/Netlify (faster, custom domains)
- **CNAME File** example for custom domain:
```
portfolio.johndoe.com
```
---
### **8. Advanced Enhancements**
- **Dark Mode Toggle**: LocalStorage to remember preference
- **Progress Bar**: Scroll-to-top indicator (`#progressBar`)
- **3D Text/Logo**: Three.js particle background
- **Video Thumbnails**: Embedded portfolio videos with "play" overlay
---
### **9. SEO Optimization**
- Meta tags with keywords:
```html
<meta name="description" content="John Doe is a full-stack developer based in Los Angeles. Check out his web design projects & UX/UI case studies.">
```
- Schema Markup:
```html
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Person","name":"John Doe","jobTitle":"Web Developer","address":"Los Angeles, CA"}
</script>
```
---
This design balances creativity and optimization. Ready for deployment in 48 hours with a focus on web standards and accessibility 🔧✨.Drag to resize
------------------------------------------------ 1. SITE GOALS & POSITIONING ------------------------------------------------ - Role: Senior Product (UX/UI) Designer - Tone: Calm confidence, tech-forward, friendly human - Differentiators: 1) Hard-number impact, 2) Quick “book John for 2-week sprint” call-to-action, 3) Light-mode dark-mode toggle & 60 FPS micro-interactions that mirror his design-systems obsession. ------------------------------------------------ 2. INFORMATION ARCHITECTURE ------------------------------------------------ Top-level nav (mobile hamburger): Home Work Process About Résumé Contact Foot navigation (scrolling bar on all inner pages): Back-to-Top Next Project Random Fun Fact (pulls from /api/facts) ------------------------------------------------ 3. VISUAL IDENTITY ------------------------------------------------ Typography - Primary: Inter (body, UI) - Accent: SF Mono (code tags, stats) Colour System (WCAG AA) Light: #FFFFFF bg, #0B131E text, #005CFF primary, #F6F8FB surface Dark: #0B131E bg, #FFFFFF text, #0B84FF primary, #151B26 surface Motion - 8 ms fade ease-out micro-animations (Framer-Motion) - 24 FPS Lottie walk-cycle on 404 page ------------------------------------------------ 4. PAGE-BY-PAGE BLUEPRINT ------------------------------------------------ HOME / HERO [–––––––––––––––––––––––––––––––] Responsive 100 vh grid: ┌----------------------------------------------┐ │ Left: Right: │ │ “Hi, I’m John.” 3D bento tiles that │ │ tag-line fades in animate on scroll │ │ ↓ scroll-hint (Figma, Sketch, Webflow)│ └----------------------------------------------┘ CTA pill: “Book a 2-week design sprint” (Airtable embed popup) WORK GRID /Work Filter chips: Mobile • SaaS • Design Systems Cards: hover reveals KPI overlay (e.g., “+27 % activation”). Meta: Title, 1-line TL;DR, client-logo monochrome. PROJECT DETAIL (template) Hero video (auto-muted, 6-sec loop) Sticky right rail: download attachments, link to Figma file, primary-next project. Body sections: Challenge → Process → Solutions → Impact → Outtakes (fun HQ GIFs). PROCESS One-pager scroll-timeline: Discover → Define → Ship → Measure. Intersections trigger animated diagram lines. CTA block: “Download 1-pager PDF (118 KB)”. ABOUT Split 50/50. Left: story. Right: timeline of 8-year journey with hover-to-zoom company logos. Micro-interaction: number counters run once in viewport. RESUME Static printable view ( media-query print stylesheet, 1 page). PDF mirror loaded as inline preview (PDF.js). CONTACT Form with ReCAPTCHA v3 (invisible). Auto-copies email to clipboard on submit. Alternative Calendly embed for 30-min intro. 404 Lottie astronaut drifting; button “Beam me back Home”. ------------------------------------------------ 5. DEVELOPMENT STACK ------------------------------------------------ - Next.js 14 (App Router) - TypeScript, ESLint (Airbnb config) - Tailwind CSS with JIT + custom fluid type plugin - Framer-Motion for scroll and micro-motion - Sanity headless CMS for project details - Vercel hosting + GitHub Actions for CI - Sitemap & robots.txt auto-generated at build ------------------------------------------------ 6. COMPONENT LIBRARY (Storybook) ------------------------------------------------ Button · Card · KPI · ToggleColorScheme Input · 404 · Modal ------------------------------------------------ 7. PERFORMANCE & SEO ------------------------------------------------ - 90+ Lighthouse across Core Web Vitals - JSON-LD schema (Person, CreativeWork) - Open-graph, twitter cards auto-generated - CLS minimized via placeholder-padding in Next Image ------------------------------------------------ 8. ACCESSIBILITY ------------------------------------------------ - aria-live for dynamic filters - Focus-traps for modals - prefers-reduced-motion respects CSS `@media` flag - Alt text sourced from Sanity description ------------------------------------------------ 9. LOCALIZATION (Future-proof) ------------------------------------------------ i18n namespaces ready via next-intl; toggle hidden behind feature flag. ------------------------------------------------ 10. LAUNCH CHECKLIST ------------------------------------------------ [ ] per-page meta titles ≤ 60 char [ ] favicon/192px PNG & SVG maskable [ ] Analytics: Plausible (GDPR-friendly) + outbound-link events [ ] Cloudinary responsive images [ ] Security headers in vercel.json ------------------------------------------------ 11. FOLDER STRUCTURE ------------------------------------------------ src/ ├ app/ │ ├ (home)/page.tsx │ ├ work/ │ │ ├ [slug]/page.tsx │ ├ globals.css ├ components/ ├ lib/sanity.ts ├ hooks/useScrollSpy.ts ├ stories/ public/ ├ fonts ├ svg ├ lotties ------------------------------------------------ 12. COPY SAMPLES ------------------------------------------------ H1: “Turning complex ideas into lovable digital products.” Bio: “Over the last 8 years I’ve helped 20+ B2B and B2C companies turn zero-to-one concepts into products used by 27 million people. Previous clients span fintech, health-tech, and creator economy—from seed-stage to IPO.” KPI Card: “Ticketing app shipping flow ⟶ 2 h → 7 min avg.” Footer: “Crafted with caffeine in San Diego.” ------------------------------------------------ 13. HANDOFF PACKAGE ------------------------------------------------ Figma link (viewable): https://figma.com/johndoe/portfolio-2024 Feather icons library shared in “Assets” Tokens synced via Tokens Studio → Style Dictionary → CSS variables ------------------------------------------------ 14. ISSUE / ROADMAP board ------------------------------------------------ Kanban (linear.app) with labels: bug, enhancement, content, seo.
Drag to resize
Here's a design and content for a portfolio website for John Doe, a fictional character. Let's assume John Doe is a UI/UX Designer and Front-end Developer.
**Website Concept:**
The website will be a simple, modern, and responsive one-page design that showcases John's work, skills, and experience. The design will be clean and minimalistic, with a focus on typography and visuals.
**Color Scheme:**
The primary color will be a deep blue (#212121), with secondary colors being a bright orange (#FFC107) and white (#FFFFFF).
**Typography:**
The primary font will be Open Sans, a clean and modern sans-serif font. The font sizes will vary between 16px and 24px, with headings being larger and bolder.
**Content:**
The website will have the following sections:
1. **Hero Section**: A full-screen section with a background image or video, introducing John Doe and his profession.
2. **About Section**: A brief overview of John's background, skills, and experience.
3. **Portfolio Section**: A showcase of John's projects, with images, descriptions, and links to live projects or GitHub repositories.
4. **Skills Section**: A list of John's technical skills, with icons and progress bars.
5. **Testimonials Section**: Quotes from satisfied clients or colleagues.
6. **Contact Section**: A contact form, email address, and links to John's social media profiles.
**Design:**
Here's a rough wireframe of the website:
**Hero Section**
* Background image or video: a cityscape or a abstract design
* Header: "John Doe | UI/UX Designer & Front-end Developer"
* Subheading: "Creating user-centered designs and experiences"
* Call-to-Action (CTA) button: "Explore My Work"
**About Section**
* Header: "About Me"
* Text: "Hi, I'm John Doe, a UI/UX Designer and Front-end Developer with 5+ years of experience. I help businesses create user-friendly and engaging digital products."
* Image: a professional photo of John Doe
**Portfolio Section**
* Header: "My Work"
* Grid or masonry layout showcasing 6-8 projects, with:
+ Project image or screenshot
+ Project title and description
+ Link to live project or GitHub repository
**Skills Section**
* Header: "Technical Skills"
* List of skills, with:
+ Icon (e.g., HTML5, CSS3, JavaScript, etc.)
+ Skill name
+ Progress bar indicating proficiency level
**Testimonials Section**
* Header: "What People Say"
* Quotes from satisfied clients or colleagues, with:
+ Quote text
+ Client or colleague name and title
**Contact Section**
* Header: "Get in Touch"
* Contact form with:
+ Name field
+ Email field
+ Message field
+ Send button
* Email address: [johndoe@email.com](mailto:johndoe@email.com)
* Links to John's social media profiles (e.g., LinkedIn, Twitter, GitHub)
**Code:**
Here's a basic HTML, CSS, and JavaScript code to get started:
**index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | UI/UX Designer & Front-end Developer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Hero Section -->
<section id="hero">
<h1>John Doe | UI/UX Designer & Front-end Developer</h1>
<p>Creating user-centered designs and experiences</p>
<button>Explore My Work</button>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<p>Hi, I'm John Doe, a UI/UX Designer and Front-end Developer with 5+ years of experience.</p>
<img src="john-doe.jpg" alt="John Doe">
</section>
<!-- Portfolio Section -->
<section id="portfolio">
<h2>My Work</h2>
<div class="grid">
<!-- Project 1 -->
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>Project 1</h3>
<p>Description of Project 1</p>
<a href="#">View Live Project</a>
</div>
<!-- Project 2 -->
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>Project 2</h3>
<p>Description of Project 2</p>
<a href="#">View Live Project</a>
</div>
<!-- ... -->
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<h2>Technical Skills</h2>
<ul>
<li>
<i class="fas fa-html5"></i>
<span>HTML5</span>
<progress value="90" max="100"></progress>
</li>
<li>
<i class="fas fa-css3-alt"></i>
<span>CSS3</span>
<progress value="85" max="100"></progress>
</li>
<!-- ... -->
</ul>
</section>
<!-- Testimonials Section -->
<section id="testimonials">
<h2>What People Say</h2>
<blockquote>
<p>John is an exceptional designer and developer. His work is always of high quality.</p>
<cite>Jane Doe, CEO</cite>
</blockquote>
<!-- ... -->
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Get in Touch</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button>Send</button>
</form>
<p>Email: <a href="mailto:johndoe@email.com">johndoe@email.com</a></p>
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>
</section>
<script src="script.js"></script>
</body>
</html>
```
**styles.css**
```css
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
#hero {
background-image: url('hero.jpg');
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#about {
padding: 2em;
}
#portfolio {
padding: 2em;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
}
.project {
background-color: #f7f7f7;
padding: 1em;
border: 1px solid #ddd;
}
#skills {
padding: 2em;
}
#skills ul {
list-style: none;
padding: 0;
margin: 0;
}
#skills li {
margin-bottom: 1em;
}
#testimonials {
padding: 2em;
}
blockquote {
background-color: #f7f7f7;
padding: 1em;
border: 1px solid #ddd;
}
#contact {
padding: 2em;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 1em;
background-color: #f7f7f7;
border: 1px solid #ddd;
}
label {
display: block;
margin-bottom: 0.5em;
}
input, textarea {
width: 100%;
padding: 0.5em;
margin-bottom: 1em;
border: 1px solid #ccc;
}
button[type="submit"] {
background-color: #212121;
color: #fff;
padding: 0.5em 1em;
border: none;
border-radius: 0.25em;
cursor: pointer;
}
```
**script.js**
```javascript
// Add event listener to the send button
document.querySelector('#contact button[type="submit"]').addEventListener('click', (e) => {
e.preventDefault();
// Form submission logic here
});
```
This is just a basic design and code to get started. You can customize it further to fit your needs. You can also add more features, such as animations, scrolling effects, or a CMS to manage the content.Drag to resize
# John Doe's Professional Portfolio
I'll create a modern, responsive portfolio website showcasing John Doe's work in a sleek design that highlights his skills and projects. The website will have a clean aesthetic with subtle animations and professional styling.
## Design Concept:
- Sleek dark design with cyber accents
- Smooth animations on scroll
- Responsive layout for all devices
- Professional sections for skills, projects, and experience
Here's the complete implementation:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary: #0a192f;
--secondary: #112240;
--accent: #64ffda;
--light: #ccd6f6;
--lighter: #a8b2d1;
--white: #e6f1ff;
--transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--primary);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--secondary);
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 5px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
min-height: 100vh;
padding: 100px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: rgba(10, 25, 47, 0.85);
backdrop-filter: blur(10px);
z-index: 100;
transition: var(--transition);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--accent);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
color: var(--lighter);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent);
transition: var(--transition);
}
.nav-links a:hover::after, .nav-links a.active::after {
width: 100%;
}
.hero {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
}
.hero-content {
max-width: 600px;
}
.hero-subtitle {
color: var(--accent);
font-size: 1.2rem;
margin-bottom: 15px;
}
.hero-title {
font-size: 4.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-highlight {
color: var(--accent);
}
.hero-desc {
font-size: 1.2rem;
color: var(--lighter);
max-width: 500px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
background-color: transparent;
color: var(--accent);
padding: 12px 28px;
border: 1px solid var(--accent);
border-radius: 4px;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
backdrop-filter: blur(10px);
}
.btn:hover {
background-color: rgba(100, 255, 218, 0.1);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(100, 255, 218, 0.1);
}
.hero-avatar {
position: relative;
width: 350px;
height: 350px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--accent);
box-shadow: 0 0 30px rgba(100, 255, 218, 0.3);
}
.avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--secondary), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 5rem;
}
.section-title {
position: relative;
display: flex;
align-items: center;
font-size: 2.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 60px;
}
.section-title::before {
content: '01.';
color: var(--accent);
font-size: 1.5rem;
margin-right: 15px;
font-weight: 400;
}
.section-title::after {
content: '';
display: block;
width: 300px;
height: 1px;
background-color: var(--secondary);
margin-left: 20px;
}
.about-content {
display: flex;
align-items: center;
gap: 50px;
}
.about-text {
flex: 1;
}
.about-text p {
font-size: 1.1rem;
color: var(--lighter);
margin-bottom: 20px;
}
.skills-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.skill {
display: flex;
align-items: center;
gap: 10px;
color: var(--lighter);
}
.skill-icon {
color: var(--accent);
}
.skills-image {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.tech-circle {
width: 300px;
height: 300px;
position: relative;
}
.tech-logo {
position: absolute;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--secondary);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
border: 1px solid rgba(100, 255, 218, 0.1);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 30px;
}
.project-card {
background: var(--secondary);
border-radius: 10px;
overflow: hidden;
transition: var(--transition);
border: 1px solid rgba(100, 255, 218, 0.1);
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.project-image {
height: 200px;
background: linear-gradient(45deg, var(--accent), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.project-content {
padding: 25px;
}
.project-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.project-name {
font-size: 1.5rem;
color: var(--white);
}
.project-links {
display: flex;
gap: 15px;
}
.project-link {
color: var(--lighter);
transition: var(--transition);
font-size: 1.2rem;
}
.project-link:hover {
color: var(--accent);
}
.project-desc {
color: var(--lighter);
margin-bottom: 20px;
}
.project-tech {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.tech-tag {
font-size: 0.8rem;
background: rgba(100, 255, 218, 0.1);
color: var(--accent);
padding: 5px 12px;
border-radius: 20px;
}
.experience {
display: flex;
gap: 50px;
}
.timeline {
position: relative;
min-width: 200px;
}
.timeline::after {
content: '';
position: absolute;
top: 0;
left: 9px;
height: 100%;
width: 2px;
background: var(--secondary);
}
.timeline-item {
position: relative;
margin-bottom: 40px;
padding-left: 30px;
cursor: pointer;
transition: var(--transition);
}
.timeline-item.active {
color: var(--accent);
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--secondary);
border: 2px solid var(--accent);
z-index: 1;
}
.timeline-item.active::before {
background: var(--accent);
}
.exp-content {
flex: 1;
padding: 20px;
background: var(--secondary);
border-radius: 10px;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.exp-role {
color: var(--white);
font-size: 1.5rem;
margin-bottom: 10px;
}
.exp-company {
color: var(--accent);
margin-bottom: 15px;
font-size: 1.1rem;
}
.exp-duration {
color: var(--lighter);
font-size: 0.9rem;
margin-bottom: 20px;
}
.exp-desc {
color: var(--lighter);
line-height: 1.6;
}
.contact-container {
display: flex;
justify-content: space-between;
gap: 50px;
}
.contact-info {
max-width: 400px;
}
.contact-title {
font-size: 1.5rem;
color: var(--white);
margin-bottom: 30px;
}
.contact-text {
font-size: 1.1rem;
color: var(--lighter);
margin-bottom: 30px;
line-height: 1.8;
}
.social-links {
display: flex;
gap: 20px;
margin-top: 30px;
}
.social-link {
color: var(--lighter);
font-size: 1.5rem;
transition: var(--transition);
}
.social-link:hover {
color: var(--accent);
transform: translateY(-5px);
}
.contact-form {
flex: 1;
}
.form-group {
margin-bottom: 25px;
}
input, textarea {
width: 100%;
padding: 15px;
background: transparent;
border: 1px solid var(--secondary);
border-radius: 4px;
color: var(--light);
font-size: 1rem;
}
textarea {
min-height: 150px;
resize: vertical;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--accent);
}
footer {
text-align: center;
padding: 30px;
color: var(--lighter);
font-size: 0.9rem;
border-top: 1px solid var(--secondary);
}
@media (max-width: 992px) {
.hero {
flex-direction: column-reverse;
gap: 50px;
text-align: center;
padding: 0 20px;
}
.about-content, .contact-container {
flex-direction: column;
}
.hero-content, .hero-desc {
margin-left: auto;
margin-right: auto;
}
.section-title::after {
width: 150px;
}
.tech-circle {
display: none;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-title {
font-size: 2.8rem;
}
.hero-avatar {
width: 250px;
height: 250px;
}
.projects-grid {
grid-template-columns: 1fr;
}
.experience {
flex-direction: column;
}
.timeline {
display: flex;
min-width: auto;
}
.timeline::after {
height: 2px;
width: 100%;
top: 50px;
left: 0;
}
.timeline-item {
padding: 0 40px 0 0;
text-align: right;
min-width: 120px;
margin: 0 0 80px 0;
}
.timeline-item::before {
top: 46px;
left: inherit;
right: -10px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<a href="#" class="logo">JD</a>
<div class="nav-links">
<a href="#" class="active">Home</a>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#experience">Experience</a>
<a href="#contact">Contact</a>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-subtitle">Hi, my name is</div>
<h1 class="hero-title">John Doe.</h1>
<h1 class="hero-title">I create <span class="hero-highlight">digital experiences.</span></h1>
<p class="hero-desc">
I'm a full-stack developer specializing in creating exceptional web applications.
Currently, I'm focused on building accessible, human-centered products.
</p>
<a href="#projects" class="btn">View My Work</a>
</div>
<div class="hero-avatar">
<div class="avatar-placeholder">
<i class="fas fa-user"></i>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<p>
Hello! I'm John, a passionate software engineer based in New York City.
My journey in tech began in 2016 when I built my first website.
Since then, I've had the privilege to create applications for startups,
agencies, and industry-leading companies.
</p>
<p>
My main focus these days is building accessible, inclusive products and digital experiences.
I'm also exploring creative coding projects and UI/UX design.
</p>
<div class="skills-container">
<div class="skill">
<i class="fas fa-code skill-icon"></i>
<span>JavaScript (ES6+)</span>
</div>
<div class="skill">
<i class="fab fa-react skill-icon"></i>
<span>React & React Native</span>
</div>
<div class="skill">
<i class="fab fa-node skill-icon"></i>
<span>Node.js & Express</span>
</div>
<div class="skill">
<i class="fas fa-server skill-icon"></i>
<span>MongoDB & SQL</span>
</div>
<div class="skill">
<i class="fas fa-paint-brush skill-icon"></i>
<span>UI/UX Design</span>
</div>
<div class="skill">
<i class="fas fa-mobile-alt skill-icon"></i>
<span>Responsive Web</span>
</div>
</div>
</div>
<div class="skills-image">
<div class="tech-circle">
<!-- Technology placements would go here -->
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">Projects</h2>
<div class="projects-grid">
<!-- Project 1 -->
<div class="project-card">
<div class="project-image">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="project-content">
<div class="project-title">
<h3 class="project-name">Ecommerce Platform</h3>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<p class="project-desc">
A full-featured ecommerce platform with payment processing,
inventory management, and user accounts.
</p>
<div class="project-tech">
<span class="tech-tag">React</span>
<span class="tech-tag">Node.js</span>
<span class="tech-tag">MongoDB</span>
<span class="tech-tag">Stripe API</span>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card">
<div class="project-image">
<i class="fas fa-mobile"></i>
</div>
<div class="project-content">
<div class="project-title">
<h3 class="project-name">Fitness Tracker App</h3>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<p class="project-desc">
A mobile application for tracking workouts and nutrition with
personalized recommendations.
</p>
<div class="project-tech">
<span class="tech-tag">React Native</span>
<span class="tech-tag">Firebase</span>
<span class="tech-tag">Redux</span>
<span class="tech-tag">HealthKit</span>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card">
<div class="project-image">
<i class="fas fa-robot"></i>
</div>
<div class="project-content">
<div class="project-title">
<h3 class="project-name">AI Finance Assistant</h3>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
<p class="project-desc">
A financial assistant using natural language processing to provide budget
insights and investment advice.
</p>
<div class="project-tech">
<span class="tech-tag">Python</span>
<span class="tech-tag">TensorFlow</span>
<span class="tech-tag">React</span>
<span class="tech-tag">Chart.js</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="experience-section">
<div class="container">
<h2 class="section-title">Experience</h2>
<div class="experience">
<div class="timeline">
<div class="timeline-item active">Google</div>
<div class="timeline-item">Amazon</div>
<div class="timeline-item">Facebook</div>
<div class="timeline-item">Microsoft</div>
</div>
<div class="exp-content">
<h3 class="exp-role">Senior Frontend Engineer</h3>
<div class="exp-company">Google · Mountain View, CA</div>
<div class="exp-duration">2020 - Present</div>
<p class="exp-desc">
Leading development for Google Workspace productivity tools. Optimizing
user experiences for millions of daily users. Mentoring junior engineers
and implementing modern web technologies to improve performance and
accessibility. Developed features improving task workflow efficiency by 30%.
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-container">
<div class="contact-info">
<h3 class="contact-title">Let's Talk!</h3>
<p class="contact-text">
I'm currently open to new opportunities, freelance work,
and collaboration. Whether you have a question, want to chat
about technology, or need a developer for your project,
feel free to reach out.
</p>
<a href="mailto:john.doe@example.com" class="btn">Email Me</a>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-dribbble"></i></a>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" placeholder="Subject">
</div>
<div class="form-group">
<textarea placeholder="Message" required></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>Designed & Built by John Doe</p>
<p>© 2023 | All Rights Reserved</p>
</div>
</footer>
<script>
// Basic scroll animations
document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Simple scroll animation to highlight current nav link
window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
const sections = document.querySelectorAll('section');
sections.forEach(section => {
const sectionTop = section.offsetTop - 100;
const sectionHeight = section.offsetHeight;
const sectionId = section.getAttribute('id');
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
document.querySelector(`.nav-links a[href="#${sectionId}"]`).classList.add('active');
} else {
document.querySelector(`.nav-links a[href="#${sectionId}"]`).classList.remove('active');
}
});
});
// Simple experience timeline
const timelineItems = document.querySelectorAll('.timeline-item');
timelineItems.forEach(item => {
item.addEventListener('click', function() {
timelineItems.forEach(i => i.classList.remove('active'));
this.classList.add('active');
// Here you would typically update the experience details
});
});
});
</script>
</body>
</html>
```
## Key Features
1. **Modern Dark Theme** - Professional dark color scheme with teal accents
2. **Responsive Design** - Adapts to all device sizes
3. **Interactive Elements** - Hover effects, smooth scrolling, and click events
4. **Key Sections**:
- Hero section with brief introduction
- About section with skills listing
- Project showcase in a grid layout
- Experience timeline
- Contact form with social links
5. **Animations** - Smooth transitions and hover effects
6. **Clean UI** - Proper spacing, readable typography, and subtle borders
The portfolio design is professional and focuses on showcasing John's skills and projects effectively. It can be easily customized by updating the content in each section.Drag to resize
I'll create a modern, professional portfolio website for John Doe. Here's a complete design with HTML, CSS, and JavaScript:
## HTML Structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Portfolio</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<a href="#home">John Doe</a>
</div>
<div class="nav-menu" id="nav-menu">
<a href="#home" class="nav-link">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#skills" class="nav-link">Skills</a>
<a href="#projects" class="nav-link">Projects</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<div class="nav-toggle" id="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-text">
<h1>Hi, I'm <span class="highlight">John Doe</span></h1>
<h2 class="typewriter">Full Stack Developer</h2>
<p>I create beautiful, responsive websites and web applications that solve real-world problems.</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">View My Work</a>
<a href="#contact" class="btn btn-secondary">Get In Touch</a>
</div>
</div>
<div class="hero-image">
<div class="profile-pic">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face" alt="John Doe" />
</div>
</div>
</div>
<div class="scroll-indicator">
<a href="#about"><i class="fas fa-chevron-down"></i></a>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<p>I'm a passionate full-stack developer with 5+ years of experience creating digital solutions that make a difference. I specialize in modern web technologies and love turning complex problems into simple, beautiful designs.</p>
<p>When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or enjoying a good cup of coffee while reading tech blogs.</p>
<div class="about-stats">
<div class="stat">
<h3>50+</h3>
<p>Projects Completed</p>
</div>
<div class="stat">
<h3>30+</h3>
<p>Happy Clients</p>
</div>
<div class="stat">
<h3>5+</h3>
<p>Years Experience</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<div class="container">
<h2 class="section-title">Skills & Technologies</h2>
<div class="skills-grid">
<div class="skill-category">
<h3>Frontend</h3>
<div class="skill-items">
<span class="skill-item">HTML5</span>
<span class="skill-item">CSS3</span>
<span class="skill-item">JavaScript</span>
<span class="skill-item">React</span>
<span class="skill-item">Vue.js</span>
<span class="skill-item">TypeScript</span>
</div>
</div>
<div class="skill-category">
<h3>Backend</h3>
<div class="skill-items">
<span class="skill-item">Node.js</span>
<span class="skill-item">Python</span>
<span class="skill-item">Express</span>
<span class="skill-item">Django</span>
<span class="skill-item">PostgreSQL</span>
<span class="skill-item">MongoDB</span>
</div>
</div>
<div class="skill-category">
<h3>Tools & Others</h3>
<div class="skill-items">
<span class="skill-item">Git</span>
<span class="skill-item">Docker</span>
<span class="skill-item">AWS</span>
<span class="skill-item">Figma</span>
<span class="skill-item">Linux</span>
<span class="skill-item">CI/CD</span>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=300&fit=crop" alt="E-commerce Platform" />
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>E-commerce Platform</h3>
<p>A full-featured e-commerce platform built with React and Node.js, featuring user authentication, payment processing, and admin dashboard.</p>
<div class="project-tech">
<span>React</span>
<span>Node.js</span>
<span>MongoDB</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=500&h=300&fit=crop" alt="Task Management App" />
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>Task Management App</h3>
<p>A collaborative task management application with real-time updates, drag-and-drop functionality, and team collaboration features.</p>
<div class="project-tech">
<span>Vue.js</span>
<span>Express</span>
<span>Socket.io</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=300&fit=crop" alt="Data Visualization Dashboard" />
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>Data Visualization Dashboard</h3>
<p>An interactive dashboard for data visualization with real-time charts, filtering capabilities, and export functionality.</p>
<div class="project-tech">
<span>React</span>
<span>D3.js</span>
<span>Python</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-content">
<div class="contact-info">
<h3>Let's work together!</h3>
<p>I'm always interested in new opportunities and exciting projects. Whether you have a question or just want to say hi, feel free to reach out!</p>
<div class="contact-details">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>john.doe@example.com</span>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>+1 (555) 123-4567</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>San Francisco, CA</span>
</div>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea placeholder="Your Message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2024 John Doe. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
```
## CSS Styles
```css
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
transition: all 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 20px;
}
.nav-logo a {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: #2c3e50;
}
.nav-menu {
display: flex;
gap: 2rem;
}
.nav-link {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #3498db;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: 0.3s;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-text h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.highlight {
color: #f39c12;
}
.typewriter {
font-size: 1.5rem;
color: #ecf0f1;
margin-bottom: 1.5rem;
}
.hero-text p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 1rem;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
display: inline-block;
}
.btn-primary {
background: #3498db;
color: white;
}
.btn-primary:hover {
background: #2980b9;
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #333;
}
.profile-pic {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
border: 5px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.profile-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
.scroll-indicator a {
color: white;
font-size: 1.5rem;
text-decoration: none;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
/* Section Styles */
section {
padding: 80px 0;
}
.section-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 3rem;
color: #2c3e50;
position: relative;
}
.section-title::after {
content: '';
width: 50px;
height: 3px;
background: #3498db;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
/* About Section */
.about {
background: #f8f9fa;
}
.about-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.about-text p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #666;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.stat {
text-align: center;
}
.stat h3 {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 0.5rem;
}
.stat p {
color: #666;
font-weight: 500;
}
/* Skills Section */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.skill-category {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
.skill-category h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #2c3e50;
}
.skill-items {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.skill-item {
background: #3498db;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
/* Projects Section */
.projects {
background: #f8f9fa;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-image {
position: relative;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(52, 152, 219, 0.9);
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-link {
color: white;
font-size: 1.5rem;
text-decoration: none;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: background 0.3s ease;
}
.project-link:hover {
background: rgba(255, 255, 255, 0.3);
}
.project-content {
padding: 1.5rem;
}
.project-content h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.project-content p {
color: #666;
margin-bottom: 1rem;
line-height: 1.6;
}
.project-tech {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.project-tech span {
background: #ecf0f1;
color: #2c3e50;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
/* Contact Section */
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-info h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.contact-info p {
color: #666;
margin-bottom: 2rem;
line-height: 1.6;
}
.contact-details {
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.contact-item i {
color: #3498db;
font-size: 1.2rem;
width: 20px;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
color: #3498db;
font-size: 1.5rem;
text-decoration: none;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #2980b9;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group input,
.form-group textarea {
padding: 12px;
border: 2px solid #ecf0f1;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #3498db;
}
/* Footer */
.footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-text h1 {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
flex-wrap: wrap;
}
.about-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.profile-pic {
width: 250px;
height: 250px;
}
}
@media (max-width: 480px) {
.hero-text h1 {
font-size: 2rem;
}
.section-title {
font-size: 2rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
```
## JavaScript
```javascript
// Mobile Navigation Toggle
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.getElementById('nav-menu');
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
// Navbar background on scroll
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
}
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Typewriter effect
const typewriter = document.querySelector('.typewriter');
const text = 'Full Stack Developer';
let i = 0;
function typeWriter() {
if (i < text.length) {
typewriter.innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}
// Start typewriter effect when page loads
window.addEventListener('load', () => {
typewriter.innerHTML = '';
typeWriter();
});
// Form submission
const contactForm = document.querySelector('.contact-form');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form data
const formData = new FormData(contactForm);
// Here you would typically send the data to a server
// For now, we'll just show an alert
alert('Thank you for your message! I\'ll get back to you soon.');
// Reset form
contactForm.reset();
});
// Animate elements on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.project-card, .skill-category, .about-content').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Add loading animation
window.addEventListener('load', () => {
document.body.style.opacity = '1';
});
// Initial body opacity
document.body.style.opacity = '0';
document.body.style.transition = 'opacity 0.5s ease';
```
## Key Features
1. **Responsive Design**: Works perfectly on all devices
2. **Modern Layout**: Clean, professional design with smooth animations
3. **Interactive Elements**: Hover effects, smooth scrolling, mobile menu
4. **Typewriter Effect**: Dynamic text animation in hero section
5. **Project Showcase**: Portfolio grid with overlay effects
6. **Contact Form**: Functional contact form with validation
7. **Social Links**: Easy access to social media profiles
8. **Performance Optimized**: Fast loading with optimized images and code
## Customization Options
- Replace the profile image with John's actual photo
- Update project images and descriptions
- Modify color scheme by changing CSS variables
- Add more sections (testimonials, blog, etc.)
- Integrate with a backend for form submissions
- Add more animations and interactions
This portfolio website provides a solid foundation that can be easily customized and expanded based on specific needs and preferences.Drag to resize
# Portfolio Website Design for John Doe ## Homepage Design **Header:** - Clean, minimalist navigation bar with John Doe's logo/name - Navigation links: Home, About, Portfolio, Services, Contact - Professional headshot in the hero section - Tagline: "Creative Developer & Designer" **Hero Section:** - Large, bold welcome text: "Hello, I'm John Doe" - Brief professional summary: "Specialized in web development and UI/UX design with 5+ years of experience creating beautiful digital experiences" - Call-to-action button: "View My Work" or "Get in Touch" - Subtle background animation or pattern **Featured Projects Section:** - Grid layout showcasing 3-4 best projects - Each project card includes: - Project thumbnail image - Project title - Brief description - Technologies used - "View Project" link **Skills Section:** - Visual representation of skills (bar charts or icons) - Categories: Programming, Design, Tools - Each skill shows proficiency level **Testimonials:** - Carousel of client testimonials - Client name, position, and company - Brief quote about John's work **Footer:** - Social media links (LinkedIn, GitHub, Dribbble, etc.) - Copyright information - Quick contact details ## About Page - Professional biography - Career timeline/journey - Education and certifications - Personal interests and values - Downloadable resume/CV ## Portfolio Page - Filterable gallery of projects (by category: Web, Mobile, Design) - Each project links to a detailed case study - Case study includes: - Project overview - Problem statement - Solution approach - Process and challenges - Final results with visuals - Client feedback ## Services Page - List of services offered - Description of each service - Pricing information (optional) - Process explanation ## Contact Page - Contact form - Email and phone information - Office hours/availability - Google Maps location (if applicable) - Expected response time ## Design Elements **Color Scheme:** - Primary: #3a86ff (Professional blue) - Secondary: #ff006e (Accent pink) - Neutral: #f8f9fa (Light background) - Dark: #212529 (Text and details) **Typography:** - Headings: Montserrat (bold, clean) - Body text: Open Sans (readable, professional) **Visual Elements:** - Custom icons - Subtle animations on hover/scroll - Consistent spacing and alignment - Responsive design for all devices **Technical Features:** - Dark/light mode toggle - Page loading animations - Portfolio filtering system - Contact form with validation - Google Analytics integration Would you like me to elaborate on any specific section of this portfolio website design?
Drag to resize
Great! Let's design and create a **portfolio website for John Doe**. I'll outline the structure, suggest design elements, and provide starter HTML/CSS code that you can use and expand on.
---
## 🖌️ Website Design Plan for John Doe
### **1. Website Structure**
- **Header / Hero Section**
- Name: *John Doe*
- Tagline: *"Creative Developer & Designer"*
- Profile picture or abstract graphic
- Call-to-action button (“View My Work” or “Contact Me”)
- **About Me Section**
- Short bio introducing John
- Skills overview (e.g., web development, UI/UX, graphic design, etc.)
- **Portfolio / Projects**
- Grid-based showcase of projects
- Each project card includes: image, title, short description, link (GitHub, live demo)
- **Experience / Resume**
- Work experience timeline
- Education highlights
- **Contact Section**
- Contact form (name, email, message)
- Social media icons/links (LinkedIn, GitHub, Twitter, etc.)
- **Footer**
- Copyright info
- Quick links
---
### **2. Visual Style**
- **Color Palette**:
- Primary: Dark Blue `#003366`
- Accent: Bright Cyan `#00CFFF`
- Background: White / Light Gray `#F5F5F5`
- **Typography**:
- Headings: *Montserrat* (Modern & bold)
- Body: *Open Sans* (Clean & readable)
- **Layout**:
- Minimalist, responsive, lots of whitespace
---
### **3. Starter Code**
Here’s a basic **HTML + CSS portfolio template** for John Doe:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe Portfolio</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Open+Sans&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
background: #F5F5F5;
color: #333;
}
header {
background: #003366;
color: white;
text-align: center;
padding: 100px 20px;
}
header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3em;
margin: 0;
}
header p {
font-size: 1.2em;
margin-top: 10px;
}
header a {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background: #00CFFF;
color: #003366;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
section {
max-width: 900px;
margin: 60px auto;
padding: 20px;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.project {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.project img {
width: 100%;
border-radius: 5px;
}
footer {
background: #003366;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>John Doe</h1>
<p>Creative Developer & Designer</p>
<a href="#projects">View My Work</a>
</header>
<!-- About -->
<section id="about">
<h2>About Me</h2>
<p>Hello! I’m John Doe, a passionate web developer and designer who loves creating modern, user-friendly digital experiences. I specialize in full-stack development and UI/UX design.</p>
</section>
<!-- Projects -->
<section id="projects">
<h2>My Projects</h2>
<div class="projects">
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>Project Title 1</h3>
<p>Short description of the project...</p>
<a href="#">View Project</a>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>Project Title 2</h3>
<p>Short description of the project...</p>
<a href="#">View Project</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<h2>Contact Me</h2>
<form>
<input type="text" placeholder="Your Name" required><br><br>
<input type="email" placeholder="Your Email" required><br><br>
<textarea placeholder="Your Message" required></textarea><br><br>
<button type="submit">Send</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2024 John Doe | All Rights Reserved</p>
</footer>
</body>
</html>
```
---
✅ This gives John Doe a **modern, responsive portfolio site** foundation. You can expand it with:
- Animations (via CSS or libraries like GSAP)
- Responsive nav bar
- Dark/light mode toggle
- Hosting (GitHub Pages, Netlify, Vercel)
---
Would you like me to **make a version with multiple pages** (Home, About, Projects, Contact) using navigation, or keep it as a **single-page portfolio**?Drag to resize