Personal Portfolio Project - Feedback Appreciated

Greetings, fCC Community!

I’ve been a bit of slacker but I have finally found time to work on my Personal Portfolio project. You can access the full view project using the following link - https://codepen.io/terrencemm2/full/WmyWzJ.

Please note: a page refresh may be necessary from time to time if you choose to view the page using different browser sizes or using DevTools.

As always, your feedback regarding structure, design, syntax, etc. is greatly appreciated.

1 Like

Looks pretty good! I like the various use of animations you have going on there. Few things I noted,

You have listed 4 projects but only the bottom 2 projects have matching titles. The above 2 projects don’t have descriptions.
It feels redundant to have 2 sets of SNS icons in the bottom in Contact section and Footer. Try removing icons from your footer.
You have a horizontal scroll meaning some content is spilling to the right.

Good luck :+1:

Thanks, @shimphillip for the feedback.

I’ve removed the footer SNS icons. (I had to look up what SNS meant :sweat_smile:) I’ve used the same footer in most of my projects so I just pulled it over each time.

Also, if you are viewing the project in “editor” mode, you are correct that the two top projects appear not to have descriptions/links to them. I’m sure I need to continue to tweak the display settings but I tailored the structure mainly for normal (“full”) viewing.

Again, many thanks! Take care!
:sunglasses:

Looks pretty nice.

  1. It is the grid-template-columns causing the overflow, I would change the 50vw 50vw to 1fr 1fr instead. I would also stack the grid sooner.

  2. I do like the sticky nav but it is making the last test fail. I’m sure you know this but I’m just pointing it out.

  3. The social icons hover circle does not look round, you can see it best on the LinkedIn icon. I think giving them a fixed width and height will help.

Here is one way to do the grid and icons, just as an example.

Good job.

Thanks, @lasjorg. I’ve made some adjustments based on your comments.

1.) I appreciated the tip on using fr units for grid. Sometimes I get caught up in using a specific unit of measurement throughout the entire project in the name of consistency. :upside_down_face:

2.) I did notice the test failed because of the stick nav. But, I know my work. I hope you won’t tell on me. :stuck_out_tongue_closed_eyes:

3.) I took a different approach with the contact icons. I went back to a method I’ve used in the past and know works well. I think because I am using icons rather than images, the sizing was getting thrown off. Font Awesome has a fa-fw (fixed-width) class but that doesn’t account for height.

At any rate, thanks, again, for taking the time to review my project.

Take care!

Add an arrow so people know to scroll downwards.

Thanks for the suggestion, @brandon_wallace.

Just out of curiosity … why? Is this a UX technique, proven design structure, or just merely a friendly tip?

Terrence,

It is just a friendly tip. I did not know to scroll down looking at the page but it is something I do by nature because I create websites. Some people need visual indicators.

Good point. I sincerely appreciate your expert opinion. Thank you for taking the time to look at my project.

Take care!

I can’t seem to access your codepen… It keeps flashing at me and saying “Something went wrong” (I was able to view the OP’s CodePen fine…)

curious on the grid part as I’m having issues getting my grid set right for projects without it scrolling over my nav bar lol.

If your grid is on top of your nav then you likely have to set a z-index on the nav, or header, if the nav is inside a header element. You can post a link to your Codepen if you have one for it.

BTW. The pen works for me, not sure what the problem is. Maybe try logging in, or out, of Codepen before opening it. It’s really nothing special, just a two-column layout that stacks in a media query.

1 Like

Thanks,… I have read about the z-index idea (and am familiar from the old Visual Basic days lol). My portfolio isn’t on CodePen as I’m doing it through my Visual studio Code (and hope to get it up on my web hosted site soon (issues with the cPanel right now). Am also seeing if I can redo the whole thing… the project tiles was the only thing set up as a CSS grid so that may be one reason why also.

As for the weird behavior… I may try that- it’s not the first time I got that odd behavior either so it’s definitely not yours

Hey, @brandon_wallace. Per your suggestion, I added a down arrow to the header. When you get a chance, let me know what you think.

Thanks!

Hey, @Ducky. Try accessing my project via the following URL: https://codepen.io/terrencemm2/pen/WmyWzJ. Then, you can switch views if you’d like.

Thanks!

Hey,

Thanks- yours I could see fine (yesterday and today); for whatever reason I had trouble with lasjorg’s- probably something on my end of things.

Your portfolio is looking good; though the social media/contact icons seem big.

Excellent! It has some animation in it.

Hey there!
The page looks awesome!
Well, here’s my two cents:
1.) It would be nice if your nav bar actively shows which section we are currently at.
2.) Since it is a personal portfolio, it would be nice to put a face to your name.
3.) Also, you could add in a section which summarizes your skill set relevant to web development.

Happy coding!

It looks very nice. The contact part could use some margin though. Because when I hover my mouse over empty page I can still click one of the links even though i’m not hovering my cursor over them.

By the way how long did it take you to build this webpage?

Hey, @Jobin1094,

Thanks for taking the time to look at my project. I will certainly take your comments into consideration as I continue to tweak my portfolio page. In all honesty, I wanted to meet the project requirements and do some basic structure, styling, and responsive design so that I could continue with the lessons. (Also, I tend to fiddle and probably take more time than I need on a project.)

Thanks, again. Take care!

1 Like

Hey, @Eot98,

Thank you for your feedback and your compliments.

I see what you mean about the icon/link issue. I’ve tweaked it slightly but since the icons are using the fixed-width class, there will still be a bit of bleeding with one hovers the mouse near the icon.

To answer your question: I want to say that it took me about 8-10 hours in total. (You know, a few hours here and there; stopping and starting)

Thanks, again. Take care!