Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Hello everyone,

the example portfolio from freecodecamp https://personal-portfolio.freecodecamp.rocks/. If I visit the site and press on “About”, it doesnt move. But if I press on my own portfolio on “Welcome”, it moves. how can I fix that? it shouldnt move if nothing was clicked before. I want to be in the same view as I would visit the site for the first time, if I click on “Welcome” on my own portfolio.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arams Portfolio</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap" rel="stylesheet">
    </head>
    
    <body>
        <nav id="navbar">
            <ul>
                <li><a href="#welcome-section">Welcome</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <main class="sections">
            <section id="welcome-section">
                <h1>Hey I am Aram</h1>
                <p>a web developer</p>
            </section>
            <section id="projects">
                <h2 class="project-title">These are some of my projects</h2>
                <div class="images-pro">
                    <img src="https://i.ibb.co/2NssqwD/Product-page.png" alt="a picture of the product page">
                    <img src="https://i.ibb.co/2NssqwD/Product-page.png" alt="a picture of the product page">
                </div>
            </section>
            <section id="contact">
                <h2>Contact</h2>
            </section>
            <footer></footer>
        </main>
    </body>
</html>
/* file: styles.css */
:root {
    --text: rgb(65, 65, 65);
    --navbar: rgb(217, 255, 0);
    --background: rgb(65, 65, 65);
}

* {
    margin: 0;
    padding: 0;
}

body {
    /*background-color: var(--background);*/
    background: linear-gradient(220deg, var(--text) 40%, rgb(126, 134, 94));
    width: 100%;
}

#navbar {
    width: 100%;
    height: auto;
    background: linear-gradient(120deg, var(--navbar) 70%, var(--text));
    border-bottom: 2px solid rgba(0, 0, 0, 0.192);
    position: fixed;
}

#navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

#navbar ul li {
    margin: 1rem 2rem;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif
}

#navbar ul li a:hover {
    background-color: rgba(0, 0, 0, 0.192);
    height: 100%;
}

#navbar ul li a {
    text-decoration: none;
    color: var(--text);
    padding: 17px;
}

.sections {
    display: flex;
    flex-direction: column;
}

#welcome-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(340deg, var(--text) 40%, rgb(126, 134, 94) 120%);
}

#welcome-section h1 {
    font-family: 'Dosis', sans-serif;
    font-size: 3em;
    background: -webkit-linear-gradient(220deg, #fff, rgb(126, 134, 94));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#welcome-section p {
    font-family: 'Dosis', sans-serif;
    color: var(--navbar);
    font-size: 20px;
}

#projects {
    background-color: rgb(65, 65, 65);
    width: 100%;
    height: 100vh;
}

#projects h2 {
    text-align: center;
    margin-top: 4rem;
}

#projects img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

#projects h2 {
    font-size: 2em;
    color: white;
    font-family: 'Dosis', sans-serif;
    background: -webkit-linear-gradient(220deg, #fff, rgb(126, 134, 94));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.images-pro {
    display: flex;
    justify-content: center;
    align-items: center;
}

.images-pro img {
    margin: 20% 20px;
    border: 2px solid black;
    border-radius: 0 0 10px 10px;
}

#contact {
    background-color: aqua;
    width: 100%;
    height: 100vh;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

It doesn’t move when you click “about” because the page is already on the about section. It doesn’t need to scroll. If you scroll past it and then click “about” then the page will scroll up.

omg I just clicked on my navbar while I wasnt fully at the right section. my bad. you are right.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.