Let's discuss your "Personal Portfolio Webpage"

Thanks very much for taking a look and giving me feedback. I know that there are a lot of people asking for feedback here.

I wasn’t crazy about the margin around the text on the tribute page, either. Is there an easy way to fix that? The page also doesn’t display well on my iPhone, and I know I probably need to make adjustments to the background image and a couple of other things to help with that, though I’m a bit stuck on which way to do that.

Thanks again!

First, I am very much new to UI/UX development, so take what I say with a grain of salt. But I think you can add maybe a 3% padding to your p, h4, and h5 element in your CSS and that would clean it up a bit. Something like the following:

p {padding: 3%;}
h4 {padding: 3%;}
li {padding-right: 3% ; margin-left: 3%;}

I am sure there are other ways to do it, but this is fairly easy.

1 Like

Thanks for the suggestion. I will give that a try. :grinning:

I tried it and that helped - it looks much better on the margins. Now I have a bit too much space between the intro paragraph and the line right before the list, so I’m not sure how to fix that, but overall, the look is improved.

Any ideas about how to get it to display better in Safari on an iPhone? I messed with the settings for the background image the other day, but it made things worse instead of better. I wanted the image fixed without a repeat, but I don’t know if that’s counter to getting it to properly render on an iPhone screen.

Thanks again!

One quick fix for the paragraph list space is to change the p {padding: 3%;} to p {padding: 3% 3% 0% 3%;}. That will reduce that bottom padding. Mostly though you just need to play around with adding or removing padding and/or margin space until you are happy.

For your iPhone issue I think several changes need to be made (same disclaimer, I am new, there are probably other and better ways to do this). I went ahead and made a fork so I could play. I added the parameter background-size: covered to your body class in CSS. I also added a width parameter to your img element in the html and set it to 80%. I then set the skinny class width to 75% from the px setting that it was. I also set the H1 font-size to about 550%.

The basic idea was to make things relative as much as possible, The background-size setting was also important. You can play with all of these until you get something you like. For now you can see what it looks like here. I will delete it after about a week or so. If it bothers you that I forked it, then I apologize and I’ll delete it immediately. It was a great way to put off starting on my next project and still learn something new,

1 Like

Very good-looking ! Nice job !

Thanks again for looking into this for me. I don’t think I even realized what “Fork” meant before now, but I certainly don’t mind that you did that. :thumbsup: I will take a more in-depth look this weekend, since my job has kept me away from looking at any of this stuff so far today.

I took a look at your version on my iPhone and it’s already much better than before, so I really appreciate the help. Is the purpose of forking it so you can copy the code and make adjustments to possibly solve issues for other people? In the future, if I see an opportunity to help someone by using this method, I think I will learn more in the process, too, so it’s a win win. :grinning:

Well, I’ve already created a subject about my portfolio, but maybe someone here would not to know how it looks now, so: https://codepen.io/piotrek1543/pen/werVNE

Hope you would like it

Great. Good luck with your project. I think you have made a great start. Glad I could help a little.

1 Like

Looks very nice. I don’t see the contact input form though. Is that intentional?

Yes, for now there is a mail instead of contact form, click on it to check what happens :wink:

I’m planning pretty huge makeover of this site, so if you’re interested stay tuned ;-D

Looks nice. The social media buttons don’t take me anywhere though. In codepen you need to add Target="_blank" to make the page open in a new window. That is a limitation of codepen as I understand. Otherwise good start.

Ok, I thought the form was one of the use cases, but I guess your link if functionally equivalent. Nice job!

Project link to my portfolio website: http://oluseyiimanah.com/

2 Likes

Very nice. Very professional. I like the animated balls.

1 Like

Hi everyone.

I would love some feedback for my portfolio. I spent quite a bit of time on the aesthetics and responsiveness. And I ran it through the HTML/CSS code validator to make sure that everything is perfect.

Here is the github pages link.

https://nurbpoly.github.io/briapaiportfolio/#

I also hosted it on CodePen, but I’m not happy with it since I can’t host images without paying for Pro. I understand that the FCC academic auditors prefer CodePen because they can see the source code, but will I be dinged for not having web-hosted images?

Project Link - https://codepen.io/BriaPai/pen/jwxmvp/

1 Like

Whats going on everyone?

I’d appreciate some feedback on my portfolio. I have no idea why my picture doesn’t show up on codepen. https://codepen.io/aaronmassey/full/XRKvRe/

Hey Aaron! Your site looks great. Very clean and professional.

As far as your photo goes, it looks like imgur doesn’t support host requests from CodePen?
(https://github.com/FreeCodeCamp/FreeCodeCamp/issues/5677)

I really like having control over my image sources, so I am trying to avoid this problem by editing all of my code in an IDE and hosting the image directories and final versions of the code elsewhere.

Just some advice for everyone:

I found out from lurking other threads that employers like to run applicants’ HTML and CSS projects through code validators to check for errors. I was quite surprised when I ran my projects through and I still had errors. If you ever find yourself wondering why some code doesn’t seem to work, then this might help.

I’ve made it a habit to always check my code.

W3C HTML Validator
CSS Validator

Just a word of caution, code copied and pasted straight from CodePen will generate more errors than usual unless you go to your HTML settings tag and copy everything from the header/meta. I am just getting into the habit of editing all of my code in an IDE because it properly formats the skeleton with the header and meta tags anyway. Then at the end I can just paste my formatted code into CodePen and it will still run fine in CodePen.

3 Likes