This project is a full creative portfolio website designed to showcase skills, experience, services, and projects. It uses Bootstrap for layout, WOW.js for animations, and Slick Slider for carousels.The website is structured with multiple sections — hero, about, skills, experience, portfolio, blog, etc.
CSS controls the rich visuals, typography, shapes, parallax elements, and hover animations. JavaScript handles scroll effects, sliders, animated elements, and dynamic background styling.
HTML
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#home"> LOGO </a>
</nav>
</header>
The HTML builds the entire website structure using semantic sections like hero, skills, portfolio, and testimonial. Bootstrap classes are used to make the navbar responsive, including an off-canvas menu for mobile. The hero section contains animated layered images and big intro text styled with WOW animations. Sections like Skills and Services use Bootstrap cards arranged in rows and columns. The portfolio grid uses image hover overlays to reveal “View Project” buttons.
Testimonials are wrapped inside a slider container later controlled by Slick. The contact form includes name, email, and message fields styled with Bootstrap. The footer displays contact info and copyright text. External libraries (Bootstrap, WOW.js, Slick) are linked in the <head> and before closing </body>. The custom script.js and style.css files provide interactivity and design enhancements.
CSS
.navigation.nav-bg {
background-color: #41228e;
padding: 15px 100px;
}
The CSS defines global typography using Google Fonts and resets UI defaults. Color schemes, spacing, and button styles create a consistent modern portfolio design. The .navigation.nav-bg class gives the navbar a solid background when scrolling. Hero section layers are absolutely positioned to create a parallax-like visual effect. The .wave animation inside skill progress cards animates circular water-like waves.
The hover effects for cards and portfolio items scale images and show overlays. Slick slider dots and buttons are custom-styled for branding consistency. Testimonial background shapes use absolute positioning to float behind content. Form inputs are styled with a minimalist bottom border design. The floating YouTube button is styled with rounded shapes and hover animations.
JavaScript
$(".testimonial-slider").slick({
dots: true,
slidesToShow: 1,
arrows: false
});
The script starts by initializing WOW.js so all .wow elements animate on scroll. A scroll listener adds/removes .nav-bg to make the navbar change style after scrolling 100px. Elements with data-background dynamically receive inline background images. Elements with data-color get background colors injected via JS. Skill progress bars move their wave graphics based on data-progress attributes.
Slick slider initializes for testimonials, turning them into a carousel. Another Slick slider controls continuous scrolling client logos. Responsive breakpoints modify how many logos appear per slide. A custom scroll-spy highlights the current nav item based on scroll position. jQuery selectors and loops make the entire UI interactive and animated.
