→ Ad Apon7
→ portfoilo page

portfoilo page

Forked from> @Emam_Gajjali/portfoilo-page

This bootstrap css example is contributed by Ad Apon7, on 15-May-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Ad Apon7

328

v.5.3

Fork Fullscreen

<section >
<div class="container my-5">
    
    
    <h2 class="section-title">Personal Information</h2>
    <div class="resume-card text-center">
        <h1 class="display-4 fw-bold">Emam Gajjali</h1>
        <p class="lead text-primary fw-semibold">Frontend Developer</p>
        <div class="d-flex justify-content-center flex-wrap gap-4 mt-4">
            <span><strong>Email:</strong> email@example.com</span>
            <span><strong>Phone:</strong> +880 123456789</span>
            <span><strong>Location:</strong> Dhaka, Bangladesh</span>
            <span><strong>LinkedIn:</strong> linkedin.com/in/Md-Gajjali</span>
        </div>
    </div>

<h2 class="section-title">Education</h2>
    <div class="resume-card">
        <div class="education-item">
            <h5 class="fw-bold">Master of Science in Computer Science</h5>
            <p class="mb-1 text-muted">University of Dhaka</p>
            <span class="badge bg-light text-dark">2020 - 2022</span>
        </div>
        <div class="education-item">
            <h5 class="fw-bold">Bachelor of Science in Engineering</h5>
            <p class="mb-1 text-muted">Example Institute of Technology</p>
            <span class="badge bg-light text-dark">2016 - 2020</span>
        </div>
    </div>

<h2 class="section-title">Special Skills</h2>
    <div class="resume-card text-center">
        <span class="skill-badge">Next.js (App Router)</span>
        <span class="skill-badge">React Hooks</span>
        <span class="skill-badge">Tailwind CSS</span>
        <span class="skill-badge">Redux Toolkit</span>
        <span class="skill-badge">TypeScript</span>
        <span class="skill-badge">Framer Motion</span>
        <span class="skill-badge">Node.js / Express</span>
    </div>

<h2 class="section-title">Training & Certifications</h2>
    <div class="resume-card">
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="p-4 border rounded-3 bg-light d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="fw-bold mb-1">Modern Web Development</h6>
                        <p class="small mb-0 text-muted">Issued by Programming Hero</p>
                    </div>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#certModal1">View Details</button>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="p-4 border rounded-3 bg-light d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="fw-bold mb-1">Advance Redux State Management</h6>
                        <p class="small mb-0 text-muted">Issued by Udemy</p>
                    </div>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#certModal2">View Details</button>
                </div>
            </div>
        </div>
    </div>

<h2 class="section-title">Working Experience</h2>
    <div class="resume-card">
        <div class="experience-item">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h5 class="fw-bold mb-0">Frontend Web Developer</h5>
                    <p class="text-primary mb-2">Self-Employed / Freelance</p>
                </div>
                <span class="badge bg-dark">2023 - Present</span>
            </div>
            <ul class="mt-2">
                <li>Building e-commerce applications with Next.js and Redux Toolkit.</li>
                <li>Creating interactive portfolios using Framer Motion animations.</li>
                <li>Integrating REST APIs with Node.js backends.</li>
            </ul>
        </div>
    </div>

</div>

<div class="modal fade" id="certModal1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Certificate Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img class="cartificate" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmarketplace.canva.com%2FEAFH_f4DrV0%2F2%2F0%2F1600w%2Fcanva-gold-luxury-certificate-of-completion-template-yz6w30Bp85w.jpg&f=1&nofb=1&ipt=fa2cda58dc92b93bf6b54ebb28dfd2b39fea1a03d48d30cbac50aec7001b5547" alt="img" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="certModal2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Certificate Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                                <img class="cartificate" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmarketplace.canva.com%2FEAFH_f4DrV0%2F2%2F0%2F1600w%2Fcanva-gold-luxury-certificate-of-completion-template-yz6w30Bp85w.jpg&f=1&nofb=1&ipt=fa2cda58dc92b93bf6b54ebb28dfd2b39fea1a03d48d30cbac50aec7001b5547" alt="img" />

</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

</section>

More Examples

About Section

Author:
istiakahmedchowdhury10

1 week ago

20

v.4.6
Hero section with an image

Author:
Ankit khedkar

1 year ago

14.7k

v.5.3
client feedback

Author:
Huryra

1 week ago

48

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

3.7k

v.4.6
aboutContwnt

Author:
Sahin Miah

2 months ago

763

v.4.6
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.3k

v.4.6
mision and vission

Author:
Ad Apon7

2 months ago

573

v.5.3
Section Title

Author:
istiakahmedchowdhury10

1 week ago

47

v.4.6
News Portal Full Website

Author:
Code Bro io

1 week ago

55

v.5.3
home_all_contant

Author:
Sahin Miah

2 months ago

911

v.4.6
portfoilo page

Author:
Ad Apon7

2 months ago

788

v.5.3
Plant Store Home page

Author:
Code Bro io

1 week ago

37

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent