Introduction

Today we will create a portfolio project with the help of HTML, Tailwind, and JavaScript to achieve an impressive Sliding effect. This is very useful because it contain about your profile in which there will be about you, your projects from starting till now you made, contact etc. According to you, you can also add more things to it. You should also make a portfolio about yourself by learning from here.

Now let’s start making this portfolio by following the simple code step-by-step to understand it with clarity without any doubt.

HTML

First, we will create the whole structure of this portfolio using HTML. In which we will first make the navbar, in which there will be our name and navbar tools like Home, About, Contact, etc. Then we will make the introduction section to introduce us. After this, there will be more sections like Our services (professional work), Our projects, which we have to upload here for review, Testimonials for user feedback on what type of experience he/she analyzed, and at the end, a contact and about section.

Tailwind

After making the structure of the portfolio, we will now design this portfolio with the help of Tailwind (a CSS framework used to design a website or make it responsive). In this, we will first make the background black, then give styling to the navbar to make it look better, and we will use position sticky to fix the position of the navbar. Now we will design the entire portfolio one by one, starting with an introduction, then our service, then our projects, a testimonial, and at the end, about and contact information. At the end, we will make this website responsive so it runs smoothly on all devices.

JavaScript

After making the structure and designing the portfolio using HTML and Tailwind, we will now build some logic in it to work properly with the help of JavaScript (an external file will be connected to the HTML page by a link). In javaScript we will first target the navbar to make it sticky and then we will make the navbar appearing in mobile layout by clicking the navbar logo through changing their CSS property of display none to display block of navbar tools.                            Now in the testimonial, the divs of these cards show the first three cards in default case, and when the user hovers, the other three will also appear with some animation effect using JavaScript.

Finally, we made our Sliding effect portfolio using HTML, Tailwind, and JavaScript by following the code step by step. If you have any doubt, then e-mail us through the email I’ve given below. Click on the link given below to download the source code.

For more explanation, click on the link For Live Preview.