Feedback for portofolio project

Code Feedback
1

Any feedback? What should I change or improve?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="portofolio.css" />
    <title>Portofolio</title>
</head>
<body>
    <nav>
        <div class="container">
            <div class="logo">Nick Jones</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

    <section id="home" class="home">
        <div class="container">
            <div class="main">
                <p>Hello,</p>
                <h1>My name is Nick Jones</h1>
                <p>Freelance web Designer</p>
                <a href="" class="btn">HIRE ME<a>
            </div>
            <div class="image"><img src="https://img.freepik.com/free-photo/happy-business-man-wearing-grey-suit-standing-isolated-white-wall_231208-9211.jpg?t=st=1722619402~exp=1722623002~hmac=a093b767ea6202d8fe248537bc306550a4ce36f2838bea2f2d9aa6eb39aecca9&w=360" /></div>
        </div>
    </section>

    <section id="about" class="about">
        <div class="container">
            <div class="image"><img src="https://img.freepik.com/free-photo/happy-business-man-wearing-grey-suit-standing-isolated-white-wall_231208-9211.jpg?t=st=1722619402~exp=1722623002~hmac=a093b767ea6202d8fe248537bc306550a4ce36f2838bea2f2d9aa6eb39aecca9&w=360"/></div>
            <div class="content">
                <h2>About me</h2>
                <h4>Hello, I am Nick Jones a freelance web designer from Germany</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam incidunt excepturi optio quia quibusdam porro culpa a architecto sapiente esse omnis pariatur accusamus, voluptatibus iure.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius nulla quae consectetur, blanditiis odit fugiat similique nam, mollitia corrupti iusto laboriosam eaque harum soluta assumenda.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam eveniet, in ipsa necessitatibus autem, perferendis et tenetur magnam eius atque quidem, excepturi velit a! Illo!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio unde amet accusantium asperiores nam quibusdam est, optio adipisci fugit tempore minus dolorum repellat, placeat eius.</p>
                <a href="" class="btn">HIRE</a>
                <a href="" class="btn">Download CV</a>
            </div>
        </div>
    </section>

    <section id="projects" class="projects">
        <div class="container">
            <h2>Projects</h2>
            <div class="cards">
                <div class="card"><div class="image"><img src="https://img.freepik.com/free-vector/modern-watercolor-stain-texture-halftone-background-with-grungy-effect-vector_1017-45563.jpg?ga=GA1.1.1594775211.1722619370&semt=sph" /></div>
                    <div class="content"><h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis eos nisi hic eligendi odit porro.</p></div>
                </div>
                <div class="card"><div class="image"><img src="https://img.freepik.com/free-photo/photo-stone-texture-pattern_58702-14143.jpg?ga=GA1.1.1594775211.1722619370&semt=sph" /></div>
                    <div class="content"><h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis eos nisi hic eligendi odit porro.</p></div>
                </div>
                <div class="card"><div class="image"><img src="https://img.freepik.com/free-vector/line-doodles-geometric-pattern_1409-3927.jpg?ga=GA1.1.1594775211.1722619370&semt=sph" /></div>
                    <div class="content"><h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis eos nisi hic eligendi odit porro.</p></div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Me</h2>
            <div class="contacts">
                <div><ion-icon name="call-outline"></ion-icon> 098726383</div>
                <div><ion-icon name="mail-outline"></ion-icon> NickJones@kda.com</div>
            </div>
        </div>
    </section>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
}



nav {
    max-width: 1500px;
    line-height: 60px;
    background-color: #ebe8e4;
}

nav .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

nav .logo {
    font-size: 2.5rem;
    padding-left: 6rem;
    color: #FF9800;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 1rem;
}

nav ul:last-child {
    padding-right: 6rem;
}

nav ul li a {
    text-decoration: none;
    color: #333333;
}

/* home */
.home {
    max-width: 1500px;
    background-color: #ebe8e4;
    padding: 2rem 0 2rem 0;
}

.home .container {
    display: flex ;
    justify-content: center;
    flex-direction: row;
    gap: 2rem;
}

.home .main {
    padding: 10rem;
    color: #333333;
   
}

.home .main h1, p, a { 
    margin-bottom: 0.2em;
}

.home .main .btn {
   display: inline-block;
    padding: 1rem;
    background-color: #FF9800;
    color: #ebe8e4;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.home .main p {
    font-size: 1.5rem;
}

.home .main h1 {
    color: #FF9800;
    font-size: 2rem;
}

.home .image {
    height: 50%;
    border: 3px solid rgb(59, 58, 58);
    box-shadow: 0 0 3px 3px #333333;
}

/* about */
.about {
    max-width: 1500px;
    padding: 2rem 8rem;
}

.about .container {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.about .content h2, h4, p {
    color: #333333;
    margin-bottom: 1.5rem;
}

.about .content h2 {
    text-align: center;
    margin-bottom: 3.5rem;
}

.about .content .btn {
    display: inline-block;
    padding: 1rem;
    background-color: #FF9800;
    border: none;
    border-radius: 3px;
    color: #ebe8e4;
    text-decoration: none;
}

/* projcts */
.projects {
    max-width: 1500px;
    padding: 2rem;
    background-color: #ebe8e4;
}

.projects h2 {
    text-align: center;
    color: #333333;
    margin-bottom: 3.5rem;
}

.projects .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0 8rem;
    
}

.projects .card {
    width: 300px;
    padding: 2rem;
    
    background-color: #cec4b7;
    border: none;
    border-radius: 3px;
}



.projects .card .image {
    max-width: 270px;
    height: 250px;
}

.projects .card img {
    width: 250px;
    height: auto;
}

.projects .card .content {
    margin: 1rem 0;
}

.projects .card h3, p {
    color: #333333;
    margin-bottom: 0.5rem;
}

/* contact */

.contact {
    max-width: 1500px;
    padding: 2rem;
}

.contact .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container h2 {
    margin-bottom: 3em;
}

.container h2, div { 
    color: #333333;
}
1 Like
2

Welcome to the forum @Toby9

I noticed that when I click on the "About" link, I arrive at an image.

Also, there appear to be two of the same image.

As a suggestion, remove the grey suit image from the "Home" section.

Also, consider placing the grey suit image in the "About" section below the text. Otherwise on smaller viewports, the link will take the user to an image with no text visible on the page.

Do you have any projects you can showcase? If you don’t at the moment, as you gain coding skills you could add new or update projects.

Happy coding

3

Nice work. Generally, if you’re looking for feedback, it’s better if you put projects like these in a code playground like CodePen or JSFiddle so people can see your work live. Or you could use GitHub for that if you have an account. I have put your work into JSFiddle for you so others can also see your Portfolio Page.

Simple, but solid. Clean and bright. My compliments!

Nicolas

1 Like
4

Thank you! @Teller

Thanks for your input.
Do you think it’ll look good if i surround the image with the text by using float? Just an idea.

5

Thank you @nickrg, I appreciate it :slight_smile:

1 Like
6

Well done, Impressive work.

1 Like