0
\$\begingroup\$

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

I am finding it difficult getting my site to respond better when adjusting the screen size. Text and images are just going all over the place when resizing the browsers window or viewing on mobile devices.

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

GitHub 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">HOME</a>
                            <a href="#about-me" class="nav-item">ABOUT</a>
                            <a href="#projects" class="nav-item">PROJECTS</a>
                            <a href="#skills" class="nav-item">SKILLS</a>
                            <a href="#contact" class="nav-item">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="https://github.com/JackDef10">
                                <img src="resources/images/GitHub-Logos/GitHub_Logo_White.png" alt="GitHub logo" id="github">
                            </a>
                            <a href="https://www.linkedin.com/in/jack-defroand/">
                                <img src="resources/images/LinkedIn-Logos/LI-In-Bug.png" alt="LinkedIn logo" id="linkedIn">
                            </a>
                        </div>
            </header>
            <main class="content">
                <section class="section-style" id="about-me">
                    <div class="about-me">
                        <article>
                            <h1><span class="section-title">ABOUT ME</span></h1>
                            <aside id="about-text">
                                <p>In October I began my journey in to full stack development through an award winning training 
                                    provider and recruiter "IT Career Switch". Teaching the fundamentals of Software Development 
                                    through hundreds of hours of coding and course materials on the web such as Code academy and 
                                    w3schools.</p>
                                <p>Over 40 weeks, I learned how to create full-stack web applications from scratch using various 
                                    languages, libraries and frameworks including JavaScript, React, Java, Node.js, Python, HTML, 
                                    CSS, Bootstrap & SQL.</p>
                                <p>Please feel free to contact me if you have any questions by sending a message bellow or email at 
                                    [email protected].</p>
                            </aside>
                            <div class="profile-img">
                                <img src="./resources/svg/Coding.svg" alt="My name is Jack Defroand">
                            </div>
                        </article>
                    </div>
                </section>
                <section class="section-style" id="projects">
                    <div class="projects">
                            <h1><span class="section-title">PROJECTS</span></h1>
                            <div class="container-pro">
                                <div id="gallery"></div>
                            </div>
                    </div>
                    <div id="popup">
                        <img src="" alt="" id="selectedImage">
                    </div>
                </section>
                <section class="section-style" id="skills">
                    <div class="skills">
                        <h1><span class="section-title">SKILLS</span></h1>
                        <div class="skills-svg">
                            <img src="resources/svg/Skills svg.svg" alt="My skills diagram">
                        </div>
                    </div>
                </section>
                <section class="section-style" id="contact">
                    <div class="contact">
                        <h1><span class="section-title">CONTACT</span></h1>
                        <p>Have a question or want to work together?</p>
                        <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>
                        <div class="contact-svg">
                            <img src="resources/svg/Email svg.svg">
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>
    <script src="./resources/javascript/Navbar.js"></script>
    <script src="./resources/javascript/Image-gallery.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%;
}

/* Different page sections*/ 

section{
    height: 100vh;
    display: flex;
    align-items: center;
    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-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
    
}

.projects{
    background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
    
}

.skills{
    background-color: #FA8BFF;
    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
}

.contact{
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
}

.section-title{
    color:whitesmoke;
    font-size: 4.5em;
    font-weight:600;
    border: 3px solid white;
    position: relative;
    top: 100px;
    padding: 20px;
    margin: 0 auto;
    width: 700px;
    display:block;
    text-align: center;
}

.section-style{
    background-color: seashell;
    width:100%;
    position: relative;
}


.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;
}

.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;
}

/* About Me Section */

#about-text{
    color: white;
    font-size: 1.3em;
    line-height: 1.5em;
    max-width: 65%;
    float: left;
    margin: 5rem;
    display: grid;
    grid-auto-flow: row;
    gap:2em;
    position: relative;
    top: 100px;
    border-right: 2px solid white;

}

#about-text p{
    padding-right: 30px;
    letter-spacing: 0.2em;
}

.profile-img img{
    width: 417px;
    height: 625px;
    position: relative;
    display: inline;
    object-fit: cover;
    border: 10px solid white;
    box-shadow: 3px 3px 20px black;
}


/* projects */

.container-pro{
    margin: 0 auto;
    width: 90%;
    height: 40%;
    padding: 50px 20px;
    position: relative;
    top: 150px;
}

.galleryImg {
    max-width: 100%;
    height: 300px;
    width: 300px;
    position: relative;
    transition: transform 250ms;
    cursor: pointer;
    object-fit: cover;

}


#gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
}

.galleryImg:hover{
    transform: translateY(-2px);
    box-shadow: 3px 3px 10px black;
    transform: scale(1.2);

}

#popup{
    position:fixed;
    top: 0;
    left:0;
    right: 0;
    bottom:0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: 200ms transform;
    padding: 50px;
}

#selectedImage{
    max-height:100%;
}


/* projects */

.skills-svg{
    position: relative;
    top: 200px;
    float: right;
}

/* contact form */



.email-form{
    position:relative;
    top: 200px;
    left: 100px;
    

}

.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:1;
    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: 1em;
    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;
}

.contact-svg img{
    display: inline;
    position: relative;
    width: 40%;
    height: 20%;
    object-fit: cover;
    float: right;
    bottom: 250px;
    right: 100px;
    
}

.contact p {
    color: white;
    letter-spacing: 0.3em;
    display: inline;
    position: relative;
    top: 160px;
    margin-left: 7em;

}

@media only screen and (max-width: 1200px) and (min-width: 320px){
    #about-text{
        font-size: 1.2em;
    }
}


/* 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:1em;
        width: 200px;
    }

    #about-text{
        font-size: 0.8em;
    }

}

@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:4em;
        width: 500px; 
    }

    .nav-item:before {
        height:8px;
    }
}
\$\endgroup\$
3
  • 1
    \$\begingroup\$ You might be interested in learning about flexbox for greatly simplifying not only the CSS, but also the HTML by removing the need for elements strictly for styling purposes. \$\endgroup\$
    – morbusg
    Aug 11, 2021 at 13:27
  • \$\begingroup\$ Yeah I need to go more in depth with flexbox and grid. Which of the two do you think would be more effective for this type of layout and more intuitive to use. @morbusg \$\endgroup\$ Aug 11, 2021 at 20:00
  • \$\begingroup\$ I've no experience on grid, but flexbox I can definitely recommend. \$\endgroup\$
    – morbusg
    Aug 13, 2021 at 15:00

2 Answers 2

2
\$\begingroup\$

Sick portfolio Jack. So instead of giving img a fixed size, you should give it a relative value (i.e percentage). For example:

.socials img{
    width: 125px; => 75%
    height: auto; 
    margin: 40px;
}

To make your site responsive, the next time you may consider adding bootstrap to it.

\$\endgroup\$
1
\$\begingroup\$
section{
    /**/
}

Dont assign styles by tag name, use classes instead. It could be multiple sections on the page.

.main-title a p {

The same.

#text2{

What does it means? And where is text1?

#web-text{

Now I know, that its web-site... (sarcasm).

.container-pro{

Professional?

.galleryImg {

Why not .gallery-img?

<img src="resources/svg/Email svg.svg">

Spaces in filenames is a bad practice.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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