2
\$\begingroup\$

I'm a new developer just starting out learning HTML, css and JavaScript. Below is my attempt at building a portfolio website.

I am finding it difficult positioning elements the way I want to and finding botched ways to do so when there's probably a more cleaner and efficient way of doing so.

Any advice or criticism is appreciated. I have also linked my GitHub and pages below. Thanks

GitHub

My Web Portfolio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resources/css/index.css">
    <title>Jack Defroand | Web Developer</title>
</head>
<body>
    <div id="wrapper">
        <div class="container">
            <header class="main-page" id="main-page">
                        <nav class="navbar">
                            <a href="#main-page" class="nav-item" id="nav-text">HOME</a>
                            <a href="#about-me" class="nav-item" id="nav-text">ABOUT</a>
                            <a href="#projects" class="nav-item" id="nav-text">PROJECTS</a>
                            <a href="#skills" class="nav-item" id="nav-text">SKILLS</a>
                            <a href="#contact" class="nav-item" id="nav-text">CONTACT</a>
                        </nav>
                        <div class="title-containter">
                        <div class="main-title">
                            <h1>JACK DEFROAND</h1><span id="text2"><span id="web-text">FRONT END</span> DEVELOPER</span>
                            <a href="#contact"><p>CONTACT ME</p></a>
                        </div>
                        </div>
                        <div class="socials">
                            <a href="">
                                <img src="resources/images/GitHub-Logos/GitHub_Logo_White.png" id="github">
                            </a>
                            <a href="">
                                <img src="resources/images/LinkedIn-Logos/LI-In-Bug.png" id="linkedIn">
                            </a>
                        </div>
            </header>
            <main class="content">
                <section class="about-me" id="about-me">
                    <article class="about-style">
                        <span class="section-title">ABOUT ME</span>
                        <div id="about">
                            <h1>ABOUT ME</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                Aliquam a faucibus dolor. Aliquam euismod ac elit a eleifend. 
                                Vivamus in rhoncus ante, ac semper ex. Nam ac lobortis mauris. 
                                Donec et metus dolor. Sed posuere nec ante nec tincidunt. 
                                Aliquam euismod ac elit a eleifend.</p>
                        </div>
                        <div id="about2">
                            <h1>LOREM</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Donec libero justo, bibendum in justo id, mollis maximus odio. 
                            Phasellus purus mauris, tincidunt non turpis eu, fringilla varius justo. 
                            Nam elementum nunc lacus, eu porttitor metus vehicula eget. 
                            Pellentesque sed dictum tortor. </p>
                        </div>
                        <div id="about3">
                            <h1>LOREM</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Donec libero justo, bibendum in justo id, mollis maximus odio. 
                            Phasellus purus mauris, tincidunt non turpis eu, fringilla varius justo. 
                            Nam elementum nunc lacus, eu porttitor metus vehicula eget. 
                            Pellentesque sed dictum tortor. </p>
                        </div>
                    </article>
                </section>
                <section class="projects" id="projects">
                    <div class="pro-container">
                        <span class="section-title">PROJECTS</span>
                    </div>
                </section>
                <section class="skills" id="skills">
                    <div class="skills-container">
                        <span class="section-title">SKILLS</span>
                    </div>
                </section>
                <section class="contact" id="contact">
                    <span class="section-title">CONTACT</span>
                    <div class="email-form">
                        <div id="input-name">
                             <label for="name"></label>
                             <input type="text" id="name" name="name" placeholder="Name" required class="inputBox">
                        </div>
                        <div id="input-email">
                             <label for="email"></label>
                             <input type="email" id="email" name="email" placeholder="Email" required class="inputBox">
                        </div>
                        <div id="input-subject">
                             <label for="subject"></label>
                             <input type="text" id="subject" name="subject" placeholder="Subject" required class="inputBox">
                        </div>
                        <div id="input-message">
                             <textarea id="message" rows="10" cols="50" name="message" placeholder="Message" class="inputBox">
                             </textarea>
                        </div>
                        <input id="submit" type="submit" value="Send Message">
                    </div>
                    
                </section>
            </main>
        </div>
    </div>
    <script src="./resources/javascript/Navbar.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    

}

html{
    font-size:16px;
}

body {
    margin: 0 auto;
    width:100%;
    height:100%;
}

#wrapper{
    width: 100%;
    height: 100%;
}

.container{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    width: 100%;
}

section{
    height: 100vh;
    display: relative;
    width:100%;
    scroll-snap-align: start;
}

.main-page{
    background-image: url("../images/main-background.jpg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    display:flex;
    position:relative;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
    scroll-snap-align: start;
}


.about-me{
    background: rgb(63,34,195);
    background: linear-gradient(0deg, rgba(63,34,195,1) 10%, rgba(255,99,71,1) 100%);
    margin: 0 auto;
    position:relative;
}

.projects{
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    position:relative;
    
}

.skills{
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

    position:relative;
}

.contact{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(26,26,119,1) 45%, rgba(0,212,255,1) 100%);
    position:relative;
}

.section-title{
    color:whitesmoke;
    font-size: 6em;
    font-weight:600;
    border: 3px solid white;
    position: relative;
    top: 200px;
    padding: 20px;
    left:1000px;
    
}



.main-title a p {
    font-size: 0.35em;
    position: relative;
    text-align: center;
    padding: 20px;
    letter-spacing: 0.2em;
    width: 250px;
    margin: 20px auto;
    border: 2px solid white;
    color: white;
    text-decoration: none;
}

.main-title a p:hover {
    border: 2px solid tomato;
    color: tomato;
    transition: 0.6s;
}



.main-title h1{
    
    width: 100%;
    font-size: 1.5em;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 10px 0;
}

.title-containter{
    background-color: rgba(39, 39, 39, 0.55);
    width:50%;
    top:300px;
    position: relative;
    margin: 0 auto;
    display: inline;
    padding: 30px;
    font-size: 3.5em;
    color:whitesmoke;
}

#text2{
    color:tomato;
    font-size: 1.2em;
    text-align: center;
    display: block;
    position: relative;
    letter-spacing: 0.5em;
    padding-bottom: 20px;

}

#web-text{
    text-align: center;
    position: relative;
    font-size:0.8em;
    color:turquoise;
    display:block;
    letter-spacing: 0.5em;
    padding: 30px 0;
}

#nav-text{
    font-size:1.5em;
}  

.socials{
    position: absolute;
    top: 800px;
}

.socials img{
    width: 125px;
    height: auto; 
    margin: 40px;
    
}

#linkedIn{
    width:50px;
    height:auto;
    align-items: baseline;
}

#linkedIn:hover{
    content: url("../images/LinkedIn-Logos/LI-In-Bug-tomato.png");
}

#github:hover{
    content: url("../images/GitHub-Logos/GitHub_Logo_tomato.png");
}


.navbar {
    display: inline;
    overflow: hidden;
    background-color: #fff;
    padding: 40px 90px;
    border-radius: 60px;
    box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
    position: fixed;
    margin-top: 2em;
    z-index: 1;
    transition: 0.7s;
    
   
}

.nav-item {
    color: #83818c;
    padding: 20px;
    text-decoration: none;
    transition: 0.3s;
    margin: 0 6px;
    z-index: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600S;
    position: relative;
    font-size: 1.5em;
}
.nav-item:before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color:tomato;
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: 0.3s;
}
.nav-item:not(.is-active):hover:before {
    opacity: 1;
    bottom: 0;
}
.nav-item:not(.is-active):hover {
    color: tomato;
}

/* Tablets */
@media only screen and (max-width: 800px) and (min-width: 300px){
    .navbar{
        width: 370px;
        font-size: 0.6em;
        margin: 0 auto;
        display:flex;
        padding:10px;
        top: 20px;
    }
    .nav-item{
        padding: 0px;
        
    }

    .nav-item:before {
        height:2px;
    }

    .title-containter{
        top: 150px;
        font-size: 0.95em;
        width: 350px;
    }
    .socials{
        top:500px;
    }

    .main-title a p{
        font-size: 0.85em;
    }

    .section-title{
        font-size:2em;
        top: 150px;
        left:100px;
    }

}

@media only screen and (max-width: 1300px) and (min-width: 900px){
    
    .title-containter{
        top: 400px;
        font-size: 3em;
        width: 800px;
    }
    .socials{
        top:1000px;
    }


    .main-title a p{
        font-size: 0.5em;
    }

    .section-title{
        font-size:6em;
        top: 200px;
        left:240px;
    }

    .nav-item:before {
        height:8px;
    }
}


#about {
    text-align:center;
    width:650px;
    height: 800px;
    position:relative;
    Padding:60px;
    font-size:2em;
    line-height: 1.5em;
    color: white;
    background-color:rgba(165, 165, 165, 0.3);
    box-shadow: 0px 10px 40px rgba(159, 162, 177, .4);
    border: 2px solid white;
    border-radius: 2em;
    left: 200px;
    top: 300px;
    letter-spacing: 0.2em;

}

#about2 {
    text-align:center;
    width:650px;
    height: 800px;
    position:relative;
    Padding:60px;
    font-size:2em;
    color: white;
    background-color:rgba(165, 165, 165, 0.3);
    left: 950px;
    bottom: 500px;
    box-shadow: 0px 10px 40px rgba(159, 162, 177, .4);
    border: 2px solid white;
    border-radius: 2em;
    line-height: 1.5em;
    letter-spacing: 0.2em;;
    
}


#about3 {
    text-align:center;
    width:650px;
    height: 800px;
    position:relative;
    Padding:60px;
    font-size:2em;
    color: white;
    background-color:rgba(165, 165, 165, 0.3);
    left: 1700px;
    bottom:1300px;
    box-shadow: 0px 10px 40px rgba(159, 162, 177, .4);
    border: 2px solid white;
    border-radius: 2em;
    line-height: 1.5em;
    letter-spacing: 0.2em;;
    
}


/* contact form */


.email-form{
    position:relative;
    padding-left: 170px;
    top:300px;

}

.inputBox{
    background-color: seashell;
    color: black;
    font-family:Arial, Helvetica, sans-serif;
    border: 0px;
    box-shadow: 0 0 15px 4px rgba(159, 162, 177, .5);
    margin: 10px;
    padding: 20px;
    border-radius: 2em;
    font-size:20px;
    font-weight: bold;
}

#name{
    position:relative;
    float: left;

}

#email {
    position:relative;
    display:inline-block;
}

#subject{
    width: 625px;
}

#message{
    max-width: 625px;
    min-width: 625px;
    width: 625px;
    max-height: 800px;
}

#submit{
    padding: 15px;
    width: 250px;
    background-color:seashell;
    color: rgb(89, 93, 110);
    border-width: 2px;
    border-color:seashell;
    font-size: 20px;
    border-radius: 2em;
    border-style: solid;
    font-weight: 700;
    position: relative;
    margin: 10px;
    left:375px;
    
}

#submit:hover{
    color: seashell;
    background-color: rgba(159, 162, 177, .1);
    border-color: seashell;
    padding: 1em;
    transition: 0.3s;
}

Javascript

const navigation = document.querySelector(".navbar");
const navText = document.getElementById("nav-text");

window.onscroll = function() {scrollFunction()};

const scrollFuction = () => {
  if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    navigation.style.right = "5%";
    navigation.style.padding = "20px 45px";
    navText.style.fontSize="0.7em";
  } else {
    navigation.style.right = "30%";
    navigation.style.padding = "40px 90px";
    navText.style.fontSize = "1.5em";
  }
};
\$\endgroup\$
2
  • \$\begingroup\$ Welcome to Code Review! It would benefit reviewers to have a bit more information about the code in the description. From the help center page How to ask: "You will get more insightful reviews if you not only provide your code, but also give an explanation of what it does. The more detail, the better." You could consider putting the HTML, CSS and JS into a runnable snippet though you'd have to change the URLs to be absolute - e.g. in bg image in CSS. \$\endgroup\$ Aug 5, 2021 at 15:39
  • \$\begingroup\$ I changed the title so that it describes what the code does per site goals: "State what your code does in your title, not your main concerns about it.". Feel free to edit and give it a different title if there is something more appropriate. \$\endgroup\$ Aug 5, 2021 at 15:43

1 Answer 1

1
\$\begingroup\$

Just a few words about the JavaScript:

  • Don't assign event handlers using on... attributes/properties. Use addEventListener.

  • Don't hard-code and set styles in the JavaScript. Instead toggle a class and put the styles into the style sheet using that class.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.