<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="UX Designer Portfolio - Creating thoughtful digital experiences">
<title>Jane Smith | UX Designer</title>
<style>
/* Base Styles */
:root {
--primary-color: #2d3436;
--accent-color: #6c5ce7;
--light-color: #f9f9f9;
--text-color: #333;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--border-radius: 8px;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--light-color);
}
img {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: var(--transition);
}
img:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.header_img {
width: 40%;
display: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
/* Header */
header {
padding: var(--spacing-md) 0;
position: sticky;
top: 0;
background-color: rgba(249, 249, 249, 0.95);
backdrop-filter: blur(10px);
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: var(--spacing-md);
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
}
.nav-links a:hover {
color: var(--accent-color);
}
/* Hero Section */
.hero {
display: flex;
align-items: center;
min-height: 90vh;
padding: var(--spacing-lg) 0;
background-color: #d4418e;
background: rgb(0,51,102);
background: linear-gradient(159deg, rgba(0,51,102,1) 0%, rgba(15,82,186,1) 100%);
}
.hero-content {
flex: 1;
padding-right: var(--spacing-lg);
}
.hero-image {
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
bottom: 0;
filter: blur(10px);
display: none;
}
h1 {
font-size: 60px;
line-height: 1.2;
margin-bottom: var(--spacing-md);
color: white;
}
.highlight {
color: #dedaff;
}
.hero p {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
color: #fff;
}
.btn {
display: inline-block;
padding: 12px 24px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 500;
transition: var(--transition);
}
.btn:hover {
background-color: #5649c0;
transform: translateY(-2px);
}
/* Featured Section */
.featured {
padding: var(--spacing-lg) 0;
}
h2 {
font-size: 2.5rem;
margin-bottom: var(--spacing-lg);
text-align: center;
color: var(--primary-color);
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-md);
}
.project-card {
background-color: white;
padding: var(--spacing-md);
border-radius: var(--border-radius);
transition: var(--transition);
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.project-card h3 {
margin: var(--spacing-sm) 0;
font-size: 1.5rem;
}
/* Skills Section */
.skills {
padding: var(--spacing-lg) 0;
background-color: white;
}
.skills-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
}
.skill {
background-color: var(--light-color);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 50px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.skill svg {
width: 20px;
height: 20px;
fill: var(--accent-color);
}
/* Footer */
footer {
background-color: var(--primary-color);
color: white;
padding: var(--spacing-lg) 0;
text-align: center;
}
.social-links {
display: flex;
justify-content: center;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.social-links a {
color: white;
font-size: 1.5rem;
transition: var(--transition);
}
.social-links a:hover {
color: var(--accent-color);
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.hero {
flex-direction: column;
text-align: center;
}
.hero-content {
padding-right: 0;
margin-bottom: var(--spacing-lg);
}
h1 {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">JANE.DESIGN</div>
<ul class="nav-links">
<li><a href="#featured">Work</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<img src="https://images.pexels.com/photos/1181519/pexels-photo-1181519.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="img-fluid header_img" alt="...">
<br>
<br>
<h1>Crafting <span class="highlight">experiences</span> that people love</h1>
<p>UX Designer focused on creating intuitive and engaging digital products that solve real user problems.</p>
<a href="#contact" class="btn">Let's work together</a>
</div>
<!--<div class="hero-image">-->
<!-- <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="UX Design work">-->
<!--</div>-->
</div>
</section>
<section id="featured" class="featured">
<div class="container">
<h2>Featured Projects</h2>
<div class="projects">
<div class="project-card">
<img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Health App Design">
<h3>Health App Redesign</h3>
<p>Improving user engagement through simplified navigation and personalized dashboard.</p>
</div>
<div class="project-card">
<img src="https://images.pexels.com/photos/273230/pexels-photo-273230.jpeg?auto=compress&cs=tinysrgb&w=800" alt="E-commerce Website">
<h3>E-commerce Experience</h3>
<p>Creating a seamless shopping journey with intuitive product discovery and checkout.</p>
</div>
<div class="project-card">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Banking App">
<h3>FinTech Mobile App</h3>
<p>Simplifying complex financial tools with clear data visualization and user-friendly flows.</p>
</div>
</div>
</div>
</section>
<section id="featured" class="featured">
<div class="container">
<h2>Case Studies</h2>
<div class="projects">
<div class="project-card">
<img src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Health App Design">
<h3>Workcamp</h3>
</div>
<div class="project-card">
<img src="https://images.pexels.com/photos/3184405/pexels-photo-3184405.jpeg?auto=compress&cs=tinysrgb&w=800" alt="E-commerce Website">
<h3>Non-profit Organization</h3>
</div>
</div>
</div>
</section>
<section id="skills" class="skills">
<div class="container">
<h2>UX Toolbox</h2>
<div class="skills-container">
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7z"/></svg>
User Research
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
Wireframing
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67 0 1.38-1.12 2.5-2.5 2.5zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5 0-.16-.08-.28-.14-.35-.41-.46-.63-1.05-.63-1.65 0-1.38 1.12-2.5 2.5-2.5H16c2.21 0 4-1.79 4-4 0-3.86-3.59-7-8-7z"/></svg>
Design Systems
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M13.17 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8.83c0-.53-.21-1.04-.59-1.41l-4.83-4.83c-.37-.38-.88-.59-1.41-.59zM16 15c0 2.34-2.01 4.21-4.39 3.58C9.83 18.11 8.5 16.32 8.5 14.5c0-1.57 1.11-2.78 2.59-3.08.45-.09.92.14 1.12.55l.76 1.54c.17.34.1.75-.16 1.02-.19.19-.49.29-.78.24-.07-.01-.13-.03-.2-.05-.07-.02-.13-.04-.2-.04-.29 0-.53.24-.53.53 0 .29.24.53.53.53.11 0 .21-.03.3-.09.28-.16.7-.08.89.2.23.33.13.79-.22.98-.15.08-.33.13-.5.13-.36 0-.69-.19-.87-.5-.18-.32-.09-.71.2-.94.06-.05.12-.09.19-.14.07-.05.12-.13.12-.21 0-.15-.12-.27-.27-.27-.65 0-1.18.53-1.18 1.18 0 .98.79 1.77 1.77 1.77 1.06 0 1.91-.86 1.91-1.91 0-.27-.06-.54-.16-.78l-.76-1.54c-.34-.68-.13-1.5.48-1.94.89-.62 1.96-.57 2.78.14.32.28.55.64.67 1.03.05.15.09.29.12.44.01.05.02.1.02.15.06.43-.16.83-.55 1-.33.15-.72.06-.99-.21-.31-.32-.3-.83.02-1.14.02-.02.04-.04.06-.05.24-.25.24-.64 0-.88-.24-.24-.63-.24-.87 0-.49.49-.49 1.28 0 1.77.56.56 1.45.56 2.01 0 .45-.45.65-1.08.56-1.69-.02-.15-.06-.29-.1-.44 0-.01-.01-.02-.01-.03-.25-.71-.77-1.3-1.44-1.63-1.11-.55-2.44-.33-3.34.54-.59.58-.84 1.41-.67 2.2l.76 1.54c.05.1.08.21.08.32 0 .39-.32.71-.71.71-.39 0-.71-.32-.71-.71 0-.12-.05-.23-.13-.31-.07-.08-.16-.12-.26-.12-.2 0-.36.16-.36.36 0 .09.04.18.1.24.06.06.14.1.23.1.21 0 .38.17.38.38s-.17.38-.38.38c-.64 0-1.18-.52-1.18-1.16 0-.93.76-1.69 1.69-1.69.5 0 .97.22 1.28.6.31.38.42.88.3 1.35-.12.47-.47.85-.93 1.02-.23.09-.48.13-.74.13-.91 0-1.7-.52-2.08-1.32-.38-.8-.27-1.76.29-2.45.55-.69 1.47-.99 2.32-.77zM16 18H8v-2h8v2zM13 9V3.5L18.5 9H13z"/></svg>
Prototyping
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
UI Design
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
User Testing
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
Usability
</div>
<div class="skill">
<svg viewBox="0 0 24 24"><path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76l-.1.09z"/></svg>
Accessibility
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container">
<h2>Let's Create Something Amazing</h2>
<p>Get in touch to discuss your project needs</p>
<div class="social-links">
<a href="#" aria-label="Email">✉️</a>
<a href="#" aria-label="LinkedIn">🔗</a>
<a href="#" aria-label="Dribbble">🏀</a>
<a href="#" aria-label="Medium">📝</a>
</div>
</div>
</footer>
</body>
</html>
Projects 
Teams
Account
