Tell us what’s happening:
Hi all, I am currently doing my final project of making a personal portfolio and I’m going to give it my all to make my website nice as possible as its something I want to use in the future. All of my code is written by me, however, I am thinking of adding a CSS UI I found in UIverse which has open source code. I was wondering if it is okay to use it in the first place? I am also going to include citations within the CSS just in case. Furthermore, I am planning to add icons for GitHub, LinkedIn and email.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>Portfolio Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header>
<!--NAVIGATION BAR-->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#skills">Skills</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--WELCOME SECTION -->
<main>
<section id="welcome-section">
<div class="welcome-container">
<div class="welcome-text">
<p class="intro-text">HELLO WORLD!<span class="wave">👋</span></p>
<h1>I'm Kevin Le</h1>
<p class="sub-text">I am an <span class="highlight">IT Graduate</span> located in</p>
<div class="location">
<div class="loader-shape-3"></div>
</div>
<p class="location-text"> Melbourne, VIC, Australia</p>
</div>
<div class="buttons">
<button class="contact-btn">Contact Me</button>
<button class="resume-btn">Download Resume</button>
</div>
<div class="social-icons">
<a href="#"><img src="" alt="GitHub" /></a>
<a href="#"><img src="" alt="LinkedIn" /></a>
<a href="#"><img src="" alt="Email" /></a>
</div>
</div>
<div class="welcome-image">
<img id="portrait-icon" src="" alt="Portrait Portrait" />
</div>
</div>
</section>
<!--SKILLS SECTION -->
<section id="skills" class="skills">
<h2 class="skills-header">Skills</h2>
<div class="skill-container">
<h3 class="language-header">Languages</h3>
<ul class="language-list">
<li>C#</li>
<li>CSS</li>
<li>HTML</li>
<li>JavaScript</li>
<li>NoSQL</li>
<li>Python</li>
<li>SQL</li>
</ul>
<h3 class="frameworks-header">Frameworks</h3>
<ul class="framework-list">
<li>Express</li>
<li>Node.Js</li>
<li>React</li>
</ul>
<h3 class="tools-header">Tools</h3>
<ul class="tools-list">
<li>Apache</li>
<li>AWS</li>
<li>Azure</li>
<li>FileZilla</li>
<li>Github</li>
<li>Kali Linux</li>
<li>Linux Ubuntu</li>
<li>MongoDB</li>
<li>Trello</li>
<li>Unity</li>
<li>VS Code</li>
</ul>
</div>
</section>
<!--PROJECT SECTION -->
<section id="projects" class="projects">
<h2 class="project-header">My Projects</h2>
<div class="project-listing"><img><h2 class="project name">Project 1</h2></div>
<div class="project-listing"><img><h2 class="project name">Project 2</h2></div>
<div class="project-listing"><img><h2 class="project name">Project 3</h2></div>
<div class="project-listing"><img><h2 class="project name">Project 4</h2></div>
</section>
<!--CONTACT SECTION -->
<section id="contact" class="contact">
<h2 class="contact-header">Contact Me</h2>
</section>
</main>
<!--FOOTER-->
<footer></footer>
</body>
</html>
/* file: styles.css */
/* COLOURS */
:root {
--primary-color: #5d00ff;
--secondary-color: #4a90e2;
--highlight-color: linear-gradient(90deg, #4a90e2, #7b61ff, #ff69b4);
--button-color: #4700e0;
--button-hover: #6a00ff;
--font-color: white;
--background-color: black;
}
/* BASE */
body {
color: var(--font-color);
background: var(--background-color);
margin: 0;
}
* {
font-family: "Noto Sans", sans-serif;
color: var(--font-color);
}
/* NAVIGATION BAR */
#nav-bar {
position: fixed;
bottom: 3%;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: calc(100% - 60px);
max-width: 600px;
background: rgba(20,20,20,0.8);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid white;
border-radius: 18px;
animation: slide-up 1s forwards;
}
#nav-bar ul {
list-style-type: none;
display: flex;
}
#nav-bar li {
margin: 0 15px;
}
#nav-bar a.nav-link {
text-decoration: none;
color: var(--font-color, white);
font-size: 1.2rem;
transition: color 0.3s ease, transform 0.3s ease;
}
#nav-bar a.nav-link:hover {
color: var(--hover-color, #ff6347);
transform: translateY(-3px);
}
/* WELCOME SECTION */
#welcome-section {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.welcome-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 90%;
max-width: 1200px;
}
.welcome-text {
max-width: 600px;
}
.intro-text {
font-size: 1.5rem;
color: var(--secondary-color);
margin-bottom: 0;
}
h1 {
font-size: 4rem;
margin: 0;
}
.sub-text {
font-size: 1.5rem;
margin: 0.5rem 0;
}
.location {
display: flex;
}
.highlight {
background: var(--highlight-color);
-webkit-text-fill-color: transparent;
background-clip: text;;
}
.buttons {
margin: 20px 0;
}
.contact-btn {
background-color: var(--button-color);
color: var(--font-color);
font-weight: bold;
border: 1px solid white;
border-radius: 30px;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
transition: box-shadow 0.3s ease-in-out;
}
.resume-btn {
background-color: transparent;
border: 2px solid white;
font-weight: bold;
color: var(--font-color);
border-radius: 30px;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
font-size: 1rem;
transition: box-shadow 0.3s ease-in-out;
}
button:hover {
box-shadow: 0 10px 15px -3px var(--button-hover), 0 4px 6px -2px var(--button-hover);
}
button:focus,
button:active {
opacity: 0.85;
box-shadow: none;
}
.social-icons {
margin-top: 20px;
}
.social-icons a {
margin: 0 10px;
}
.social-icons img {
width: 30px;
height: 30px;
}
.welcome-image img {
width: 300px;
border-radius: 50%;
border: 5px solid var(--secondary-color);
}
/* ANIMATIONS */
/* Location Icon */
/* From Uiverse.io by vikramsinghnegi */
.loader-shape-3 {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
}
.loader-shape-3:after {
width: 30px;
height: 20px;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.2);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 15px;
}
.loader-shape-3:before {
width: 20px;
height: 20px;
border-radius: 100% 100% 100% 0;
box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1);
animation: anm-SL-3-move 1s linear infinite;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-46deg);
margin-top: 20px;
}
.loader-shape-3:before,
.loader-shape-3:after {
position: absolute;
content: "";
}
@keyframes anm-SL-3-move {
0% {
top: 0;
}
50% {
top: -5px;
}
100% {
top: 0;
}
}
/* Wave Icon */
.wave {
font-size: 1.2rem;
display: inline-block;
margin-left: 0.5rem;
animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
0% { transform: rotate(0deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(0deg); }
}
@keyframes slide-up {
to {
transform: translateX(-50%) translateY(0);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 OPR/115.0.0.0
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage