→ Juan Martinez
→ Resume template

Resume template

Simple and elegant resume template

This bootstrap css example is contributed by Juan Martinez, on 15-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is CV

Tags: Resume

Author Juan Martinez

594

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            
            <header class="text-center mb-5">
                <h1 class="display-4">John Doe</h1>
                <p class="lead">Web Developer</p>
                <p>
                    <i class="bi bi-envelope-fill me-2"></i>johndoe@email.com |
                    <i class="bi bi-phone-fill me-2"></i>+1 234 567 8900 |
                    <i class="bi bi-geo-alt-fill me-2"></i>New York, NY
                </p>
            </header>

<section class="mb-5">
                <h2 class="section-title">Professional Summary</h2>
                <p>Experienced web developer with a strong background in front-end and back-end technologies. Passionate
                    about creating efficient, user-friendly web applications.</p>
            </section>

<section class="mb-5">
                <h2 class="section-title">Skills</h2>
                <ul class="list-inline">
                    <li class="list-inline-item"><span class="badge bg-primary">HTML5</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">CSS3</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">JavaScript</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">React</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">Node.js</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">Python</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">SQL</span></li>
                    <li class="list-inline-item"><span class="badge bg-primary">Git</span></li>
                </ul>
            </section>

<section class="mb-5">
                <h2 class="section-title">Work Experience</h2>
                <div class="mb-4">
                    <h4>Senior Web Developer</h4>
                    <h5>Tech Solutions Inc. | 2018 - Present</h5>
                    <ul>
                        <li>Led development of responsive web applications using React and Node.js</li>
                        <li>Implemented RESTful APIs and integrated third-party services</li>
                        <li>Mentored junior developers and conducted code reviews</li>
                    </ul>
                </div>
                <div>
                    <h4>Web Developer</h4>
                    <h5>Digital Creations Co. | 2015 - 2018</h5>
                    <ul>
                        <li>Developed and maintained client websites using HTML, CSS, and JavaScript</li>
                        <li>Collaborated with design team to implement pixel-perfect layouts</li>
                        <li>Optimized website performance and implemented SEO best practices</li>
                    </ul>
                </div>
            </section>

<section class="mb-5">
                <h2 class="section-title">Education</h2>
                <div>
                    <h4>Bachelor of Science in Computer Science</h4>
                    <h5>University of Technology | 2011 - 2015</h5>
                </div>
            </section>

<section>
                <h2 class="section-title">Projects</h2>
                <ul>
                    <li><strong>E-commerce Platform:</strong> Developed a full-stack e-commerce solution using MERN
                        stack</li>
                    <li><strong>Task Management App:</strong> Created a React-based task management application with
                        real-time updates</li>
                </ul>
            </section>
        </div>
    </div>
</div>

More Examples

Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

7 months ago

2k

v.5.3
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

9 months ago

2.7k

v.5.3
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

1 year ago

13.2k

v.5.3
Basic Breadcrumb

Author:
Mateo Rojas

7 months ago

726

v.5.3
Calender

Author:
Anonymous

1 year ago

998

v.4.6
Sign in with Google

Author:
Juan Martinez

1 year ago

3.5k

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

7 months ago

5.2k

v.5.3
bootstrap 5 search box with icon Example
Dark Theme Search Bar Light Theme Search Bar Simple Iconic Search Bar

Author:
Arturo

7 months ago

2.8k

v.5.3
Professional Staff Profile Cards with Social Integration

Author:
Isaac Winslow

8 months ago

3.6k

v.5.3
modern search bar with autocompletion
click to see effect

Author:
Mateo Rojas

7 months ago

3.5k

v.5.3
Get In Touch Form Example
Contact us form

Author:
Anonymous

9 months ago

1.5k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

11 months ago

6.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent