Personal Resume Website Implementation
Below is a clean, modern, and responsive resume website using HTML, CSS, and minimal JavaScript. The design follows best practices for readability, accessibility, and maintainability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Resume</title>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
html {
scroll-behavior: smooth; /* Smooth scrolling */
}
/* Header & Navigation */
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 1rem 0;
}
nav li {
margin: 0 1.2rem;
}
nav a {
text-decoration: none;
color: #2c3e50;
font-weight: 500;
transition: color 0.3s ease;
}
nav a:hover {
color: #3498db;
}
/* Section Styles */
section {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.2rem;
color: #2c3e50;
margin-bottom: 3rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #3498db;
}
/* About Section */
.about-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-pic {
border-radius: 50%;
width: 160px;
height: 160px;
object-fit: cover;
margin-bottom: 1.5rem;
border: 5px solid #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.about-name {
font-size: 2rem;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.about-title {
font-size: 1.2rem;
color: #3498db;
margin-bottom: 1rem;
}
.about-bio {
max-width: 700px;
margin-bottom: 1.5rem;
color: #666;
}
.about-contact {
display: flex;
gap: 1.5rem;
}
.about-contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #666;
}
.about-contact-item i {
color: #3498db;
}
/* Skills Section */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
text-align: center;
}
.skill-item {
background: #fff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.skill-item:hover {
transform: translateY(-5px);
}
.skill-icon {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 0.8rem;
}
.skill-name {
font-weight: 500;
color: #2c3e50;
}
/* Projects Section */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.project-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-image {
width: 100%;
height: 180px;
object-fit: cover;
}
.project-content {
padding: 1.5rem;
}
.project-title {
font-size: 1.4rem;
color: #2c3e50;
margin-bottom: 0.8rem;
}
.project-description {
color: #666;
margin-bottom: 1rem;
}
.project-link {
display: inline-block;
text-decoration: none;
color: #3498db;
font-weight: 500;
transition: color 0.3s ease;
}
.project-link:hover {
color: #2980b9;
}
/* Experience Section */
.experience-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.experience-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background-color: #3498db;
}
.experience-item {
position: relative;
padding-left: 2rem;
margin-bottom: 2.5rem;
}
.experience-item::before {
content: '';
position: absolute;
left: -9px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3498db;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #3498db;
}
.experience-role {
font-size: 1.2rem;
color: #2c3e50;
margin-bottom: 0.3rem;
}
.experience-company {
font-weight: 500;
color: #3498db;
margin-bottom: 0.3rem;
}
.experience-date {
color: #666;
font-style: italic;
margin-bottom: 0.8rem;
}
.experience-description {
color: #666;
}
/* Contact Section */
.contact-container {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form {
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.form-input {
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #3498db;
}
.form-textarea {
height: 150px;
resize: vertical;
}
.form-button {
padding: 0.8rem;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-button:hover {
background-color: #2980b9;
}
.social-links {
display: flex;
gap: 1.5rem;
}
.social-link {
font-size: 1.8rem;
color: #2c3e50;
transition: color 0.3s ease;
}
.social-link:hover {
color: #3498db;
}
/* Footer */
footer {
background-color: #2c3e50;
color: #fff;
text-align: center;
padding: 1.5rem;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 0.5rem;
padding: 0.8rem 0;
}
section {
padding: 4rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
.experience-timeline::before {
left: 9px;
}
.experience-item::before {
left: 0;
}
.experience-item {
padding-left: 2.5rem;
}
}
</style>
</head>
<body>
<!-- Header & Navigation -->
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- About Section -->
<section id="about">
<h2 class="section-title">About Me</h2>
<div class="about-container">
<img src="https://via.placeholder.com/160" alt="Profile Picture" class="profile-pic">
<h3 class="about-name">John Doe</h3>
<p class="about-title">Frontend Developer</p>
<p class="about-bio">
I'm a passionate frontend developer with 3+ years of experience building responsive and user-friendly web applications.
I specialize in React, Vue, and modern CSS frameworks. I love turning ideas into interactive experiences.
</p>
<div class="about-contact">
<div class="about-contact-item">
<i class="fas fa-envelope"></i>
<span>john.doe@example.com</span>
</div>
<div class="about-contact-item">
<i class="fas fa-phone"></i>
<span>+1 (123) 456-7890</span>
</div>
<div class="about-contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>New York, USA</span>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills-grid">
<div class="skill-item">
<i class="fas fa-code skill-icon"></i>
<h3 class="skill-name">HTML5 & CSS3</h3>
</div>
<div class="skill-item">
<i class="fas fa-js-square skill-icon"></i>
<h3 class="skill-name">JavaScript</h3>
</div>
<div class="skill-item">
<i class="fas fa-react skill-icon"></i>
<h3 class="skill-name">React</h3>
</div>
<div class="skill-item">
<i class="fas fa-vuejs skill-icon"></i>
<h3 class="skill-name">Vue.js</h3>
</div>
<div class="skill-item">
<i class="fas fa-sass skill-icon"></i>
<h3 class="skill-name">SASS</h3>
</div>
<div class="skill-item">
<i class="fas fa-mobile-alt skill-icon"></i>
<h3 class="skill-name">Responsive Design</h3>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects">
<h2 class="section-title">Projects</h2>
<div class="projects-grid">
<div class="project-card">
<img src="https://via.placeholder.com/300x180" alt="Project 1" class="project-image">
<div class="project-content">
<h3 class="project-title">E-Commerce Website</h3>
<p class="project-description">A fully responsive e-commerce platform built with React and Firebase. Features include product listing, cart management, and user authentication.</p>
<a href="#" class="project-link">View Project <i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x180" alt="Project 2" class="project-image">
<div class="project-content">
<h3 class="project-title">Task Management App</h3>
<p class="project-description">A Vue.js app for managing tasks with drag-and-drop functionality, priority levels, and deadline reminders.</p>
<a href="#" class="project-link">View Project <i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x180" alt="Project 3" class="project-image">
<div class="project-content">
<h3 class="project-title">Portfolio Website</h3>
<p class="project-description">A personal portfolio site built with HTML, CSS, and JavaScript. Showcases projects, skills, and contact information.</p>
<a href="#" class="project-link">View Project <i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience">
<h2 class="section-title">Experience</h2>
<div class="experience-timeline">
<div class="experience-item">
<h3 class="experience-role">Senior Frontend Developer</h3>
<p class="experience-company">TechCorp Inc.</p>
<p class="experience-date">Jan 2021 - Present</p>
<p class="experience-description">Led a team of 5 developers to build scalable web applications. Implemented modern UI/UX practices and optimized performance by 30%.</p>
</div>
<div class="experience-item">
<h3 class="experience-role">Frontend Developer</h3>
<p class="experience-company">WebSolutions Ltd.</p>
<p class="experience-date">Jun 2019 - Dec 2020</p>
<p class="experience-description">Developed responsive websites using React and Vue. Collaborated with designers to translate mockups into functional interfaces.</p>
</div>
<div class="experience-item">
<h3 class="experience-role">Junior Web Developer</h3>
<p class="experience-company">StartupX</p>
<p class="
作者声明:本文包含人工智能生成内容。
