Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Code Feedback
1

*Tell us what’s happening:

So I am done, if there is any advice to make my work am all ears.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

hi there, I didn’t understand your comment. (or perhaps it was a question) can you rephrase please?

3

If there is any advice to make my work even better?

4

if you would like us to review your work, then please share it here (you have not shared it so far that I can see above).

One way to share your work is to post a link to codepen where you have hopefully created a version of your work.
Another way is to post a link a live site showing your work.
It really depends on what work you meant.

5
6

Hi, i’m in the last project of the Responsive Web Design Certification course and in the last test, it says my #navbar element should be in the top of the viewport, and in my preview, it is, but when i run the code, it doesn’t pass. Could someone help me please? I don’t know what to do. Here’s my code:
HTML

My Portfolio About Work Contact

Hey! I am Eduardo,

a web developer

These are some of my projects

< Tribute Page />

< Random Quote Machine />

< JavaScript Calculator />

< Map Data Across the Globe />

< Wikipedia Viewer />

< Tic Tac Toe Game />

 Show all

>

Let's work together...

How do you take your coffee?

**This is just a fake portfolio. All the projects and contact details given are not real.

© Created for freeCodeCamp

CSS

:root {
–main-white: white;
–main-blue: rgb(50, 50, 150);
–main-gray: rgb(48,56,65);
}

@media {
html {scroll-behavior: smooth;}
}

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ‘Poppins’,sans-serif;
    }

body {
margin: 0;
padding: 0;
}

header {
background-color: var(–main-blue);
position: fixed;
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 999;
}

#navbar {
margin-right: 20px;
}

a {
text-decoration: none
}

#navbar a {
color: var(–main-white);
margin: 0 10px;
font-weight: 400
}

#welcome-section {
padding-top: 10px;
background: linear-gradient(50deg, rgb(50, 50, 50), rgb(10, 10, 10));
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 0;
width: 100%
}

h1 {
color: var(–main-white);
font-size: 2.5em;
text-align: center;
}

#hey-description {
color: var(–main-blue);
font-size: 1.5em;
font-style: italic;
font-weight: 800;
}

#projects {
background-color: rgb(200, 120, 30);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: auto;
padding: 2em
}

#projects-title {
padding-top: 60px;
text-align: center;
color: var(–main-white);
font-size: 2em;
border-bottom: 1px solid var(–main-white);
max-width: 550px;
margin-bottom: 2em
}

.project-tile {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows: 400px 400px;
column-gap: 3em;
row-gap: 6em;
width: 100%;
}

.project-tile a:hover .hidden{
color: rgb(230, 100,0);
transition: 0.5s
}

img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

figcaption {
text-align: center;
padding: 13px;
background-color: var(–main-gray);
}

figcaption p {
text-decoration: none;
color: var(–main-white);
}

.hidden {
color: var(–main-gray);
font-size: 1.2em;
}

button {
margin: 100px auto 70px;
background-color: var(–main-gray);
border: none;
color: var(–main-white);
padding: 5px 15px;
font-size: 1.2rem;
cursor: pointer;
}

button p {
display: inline;
font-size: 1.5em;
vertical-align: -3px;
font-weight: 600
}

button:hover {
background-color: var(–main-blue);
transition: 0.5s
}

#contact {
background-color: var(–main-gray);
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#contact h2,
#contact p,
#contact a {
color: var(–main-white)
}

#contact h2 {
font-size: 3em;
text-align: center;
}

#contact p {
font-size: 1.2em;
font-weight: 600;
text-align: center;
}

.social{
width: 80%;
max-width: 750px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px
}

.social a {
margin: 0 0 15px;
font-size: 1.5em;
text-shadow: 2px 2px 2px black;
padding: 0 15px;
font-family: Poppins, sans serif;
}

.social a:hover {
transform: translateY(6px);
transition: 0.3s ease-in-out
}

footer {
display: flex;
justify-content: space-around;
background-color: var(–main-gray);
border-top: 4px solid var(–main-blue);
height: 20vh;
padding: 20px
}

footer p {
color: var(–main-white);
margin: auto 10px
}

7

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