Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Morgan | AI-Powered Resume</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<!-- Particle Background -->
<canvas id="particleCanvas"></canvas>
<!-- AI Assistant Chat Bot -->
<div id="ai-chat" class="ai-chat">
<div class="ai-chat-toggle" id="chatToggle">
<i class="fas fa-robot"></i>
<span class="pulse-dot"></span>
</div>
<div class="ai-chat-window" id="chatWindow">
<div class="ai-chat-header">
<div class="ai-avatar">
<i class="fas fa-robot"></i>
</div>
<div>
<h4>AI Resume Assistant</h4>
<span class="status-online">● Online</span>
</div>
<button class="chat-close" id="chatClose"><i class="fas fa-times"></i></button>
</div>
<div class="ai-chat-messages" id="chatMessages">
<div class="message bot">
<p>👋 Hi! I'm the AI assistant for Alex Morgan. Ask me anything about skills, experience, or projects!</p>
</div>
</div>
<div class="ai-chat-input">
<input type="text" id="chatInput" placeholder="Ask about skills, experience..." autocomplete="off">
<button id="chatSend"><i class="fas fa-paper-plane"></i></button>
</div>
<div class="quick-questions">
<button class="quick-btn" data-question="What are your top skills?">🛠 Skills</button>
<button class="quick-btn" data-question="Tell me about your experience">💼 Experience</button>
<button class="quick-btn" data-question="What projects have you built?">🚀 Projects</button>
<button class="quick-btn" data-question="How can I contact you?">📧 Contact</button>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">
<span class="logo-bracket"><</span>AM<span class="logo-bracket">/></span>
</a>
<ul class="nav-menu" id="navMenu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#experience" class="nav-link">Experience</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="theme-toggle" id="themeToggle" title="Toggle Theme">
<i class="fas fa-moon"></i>
</button>
<a href="#" class="btn-download" id="downloadResume">
<i class="fas fa-download"></i> Resume
</a>
<div class="hamburger" id="hamburger">
<span></span><span></span><span></span>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-text">
<div class="hero-greeting">
<span class="greeting-line"></span>
<span class="greeting-text" id="greetingText">Hello, World!</span>
</div>
<h1 class="hero-name">
I'm <span class="highlight">Alex Morgan</span>
</h1>
<div class="typewriter-container">
<span class="typewriter-prefix">I build </span>
<span class="typewriter" id="typewriter"></span>
<span class="cursor">|</span>
</div>
<p class="hero-description">
Full-Stack Developer & AI Enthusiast crafting intelligent digital
experiences with modern technologies. Passionate about turning complex
problems into elegant solutions.
</p>
<div class="hero-stats">
<div class="stat" data-count="5">
<span class="stat-number">0</span>
<span class="stat-label">Years Experience</span>
</div>
<div class="stat" data-count="50">
<span class="stat-number">0</span>
<span class="stat-label">Projects Done</span>
</div>
<div class="stat" data-count="30">
<span class="stat-number">0</span>
<span class="stat-label">Happy Clients</span>
</div>
</div>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">
<i class="fas fa-rocket"></i> View My Work
</a>
<a href="#contact" class="btn btn-outline">
<i class="fas fa-envelope"></i> Get In Touch
</a>
</div>
<div class="social-links">
<a href="#" class="social-link" title="GitHub"><i class="fab fa-github"></i></a>
<a href="#" class="social-link" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link" title="Dev.to"><i class="fab fa-dev"></i></a>
</div>
</div>
<div class="hero-visual">
<div class="code-window">
<div class="code-header">
<div class="code-dots">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<span class="code-title">developer.js</span>
</div>
<pre class="code-body"><code><span class="code-keyword">const</span> <span class="code-variable">developer</span> = {
<span class="code-property">name</span>: <span class="code-string">"Alex Morgan"</span>,
<span class="code-property">role</span>: <span class="code-string">"Full-Stack Developer"</span>,
<span class="code-property">skills</span>: [
<span class="code-string">"JavaScript"</span>, <span class="code-string">"Python"</span>,
<span class="code-string">"React"</span>, <span class="code-string">"Node.js"</span>,
<span class="code-string">"AI/ML"</span>, <span class="code-string">"Cloud"</span>
],
<span class="code-property">passion</span>: <span class="code-string">"Building the future"</span>,
<span class="code-method">createMagic</span>() {
<span class="code-keyword">return</span> <span class="code-string">"✨ Amazing Apps"</span>;
}
};</code></pre>
</div>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse">
<div class="wheel"></div>
</div>
<span>Scroll Down</span>
</div>
</section>
<!-- About Section -->
<section id="about" class="section about">
<div class="container">
<div class="section-header">
<span class="section-tag"><i class="fas fa-user"></i> Get To Know Me</span>
<h2 class="section-title">About <span class="highlight">Me</span></h2>
<div class="section-line"></div>
</div>
<div class="about-content">
<div class="about-image">
<div class="image-wrapper">
<div class="image-placeholder">
<i class="fas fa-user-astronaut"></i>
</div>
<div class="image-border"></div>
<div class="image-dots"></div>
</div>
<div class="experience-badge">
<span class="badge-number">5+</span>
<span class="badge-text">Years of<br>Experience</span>
</div>
</div>
<div class="about-text">
<h3>A Passionate Developer Who Loves to Create</h3>
<p>
I'm a full-stack developer based in San Francisco with 5+ years of experience
building web applications and AI-powered solutions. I specialize in creating
scalable, user-friendly applications that solve real-world problems.
</p>
<p>
My journey in tech started with a curiosity about how things work on the internet.
Today, I combine my skills in frontend development, backend engineering, and
artificial intelligence to build products that make a difference.
</p>
<div class="about-details">
<div class="detail-item">
<i class="fas fa-map-marker-alt"></i>
<span>San Francisco, CA</span>
</div>
<div class="detail-item">
<i class="fas fa-envelope"></i>
<span>alex@example.com</span>
</div>
<div class="detail-item">
<i class="fas fa-graduation-cap"></i>
<span>M.S. Computer Science</span>
</div>
<div class="detail-item">
<i class="fas fa-briefcase"></i>
<span>Open to Opportunities</span>
</div>
</div>
<div class="about-interests">
<span class="interest-tag">🤖 AI/ML</span>
<span class="interest-tag">🌐 Web Dev</span>
<span class="interest-tag">☁️ Cloud</span>
<span class="interest-tag">📱 Mobile</span>
<span class="interest-tag">🎨 UI/UX</span>
<span class="interest-tag">🔐 Security</span>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="section skills">
<div class="container">
<div class="section-header">
<span class="section-tag"><i class="fas fa-code"></i> What I Know</span>
<h2 class="section-title">Skills & <span class="highlight">Technologies</span></h2>
<div class="section-line"></div>
</div>
<div class="skills-filter">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="frontend">Frontend</button>
<button class="filter-btn" data-filter="backend">Backend</button>
<button class="filter-btn" data-filter="ai">AI/ML</button>
<button class="filter-btn" data-filter="tools">Tools</button>
</div>
<div class="skills-grid" id="skillsGrid">
<!-- Frontend Skills -->
<div class="skill-card" data-category="frontend" data-level="95">
<div class="skill-icon"><i class="fab fa-react"></i></div>
<h4>React</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 95%"></div></div>
<span class="skill-percent">95%</span>
</div>
<div class="skill-card" data-category="frontend" data-level="90">
<div class="skill-icon"><i class="fab fa-js-square"></i></div>
<h4>JavaScript</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 90%"></div></div>
<span class="skill-percent">90%</span>
</div>
<div class="skill-card" data-category="frontend" data-level="85">
<div class="skill-icon"><i class="fab fa-html5"></i></div>
<h4>HTML/CSS</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 85%"></div></div>
<span class="skill-percent">85%</span>
</div>
<div class="skill-card" data-category="frontend" data-level="80">
<div class="skill-icon"><i class="fab fa-vuejs"></i></div>
<h4>Vue.js</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 80%"></div></div>
<span class="skill-percent">80%</span>
</div>
<div class="skill-card" data-category="frontend" data-level="88">
<div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
<h4>Tailwind CSS</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 88%"></div></div>
<span class="skill-percent">88%</span>
</div>
<!-- Backend Skills -->
<div class="skill-card" data-category="backend" data-level="92">
<div class="skill-icon"><i class="fab fa-node-js"></i></div>
<h4>Node.js</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 92%"></div></div>
<span class="skill-percent">92%</span>
</div>
<div class="skill-card" data-category="backend" data-level="88">
<div class="skill-icon"><i class="fab fa-python"></i></div>
<h4>Python</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 88%"></div></div>
<span class="skill-percent">88%</span>
</div>
<div class="skill-card" data-category="backend" data-level="82">
<div class="skill-icon"><i class="fas fa-database"></i></div>
<h4>MongoDB</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 82%"></div></div>
<span class="skill-percent">82%</span>
</div>
<div class="skill-card" data-category="backend" data-level="78">
<div class="skill-icon"><i class="fas fa-server"></i></div>
<h4>PostgreSQL</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 78%"></div></div>
<span class="skill-percent">78%</span>
</div>
<!-- AI/ML Skills -->
<div class="skill-card" data-category="ai" data-level="85">
<div class="skill-icon"><i class="fas fa-brain"></i></div>
<h4>TensorFlow</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 85%"></div></div>
<span class="skill-percent">85%</span>
</div>
<div class="skill-card" data-category="ai" data-level="80">
<div class="skill-icon"><i class="fas fa-robot"></i></div>
<h4>PyTorch</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 80%"></div></div>
<span class="skill-percent">80%</span>
</div>
<div class="skill-card" data-category="ai" data-level="75">
<div class="skill-icon"><i class="fas fa-language"></i></div>
<h4>NLP</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 75%"></div></div>
<span class="skill-percent">75%</span>
</div>
<!-- Tools -->
<div class="skill-card" data-category="tools" data-level="90">
<div class="skill-icon"><i class="fab fa-git-alt"></i></div>
<h4>Git</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 90%"></div></div>
<span class="skill-percent">90%</span>
</div>
<div class="skill-card" data-category="tools" data-level="85">
<div class="skill-icon"><i class="fab fa-docker"></i></div>
<h4>Docker</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 85%"></div></div>
<span class="skill-percent">85%</span>
</div>
<div class="skill-card" data-category="tools" data-level="80">
<div class="skill-icon"><i class="fab fa-aws"></i></div>
<h4>AWS</h4>
<div class="skill-bar"><div class="skill-progress" style="--progress: 80%"></div></div>
<span class="skill-percent">80%</span>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="section experience">
<div class="container">
<div class="section-header">
<span class="section-tag"><i class="fas fa-briefcase"></i> Where I've Worked</span>
<h2 class="section-title">Work <span class="highlight">Experience</span></h2>
<div class="section-line"></div>
</div>
<div class="timeline">
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-dot">
<i class="fas fa-building"></i>
</div>
<div class="timeline-content">
<div class="timeline-header">
<h3>Senior Full-Stack Developer</h3>
<span class="company">TechCorp AI</span>
</div>
<span class="timeline-date"><i class="fas fa-calendar"></i> 2022 – Present</span>
<p>Led development of AI-powered web applications serving 100K+ users.
Implemented microservices architecture reducing response time by 40%.</p>
<div class="timeline-tags">
<span>React</span><span>Node.js</span><span>Python</span><span>AWS</span>
</div>
</div>
</div>
<div class="timeline-item" data-aos="fade-left">
<div class="timeline-dot">
<i class="fas fa-laptop-code"></i>
</div>
<div class="timeline-content">
<div class="timeline-header">
<h3>Full-Stack Developer</h3>
<span class="company">InnovateTech Solutions</span>
</div>
<span class="timeline-date"><i class="fas fa-calendar"></i> 2020 – 2022</span>
<p>Built and maintained 15+ client projects including e-commerce platforms
and SaaS applications. Mentored junior developers.</p>
<div class="timeline-tags">
<span>Vue.js</span><span>Django</span><span>PostgreSQL</span><span>Docker</span>
</div>
</div>
</div>
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-dot">
<i class="fas fa-code"></i>
</div>
<div class="timeline-content">
<div class="timeline-header">
<h3>Junior Developer</h3>
<span class="company">StartupHub</span>
</div>
<span class="timeline-date"><i class="fas fa-calendar"></i> 2019 – 2020</span>
<p>Developed responsive web applications and RESTful APIs.
Collaborated with design team to implement pixel-perfect UIs.</p>
<div class="timeline-tags">
<span>JavaScript</span><span>React</span><span>Express</span><span>MongoDB</span>
</div>
</div>
</div>
<div class="timeline-item" data-aos="fade-left">
<div class="timeline-dot">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="timeline-content">
<div class="timeline-header">
<h3>M.S. Computer Science</h3>
<span class="company">Stanford University</span>
</div>
<span class="timeline-date"><i class="fas fa-calendar"></i> 2017 – 2019</span>
<p>Specialized in Artificial Intelligence and Machine Learning.
Published research on natural language processing.</p>
<div class="timeline-tags">
<span>AI/ML</span><span>NLP</span><span>Research</span><span>Python</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section projects">
<div class="container">
<div class="section-header">
<span class="section-tag"><i class="fas fa-rocket"></i> My Work</span>
<h2 class="section-title">Featured <span class="highlight">Projects</span></h2>
<div class="section-line"></div>
</div>
<div class="projects-grid">
<div class="project-card featured">
<div class="project-image">
<div class="project-placeholder">
<i class="fas fa-brain"></i>
</div>
<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-info">
<span class="project-category">AI / Machine Learning</span>
<h3>AI Content Generator</h3>
<p>An AI-powered platform that generates blog posts, social media content,
and marketing copy using GPT-4 and custom fine-tuned models.</p>
<div class="project-tech">
<span>Python</span><span>React</span><span>OpenAI</span><span>FastAPI</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<div class="project-placeholder">
<i class="fas fa-chart-line"></i>
</div>
<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-info">
<span class="project-category">SaaS Platform</span>
<h3>Analytics Dashboard</h3>
<p>Real-time analytics dashboard with customizable widgets,
data visualization, and automated reporting features.</p>
<div class="project-tech">
<span>Next.js</span><span>D3.js</span><span>Node.js</span><span>Redis</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<div class="project-placeholder">
<i class="fas fa-shopping-cart"></i>
</div>
<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-info">
<span class="project-category">E-Commerce</span>
<h3>Smart Shop Platform</h3>
<p>Full-featured e-commerce platform with AI-powered product
recommendations and personalized shopping experience.</p>
<div class="project-tech">
<span>React</span><span>Node.js</span><span>MongoDB</span><span>Stripe</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<div class="project-placeholder">
<i class="fas fa-comments"></i>
</div>
<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-info">
<span class="project-category">Real-time App</span>
<h3>CollabSpace</h3>
<p>Real-time collaboration tool with video conferencing,
shared whiteboard, and project management features.</p>
<div class="project-tech">
<span>Vue.js</span><span>WebRTC</span><span>Socket.io</span><span>PostgreSQL</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section contact">
<div class="container">
<div class="section-header">
<span class="section-tag"><i class="fas fa-envelope"></i> Reach Out</span>
<h2 class="section-title">Get In <span class="highlight">Touch</span></h2>
<div class="section-line"></div>
<p class="section-subtitle">Have a project in mind or want to collaborate? Let's talk!</p>
</div>
<div class="contact-content">
<div class="contact-info">
<div class="contact-card">
<div class="contact-icon"><i class="fas fa-envelope"></i></div>
<div>
<h4>Email</h4>
<p>alex@example.com</p>
</div>
</div>
<div class="contact-card">
<div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<h4>Location</h4>
<p>San Francisco, CA</p>
</div>
</div>
<div class="contact-card">
<div class="contact-icon"><i class="fas fa-phone"></i></div>
<div>
<h4>Phone</h4>
<p>+1 (555) 123-4567</p>
</div>
</div>
<div class="contact-social">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
</div>
</div>
<form class="contact-form" id="contactForm">
<div class="form-group">
<div class="form-field">
<input type="text" id="name" required>
<label for="name"><i class="fas fa-user"></i> Your Name</label>
</div>
<div class="form-field">
<input type="email" id="email" required>
<label for="email"><i class="fas fa-envelope"></i> Your Email</label>
</div>
</div>
<div class="form-field">
<input type="text" id="subject" required>
<label for="subject"><i class="fas fa-tag"></i> Subject</label>
</div>
<div class="form-field">
<textarea id="message" rows="5" required></textarea>
<label for="message"><i class="fas fa-comment"></i> Your Message</label>
</div>
<button type="submit" class="btn btn-primary btn-full">
<i class="fas fa-paper-plane"></i> Send Message
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<span class="logo-bracket"><</span>AM<span class="logo-bracket">/></span>
<p>Building the future, one line of code at a time.</p>
</div>
<div class="footer-links">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Alex Morgan. All rights reserved. Built with ❤️ and ☕</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
3
Domains
321KB
Transfer Size
420KB
Content Size
146.0ms
Dom Content Loaded
232.0ms
First Paint
231.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...