Portfolio Feedback? :)

Thoughts so far? I’m thinking about maybe doing some more to the about me section and a few other things, but…

3 Likes

Very good job @medic_83! I like your font choice and color. Some things you can improve:

  • Why isn’t there any name given in the hero text? You gave /// instead.
  • I like the projects section. But, if you give the real image of the project, it would be nice than using stock photos.
  • When I hover over the “Show More” button, it disappears. This is because you set the same background color as the body background.
  • Why is there a “Show More” button, by the way? Do you have any other projects? Also, it is linked to freeCodeCamp’s CodePen profile.
  • The text-shadow you gave to the social profiles makes it hard to read.

Looking at your project, I see that you copied the example FCC project and then adjusted the markup and styling. Remember, it’s always good to look into other’s code, but starting a project from scratch is always recommended and will give you the confidence to create real websites.

Anyway, great job! Keep it up!

1 Like

Hey @medic_83
I like the design and font choice and color.

Are you sure that you created this website?

1 Like

Heyy! Thank you!

  • I was deciding on if I wanted my actual name or username. It's been updated.
  • How do I use a real image of the project?
  • That was an oversight. It has been fixed. It was supposed to go dark and the font color change to the opposite color. I had it set up that way, I'm not sure what happened. Then again - I've noticed a few times that my thumbs will hit the keypad on my laptop and highlight portions of what I've typed and before I realize it, I delete it on accident.
  • I made the button, but I am planning on hiding it until I have more projects to include. It's now linked to my profile.
  • I fixed the text-shadow :)

What I plan on doing is copying this exact one a few times, just to get into better repetition. I have realized that I have a difficult time with the setup portion. I plan on starting a new one after I write it out a couple more times. Also, I don’t copy and paste - I make sure that I am writing it out each time to add to the repetition. I watched the video by FCC on youtube to make the portfolio and wrote it out, but I wasn’t a fan in that there were quite a few things in there that I have not learned - which is great, but I need to get more of the basics down first before I add more and confuse myself, so I went with this one. Thanks for all of your input!! It’s super appreciated!

2 Likes

I really like how you make your portfolio.
The design is simple, the colors are not too sharp to look at, and it’s very responsive.

Everything seems nice and smooth except for one thing.
In the section where your projects are, when I hover on the “show more” button, the button resizes and also resizes the entire section along with it.

Try to use the margin css properties to make it a bit smoother.

For example, I have a button. When Someone hovers on it, the border goes from thickness 0px to 5px. If the position is not set to fixed or absolute, it will resize its parent/grandparent/great-grandparent/etc.

If it does that, set the margin to -5px.

HTML:

<button id="test-button">Click Me!</button>

CSS:

#test-button{
/*styles here*/
}
#test-button:hover{
/*creates the border and extra space around the button*/
    border: solid white 5px;
/*cancels out the space*/
    margin: -5px;
}

Hope that helped.

Great job once again.
Happy coding.

1 Like

Ah! I see what your are saying. I changed the border to 2px to make it a bit thinner and the margin to -2px. How does that look? When I tried adding a fixed position, it started making the whole area glitchy so I went with the -2px.

1 Like

That is much better. That was exactly what I was talking about.

1 Like

Hello @medic_83, the portfolio is interesting and beautiful, but I think it’s cool to change the lyrics, for example, I have a difficult view, I was a little confused when reading.
This style of writing is interesting and beautiful:

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> 

CSS rules to specify families:

font-family: 'Lobster', cursive;

1 Like

@medic_83, some things to revisit;
Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

  • The project you submitted is not original code. HTML and CSS is the same as the sample project.

The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.

2 Likes

Don’t get me wrong, taking something already build and changing it is a great way to learn. It’s pretty much the original definition of hacking. So in principle, there is nothing wrong with using it as one approach to learning. It is especially impactful with more complicated code where you don’t have the skills to build it yourself, but you can still break, change, and mess around with the code to learn about it.

Having said that you really should try building this project from scratch. You will learn a bunch of things that you won’t learn just making visual changes. Copying the example code is also borderline a breach of the Academic Honesty Policy.

I will say the change to the font and colors you made does make the page look more friendly and I think it looks nice.

3 Likes

For that, CodePen provides the option for you. You can access the screenshot of your CodePen pens by doing the following:

Large Image:

https://codepen.io/chriscoyier/pen/NWGpvKm/image/large.png

Small Image:

https://codepen.io/chriscoyier/pen/NWGpvKm/image/small.png

Make sure you replace chriscoyier with your CodePen username and NWGpvKm with the unique id of your pen. The rest is the same.

If you think the CodePen screenshots are not good, you can go to your pen, take a screenshot, host it anywhere, and use it in your code.

More info:
https://blog.codepen.io/documentation/screenshots/

1 Like

@lasjorg @Roma I’ve rewritten the html and css from this project 3x now and I actually started doing the portfolio from scratch earlier today. I had seen a few other people’s projects and I did not realize ( nor remember from initial reading from the academic honesty policy) that we could not copy it and then adjust it to our own. I apologize. I will work on doing the portfolio and resubmit. Thank you for your response and I will be sure to do so from now on. :slight_smile: