Crwate a portfolio
Asking for Preferences
Running Command
mkdir -p /home/daytona/workspace/portfolio && ls -la /home/daytona/workspace/
Writing File
~/portfolio/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Alex Morgan — Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- ── NAV ─────────────────────────────────────────────── -->
<header class="nav-bar">
<div class="nav-inner">
<a class="nav-logo" href="#hero">AM</a>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#experience">Experience</a>
<a href="#contact">Contact</a>
</nav>
<a class="btn btn-outline" href="#contact">Hire Me</a>
</div>
</header>
<!-- ── HERO ──────────────────────────────────────────────── -->
<section id="hero" class="hero">
<div class="hero-content">
<div class="hero-badge">👋 Available for work</div>
<h1>Hi, I'm <span class="gradient-text">Alex Morgan</span></h1>
<p class="hero-sub">Full-Stack Developer & UI/UX Enthusiast</p>
<p class="hero-desc">
I craft beautiful, performant digital experiences — from pixel-perfect
interfaces to scalable backend systems. Passionate about clean code and
user-centric design.
</p>
<div class="hero-cta">
<a class="btn btn-primary" href="#projects">View My Work</a>
<a class="btn btn-ghost" href="#contact">Get in Touch</a>
</div>
<div class="hero-stats">
<div class="stat"><span class="stat-num">5+</span><span class="stat-label">Years Experience</span></div>
<div class="stat"><span class="stat-num">40+</span><span class="stat-label">Projects Delivered</span></div>
<div class="stat"><span class="stat-num">25+</span><span class="stat-label">Happy Clients</span></div>
</div>
</div>
<div class="hero-visual">
<div class="avatar-ring">
<div class="avatar">AM</div>
</div>
<div class="floating-card card-1">
<span class="dot green"></span> React & Node.js
</div>
<div class="floating-card card-2">
<span class="dot blue"></span> UI/UX Design
</div>
<div class="floating-card card-3">
<span class="dot purple"></span> Cloud & DevOps
</div>
</div>
</section>
<!-- ── ABOUT ─────────────────────────────────────────────── -->
<section id="about" class="section about">
<div class="container">
<div class="section-tag">About Me</div>
<div class="about-grid">
<div class="about-text">
<h2>Building things people <em>love</em> to use</h2>
<p>
I'm a full-stack developer based in San Francisco with 5+ years of experience
turning ideas into elegant, production-ready products. I've worked with
early-stage startups and Fortune 500 companies, always focusing on the
intersection of great engineering and great design.
</p>
<p>
When I'm not writing code, I'm exploring hiking trails, reading about
distributed systems, or mentoring junior developers through local tech
meetups.
</p>
<a class="btn btn-primary" href="resume.pdf" download>Download Resume</a>
</div>
<div class="about-cards">
<div class="info-card">
<div class="info-icon">🎓</div>
<div>
<strong>Education</strong>
<p>B.S. Computer Science<br/>Stanford University, 2019</p>
</div>
</div>
<div class="info-card">
<div class="info-icon">📍</div>
<div>
<strong>Location</strong>
<p>San Francisco, CA<br/>Open to Remote</p>
</div>
</div>
<div class="info-card">
<div class="info-icon">💼</div>
<div>
<strong>Availability</strong>
<p>Full-time / Freelance<br/>Start: Immediately</p>
</div>
</div>
<div class="info-card">
<div class="info-icon">🏆</div>
<div>
<strong>Recognition</strong>
<p>GitHub Star 2023<br/>Dev.to Top Author</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── SKILLS ─────────────────────────────────────────────── -->
<section id="skills" class="section skills-section">
<div class="container">
<div class="section-tag">Skills</div>
<h2 class="section-title">My Tech Stack</h2>
<div class="skills-grid">
<div class="skill-group">
<h3>Frontend</h3>
<div class="skill-list">
<div class="skill-item"><span>React / Next.js</span><div class="bar"><div class="fill" style="width:95%"></div></div></div>
<div class="skill-item"><span>TypeScript</span><div class="bar"><div class="fill" style="width:90%"></div></div></div>
<div class="skill-item"><span>HTML5 / CSS3</span><div class="bar"><div class="fill" style="width:98%"></div></div></div>
<div class="skill-item"><span>Tailwind CSS</span><div class="bar"><div class="fill" style="width:92%"></div></div></div>
</div>
</div>
<div class="skill-group">
<h3>Backend</h3>
<div class="skill-list">
<div class="skill-item"><span>Node.js / Express</span><div class="bar"><div class="fill" style="width:90%"></div></div></div>
<div class="skill-item"><span>Python / FastAPI</span><div class="bar"><div class="fill" style="width:85%"></div></div></div>
<div class="skill-item"><span>PostgreSQL</span><div class="bar"><div class="fill" style="width:88%"></div></div></div>
<div class="skill-item"><span>GraphQL</span><div class="bar"><div class="fill" style="width:80%"></div></div></div>
</div>
</div>
<div class="skill-group">
<h3>Cloud & DevOps</h3>
<div class="skill-list">
<div class="skill-item"><span>AWS / GCP</span><div class="bar"><div class="fill" style="width:82%"></div></div></div>
<div class="skill-item"><span>Docker / Kubernetes</span><div class="bar"><div class="fill" style="width:78%"></div></div></div>
<div class="skill-item"><span>CI/CD (GitHub Actions)</span><div class="bar"><div class="fill" style="width:88%"></div></div></div>
<div class="skill-item"><span>Terraform</span><div class="bar"><div class="fill" style="width:72%"></div></div></div>
</div>
</div>
<div class="skill-group">
<h3>Design</h3>
<div class="skill-list">
<div class="skill-item"><span>Figma</span><div class="bar"><div class="fill" style="width:88%"></div></div></div>
<div class="skill-item"><span>Adobe XD</span><div class="bar"><div class="fill" style="width:75%"></div></div></div>
<div class="skill-item"><span>Motion Design</span><div class="bar"><div class="fill" style="width:70%"></div></div></div>
<div class="skill-item"><span>Brand Identity</span><div class="bar"><div class="fill" style="width:78%"></div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- ── PROJECTS ───────────────────────────────────────────── -->
<section id="projects" class="section">
<div class="container">
<div class="section-tag">Projects</div>
<h2 class="section-title">Featured Work</h2>
<div class="projects-grid">
<div class="project-card featured">
<div class="project-preview p1">
<div class="browser-bar"><span></span><span></span><span></span></div>
<div class="preview-content">
<div class="preview-header"></div>
<div class="preview-rows">
<div class="pr r1"></div><div class="pr r2"></div><div class="pr r3"></div>
</div>
</div>
</div>
<div class="project-info">
<div class="project-tags"><span class="tag">React</span><span class="tag">Node.js</span><span class="tag">PostgreSQL</span></div>
<h3>SaaS Analytics Dashboard</h3>
<p>A real-time business intelligence platform with live charts, role-based access, and multi-tenant architecture serving 10,000+ users.</p>
<div class="project-links">
<a href="#" class="btn btn-sm btn-primary">Live Demo →</a>
<a href="#" class="btn btn-sm btn-ghost">GitHub</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-preview p2">
<div class="browser-bar"><span></span><span></span><span></span></div>
<div class="preview-content mobile-preview">
<div class="mobile-screen"></div>
</div>
</div>
<div class="project-info">
<div class="project-tags"><span class="tag">React Native</span><span class="tag">Firebase</span></div>
<h3>Fitness Tracker App</h3>
<p>Cross-platform mobile app with AI-powered workout suggestions, nutrition tracking, and social challenges.</p>
<div class="project-links">
<a href="#" class="btn btn-sm btn-primary">App Store →</a>
<a href="#" class="btn btn-sm btn-ghost">GitHub</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-preview p3">
<div class="browser-bar"><span></span><span></span><span></span></div>
<div class="preview-content">
<div class="code-lines">
<div class="cl cl1"></div><div class="cl cl2"></div>
<div class="cl cl3"></div><div class="cl cl4"></div>
</div>
</div>
</div>
<div class="project-info">
<div class="project-tags"><span class="tag">Python</span><span class="tag">FastAPI</span><span class="tag">OpenAI</span></div>
<h3>AI Document Parser</h3>
<p>Open-source tool to extract structured data from PDFs and images using LLMs with 97% accuracy on benchmark datasets.</p>
<div class="project-links">
<a href="#" class="btn btn-sm btn-primary">Docs →</a>
<a href="#" class="btn btn-sm btn-ghost">GitHub</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-preview p4">
<div class="browser-bar"><span></span><span></span><span></span></div>
<div class="preview-content">
<div class="grid-preview">
<div class="gp-item"></div><div class="gp-item"></div>
<div class="gp-item"></div><div class="gp-item"></div>
</div>
</div>
</div>
<div class="project-info">
<div class="project-tags"><span class="tag">Next.js</span><span class="tag">Stripe</span><span class="tag">Prisma</span></div>
<h3>E-commerce Platform</h3>
<p>Headless commerce solution with SSR product pages, Stripe integration, inventory management, and admin dashboard.</p>
<div class="project-links">
<a href="#" class="btn btn-sm btn-primary">Live Demo →</a>
<a href="#" class="btn btn-sm btn-ghost">GitHub</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── EXPERIENCE ─────────────────────────────────────────── -->
<section id="experience" class="section experience-section">
<div class="container">
<div class="section-tag">Experience</div>
<h2 class="section-title">Career Timeline</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="tl-header">
<div>
<h3>Senior Frontend Engineer</h3>
<p class="company">Stripe · San Francisco, CA</p>
</div>
<span class="tl-date">2022 — Present</span>
</div>
<p>Led frontend architecture for Stripe Dashboard v3, reducing page load times by 42%. Mentored a team of 4 engineers and drove adoption of component-driven design across 12 product squads.</p>
<div class="tl-tags"><span class="tag">React</span><span class="tag">TypeScript</span><span class="tag">GraphQL</span></div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="tl-header">
<div>
<h3>Full-Stack Engineer</h3>
<p class="company">Airbnb · Remote</p>
</div>
<span class="tl-date">2020 — 2022</span>
</div>
<p>Built and maintained host-facing tools serving 4M+ hosts globally. Designed a real-time notification system processing 50k events/second and cut API response times by 35%.</p>
<div class="tl-tags"><span class="tag">React</span><span class="tag">Node.js</span><span class="tag">Redis</span><span class="tag">AWS</span></div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="tl-header">
<div>
<h3>Software Engineer</h3>
<p class="company">TechStartup Inc. · San Francisco, CA</p>
</div>
<span class="tl-date">2019 — 2020</span>
</div>
<p>First engineering hire. Built the core product MVP from scratch, scaling it to 50k users. Implemented CI/CD pipelines and reduced deployment time from 3 hours to 8 minutes.</p>
<div class="tl-tags"><span class="tag">Vue.js</span><span class="tag">Python</span><span class="tag">Docker</span></div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="tl-header">
<div>
<h3>Software Engineering Intern</h3>
<p class="company">Google · Mountain View, CA</p>
</div>
<span class="tl-date">Summer 2018</span>
</div>
<p>Contributed to Google Maps routing algorithm optimizations. Shipped a feature used by 10M+ daily users and received a return offer.</p>
<div class="tl-tags"><span class="tag">C++</span><span class="tag">Python</span><span class="tag">Go</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- ── TESTIMONIALS ───────────────────────────────────────── -->
<section class="section testimonials-section">
<div class="container">
<div class="section-tag">Testimonials</div>
<h2 class="section-title">What People Say</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<p>"Alex is the rare engineer who can both architect a scalable system and make it look beautiful. Our product would not be what it is without them."</p>
<div class="testimonial-author">
<div class="author-avatar" style="background:#6366f1">JR</div>
<div>
<strong>Jordan Reed</strong>
<span>CTO, SaaS Startup</span>
</div>
</div>
</div>
<div class="testimonial-card">
<p>"Delivered the project two weeks ahead of schedule and added features we didn't even ask for. Will absolutely work with Alex again."</p>
<div class="testimonial-author">
<div class="author-avatar" style="background:#0ea5e9">SC</div>
<div>
<strong>Sarah Chen</strong>
<span>Product Manager, FinTech Co.</span>
</div>
</div>
</div>
<div class="testimonial-card">
<p>"Outstanding technical depth paired with crystal-clear communication. Alex made our entire engineering team better."</p>
<div class="testimonial-author">
<div class="author-avatar" style="background:#10b981">MP</div>
<div>
<strong>Marcus Park</strong>
<span>VP Engineering, Airbnb</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── CONTACT ────────────────────────────────────────────── -->
<section id="contact" class="section contact-section">
<div class="container">
<div class="section-tag">Contact</div>
<h2 class="section-title">Let's Work Together</h2>
<p class="contact-desc">Have a project in mind or just want to say hello? My inbox is always open.</p>
<div class="contact-grid">
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-row">
<div class="form-group">
<label>Your Name</label>
<input type="text" placeholder="Jane Doe" required/>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="jane@example.com" required/>
</div>
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" placeholder="Project Inquiry" required/>
</div>
<div class="form-group">
<label>Message</label>
<textarea rows="5" placeholder="Tell me about your project..." required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">Send Message →</button>
<div id="form-msg" class="form-success hidden">✅ Message sent! I'll be in touch soon.</div>
</form>
<div class="contact-sidebar">
<div class="contact-item">
<div class="contact-icon">📧</div>
<div>
<strong>Email</strong>
<a href="mailto:alex@example.com">alex@example.com</a>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">🔗</div>
<div>
<strong>LinkedIn</strong>
<a href="#">linkedin.com/in/alexmorgan</a>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">💻</div>
<div>
<strong>GitHub</strong>
<a href="#">github.com/alexmorgan</a>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">🐦</div>
<div>
<strong>Twitter / X</strong>
<a href="#">@alexmorgan_dev</a>
</div>
</div>
<div class="availability-badge">
<span class="pulse"></span>
Available for new projects starting June 2025
</div>
</div>
</div>
</div>
</section>
<!-- ── FOOTER ─────────────────────────────────────────────── -->
<footer class="footer">
<div class="container">
<p>Designed & built by <strong>Alex Morgan</strong> · 2025</p>
<p>Made with ❤️ and lots of ☕</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Writing File
~/portfolio/style.css
/* ─────────────────────────────────────────────
Reset & Variables
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0a0f;
--bg2: #0f0f1a;
--bg3: #14141f;
--surface: #1a1a2e;
--surface2: #1e1e32;
--border: rgba(255,255,255,.08);
--text: #e2e2f0;
--text-muted: #8888aa;
--primary: #6c63ff;
--primary-dk: #5750e0;
--accent: #00d4aa;
--accent2: #ff6b9d;
--grad: linear-gradient(135deg, #6c63ff, #00d4aa);
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 8px 32px rgba(0,0,0,.4);
--shadow-lg: 0 24px 64px rgba(0,0,0,.5);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* ─────────────────────────────────────────────
Scrollbar
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
/* ─────────────────────────────────────────────
Utilities
───────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }
.section-tag {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(0,212,170,.1);
border: 1px solid rgba(0,212,170,.25);
padding: .3rem .9rem;
border-radius: 99px;
margin-bottom: 1.2rem;
}
.section-title {
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 700;
margin-bottom: 3rem;
line-height: 1.25;
}
.gradient-text {
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ─────────────────────────────────────────────
Buttons
───────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .65rem 1.4rem;
border-radius: var(--radius-sm);
font-size: .9rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .2s ease;
}
.btn-primary {
background: var(--grad);
color: #fff;
}
.btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.btn-outline {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost {
background: rgba(255,255,255,.06);
color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: .45rem 1rem; font-size: .82rem; }
.btn-full { width: 100%; justify-content: center; }
/* ─────────────────────────────────────────────
Navigation
───────────────────────────────────────────── */
.nav-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(10,10,15,.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav-logo {
font-size: 1.1rem;
font-weight: 800;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
flex-shrink: 0;
}
.nav-inner nav { display: flex; gap: 2rem; }
.nav-inner nav a {
font-size: .88rem;
color: var(--text-muted);
transition: color .2s;
}
.nav-inner nav a:hover { color: var(--text); }
/* ─────────────────────────────────────────────
Hero
───────────────────────────────────────────── */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding: 100px 2rem 4rem;
max-width: 1100px;
margin: 0 auto;
}
.hero-content { flex: 1; max-width: 560px; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .82rem;
font-weight: 500;
color: var(--accent);
background: rgba(0,212,170,.1);
border: 1px solid rgba(0,212,170,.2);
padding: .35rem .9rem;
border-radius: 99px;
margin-bottom: 1.5rem;
}
.hero-content h1 {
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: .75rem;
}
.hero-sub {
font-size: 1.2rem;
color: var(--text-muted);
font-weight: 500;
margin-bottom: 1.2rem;
}
.hero-desc {
font-size: .98rem;
color: var(--text-muted);
margin-bottom: 2rem;
max-width: 460px;
}
.hero-cta { display: flex; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.hero-stats {
display: flex;
gap: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.stat-num {
display: block;
font-size: 1.8rem;
font-weight: 800;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: .2rem;
}
.stat-label { font-size: .78rem; color: var(--text-muted); }
/* Hero Visual */
.hero-visual {
flex-shrink: 0;
position: relative;
width: 340px;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-ring {
width: 220px;
height: 220px;
border-radius: 50%;
background: var(--grad);
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
animation: spin-ring 12s linear infinite;
}
@keyframes spin-ring {
0% { box-shadow: 0 0 0 0 rgba(108,99,255,.5), 0 0 0 0 rgba(0,212,170,.3); }
50% { box-shadow: 0 0 60px 15px rgba(108,99,255,.2), 0 0 0 4px rgba(0,212,170,.15); }
100% { box-shadow: 0 0 0 0 rgba(108,99,255,.5), 0 0 0 0 rgba(0,212,170,.3); }
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 800;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.floating-card {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: .5rem 1rem;
font-size: .8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
box-shadow: var(--shadow);
}
.card-1 { top: 20px; left: -30px; animation: float1 3s ease-in-out infinite; }
.card-2 { top: 50%; right: -40px; transform: translateY(-50%); animation: float2 3.5s ease-in-out infinite; }
.card-3 { bottom: 30px; left: -10px; animation: float3 4s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float2 { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 8px)); } }
@keyframes float3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.green { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.blue { background: #0ea5e9; box-shadow: 0 0 8px #0ea5e9; }
.dot.purple { background: var(--primary);box-shadow: 0 0 8px var(--primary); }
/* ─────────────────────────────────────────────
About
───────────────────────────────────────────── */
.about { background: var(--bg2); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.about-text h2 {
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.3;
margin-bottom: 1.2rem;
}
.about-text h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-text p { color: var(--text-muted); margin-bottom: 1rem; }
.about-text .btn { margin-top: .5rem; }
.about-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.info-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem;
display: flex;
gap: .75rem;
align-items: flex-start;
transition: border-color .2s, transform .2s;
}
.info-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.info-icon { font-size: 1.4rem; flex-shrink: 0; }
.info-card strong { font-size: .88rem; display: block; margin-bottom: .25rem; }
.info-card p { font-size: .82rem; color: var(--text-muted); margin: 0; }
/* ─────────────────────────────────────────────
Skills
───────────────────────────────────────────── */
.skills-section { background: var(--bg); }
.skills-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.skill-group {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.8rem;
}
.skill-group h3 {
font-size: .95rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 1.4rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.skill-list { display: flex; flex-direction: column; gap: .9rem; }
.skill-item { display: flex; flex-direction: column; gap: .35rem; }
.skill-item span { font-size: .85rem; color: var(--text-muted); }
.bar {
height: 6px;
background: rgba(255,255,255,.07);
border-radius: 99px;
overflow: hidden;
}
.fill {
height: 100%;
background: var(--grad);
border-radius: 99px;
animation: fillBar .9s ease-out both;
}
@keyframes fillBar { from { width: 0 !important; } }
/* ─────────────────────────────────────────────
Projects
───────────────────────────────────────────── */
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.project-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .25s, transform .25s;
}
.project-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.project-preview {
height: 160px;
padding: .75rem;
background: var(--bg3);
flex-shrink: 0;
}
.browser-bar {
display: flex;
gap: 5px;
margin-bottom: .6rem;
}
.browser-bar span {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.15);
}
.browser-bar span:nth-child(1) { background: #ff5f57; }
.browser-bar span:nth-child(2) { background: #febc2e; }
.browser-bar span:nth-child(3) { background: #28c840; }
/* project preview colours */
.p1 { background: linear-gradient(135deg, #0d0d20, #1a0d2e); }
.p2 { background: linear-gradient(135deg, #0d1a20, #0d2030); }
.p3 { background: linear-gradient(135deg, #1a0d10, #201520); }
.p4 { background: linear-gradient(135deg, #0d1a10, #152015); }
.preview-header { height: 18px; background: rgba(108,99,255,.3); border-radius: 4px; margin-bottom: .5rem; }
.preview-rows { display: flex; flex-direction: column; gap: .4rem; }
.pr { height: 10px; background: rgba(255,255,255,.08); border-radius: 4px; }
.r1 { width: 80%; } .r2 { width: 60%; } .r3 { width: 70%; }
.code-lines { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.cl { height: 10px; border-radius: 4px; }
.cl1 { width: 90%; background: rgba(108,99,255,.4); }
.cl2 { width: 70%; background: rgba(0,212,170,.3); }
.cl3 { width: 85%; background: rgba(255,107,157,.3); }
.cl4 { width: 55%; background: rgba(108,99,255,.25); }
.grid-preview { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .3rem; }
.gp-item { height: 60px; background: rgba(255,255,255,.07); border-radius: 6px; }
.mobile-preview { display: flex; justify-content: center; align-items: center; height: calc(100% - 30px); }
.mobile-screen {
width: 60px; height: 100px;
background: rgba(255,255,255,.08);
border-radius: 10px;
border: 2px solid rgba(255,255,255,.15);
}
.project-info { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.project-info h3 { font-size: 1.05rem; font-weight: 700; }
.project-info p { font-size: .85rem; color: var(--text-muted); flex: 1; }
.project-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.project-links { display: flex; gap: .75rem; margin-top: auto; }
/* Tags */
.tag {
font-size: .72rem;
font-weight: 600;
padding: .25rem .65rem;
border-radius: 99px;
background: rgba(108,99,255,.15);
color: var(--primary);
border: 1px solid rgba(108,99,255,.25);
}
/* ─────────────────────────────────────────────
Experience / Timeline
───────────────────────────────────────────── */
.experience-section { background: var(--bg2); }
.timeline { position: relative; display: flex; flex-direction: column; gap: 0; }
.timeline::before {
content: '';
position: absolute;
left: 12px; top: 12px; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--primary), var(--accent));
opacity: .3;
border-radius: 1px;
}
.timeline-item {
display: flex;
gap: 1.8rem;
padding-bottom: 2.5rem;
position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--grad);
border: 3px solid var(--bg2);
margin-top: 2px;
z-index: 1;
}
.timeline-content {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
transition: border-color .2s;
}
.timeline-content:hover { border-color: var(--primary); }
.tl-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: .75rem;
flex-wrap: wrap;
}
.tl-header h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; }
.company { font-size: .85rem; color: var(--accent); }
.tl-date {
font-size: .78rem;
color: var(--text-muted);
white-space: nowrap;
background: rgba(255,255,255,.05);
padding: .25rem .75rem;
border-radius: 99px;
flex-shrink: 0;
}
.timeline-content p { font-size: .88rem; color: var(--text-muted); margin-bottom: .9rem; }
.tl-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
/* ─────────────────────────────────────────────
Testimonials
───────────────────────────────────────────── */
.testimonials-section { background: var(--bg); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonial-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
transition: border-color .2s, transform .2s;
}
.testimonial-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.testimonial-card > p {
font-size: .9rem;
color: var(--text-muted);
font-style: italic;
line-height: 1.75;
flex: 1;
}
.testimonial-card > p::before { content: '"'; font-size: 2rem; line-height: 0; vertical-align: -.5em; color: var(--primary); margin-right: .2rem; font-style: normal; }
.testimonial-author { display: flex; align-items: center; gap: .75rem; }
.author-avatar {
width: 42px; height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: .88rem; }
.testimonial-author span { font-size: .78rem; color: var(--text-muted); }
/* ─────────────────────────────────────────────
Contact
───────────────────────────────────────────── */
.contact-section { background: var(--bg2); }
.contact-desc { color: var(--text-muted); margin-bottom: 2.5rem; font-size: .95rem; }
.contact-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 2.5rem;
align-items: start;
}
.contact-form {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.form-group input,
.form-group textarea {
background: var(--bg3);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: .9rem;
padding: .7rem 1rem;
outline: none;
resize: vertical;
transition: border-color .2s;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--primary); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-success {
text-align: center;
font-size: .88rem;
color: var(--accent);
padding: .6rem;
background: rgba(0,212,170,.08);
border-radius: var(--radius-sm);
}
.hidden { display: none; }
.contact-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.contact-item {
display: flex;
gap: 1rem;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.3rem;
transition: border-color .2s;
}
.contact-item:hover { border-color: var(--primary); }
.contact-icon { font-size: 1.3rem; }
.contact-item strong { font-size: .85rem; display: block; margin-bottom: .15rem; }
.contact-item a { font-size: .82rem; color: var(--text-muted); transition: color .2s; }
.contact-item a:hover { color: var(--accent); }
.availability-badge {
display: flex;
align-items: center;
gap: .75rem;
background: rgba(0,212,170,.08);
border: 1px solid rgba(0,212,170,.2);
border-radius: var(--radius);
padding: 1rem 1.3rem;
font-size: .82rem;
color: var(--accent);
font-weight: 500;
}
.pulse {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(0,212,170,.5); }
50% { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
}
/* ─────────────────────────────────────────────
Footer
───────────────────────────────────────────── */
.footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 2rem 0;
text-align: center;
font-size: .82rem;
color: var(--text-muted);
display: flex;
flex-direction: column;
gap: .4rem;
}
/* ─────────────────────────────────────────────
Responsive
───────────────────────────────────────────── */
@media (max-width: 900px) {
.hero { flex-direction: column; padding-top: 120px; text-align: center; }
.hero-visual { width: 260px; height: 260px; }
.avatar-ring { width: 170px; height: 170px; }
.hero-stats { justify-content: center; }
.hero-cta { justify-content: center; }
.hero-desc { margin: 0 auto 2rem; }
.about-grid { grid-template-columns: 1fr; }
.skills-grid { grid-template-columns: 1fr; }
.projects-grid { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.nav-inner nav { display: none; }
.card-1, .card-2, .card-3 { display: none; }
}
@media (max-width: 600px) {
.about-cards { grid-template-columns: 1fr; }
.section { padding: 4rem 0; }
.tl-header { flex-direction: column; gap: .4rem; }
}
You've run out of free credits. Sign up for a free account to continue using Orris.
This is a shared conversation. Sign in to Orris to start your own chat.