→ sajid taz
→ Portfolio page

Portfolio page

This bootstrap css example is contributed by sajid taz, on 12-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author sajid taz

868

v.4.6

Fork Fullscreen

<section class="py-5 bg-light text-center">
        <div class="container">
            <h1 class="display-4 fw-bold">Portfolio</h1>
            <p class="text-muted">Frontend Developer & Data Analyst</p>
        </div>
    </section>

<div class="col-lg-5 text-center">
                    <img src="assets/img/download.jfif" alt="Md. Sajid" class="img-fluid rounded-3 shadow-lg">
                </div>

<div class="col-lg-7">

<span class="text-primary fw-semibold text-uppercase">
                        Personal Biography
                    </span>

<h2 class="display-5 fw-bold mt-2 mb-4">
                        Frontend Developer & Data Analyst
                    </h2>

<p class="lead text-light">
                        I am Md. Sajid, a passionate Frontend Developer and Data Analyst
                        with experience in creating responsive websites, interactive dashboards,
                        and data-driven solutions.
                    </p>

<p class="text-secondary">
                        My expertise includes HTML, CSS, Bootstrap, JavaScript, Python,
                        SQL, Excel, Power BI, and data visualization. I enjoy transforming
                        complex data into meaningful insights and building user-friendly
                        digital experiences.
                    </p>

<p class="text-secondary">
                        Currently, I am enhancing my skills in Web Design, Data Science,
                        and Machine Learning while applying analytical thinking and
                        problem-solving techniques in my professional career.
                    </p>

<div class="row g-4 mt-4">

<div class="col-md-4">
                            <div class="bg-secondary bg-opacity-25 rounded p-3 text-center">
                                <h3 class="fw-bold mb-1">5+</h3>
                                <small>Years Professional Experience</small>
                            </div>
                        </div>

<div class="col-md-4">
                            <div class="bg-secondary bg-opacity-25 rounded p-3 text-center">
                                <h3 class="fw-bold mb-1">15+</h3>
                                <small>Projects Completed</small>
                            </div>
                        </div>

<div class="col-md-4">
                            <div class="bg-secondary bg-opacity-25 rounded p-3 text-center">
                                <h3 class="fw-bold mb-1">24/7</h3>
                                <small>Learning & Improvement</small>
                            </div>
                        </div>

</div>

<div class="mt-4">
                        <a href="contact.html" class="btn btn-primary me-2">
                            Hire Me
                        </a>

<a href="portfolio.html" class="btn btn-outline-light">
                            View Portfolio
                        </a>
                    </div>

</div>

</div>
        </div>
    </section>

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Personal Information</h2>
            </div>

<div class="col-md-4">
                    <div class="card border-0 shadow-sm p-4 text-center">
                        <i class="bi bi-person-fill fs-1 text-primary"></i>
                        <h6 class="mt-3">Md. Sajid</h6>
                    </div>
                </div>

<div class="col-md-4">
                    <div class="card border-0 shadow-sm p-4 text-center">
                        <i class="bi bi-envelope-fill fs-1 text-success"></i>
                        <h6 class="mt-3">your@email.com</h6>
                    </div>
                </div>

<div class="col-md-4">
                    <div class="card border-0 shadow-sm p-4 text-center">
                        <i class="bi bi-geo-alt-fill fs-1 text-danger"></i>
                        <h6 class="mt-3">Dhaka, Bangladesh</h6>
                    </div>
                </div>

</div>

</div>
    </section>

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Education</h2>
            </div>

</div>

</div>
    </section>

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Skills & Expertise</h2>
                <p class="text-secondary">
                    Technologies and tools I use to build modern digital experiences
                </p>
            </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>CSS / Bootstrap</span>
                            <span>85%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-info" style="width:85%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>JavaScript</span>
                            <span>65%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-warning" style="width:65%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Python</span>
                            <span>80%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-danger" style="width:80%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Data Analytics</span>
                            <span>85%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-success" style="width:85%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Power BI</span>
                            <span>80%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-dark" style="width:80%"></div>
                        </div>
                    </div>
                </div>

</div>

</div>
    </section>

<section class="py-5 bg-light">
        <div class="container">

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Training & Certifications</h2>
            </div>

<div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h5>Web Design</h5>
                            <p class="text-muted">
                                WDD
                            </p>
                            <span class="badge bg-primary">Pursuing</span>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h5>Data Science & Machine Learning</h5>
                            <p class="text-muted">
                                ABC
                            </p>
                            <span class="badge bg-primary">Pursuing</span>
                        </div>
                    </div>
                </div>

</div>

</div>
    </section>

<section class="py-5 bg-dark text-white">
        <div class="container">

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Work Experience</h2>
            </div>

<div class="card bg-light text-dark border-0 shadow mb-4">
                <div class="card-body">
                    <h5>DEF</h5>
                    <p class="text-muted">Web Design</p>
                    <p>
                        Designed and developed responsive websites.
                    </p>
                </div>
            </div>

<div class="card bg-light text-dark border-0 shadow">
                <div class="card-body">
                    <h5>Data Analytics Projects</h5>
                    <p class="text-muted">Freelance & Academic</p>
                    <p>
                        Excel, Python, SQL, SPSS, Power BI, dashboard creation,
                        predictive analytics, and business reporting.
                    </p>
                </div>
            </div>

</div>
    </section>

More Examples

Personal Portfolio About Section

Author:
Creative Araf

2 months ago

299

v.5.3
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

2 years ago

9.7k

v.5.3
Music speakers status

Author:
Jonathan

1 year ago

1.2k

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

2 months ago

199

v.5.3
Service list section

Author:
Ad Apon7

3 months ago

891

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

1 year ago

5.1k

v.4.6
final about me section
do not copy

Author:
Fitar Ahmed

3 months ago

280

v.4.6
Service Page

Author:
Shahriar Noyon

3 months ago

292

v.4.6
Featured Product Card

Author:
Prajwal Hallale

2 years ago

3.8k

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

2 years ago

2.1k

v.4.6
Work Experience Section

Author:
Shahriar Noyon

3 months ago

382

v.4.6
vulgh

Author:
Anonymous

1 month ago

143

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent