Hello Guys! Welcome to my blog this is the first blog of mine I will teach you and you will learn to code a Portfolio Website from scratch by using just HTML/CSS and JavaScript (these are the front-end languages).
Portfolio Website Using Html ,Css and JavaScript
This portfolio website is completely responsive and has animations in it. Also, there is a switch/button for changing the theme of the portfolio website from Dark to Light. Here you will find the step-by-step tutorial by me for the Portfolio website. Let’s get started with this blog now.
This website is completely responsive as I told you above, which means this website will be able to run on all screens whether it’s a Laptop, Tablet Smartphone, etc.
But let’s take an look at the video I made of the website
Step 1 – Writing the HTML code
Now you create a new folder and create a new file called index.html in the folder.
The “header” tag with “class” attribute set to “l-header” shows that this is the header section of the website.
This code creates a basic structure or you can say it markup for a website with a header section and a empty navigation bar but we will add more functions and things to navigation later.
Inside the “header” tag, a “nav” tag is used to create the navigation bar. but at this point, the navigation bar is empty and has no content but we will add more content to it in sometime.
The “link” tags in the “head” section is for external CSS files from two different sources. The first one (“assets/css/styles.css”) loads an CSS file that is created in the “assets/css” folder of the project. The second one loads CSS files for two different icon libraries called “boxicons” and “unicons”.
The “meta” tags in the “head” section specify the character set and the viewport of the website.
Did you notice that I created an “title” tag that is for the title of the website, which will be displayed in the browser title bar.
Overall, this code which is written with HTML provides the basic structure for the website or markup for the website we are making and styling of the header section and sets up the CSS and icons for the website, but it does not include any content or functionality for the navigation bar at this point But it will be added afterwards.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- =====ICONOS===== -->
<link
href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
/>
<title>Portafolio</title>
</head>
<body>
<header class="l-header"><nav class="nav"></nav></header>
</body>
</html>
After this we will fill our empty navigation bar with code
This HTML code is for navigation bar with a logo, menu items, and a toggle button. The header has a class of “l-header” which we can use when we use CSS to design our website. The navigation bar is represented by the “nav” element, which contains more elements inside the “nav” element it.
The first element inside the navigation bar is a div which containing a link with a class of “nav__logo”. This is where the logo of the website is placed.
The second element is a div which has a class of “nav__menu” and a ID of “nav-menu”. This is where the menu items are placed. The menu items are represented by an list with an class of “nav__list”. Each item in the list is represented by a “li” element with a class of “nav__item”. The links for each menu item have an class of “nav__link” and a href attribute linking to a specific section of the webpage.
The third element is a div with an class of “nav__toggle” and an ID of “nav-toggle”. This is an toggle button that is typically used for mobile-responsive navigation bars. It is represented by an icon from the “bx” icon set.
Additionally, there is a icon which has an class of “uil uil-moon change-theme” and an ID of “theme-button”. This icon will be used for switching between light and dark themes on the website.
<header class="l-header">
<nav class="nav">
<div><a href="#" class="nav__logo">Logo</a></div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active">Inicio</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">Sobre mi</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">Habilidades</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">Trabajo</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contacto</a>
</li>
<li class="nav__item">
<i class="uil uil-moon change-theme" id="theme-button"></i>
</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class="bx bx-menu"></i>
</div>
</nav>
</header>
Then we will create the 1 section of the portfolio website
This is an HTML code snippet that defines an section of an website using the <main> and <section> elements.
The <main> element represents the main content of the web page, while the <section> element is used to define a section of the page.
Within the <main> element, there is an <section> element with a class of “home” and a class of “bd-grid”. The “home” class indicates that this section is the homepage section of the web page, while the “bd-grid” class indicates that the section will use a grid layout for its content.
This section has a “id” attribute set to “home”, which means that it can be targeted using an URL fragment identifier (i.e. the #home part of the URL).
<main class="l-main">
<!--===== HOME =====-->
<section class="home bd-grid" id="home"></section>
</main>
After this we will fill this empty section with code.
This is a section of HTML code for the “Home” section of our portfolio website. It consists of three main elements:
- “home__data” is an div element containing a title and a button for the main message of the section.
- “home__title”: an h1 element containing the main title of the section, which reads “Hola! soy Krause, Desarrollador web”. The word “Krause” is highlighted in a different color using the class “home__title-color”.
- “button”: an anchor element styled as a button, with the text “Contacto” and the classes “button”, “btn”, and “btn-3”.
- “home__social”is a div element containing links to the website owner’s social media profiles.
- “home__social-icon”: three anchor elements with classes “home__social-icon”, each containing an icon from a different social media platform: LinkedIn, Behance, and GitHub.
- “home__img” is an div element containing a blob-shaped SVG image of a teal shape with a picture of the website owner in the center.
- “home__blob”is an SVG element with a viewbox of 0 0 479 467 and the xmlns and xmlns:xlink attributes.
- “mask”is a mask element with the id “mask0” and the attribute “mask-type” set to “alpha”.
- “path” is an path element defining the shape of the mask using SVG path data.
- “g” is an group element with a mask attribute referencing the mask with id “mask0”.
- “image” is a image element positioned in the center of the mask with a href attribute which points to the picture of the website owner and the class “home__blob-img”.
<div class="home__data">
<h1 class="home__title">
Hola!<br />soy <span class="home__title-color">Krause</span><br />
Desarrollador web
</h1>
<a href="#" class="button btn btn-3">Contacto</a>
</div>
<div class="home__social">
<a href="" class="home__social-icon"><i class="bx bxl-linkedin"></i></a>
<a href="" class="home__social-icon"><i class="bx bxl-behance"></i></a>
<a href="" class="home__social-icon"><i class="bx bxl-github"></i></a>
</div>
<div class="home__img">
<svg
class="home__blob"
viewBox="0 0 479 467"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<mask id="mask0" mask-type="alpha">
<path
d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"
/>
</mask>
<g mask="url(#mask0)">
<path
d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"
/>
<image
class="home__blob-img"
x="50"
y="110"
href="assets/img/about.png"
/>
</g>
</svg>
</div>
After this code we will add one more <section> tag for the about section of our website.
The code starts with a section element with a class of “about” and an id of “about”. Inside this section, there is a heading element with a class of “section-title” and a text content of “Sobre mi” which means “About me” in English.
Then there is a container element which has a class of “about__container” and an “bd-grid” class for a responsive grid layout. Inside this container, there are two elements:
- The first element is a div with a class of “about__img” which contains an image of the person. The image source is set to “assets/img/about.png” in this code.
- The second element is another div without any class. It contains two elements that is an heading element with class of “about__subtitle” and an paragraph element with an class of “about__text”. These elements contain the name and description of the person respectively.
Overall, this code creates an section with an image and a brief description of the person, which is commonly found on personal or professional websites.
<section class="about section" id="about">
<h2 class="section-title">Sobre mi</h2>
<div class="about__container bd-grid">
<div class="about__img"><img src="assets/img/about.png" alt="" /></div>
<div>
<h2 class="about__subtitle">Manuel Krause</h2>
<p class="about__text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat
ut voluptates soluta, aut earum nemo recusandae cumque
perferendis! Recusandae alias accusamus atque.
</p>
</div>
</div>
</section>
After this About section we will create an new section under this which is going to be our Skills section.
This is a section of a website called “Skills”. It starts with a section title “Habilidades” which means “Skills” in Spanish.
The section has an container with two columns, one is for text and the other is for a image.
The first column has an subtitle “Habilidades profesionales” which means “Professional skills” in English, followed by an paragraph describing the skills. Below that, there are four sets of skills data which include an icon, an skill name, a skills bar and a skills percentage.
The first skills data set has an HTML icon with an skill name of HTML5, followed by a skills bar that shows a filled bar up to 95%. The second skills data set has a CSS icon with a skill name of CSS3, followed by an skills bar that also shows an filled bar up to 95%.
The third skills data set has a JavaScript icon with a skill name of JavaScript, followed by a skills bar that shows a filled bar up to 60%.
The fourth skills data set has a paint icon with a skill name of UX/UI, followed by an skills bar that shows an filled bar up to 85%.
The second column contains an image with an alt attribute of “work7.jpg” which means it is an image related to the work or projects that the owner of the website has done.
<section class="skills section" id="skills">
<h2 class="section-title">Habilidades</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle">Habilidades profesionales</h2>
<p class="skills__text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit
optio id vero amet, alias architecto consectetur error eum eaque
sit.
</p>
<div class="skills__data">
<div class="skills__names">
<i class="bx bxl-html5 skills__icon"></i>
<span class="skills__name">HTML5</span>
</div>
<div class="skills__bar skills__html"></div>
<div><span class="skills__percentage">95%</span></div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class="bx bxl-css3 skills__icon"></i>
<span class="skills__name">CSS3</span>
</div>
<div class="skills__bar skills__css"></div>
<div><span class="skills__percentage">95%</span></div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class="bx bxl-javascript skills__icon"></i>
<span class="skills__name">JAVASCRIPT</span>
</div>
<div class="skills__bar skills__js"></div>
<div><span class="skills__percentage">60%</span></div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class="bx bxs-paint skills__icon"></i>
<span class="skills__name">UX/UI</span>
</div>
<div class="skills__bar skills__ux"></div>
<div><span class="skills__percentage">85%</span></div>
</div>
</div>
<div><img src="assets/img/work7.jpg" alt="" class="skills__img" /></div>
</div>
</section>
After this, we are going to create our another section under this section which is going to be our JOB section.
This is an section of HTML code that creates an “work” section with a title “Trabajo” and a container with six images.
The section starts with a section tag with the class work and an id work. This section tag has a child h2 tag that displays the section title “Trabajo”.
Inside the section tag, there is a div tag with the class work__container and the class bd-grid. This div tag contains six a tags with the class work__img. Each a tag has an img tag inside it, which displays an image. The “img” tag has an src attribute that set to the file path of the image and the alt attribute set to an empty string.
The href attribute of each an tag is set to a empty string, which means that the link will not redirect to any other webpage when clicked. This is a placeholder link that will be updated later with a valid URL.
<section class="work section" id="work">
<h2 class="section-title">Trabajo</h2>
<div class="work__container bd-grid">
<a href="" class="work__img">
<img src="assets/img/work1.jpg" alt="" />
</a>
<a href="" class="work__img">
<img src="assets/img/work2.jpg" alt="" />
</a>
<a href="" class="work__img">
<img src="assets/img/work3.jpg" alt="" />
</a>
<a href="" class="work__img">
<img src="assets/img/work4.jpg" alt="" />
</a>
<a href="" class="work__img">
<img src="assets/img/work5.jpg" alt="" />
</a>
<a href="" class="work__img">
<img src="assets/img/work6.jpg" alt="" />
</a>
</div>
</section>
After this we will add the last but not the least section, which is related to contact.
This code represents a contact section of the website. It includes an HTML form with input fields for name and email, as well as a textarea for a description or message. The form also has a submit button with the text “Enviar”.
The section is contained within a div with the class “contact__container”, and the section itself has the class “contact” and an id of “contact”.
This code is also contained within the main element, which suggests that it is part of the main content of the webpage.
<!--===== CONTACTO =====-->
<section class="contact section" id="contact">
<h2 class="section-title">Contacto</h2>
<div class="contact__container bd-grid">
<form action="" class="contact__form"> <input type="text" placeholder="Nombre" class="contact__input"> <input type="mail" placeholder="Email" class="contact__input"> <textarea name="" id="" placeholder="Descripción" cols="0" rows="10" class="contact__input"></textarea> <input type="button" value="Enviar" class="contact__button button"> </form>
</div>
</section>
</main>Now We will create the footer of the portfolio website and we will add JS to the website too.
This is an HTML code for a website’s footer section.
The code starts with the footer section, indicated by the <footer> tag. The footer contains a title, “Redes,” and social icons for Facebook, Instagram, and Twitter. The icons are represented by the <i> tag with the an class “bx” and “bxl-facebook,” “bxl-instagram,” and “bxl-twitter” respectively. Each of the social icons is wrapped with anchor tag, which is indicated by the <a> tag, and an link to the relevant social media page is provided in the “href” attribute of the “a” tag.
The code also includes a paragraph tag, <p>, with the class “footer__copy” for displaying the copyright information.
The code ends with two JavaScript files, one for the Scroll Reveal library and one for the main JS file for the website.
<!--===== FOOTER =====-->
<footer class="footer">
<p class="footer__title">Redes</p>
<div class="footer__social"> <a href="#" class="footer__icon"><i class='bx bxl-facebook'></i></a> <a href="#" class="footer__icon"><i class='bx bxl-instagram'></i></a> <a href="#" class="footer__icon"><i class='bx bxl-twitter'></i></a> </div>
<p class="footer__copy">© Krause. Todos los derechos reservados</p>
</footer>
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--===== MAIN JS =====-->
<script src="assets/js/main.js"></script>
</body>
</html>And that wrap-up the HTML Part of the website
Step 2 – Writing CSS code For styling the Website.
First of all create a new file called styles.css into the folder
After that start writing the code.
This is an CSS code defining some basic styles for the web page.
- The
*,::before, and::afterselectors are used to apply thebox-sizingproperty to all elements on the page, so that the width and height of elements includes padding and border, not just content. - The
htmlselector sets some styles for the entire HTML document, includingscroll-behaviorandtransition. - The
bodyselector sets the margin, font, color, and background-color for the body of the page. It also defines an transition effect for the body. - The
h1,h2, andpselectors set the margin to 0 for those elements. - The
ulselector sets the margin, padding, and list-style for unordered lists on the page. It also defines a border radius and color. - The
aselector sets the text-decoration to none for links. - The
imgselector sets the maximum width to 100% and the height to auto for images on the page, ensuring they are responsive to the size of the screen. It also sets the display to block.
/*===== BASE =====*/
*,
::before,
::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
transition: 0.3s;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
color: var(--second-color);
background-color: var(--background-color);
transition: 0.3s ease-in-out;
}
h1,
h2,
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
border-radius: 10px;
border-color: black;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
Remember we added classes in our HTML code to the elements? Now, we are going to use them for styling our website. And we are going to style our sections of the website
This CSS code defines styles for an section title and a section container.
The .section-title class defines styles for the section title, which is a heading that serves as an title for the section. It has a relative position and an font-size specified in the custom property --h2-font-size, a color specified in the custom property --first-color, and top and bottom margins specified in the custom properties --mb-2 and --mb-4, respectively. It is centered using text-align: center. It also has a pseudo-element ::after which has an absolute position, an width of 64px, an height of 0.18rem, and is positioned at the top of the heading with a distance of 2rem from the top. It has a background color specified in the custom property --first-color, and a transition of 0.3s.
The .section class defines styles for the section container, which is a container that wraps the content of a section. It has a padding-top of 3 rem and also an padding-bottom of 2 rem.
/*===== CLASS CSS ===== */
.section-title {
position: relative;
font-size: var(--h2-font-size);
color: var(--first-color);
margin-top: var(--mb-2);
margin-bottom: var(--mb-4);
text-align: center;
transition: 0.3s;
}
.section-title::after {
position: absolute;
content: "";
width: 64px;
height: 0.18rem;
left: 0;
right: 0;
margin: auto;
top: 2rem;
background-color: var(--first-color);
transition: 0.3s;
}
.section {
padding-top: 3rem;
padding-bottom: 2rem;
}
Now, let’s style the layout.
This CSS code defines the layout of the website.
The .bd-grid class sets a maximum width of 1150px for the content and uses a CSS grid to organize the layout.
The .l-header class defines the style for the website header. It tells the header to stay fixed at the top of the website, with a z-index which ensures that it is displayed above other elements on the page. It also gives the header a background color and a box-shadow effect and specifies that it should transition over 0.3 seconds when its style changes.
.bd-grid {
max-width: 1150px;
display: grid;
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--background-color);
box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
transition: 0.3s;
}
Now let us style our navigation bar and make it responsive with media queries
This is a CSS code for a navigation bar (nav) that has an menu button (nav__toggle), logo (nav__logo), links (nav__link), and buttons (nav__btns).
The .nav class defines the main container of the navigation bar and has a fixed height with a background color set to var(--fourth-color). It also has justify-content: space-between to separate the logo and links on either side.
.nav__menu is a media query for screens smaller than 767px and sets the menu to be positioned absolutely, hidden initially, and revealed when the menu button is clicked.
.nav__item and .nav__link define the items and links within the navigation bar respectively. .nav__link has a transition property for smooth hover effects and changes its color to var(--second-color) on hover.
.nav__link:hover::after creates a horizontal line under the link on hover with a background color of var(--second-color).
.nav__logo sets the color and padding of the logo.
.nav__toggle is the menu button with a font size of 1.5rem and a cursor pointer.
.nav__btns aligns the buttons in the navigation bar.
/*===== NAV =====*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
transition: 0.3s;
background-color: var(
--fouth-color
); /* border-bottom: solid var(--second-color); */
}
@media screen and (max-width: 767px) {
.nav__menu {
position: absolute;
top: 100%;
right: -100%;
width: 88%;
height: 500%;
padding: 2rem;
transition: 0.5s;
background-color: var(--fouth-color);
border-left: solid var(--second-color);
border-bottom: solid var(--second-color);
}
}
.nav__item {
margin-bottom: 0px;
}
.nav__link {
position: sticky;
transition: 0.5s;
align-items: end;
width: 80%;
height: 100%;
color: var(--second-color); /* background-color: var(--first-color); */
transition: 0.3s;
}
.nav__link:hover {
position: relative;
}
.nav__link:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 1.3rem;
background-color: var(--second-color);
transition: 0.3s;
}
.nav__logo {
color: var(--second-color);
padding: 4rem;
}
.nav__toggle {
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
.nav__btns {
display: flex;
align-items: center;
}
Now, let’s make our website change its theme
This code is related to the implementation of dark mode functionality in a website.
The .change-theme class is used to style an element that will trigger the change of theme, such as a button or an icon. It has a font size of 1.25rem, an color of var(--second-color) (which will be white in the light theme), a right margin of var(--mb-2), and a cursor of pointer to indicate it is clickable. When hovered over, the color changes to var(--third-color) (which is a shade of blue-green).
The body.dark-theme selector targets the body element when the dark mode is activated. It sets the values of the custom properties --first-color, --second-color, --third-color, --fourth-color, --fifth-color, --sixth-color, --background-color, and --background-color-2 to new values that reflect the dark mode color scheme.
The body.dark-theme:hover selector sets a transition effect that will be applied when the user hovers over the dark mode toggle, giving an smooth transition effect.
Finally, the body.uil-sun:hover selector sets an similar transition effect for when the user hovers over the light mode toggle. uil-sun is not defined in the code you provided, but it’s possible that it is used to identify the element that toggles the light mode.
/* DARK MODE */
.change-theme {
font-size: 1.25rem;
color: var(--second-color);
margin-right: var(--mb-2);
cursor: pointer;
}
.change-theme:hover {
color: var(--third-color);
}
body.dark-theme {
--hue-color: 224;
--first-color: #04d4b8;
--second-color: #fff;
--third-color: #292929;
--fouth-color: #01806f;
--fifth-color: #0054d1;
--sixth-color: #008573;
--background-color: #002042;
--background-color-2: #381e74;
}
body.dark-theme:hover {
transition: 0.3s;
}
body.uil-sun:hover {
transition: 0.3s;
}
Now, We will style our Active menu and show menu.
The first CSS rule .active::after is used to add a horizontal bar below the currently active menu link. The ::after pseudo-element is used to create an new element that is positioned after the content of the selected element. The position: absolute property makes the pseudo-element positioned relative to its closest positioned ancestor. The content: '' property sets the content of the pseudo-element to an empty string, so it is not visible. The width, height, left, top, and background-color properties are used to tell the position and size of the bar and its color.
The second CSS rule .show is used to show the navigation menu when the toggle button is clicked. The right: -60% property moves the menu container to the left, making it visible on the screen. The padding: 1rem property adds some space between the menu items and the container’s edges.
/*Active menu*/
.active::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 1.3rem;
background-color: var(--second-color);
} /*=== Show menu ===*/
.show {
right: -60%; /* top:10%; */
padding: 1rem;
}
Now, let us style our home section of the portfolio website
This is a CSS code for styling a section with class “home”. It includes styles for various elements within the section, such as the title, social media icons, and image.
The “.home” class has an position of relative and row-gap of 5rem. The padding for the section is 4rem on the top, 0 on the right and left, and 5rem on the bottom.
The “.home__data” class has an align-self of center. The “.home__title” class has an font size of a variable defined elsewhere as the big font size and a margin-bottom of an variable defined elsewhere as mb-5. The text color for this element is defined as the first color variable defined elsewhere.
The “.home__social” class sets display to flex and flex-direction to column. The “.home__social-icon” class sets the width to max-content, margin-bottom to a variable defined elsewhere as mb-2, font-size to 1.5rem, and color to the second color variable defined elsewhere. When hovered, the color changes to the first color variable.
The “.home__img” class has an position of absolute, and is aligned to the right and bottom of the section. The width is set to 260px, and there is an transition effect applied to it.
The “.home__blob” class sets the fill to the first color variable, with a transition effect applied. The “.home__blob-img” class sets the width to 360px.
.home {
position: relative;
row-gap: 5rem;
padding: 4rem 0 5rem;
}
.home__data {
align-self: center;
}
.home__title {
font-size: var(--big-font-size);
margin-bottom: var(--mb-5);
}
.home__title-color {
color: var(--first-color);
}
.home__social {
display: flex;
flex-direction: column;
}
.home__social-icon {
width: max-content;
margin-bottom: var(--mb-2);
font-size: 1.5rem;
color: var(--second-color);
}
.home__social-icon:hover {
color: var(--first-color);
}
.home__img {
position: absolute;
right: 0;
bottom: 0;
width: 260px;
transition: .3s;
}
.home__blob {
fill: var(--first-color);
transition: .3s;
}
.home__blob-img {
width: 360px;
}Now, the buttons of the website.
The code provided contains styles for two types of buttons: .button and .btn.
.button is a basic button style, which is an inline block element with some padding, font weight, and border radius. It also has a hover state with a box shadow to give it some interactivity.
.btn is a more complex button style with an pseudo-element (::before) and a pseudo-element (::after) that creates a skewed effect. The button has a transition property that allows for an smooth transition between states. On hover, the button’s pseudo-elements transition to create an animation effect.
Specifically, the .btn-3 style is used to style this particular button type. When hovering, the ::after element translates to the right by 240 pixels and changes its background color to white with an transparency of 49%. The ::before element changes its background color to the first color variable (presumably the primary color of the website) and increases its border thickness and size by 10% with an 20-degree skew.
/*BUTTONS*/
.button {
display: inline-block;
color: var(--second-color);
padding: 0.75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: 0.5rem;
transition: 0.3s;
cursor: pointer;
}
.button:hover {
box-shadow: 0px 0px 40px var(--first-color);
}
.btn {
position: relative;
padding: 20px 50px;
text-decoration: none;
letter-spacing: 10px;
text-indent: 10px;
z-index: 2;
}
.btn-3 {
transition: all 0.6s ease;
}
.btn-3::after {
content: "";
position: absolute;
width: 10%;
height: 110%;
left: -10%;
top: 0;
transform: skew(20deg, 0deg);
background-color: var(--first-color);
z-index: -1;
transition: all 0.4s ease;
}
.btn-3::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: skew(20deg, 0deg);
border: 3px solid var(--first-color);
transition: all 0.4s ease;
z-index: -1;
}
.btn-3:hover::after {
background-color: #ffffff31;
transform: skew(20deg, 0deg) translateX(240px);
}
.btn-3:hover::before {
background-color: var(--first-color);
border: 3px solid var(--first-color);
transform: skew(20deg, 0deg) scale(1.1);
}
Let us now style the about section of our website.
This code defines the styles for an “About” section in a web page.
.about__container is an container element for the section and sets the row gap between its child elements to 2rem and centers the text.
.about__subtitle is a class for a subtitle element in the section and sets the margin bottom to var(--mb-2).
.about__img is a class for a container element for an image and sets the justify-self property to center it horizontally.
.about__img img selects the image inside the container and sets its width to 200px and border-radius to .5rem.
/* ===== ABOUT =====*/
.about__container {
row-gap: 2rem;
text-align: center;
}
.about__subtitle {
margin-bottom: var(--mb-2);
}
.about__img {
justify-self: center;
}
.about__img img {
width: 200px;
border-radius: 0.5rem;
}
Now, Lets move to Skills section of the website.
This is a CSS code for the “skills” section of a website.
.skills__containersets the layout of the container element for the skills section with a row gap of 2rem and text-align center..skills__subtitlesets the style of the subtitle of the section with a margin-bottom ofvar(--mb-2)which refers to a variable that holds the value of 1.5rem..skills__textsets the style of the text in the section with an margin-bottom ofvar(--mb-4)which refers to a variable that holds the value of 3rem..skills__datais a container for an skill and its corresponding bar. It is a flex container that aligns items to the center and has an position of relative, a font weight ofvar(--font-semi)which is an variable holding a semi-bold font weight, a padding of .5rem and 1rem, a margin-bottom ofvar(--mb-4), and a border-radius of .5rem. It also has a box-shadow that gives an subtle elevation to the container element..skills__iconsets the style of the icon of a skill. It has a font size of 2rem, a margin-right ofvar(--mb-2)which refers to a variable holding the value of 1.25rem, and a color ofvar(--first-color)which is a variable holding an color value..skills__namesis a container for the name of a skill and its corresponding bar. It is a flex container that aligns items to the center..skills__baris the element that represents the bar of an skill. It has a position of absolute, a left and bottom position of 0, a background-color ofvar(--first-color)which is a variable holding a color value, a height of .25rem, a border-radius of .5rem, and a z-index ofvar(--z-back)which is a variable holding a z-index value..skills__html,.skills__css,.skills__js, and.skills__uxare classes that represent different skills with different bar widths..skills__imgsets the style of the image of a skill with a border-radius of .5rem.
/* ===== SKILLS =====*/
.skills__container {
row-gap: 2rem;
text-align: center;
}
.skills__subtitle {
margin-bottom: var(--mb-2);
}
.skills__text {
margin-bottom: var(--mb-4);
}
.skills__data {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-weight: var(--font-semi);
padding: 0.5rem 1rem;
margin-bottom: var(--mb-4);
border-radius: 0.5rem;
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
}
.skills__icon {
font-size: 2rem;
margin-right: var(--mb-2);
color: var(--first-color);
}
.skills__names {
display: flex;
align-items: center;
}
.skills__bar {
position: absolute;
left: 0;
bottom: 0;
background-color: var(--first-color);
height: 0.25rem;
border-radius: 0.5rem;
z-index: var(--z-back);
}
.skills__html {
width: 95%;
}
.skills__css {
width: 95%;
}
.skills__js {
width: 60%;
}
.skills__ux {
width: 85%;
}
.skills__img {
border-radius: 0.5rem;
}
Now, Let us move on the styling of the work section
This CSS code defines the styles for the “Work” section of a web page.
The .work__container class specifies the container element for the section and sets the gap between its child elements to 2rem.
The .work__img class sets the styles for the images in the section. It sets an box shadow effect, border-radius, and limits the maximum width and height of the image to 300px. It also sets overflow to hidden, which hides any content that exceeds the dimensions of the container.
The .work__img img selector applies styles to the actual image within the .work__img container. It sets a transition effect of 1s on the image, which means that any CSS property changes will be animated over an period of 1 second.
Finally, the .work__img img:hover selector sets the image to enlarge slightly when hovered over by using the transform property with the scale() function. This effect gives the user visual feedback when they interact with the image.
/* ===== WORK =====*/
.work__container {
row-gap: 2rem;
}
.work__img {
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
border-radius: 0.5rem;
overflow: hidden;
max-width: 300px;
max-height: 300px;
}
.work__img img {
transition: 1s;
}
.work__img img:hover {
transform: scale(1.1);
}
Let us now style the contact section of our website
This is CSS code for styling the contact section of a website.
.contact__input sets the style for the input fields in the contact form, including the font size, font weight, padding, border radius, border, and margin bottom.
.contact__button sets the style for the button in the contact form, including font size, cursor, margin left, and background color.
Overall, the styles are simple and clean, using an consistent color scheme with the rest of the website.
/* ===== CONTACT =====*/
.contact__input {
width: 100%;
font-size: var(--normal-font-size);
font-weight: var(--font-semi);
padding: 1rem;
border-radius: 0.5rem;
border: 1.5px solid var(--second-color);
outline: none;
margin-bottom: var(--mb-4);
}
.contact__button {
display: block;
border: none;
outline: none;
font-size: var(--normal-font-size);
cursor: pointer;
margin-left: auto;
background-color: var(--first-color);
}
Now lets us style the footer section of our website
This is a CSS code for a website’s footer. Here’s what each part does:
- The
.footerclass defines the styles for the footer section. It sets the background to a linear gradient of 45 degrees, going from black to a dark grey color. The text color is set to the primary color defined earlier in the code. Thetext-alignproperty centers the content within the footer. Thefont-weightproperty is set to semibold. There is a padding of 2rem on the top and bottom of the footer. Finally, there is an transition of 0.3 seconds for any changes to the footer’s style. - The
.footer__titleclass styles the title of the footer. It sets the font size to 2rem and adds a margin-bottom of var(–mb-4) (which is defined earlier in the code). - The
.footer__socialclass styles the social icons in the footer. It adds an margin-bottom of var(–mb-4) to give some space between the icons and the title. - The
.footer__iconclass styles the individual icons in the social icon list. It sets the font size to 1.5rem, adds an margin of 0 on the top and bottom, and var(–mb-2) on the left and right (which is defined earlier in the code). It says that the default color is white, and when the user hovers over it, it transitions the color to the primary color defined earlier in the code. - The
.footer__copyclass styles the text at the very bottom of the footer. It sets the font size to var(–smaller-font-size), which is defined earlier in the code.
/* ===== FOOTER =====*/
.footer {
background: linear-gradient(45deg, black, #292929);
color: var(--first-color);
text-align: center;
font-weight: var(--font-semi);
padding: 2rem 0;
transition: 0.3s;
}
.footer__title {
font-size: 2rem;
margin-bottom: var(--mb-4);
}
.footer__social {
margin-bottom: var(--mb-4);
}
.footer__icon {
font-size: 1.5rem;
color: #fff;
margin: 0 var(--mb-2);
}
.footer__icon:hover {
color: var(--first-color);
transition: 0.3s;
}
.footer__copy {
font-size: var(--smaller-font-size);
}
Lastly, Let’s add some media queries so that our website can be responsive.
The code snippet provided contains media queries, which allow the website’s layout and design to adapt to different screen sizes. Media queries apply different styles to the HTML elements based on the screen size of the device being used to view the website.
The first media query targets devices with a maximum width of 320 pixels. It modifies the layout of the home section by increasing the row gap between elements and reducing the width of the home image to 200 pixels.
The second media query targets devices with a minimum width of 576 pixels. It adjusts the layout of several sections, including home, about, skills, work, and contact. It increases the padding of the home section, aligns the social icons to the bottom, resizes the home image and shifts it to the bottom, updates the grid layout and alignment of the about and skills sections, and changes the grid layout of the work section. The contact form is also adjusted to a width of 360 pixels, and the contact container is aligned to the center.
The third media query targets devices with a minimum width of 768 pixels. It further modifies the layout of several sections, including the header, home, about, skills, and work sections. The header height is increased, and the navigation list is changed to display as a flexbox. The home section padding is increased, and the home image is resized and shifted further down. The about section image is resized, and the skills section grid layout is changed to two columns. The work section grid layout is also changed to three columns.
The final code snippet at the bottom sets the font family for all textarea and input elements.
/* ===== MEDIA QUERIES=====*/
@media screen and (max-width: 320px) {
.home {
row-gap: 2rem;
}
.home__img {
width: 200px;
}
}
@media screen and (min-width: 576px) {
.home {
padding: 4rem 0 2rem;
}
.home__social {
padding-top: 0;
padding-bottom: 2.5rem;
flex-direction: row;
align-self: flex-end;
}
.home__social-icon {
margin-bottom: 0;
margin-right: var(--mb-4);
}
.home__img {
width: 300px;
bottom: 25%;
}
.about__container {
grid-template-columns: repeat(2, 1fr);
align-items: center;
text-align: initial;
}
.skills__container {
grid-template-columns: .7fr;
justify-content: center;
column-gap: 1rem;
}
.work__container {
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
padding-top: 2rem;
}
.contact__form {
width: 360px;
padding-top: 2rem;
}
.contact__container {
justify-items: center;
}
}
@media screen and (min-width: 768px) {
body {
margin: 0;
}
.section {
padding-top: 4rem;
padding-bottom: 3rem;
}
.section-title {
margin-bottom: var(--mb-6);
}
.section-title::after {
width: 80px;
top: 3rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__list {
display: flex;
padding-top: 0;
}
.nav__item {
margin-left: var(--mb-6);
margin-bottom: 0;
}
.nav__toggle {
display: none;
}
.nav__link {
color: var(--second-color);
}
.home {
padding: 8rem 0 2rem;
}
.home__img {
width: 400px;
bottom: 10%;
}
.about__container {
padding-top: 2rem;
}
.about__img img {
width: 300px;
}
.skills__container {
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
align-items: center;
text-align: initial;
}
.work__container {
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
}
}
@media screen and (min-width: 992px) {
.bd-grid {
margin-left: auto;
margin-right: auto;
}
.home {
padding: 10rem 0 2rem;
}
.home__img {
width: 450px;
}
}
textarea {
font-family: var(--body-font);
}
input {
font-family: var(--body-font);
}Don’t You think we should even add a little JavaScript to our portfolio website?
Step 3 – Writing JS code For Functioning of the Website.
First, go create main.js file and we’ve already linked it with HTML code above.
Lets add the functionality of show menu to the website.
This code defines a function called showMenu that takes two parameters: toggleId and navId. It then defines a constant called toggle and sets its value to the HTML element with the ID specified by toggleId. It also defines an constant called nav and sets its value to the HTML element with the ID specified by navId.
The function then checks if both toggle and nav exist. If they do, it adds an event listener to toggle for a click event. When toggle is clicked, it toggles the show class on the nav element.
This code is used to toggle the navigation menu on and off when the user clicks on an toggle button with the ID nav-toggle. When the toggle button is clicked, the function adds or removes the show class on the navigation menu with the ID nav-menu, which displays or hides the menu respectively.
/*===== MENU SHOW =====*/
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId) if (toggle && nav) {
toggle.addEventListener('click', () => {
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle', 'nav-menu')This is a JavaScript code that performs two functions: removes the mobile menu when a navigation link is clicked, and adds an “active” class to the navigation link when its corresponding section is in the viewport.
The first part of the code selects all the navigation links using document.querySelectorAll('.nav__link'). It then defines a function called linkAction() that removes the “show” class from the navigation menu when any of the navigation links are clicked. This is achieved by selecting the navigation menu using document.getElementById('nav-menu') and calling the classList.remove() method on it. Finally, it adds a click event listener to each navigation link that calls the linkAction() function.
The second part of the code selects all the sections using document.querySelectorAll('section[id]'). It then defines an function called scrollActive() that checks which section is currently in the viewport using the window.pageYOffset property and the offsetHeight and offsetTop properties of each section. If a section is in the viewport, it adds the “active” class to its corresponding navigation link using the classList.add() method. If the section is not in the viewport, it removes the “active” class from its corresponding navigation link using the classList.remove() method. Finally, it adds an scroll event listener to the window that calls the scrollActive() function.
/*==================== REMOVE MENU MOBILE ====================*/
const navLink = document.querySelectorAll('.nav__link')
function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')
}
})
}
window.addEventListener('scroll', scrollActive)This code declares a few constants and initializes a ScrollReveal object to add scroll reveal animation to different elements on a webpage.
ScrollReveal is a JavaScript library that allows you to animate elements as you scroll down the page. You can set various options such as the origin, distance, duration, delay, and more to customize the animation.
The first part of the code initializes the sr object with the following options:
origin: Specifies the position from where the animation should start. In this case, it is set totop, which means the animation starts from the top of the element.distance: Specifies the distance the element moves during the animation.duration: Specifies the duration of the animation.delay: Specifies the delay before the animation starts.
The next part of the code applies these options to reveal different elements on the page. Each element is selected using its class or ID, and the animation is applied to it. The delay option is set to different values for each group of elements to create staggered animations.
Finally, the code declares some constants for a dark theme and an icon, and it retrieves the previously selected theme and icon from local storage. This is likely used later in the code to apply the selected theme to the webpage.
/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
origin: 'top',
distance: '60px',
duration: 2000,
delay: 200,
// reset: true
});
sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{});
sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400});
sr.reveal('.home__social-icon',{ interval: 200});
sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200});
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'
// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')This code block is responsible for handling the theme-switching functionality.
The getCurrentTheme function checks whether the dark theme is applied to the body element. If it is, it returns 'dark', otherwise 'light'. The getCurrentIcon function checks whether the dark theme icon is displayed. If it is, it returns 'uil-moon', otherwise 'uil-sun'.
The code checks if the user has previously selected a theme by checking for values in localStorage with the keys 'selected-theme' and 'selected-icon'. If such values exist, the code sets the theme and icon based on these values. If the user had selected the dark theme, it adds the dark-theme class to the body and sets the theme button icon to the moon icon. If the user had selected the light theme, it removes the dark-theme class from the body and sets the theme button icon to the sun icon.
The theme switching is triggered by a click event on the themeButton element. When the button is clicked, the dark-theme class is toggled on the body element, and the icon theme is toggled on the theme button element. The current theme and icon are then saved to localStorage with the keys 'selected-theme' and 'selected-icon'.
// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun'
// We validate if the user previously chose a topic
if (selectedTheme) {
// If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme)
}
// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
// Add or remove the dark / icon theme
document.body.classList.toggle(darkTheme)
themeButton.classList.toggle(iconTheme)
// We save the theme and the current icon that the user chose
localStorage.setItem('selected-theme', getCurrentTheme())
localStorage.setItem('selected-icon', getCurrentIcon())
})And that completes our website. The final product is this:-
FAQs
How do I switch between the dark and light theme on the portfolio website?
You can switch very easily, you will see a button at the top of the website which is for this purpose only just click that and your website will automatically change its theme.
Is the portfolio website mobile-friendly?
Yes the portfolio website is user-friendly and very responsive, this can be run in a Laptop, Desktop, tablet and even Smartphones.
Is this website and design unique?
Yes this website is not similar to other portfolio available it has a proper functioning and has a unique styling too which makes it super cool in looking.
How was the portfolio website built?
This portfolio website is a front-end project which is made by just HTML, CSS and JavaScript It also has a amazing functionality of changing its theme.
Thank you for reading. I hope you understood and liked the blog.