Build your own portfolio website

Creating a portfolio is one of the most important steps to get success in life. Your portfolio is the key to getting more projects and reviews from clients. For that, you must know how to create a responsive portfolio website that stands out in the market and help to gain projects.

Steps for creating a portfolio website

Buy a domain
Design a prototype in Figma or other tools
Write code for creating your design
Add some cool animations to your design
Purchase hosting
Connect your domain with hosting
Deploy your site

At first, you have to design a prototype model according to your needs using the different graphic designing tools so that you won’t have to face any problems regarding design during the process of coding. We are going to learn about how actually you code your portfolio having a responsive design with a great user interface. Today, we will write HTML, CSS, and Javascript code.

As you can see in the above image, that’s exactly what we’re going to create today. Before jumping to code let me explain the layout, designs, and functions of this portfolio. At the top of the website, there is a nav bar that contains a logo, some navigation links, and a button. In the hero section, there is an image on the left side and a heading, a sub-heading, and a button on the right side. The image on the left side animates whenever you move your cursor over the heading, sub-heading, and button on the right side. That animation is created with a few lines of Javascript code.

In the services section, there are some cards regarding the information on services that you offer to your client. You have to provide complete information regarding your services in detail. After that, there is an ‘about’ section where you can include all your personal information and past events in your life. Make sure you’ll not write all information on the home page. Write some text not more than 150 words and then add a read more or explore button that redirects the user to another separate about page. If you do this, users will get a better experience and your page loading speed will also increase.

Now the main and very important section; is your project section. Your past project showcase must be a unique and very cool design. In order to attract your client before giving you a project you must show your past projects in a unique method. But making it unique doesn’t mean adding a lot of animations. Animations are also necessary but in the correct quantity. The client will always see your past works/projects then only he/she decides whether to give you the project or not. So, a project showcase is very important in your portfolio website.

After that, you must tell your client why you are eligible to be hired. For that, you have to create a ‘why people choose me’ section where you can add your skills and your extra talent/qualification. In today’s portfolio, I’ve added a visa card and added some interesting taglines at the last of the page before the footer. At the footer, there are some social media profile links and a copyright section.

If you’re having trouble understanding me, what exactly I’m talking about. You can watch the video below.

Video of how to build your own portfolio website

As you have seen in the video, all the designs are created with CSS and some functions are created with javascript. In the above video, I’ve shown you the complete well-commented code. That is the exact code I’m going to provide you today. In order to get the source code you just need to scroll down.

Build your own portfolio website [Source Codes]

To create the above-shown portfolio website you need to create some files and a folder. All the file names and folder structures are shown in the image below. Create files and folders exactly with the same name shown in the image below.

Folder structure

After creating all the files, just paste the below code into your respective files.

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Portfolio | Homepage</title>  <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.css">  <script src="https://kit.fontawesome.com/220218f8ed.js" crossorigin="anonymous"></script> </head> <body> <div class="cursor"> </div> <nav> <div class="container"> <div class="logo"> <img src="static/img/logo.svg" alt="" width="50px"> </div> <div class="nav_links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Service</a></li> <li><a href="#">Work</a></li> <li><a href="#">About Me</a></li> </ul> </div> <div class="menu"> <div></div> <div></div> <div></div> </div> <div class="LetsTalk"> <a href="#">Let's Talk</a> </div> </div> </nav>  <div class="heroSection"> <div class="container"> <div class="imgSection"> <img src="static/img/hero.png" alt=""> </div> <div class="ContentSection"> <h2>Collaborate.</h2> <p>A CREATIVE, BOLD DESIGN TO HELP YOU <br> LEVEL-UP YOUR BRAND + BIZ. </p> <a href="#">Get Started</a> </div> </div> </div>  <div class="serviceSection"> <div class="container"> <div class="TitleSection"> <h2>Services</h2> <p>A wide range of consulting services to help you manage your Startup </p> </div> <div class="cardSection"> <div class="card card1"> <div class="innerSection"> <div class="img"><img src="static/img/serviceSection/color-wheel.svg" alt=""></div> <div class="content"> <h2>Design</h2> <p>Web design encompasses many different skills and disciplines in the production and maintenance of websites.</p> </div> </div> </div> <div class="card card2"> <div class="innerSection"> <div class="img"><img src="static/img/serviceSection/ecological.svg" alt=""></div> <div class="content"> <h2>Conception</h2> <p>Go from conception to design and have great looking website, I promise you to help you to grow you Business.</p> </div> </div> </div> <div class="card card3"> <div class="innerSection"> <div class="img"><img src="static/img/serviceSection/growth.svg" alt=""></div> <div class="content"> <h2>User Experience</h2> <p>User experience (UX) is a person's emotions and attitudes about using a particular product, system or service.</p> </div> </div> </div> </div> </div> </div>  <div class="AboutMe"> <div class="container"> <div class="TitleSection"> <h2>About me and My Life Events</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="#">Explore</a> </div> <div class="imgSection"> <img src="static/img/hero.svg" alt=""> </div> </div> </div>  <div class="projects"> <div class="container"> <div class="TitleSection"> <h2>Recent Projects</h2> <p>See What I have done so Far.</p> <div class="buttons"> <div class="leftBtn btn"><i class="fas fa-caret-left"></i></div> <div class="rightBtn btn"><i class="fas fa-caret-right"></i></div> </div> <a href="#">View More</a> </div> <div class="ProjectSection"> <div class="ProjectsContainer">  <div class="project project1"> <div class="imgSection"> <img src="static/img/project/1.png" alt=""> </div> <div class="content"> <h2>Old Portfolio.</h2> <p> I had made this for me as my Portfolio, It has a great and minimal design. That attracts the Heart and trust of many Dev or Client. So Due to the Copyright issue, I can't provide you the code, But can see the Initial Project.</p> <a href="#">Explore</a> </div> </div>  <div class="project project1"> <div class="imgSection"> <img src="static/img/project/1.png" alt=""> </div> <div class="content"> <h2>Team Project.</h2> <p>I had made this for me as my Portfolio, It has great and minimal design. That's attract the Heart and trust of many Dev or Client. So Due to the Copyright issue I can't provide you the code, But can see the Inital Project.</p> <a href="#">Explore</a> </div> </div>  <div class="project project1"> <div class="imgSection"> <img src="static/img/project/1.png" alt=""> </div> <div class="content"> <h2>Friend Projects</h2> <p>I had made this for me as my Portfolio, It has great and minimal design. That's attract the Heart and trust of many Dev or Client. So Due to the Copyright issue I can't provide you the code, But can see the Inital Project.</p> <a href="#">Explore</a> </div> </div> </div> </div> </div>  <div class="whyMe"> <div class="container"> <div class="content"> <h2>Why People Choose Jhon?</h2> <p>Jhon have given following reason why people choose him and you should too.</p> </div> <div class="extraContent"> <div class="box1 box"> <div class="imgSection"> <img src="static/img/icons/certification.svg" alt=""> </div> <div class="innercontent"> <h2>Experience</h2> <p>Jhon Have more than 2 years of experience in Web Field</p> </div> </div> <div class="box2 box"> <div class="imgSection"> <img src="static/img/icons/strategic.svg" alt=""> </div> <div class="innercontent"> <h2>Strategic</h2> <p>Jhon Care about Client and focus on Quality more than Quantity.</p> </div> </div> <div class="box3 box"> <div class="imgSection"> <img src="static/img/icons/notepad.svg" alt=""> </div> <div class="innercontent"> <h2>Results</h2> <p>Jhon Create what you love by taking your ideas and give you an Amazing Results</p> </div> </div> </div> </div> </div>  <div class="extraContent"> <div class="container"> <div class="imgSection"> <img src="static/img/visa_card.svg" alt=""> </div> <div class="contentSection"> <h2>Bring your Amazing Ideas <br> into Reality.</h2> <p>Providing best solutions for your Business and Brand.</p> </div> </div> </div>  <footer> <div class="footerwrapper"> <div class="socialMedia"> <h2>Follow Me</h2> <a href="https://www.facebook.com" target="_blank">Facebook</a> <a href="https://www.instagram.com" target="_blank">Instagram</a> <a href="https://www.youtube.com" target="_blank">Youtube</a> </div> <p>2021 © Jhon Cena. All Rights Reserved. </p> </div> </footer> </body> <script src="app.js"></script> </html>
style.css

{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Karla"; } / Reset CSS / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, ::selectionblockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: "Karla", sans-serif !important; } html::selection, body::selection, div::selection, span::selection, applet::selection, object::selection, iframe::selection, h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, p::selection, blockquote::selection, pre::selection, a::selection, abbr::selection, acronym::selection, address::selection, big::selection, cite::selection, code::selection, del::selection, dfn::selection, em::selection, img::selection, ins::selection, kbd::selection, q::selection, s::selection, samp::selection, small::selection, strike::selection, strong::selection, sub::selection, sup::selection, tt::selection, var::selection, b::selection, u::selection, i::selection, center::selection, dl::selection, dt::selection, dd::selection, ol::selection, ul::selection, li::selection, fieldset::selection, form::selection, label::selection, legend::selection, table::selection, caption::selection, tbody::selection, tfoot::selection, thead::selection, tr::selection, th::selection, td::selection, article::selection, aside::selection, canvas::selection, details::selection, embed::selection, figure::selection, figcaption::selection, footer::selection, header::selection, hgroup::selection, menu::selection, nav::selection, output::selection, ruby::selection, section::selection, summary::selection, time::selection, mark::selection, audio::selection, video::selection { background: #7674c4; } / HTML5 display-role reset for older browsers / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-color: #f8f8f8; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .container{ width: 1100px; margin: 0 auto; } @media only screen and (max-width: 1100px){ .container{ width: 90%; } } / reset closes / / ====================================================================================================== Nav Bar Start ====================================================================================================== / nav{ width: 100%; height: 60px; background-color: #f8f8f8; } nav .container{ height: 100%; display: flex; justify-content: space-between; align-items: center; } nav .container .logo{ width: 50px; height: 40px; display: flex; justify-content: center; align-items: center; } nav .container .logo img{ width: 30px; } nav .container .nav_links{ position: relative; left: 100px; width: auto; z-index: 2; } @media only screen and (max-width: 750px){ nav .container .nav_links{ left: 0; } } nav .container .nav_links ul{ width: 100%; display: flex; } nav .container .nav_links ul li{ font-size: 15px; display: inline-block; width: 80px; height: 30px; } @media only screen and (max-width: 600px){ nav .container .nav_links{ position: absolute; z-index: 1; width: 100%; height: 200px; top:-200px; background-color: #fff; transition: 0.5s ease; } nav .container .nav_links ul{ height: 100%; flex-direction: column; justify-content: space-around; align-items: center; } } nav .container .nav_links ul li a{ position: relative; text-decoration: none; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #696969; } nav .container .menu{ position: relative; left: 60px; cursor: pointer; } @media only screen and (min-width: 600px){ nav .container .menu{ display: none; } } nav .container .menu div{ margin-bottom: 5px; width: 30px; height: 2px; background: #696969; } nav .container .menu div:last-child{ margin-bottom: 0; } nav .container .LetsTalk a{ padding: 13px 30px; background-color: #8c8cf9; border-radius: 5px; color: #fff; text-decoration: none; transition: 0.4s ease; font-size: 15px; font-weight: bold; } nav .container .LetsTalk a:hover{ box-shadow: 3px 3px 10px #b5b5ff; } / nav bar closes / / ====================================================================================================== Main Body Start ====================================================================================================== / body{ overflow-x: hidden; } .heroSection{ width: 100%; height: 600px; } .heroSection .container{ display: flex; justify-content: space-between; align-items: center; height: 100%; } .heroSection .container .imgSection img{ position: relative; width: 600px; opacity: 0; transform: translateY(20px); transition: 0.5s ease; animation: animateHeroSectionImg 0.5s linear forwards; } @keyframes animateHeroSectionImg{ form{ opacity: 0; transform: translateY(20px); } to{ opacity: 1; transform: translateY(0px); } } @media only screen and (max-width: 1060px){ .heroSection .container .imgSection img{ width: 500px; } } .heroSection .container .ContentSection h2{ font-size: 70px; font-family: "nexa", sans-serif !important; color: rgb(64, 66, 75); font-weight: bold; margin-bottom: 20px; } @media only screen and (max-width: 1000px){ .heroSection .container .ContentSection h2{ font-size: 60px; } } @media only screen and (max-width: 900px){ .heroSection .container .imgSection img{ width: 400px; } .heroSection .container .ContentSection h2{ font-size: 50px; } } @media only screen and (max-width: 780px){ .heroSection{ margin-bottom: 20px; } .heroSection .container{ flex-direction: column; justify-content: space-around; align-items: flex-start; } .heroSection .container .imgSection img{ width: 100%; } .heroSection .container .ContentSection h2{ font-family: 65px; } } .heroSection .container .ContentSection p{ font-size: 16px; / font-family: "nexa", sans-serif !important; / color: rgb(64, 66, 75); line-height: 22px; margin-bottom: 30px; } .heroSection .container .ContentSection a{ font-size: 14px; font-weight: bold; text-decoration: none; padding: 14px 24px; background-color: #8c8cf9; color: #fff; border-radius: 5px; transition: 0.5s ease; } .heroSection .container .ContentSection a:hover{ box-shadow: 3px 3px 10px #a5a5d1; } / Services / .serviceSection{ width: 100%; height: 500px; background: #fff; } .serviceSection .container{ height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .serviceSection .container .TitleSection{ text-align: center; margin-top: 20px; } .serviceSection .container .TitleSection h2{ font-size: 35px; font-family: "nexa", sans-serif; color: rgb(64, 66, 75); margin-bottom: 10px; } .serviceSection .container .TitleSection p{ font-size: 16px; color: #696969; word-spacing: 2px; font-family: "Karla", sans-serif; line-height: 20px; } .serviceSection .container .cardSection { width: 100%; height: 300px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1.5rem; } @media only screen and (max-width: 910px){ .serviceSection{ height: 800px; } .serviceSection .container .cardSection { height: 500px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } } .serviceSection .container .cardSection .card{ position: relative; width: auto; height: auto; border: 0.5px solid #cccccc67; box-shadow: 0px 0px 10px rgba(206, 206, 206, 0.281); border-radius: 10px; overflow: hidden; } .serviceSection .container .cardSection .card .innerSection{ width: 90%; height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; } .serviceSection .container .cardSection .card .innerSection .img img{ width: 70px; } @media only screen and (max-width: 600px){ .serviceSection{ height: 1000px; } .serviceSection .container .cardSection { height: 650px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } .serviceSection .container .cardSection .card .innerSection .img img{ width: 50px; } } .serviceSection .container .cardSection .card .innerSection .content h2{ font-size: 20px; color: rgb(64, 66, 75); margin-bottom: 10px; } .serviceSection .container .cardSection .card .innerSection .content p{ font-size: 15px; color: #696969; line-height: 20px; } .serviceSection .container .cardSection .card .text_innerBox_service{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: "nexa",sans-serif; font-weight: bold; font-size: 30px; color: #fff; opacity: 0; } .serviceSection .container .cardSection .card .animationSection{ position: absolute; top: -100px; left: -100px; width: 10px; height: 10px; border-radius: 50%; background-color: #8c8cf9; } / About Me / .AboutMe{ width: 100%; height: 700px; background-color: #fff; } .AboutMe .container{ height: 100%; display: flex; justify-content: space-around; align-items: center; } .AboutMe .container .TitleSection{ width: 500px; text-align: left; } @media only screen and (max-width: 1000px){ .AboutMe .container .TitleSection{ width: auto; text-align: left; } } .AboutMe .container .TitleSection h2{ font-size: 40px; font-family: "nexa",sans-serif; color: rgb(64, 66, 75); line-height: 45px; margin-bottom: 20px; } @media only screen and (max-width: 1000px){ .AboutMe .container .TitleSection{ width: auto; text-align: left; } .AboutMe .container .TitleSection h2{ font-size: 30px; } } .AboutMe .container .TitleSection p{ font-size: 16px; color: #696969; line-height: 24px; margin-bottom: 25px; } .AboutMe .container .TitleSection a{ font-size: 14px; padding: 12px 24px; background-color: #8c8cf9; color: #fff; text-decoration: none; font-weight: 600; } .AboutMe .container .imgSection { position: relative; left: 100px; } .AboutMe .container .imgSection img{ width: 600px; } @media only screen and (max-width: 1000px){ .AboutMe .container .TitleSection{ width: 50%; text-align: left; } .AboutMe .container .TitleSection h2{ font-size: 30px; } .AboutMe .container .imgSection img{ width: 500px; } } @media only screen and (max-width: 870px){ .AboutMe .container .imgSection img{ width: 400px; } } @media only screen and (max-width: 870px){ .AboutMe{ margin-bottom: 100px; } .AboutMe .container{ flex-direction: column; align-items: flex-start; } .AboutMe .container .TitleSection{ width: 100%; text-align: left; } .AboutMe .container .imgSection { left: 0px; align-content: center; } .AboutMe .container .imgSection img{ width: 100%; } } / Projects Section / .projects{ width: 100%; height: 650px; } .projects .container{ height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: start; } .projects .container .TitleSection{ display: block; position: relative; width: 100%; } .projects .container .TitleSection h2{ font-size: 30px; font-family: "nexa", sans-serif; color: rgb(64, 66, 75); margin-bottom: 15px; } .projects .container .TitleSection p{ font-size: 18px; color: #696969; margin-bottom: 20px; } .projects .container .TitleSection .buttons{ width: 150px; display: flex; justify-content: space-between; align-items: center; } .projects .container .TitleSection .buttons .btn{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 2px solid #696969; transition: 0.5s ease; cursor: pointer; } .projects .container .TitleSection .buttons .btn:hover{ background: #696969; color: #fff; } .projects .container .TitleSection a{ float: right; color: #8c8cf9; padding: 10px; border-bottom: 1px dotted #8c8cf9; text-decoration: none; } / ProjectSection / .ProjectSection{ position: relative; width: 100%; height: 400px; overflow: hidden; } .ProjectSection .ProjectsContainer{ position: absolute; width: 300%; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: 1s ease; } .ProjectSection .ProjectsContainer .project{ display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; } .ProjectSection .ProjectsContainer .project .imgSection{ width: auto; height: auto; box-shadow: 0px 0px 15px 4px rgba(151, 151, 151, 0.329); border-radius: 10px; overflow: hidden; } .ProjectSection .ProjectsContainer .project .imgSection img{ width: 500px; filter: grayscale(1); transition: 0.5s linear; } .ProjectSection .ProjectsContainer .project .imgSection img:hover{ filter: grayscale(0); } .ProjectSection .ProjectsContainer .project .content{ width: 500px; } .ProjectSection .ProjectsContainer .project .content h2{ font-family: "nexa",sans-serif; color: rgb(64, 66, 75); font-size: 40px; margin-bottom: 20px; word-spacing: 2px; } @media only screen and (max-width: 1100px){ .ProjectSection .ProjectsContainer .project .imgSection img{ width: 400px; } .ProjectSection .ProjectsContainer .project .content{ width: 45%; } .ProjectSection .ProjectsContainer .project .content h2{ font-size: 30px; } } @media only screen and (max-width: 960px){ .projects{ width: 100%; height: 1000px; } .ProjectSection{ height: 700px; } .ProjectSection .ProjectsContainer .project{ flex-direction: column; } .ProjectSection .ProjectsContainer .project .imgSection { width: 90%; } .ProjectSection .ProjectsContainer .project .imgSection img{ width: 100%; } .ProjectSection .ProjectsContainer .project .content{ width: 100% } .ProjectSection .ProjectsContainer .project .content h2{ font-size: 30px; } } @media only screen and (max-width: 600px){ .projects{ width: 100%; height: 800px; } .ProjectSection{ height: 600px; } .ProjectSection .ProjectsContainer .project{ flex-direction: column; } .ProjectSection .ProjectsContainer .project .imgSection { width: 95%; } .ProjectSection .ProjectsContainer .project .imgSection img{ width: 100%; } } .ProjectSection .ProjectsContainer .project .content p{ font-size: 16px; line-height: 24px; color: #696969; margin-bottom: 25px; } .ProjectSection .ProjectsContainer .project .content a{ font-size: 14px; padding: 12px 25px; background: #8c8cf9; color: #fff; text-decoration: none; font-weight: bold; } / Why We Section / .whyMe{ width: 100%; height: 400px; background: #fff; } .whyMe .container{ height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .whyMe .container .content{ width: 40%; } .whyMe .container .content h2{ font-size: 30px; color: rgb(64, 66, 75); margin-bottom: 20px; } .whyMe .container .content p{ font-size: 16px; color: #696969; } .whyMe .container .extraContent{ width: auto; height: auto; } .whyMe .container .extraContent .box{ width: 500px; height: 90px; background: #fff; margin-bottom: 20px; border: 1px solid #bbbbbb49; box-shadow: 0px 0px 5px 3px rgba(172, 172, 172, 0.1); border-radius: 5px; display: flex; align-items: center; } @media only screen and (max-width: 960px){ .whyMe .container .content{ width: 100%; } .whyMe{ height: 550px; } .whyMe .container{ flex-direction: column; justify-content: space-evenly; align-items: flex-start; } .whyMe .container .extraContent{ width: 100%; height: auto; } .whyMe .container .extraContent .box{ width: 100%; } } @media only screen and (max-width: 600px){ .whyMe .container .content{ width: 100%; } .whyMe{ height: 700px; } .whyMe .container{ flex-direction: column; justify-content: space-evenly; align-items: flex-start; } .whyMe .container .extraContent{ width: 100%; height: auto; } .whyMe .container .extraContent .box{ width: 100%; } } .whyMe .container .extraContent .box .imgSection{ width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: #6f6fff; border-radius: 10px; margin-left: 15px; transition: 0.7s ease; } .whyMe .container .extraContent .box:nth-child(2) .imgSection{ background: rgb(255, 93, 255); } .whyMe .container .extraContent .box:hover .imgSection{ background: rgb(64, 66, 75); } .whyMe .container .extraContent .box .imgSection img{ width: 30px; height: 30px; } .whyMe .container .extraContent .box .innercontent{ margin-left: 20px; width: 80%; } .whyMe .container .extraContent .box .innercontent h2{ font-size: 18px; font-weight: 600; color: rgb(64, 66, 75); margin-bottom: 5px; } .whyMe .container .extraContent .box .innercontent p{ font-size: 14px; font-weight: lighter; color: #696969; line-height: 18px; } / Extra Content / .extraContent{ width: 100%; height: 600px; } .extraContent .container{ height: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: row; } .extraContent .container .imgSection{ width: 400px; } .extraContent .container .imgSection img{ width: 400px; transform: rotate(-85deg); } .extraContent .container .contentSection h2{ font-family: "nexa", sans-serif !important; color: rgb(64, 66, 75); font-size: 40px; line-height: 50px; margin-bottom: 20px; } @media only screen and (max-width: 1100px){ .extraContent .container .imgSection{ width: 500px; } .extraContent .container .imgSection img{ width: 500px; } .extraContent .container .contentSection h2{ font-size: 30px; } } @media only screen and (max-width: 920px){ .extraContent .container{ justify-content: space-between; } } @media only screen and (max-width: 900px){ .extraContent .container .imgSection{ width: 350px; } .extraContent .container .imgSection img{ width: 350px; } .extraContent .container .contentSection h2{ font-size: 30px; } } @media only screen and (max-width: 842px){ .extraContent{ height: 900px; } .extraContent .container{ align-items: flex-start; justify-content: space-around; flex-direction: column; } .extraContent .container .imgSection{ width: 100%; background-color: transparent; } .extraContent .container .imgSection img{ width: 100%; transform: rotate(-10deg); } .extraContent .container .contentSection h2{ font-size: 40px; } } @media only screen and (max-width: 742px){ .extraContent{ height: 700px; } .extraContent .container .contentSection h2{ font-size: 27px; } } .extraContent .container .contentSection p{ font-family: "karla", sans-serif !important; color: #696969; font-size: 16px; line-height: 22px; } / ====================================================================================================== Footer start ====================================================================================================== / footer { position: relative; width: 100%; height: 150px; background: #fff; } footer .footerwrapper { position: relative; width: 1000px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-family: "Karla", sans-serif; } footer .footerwrapper .socialMedia h2 { font-size: 20px; margin-bottom: 10px; color: #222; } footer .footerwrapper .socialMedia a { text-decoration: none; margin-right: 20px; font-size: 16px; color: #333; transition: 0.5s ease; } footer .footerwrapper .socialMedia a:hover { color: #ff4545; } footer .footerwrapper p { font-size: 18px; color: #111; } @media only screen and (max-width: 1000px) { footer .footerwrapper { width: 90%; } } @media only screen and (max-width: 720px) { footer { display: flex; justify-content: center; align-items: center; } footer .footerwrapper { width: 100%; height: 100px; flex-direction: column; } footer .footerwrapper .socialMedia h2 { font-size: 18px; } footer .footerwrapper .socialMedia a { font-size: 14px; } footer .footerwrapper p { font-size: 16px; color: #696969; } } / ====================================================================================================== Footer Closes ====================================================================================================== */
app.js

  // cursor start
let mouseCursor = document.querySelector(".cursor");
let nav_links = document.querySelectorAll("nav .container .nav_links ul li");
window.addEventListener("mousemove", cursor);


function cursor(e) {
    let X = e.clientX;
    let Y = e.clientY;
    mouseCursor.style.top = Y + 'px';
    mouseCursor.style.left = X + 'px';

}

nav_links.forEach(link => {

    link.addEventListener("mouseover", () => {
        mouseCursor.classList.add("link-grow");
        link.classList.add("hovered-link");
    })
    link.addEventListener("mouseleave", () => {
        mouseCursor.classList.remove("link-grow");
        link.classList.remove("hovered-link");

    })
})

// main js start
function navBar() {
    let nav_bar_open = false;
    let nav_menu = document.querySelector(".menu");
    let nav_links = document.querySelector(".nav_links");

    nav_menu.addEventListener("click", () => {
        if (nav_bar_open === false) {
            nav_links.style.top = "60px";
            nav_bar_open = true;

        }
        else if (nav_bar_open === true) {
            nav_links.style.top = "-200px";
            nav_bar_open = false;

        }
    })
}
// Window on load

// After effect
window.addEventListener("mousemove", AfterEffects)
function AfterEffects() {
    // Hero Section
    let heroContent = document.querySelector(".heroSection .container .ContentSection");
    let heroImg = document.querySelector(".heroSection .container .imgSection img");

    heroContent.addEventListener('mousemove', (e) => {
        let x = -e.clientX / 20;
        let y = -e.clientY / 8 + 10;

        heroImg.style.left = x + 'px';
        heroImg.style.top = y + 'px';

    })
    heroContent.addEventListener('mouseleave', (e) => {
        let x = e.clientX / 30;
        let y = e.clientY / 30;

        heroImg.style.left = 0 + 'px';
        heroImg.style.top = 0 + 'px';
    })
}

function projectsSlide() {
    let leftBtn = document.querySelector(".projects .container .TitleSection .buttons .leftBtn");
    let rightBtn = document.querySelector(".projects .container .TitleSection .buttons .rightBtn");

    let projectContainer = document.querySelector(".ProjectSection .ProjectsContainer");
    slide = 0;
    slideBy = 100;

    leftBtn.addEventListener("click", () => {
        if (slide <= -300) {
            slide = -300
        }
        else {
            projectContainer.style.left = slide + "%";

            slide -= slideBy;

        }
    })

    rightBtn.addEventListener("click", () => {
        if (slide >= 0) {
            slide = 0;
        }
        else {
            slide += slideBy;
            projectContainer.style.left = slide + "%";

        }
    })
}
function allFunction() {
    navBar();
    projectsSlide();
}

allFunction();

That’s all you have to do. Congratulations! You have successfully created your own portfolio website using HTML, CSS, and Javascript. Now it’s time to deploy your site and make the world feel your presence.

Steps for creating a portfolio website

Video of how to build your own portfolio website

Build your own portfolio website [Source Codes]

Folder structure

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form