My Portfolio Page, feedback?

Project Feedback
#1

Hi everyone!

I just finished the Responsive Web Design projects. I’m very grateful for having this resource for learning because it’s amazing, and for free nonetheless!
Anyhow, I put some good effort into my Portfolio Page (even though my portfolio is almost non-existent). I liked a lot to be able to apply the “display: grid” property, which I hadn’t used before in the previous projects.
I still need to improve the responsive part of this project, but before doing so I’d like to ask for some feedback regarding the general design and method, and specifically regarding flexbox, which I’m using a lot (maybe I’m using it too much and need to rely on other features of css?).

In any case, here it is: https://khawabonga.github.io/fcc/05-PortfPage/PortfPage.html
And the code: https://github.com/khawabonga/khawabonga.github.io/blob/main/fcc/05-PortfPage/PortfPage.html

Thanks in advance,
Cheers!

#2

Hey Daniel, one of the first things I check is responsiveness to increases in text size. I’m seeing some issues when I increase the text size on your portfolio page. If you don’t know how to manually increase the text size, using Firefox, goto Edit->Preferences, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. I don’t think it will take long before you see the issues I am seeing.

One suggestion I would make regarding this is that if you have to set height/width on elements with text content you should probably use em units, that way the element grows as the text size increases.

1 Like
#3

@danielcaballero88 ¡Hola Daniel! Hiciste una página web muy linda.

Te recomiendo poner el código de CSS en un archivo seperado. Eso es muy recomendado. Vas a añadir esto en la section ‘head’ en tu HTML.
<link rel="stylesheet" href="style.css">
Or mejor dentro de una carpeta
<link rel="stylesheet" href="css/style.css">

Otra cosa es que puedes decir que eres un "Fullstack Developer and Data Analyst"en vez de decir “Backend Developer” y “Frontend Developer”.

Otra cosa es en versión móvil es mejor agrandar el texto y las fotos.

screenshot
screenshot500×1788 117 KB

#4

Thanks for the reply!
I’ll dive into that next thing :slight_smile:

#5

Muchas gracias!
No hice aún lo de separar el css porque me imaginé que todavía no era parte de estos proyectos. Pero ya que lo mencionas voy a intentarlo :slight_smile:
También lo de mejorar la versión para móviles.
Gracias de nuevo!

#6

Hello again @bbsmooth and @brandon_wallace!

I’ve improved my portfolio page to address your recommendations, I think that it got a lot better so I wanted to thank you guys for your comments.

It still needs to be improved surely, and I need to add more projects to my portfolio, but if you’d like to take another look and let me know what you think, I’d appreciate it very much :slight_smile: (only if you got the time of course).

#7

@danielcaballero88
Hello,
I have looked over your project. Here is my opinion on what you can do to improve it.

  • Put the two CSS files into one CSS file. Downloading one file is better that two.

  • It is necessary validate the HTML because there are errors.
    https://validator.w3.org/#validate_by_uri+with_options

  • Put more space between the column and the portfolio-item containers.
    Just as you have done in your Product Landing Page.
    https://codepen.io/khawabonga/full/abmGqOd

  • You can put icons next to items in the column sections.

  • Add some minor hover effects on the portfolio-item tiles.

  • Shrink the size of your JPG image. You want to compress the images as much as possible so that it will download quickly.
    If you only need it to be 500px wide shrink the width down to 500px. Use tinypng.com to compress the file size further.

  • Add a hamburger menu in mobile view.

  • Increase the footer height or add some padding?

  • Add a domain name to your project like “danielcaballero. com”.

  • I recommend using only classes in the HTML and use ids only when you need to target an element with Javascript.
    The reason is that you can have multiple class names which will reduce your CSS code a bit. Also an id can override a class.

  • How do you like this?

daniel
daniel600×1522 181 KB

I made the following changes. This is for mobile view.

#my-name {
	font-size: 5em;
	font-weight: bold;
	margin: 1rem .5rem;
}

#my-pic {
	width: 100%;
	border-radius: 20px;
	height: auto;
        max-width: 785px;
}

#me {
    width: 80%;
}

#welcome-section > p {
	font-size: 1.2em;
	margin: 1em;
}

h1 {
	font-size: 3rem;
	margin: 8px 0;
}
1 Like
#8

Thanks Brandon!

Aall your comments are super helpful, I really appreciate them.
I’ll try to get around to implementing those changes, it will take some time to learn how to do it but that is the idea behind the project, so that’s great.

Thanks again!