0% found this document useful (0 votes)
10 views

bootstrap

This document is an HTML template for a resume featuring a full stack developer named John Doe. It includes sections for personal information, skills, experience, education, and contact details, along with Bootstrap styling for a responsive layout. A JavaScript function is included to alert users about a future resume download feature.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views

bootstrap

This document is an HTML template for a resume featuring a full stack developer named John Doe. It includes sections for personal information, skills, experience, education, and contact details, along with Bootstrap styling for a responsive layout. A JavaScript function is included to alert users about a future resume download feature.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Resume</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
font-family: Arial, sans-serif;
}
.profile-img {
border-radius: 50%;
width: 150px;
height: 150px;
}
.skills-bar {
margin-bottom: 15px;
}
.skills-bar .progress-bar {
background-color: #007bff;
}
</style>
</head>
<body>

<!-- Header Section -->


<header class="bg-primary text-white text-center py-5">
<div class="container">
<img src="profile.jpg" alt="Profile Picture" class="profile-img">
<h1 class="my-3">John Doe</h1>
<p>Full Stack Developer | JavaScript Enthusiast</p>
</div>
</header>

<!-- About Section -->


<section class="container my-5">
<h2>About Me</h2>
<p>I am a full stack developer with a passion for creating dynamic and
responsive web applications...</p>
</section>

<!-- Skills Section -->


<section class="container my-5">
<h2>Skills</h2>
<div class="skills-bar">
<h4>JavaScript</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:
90%;">90%</div>
</div>
</div>
<div class="skills-bar">
<h4>HTML & CSS</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:
80%;">80%</div>
</div>
</div>
<!-- Add more skills as needed -->
</section>

<!-- Experience Section -->


<section class="container my-5">
<h2>Experience</h2>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Senior Developer at ABC Corp</h5>
<p class="card-text">June 2018 - Present</p>
<p>Responsible for leading the development team and designing
scalable web applications...</p>
</div>
</div>
<!-- Add more experiences as needed -->
</section>

<!-- Education Section -->


<section class="container my-5">
<h2>Education</h2>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Bachelor of Computer Science</h5>
<p class="card-text">XYZ University, 2014 - 2018</p>
<p>Graduated with honors and specialized in software
engineering...</p>
</div>
</div>
<!-- Add more education details as needed -->
</section>

<!-- Contact Section -->


<section class="bg-light py-5">
<div class="container text-center">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
<button id="downloadResume" class="btn btn-primary">Download
Resume</button>
</div>
</section>

<!-- Bootstrap JS and dependencies -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<!-- Custom JavaScript -->
<script>
document.getElementById('downloadResume').addEventListener('click',
function() {
alert('Resume download feature coming soon!');
});
</script>
</body>
</html>

You might also like