Can you please review my Portfolio Page project?

Can you please review my Portfolio Page project?
0

#1

https://codepen.io/zreticulan/full/aLYeME/

Thanks!


#2

Hi, The portfolio is looking really slick and the minimalism looks very cool! The website also seems to be quite responsive so that is also good

So far I’d say

  • You need social media buttons its a user story after all

  • When you do start to add projects to your website, how will you appropriately caption the projects there doesn’t seem to be space for labels or anything. Also circle screenshots may not be the best choice unless you intend to make modal boxes with a full screenshot or something on mouse click?

  • The circle size does decrease when reducing the screen size so perhaps making it 1 circle per row on small screens rather than 2 or better yet make them rectangular

Hope that helps


#3

Hi,

  • Social media buttons: There are some at the bottom of the page (i.e., LinkedIn, GitHub, and CodePen).
  • Captions: You got me. I’m still playing with them :slight_smile:.
  • Circles: I cannot seem to find a way to make them smaller. They have this class “img-responsive” which makes them adjust to any screen size changes which is great, but they become too big. Is there a way to limit their size without sacrificing their responsiveness and horizontal alignment?
  • Question: Is it a normal practice to use border-width thinner than 1px (e.g., 0.1px)?

I appreciate you taking the time to review it.

Thanks! :+1:


#4

Social Media buttons

Is it just not loading right then because I don’t see any buttons?

Captions

Yeah captions might be tricky maybe modal boxes or a Light box (if that’s the correct word the element that is like a pop up but in the same window) could be useful here

Circles + Question

I don’t know the answers to these sorry, just doing a quick google search for your question for the border I found this https://stackoverflow.com/questions/13891177/css-border-less-than-1px
this states you can’t have border width less than 1px only change the colour values (optical illusions apparently)

Good luck with this!


#5

That’s how I’m seeing it. Your browser may be blocking “Font Awesome”. Do you happen to know why?


#6

Oh yeah I had ad block on :sweat_smile:
I forgot that ad block also blocks font awesome icons which is a bit annoying but there are some workarounds that I haven’t implemented in mine yet but try looking at this https://help.getadblock.com/support/solutions/articles/6000148708-adblock-blocks-font-awesome-social-media-icons


#7

Do you happen to know if there is an alternative for “Font Awesome” not blocked by ad blocks?


#8

I think there is something called fontello that you can use


#9

I’ve just searched for alternatives to Font Awesome and stumbled upon Ionicons (url). This has seemingly resolved the issue. I have Adblock Plus running and I’m still able to see the icons. Can you confirm the same at your end?

Thanks!


#10

Nope it still doesn’t appear for me still


#11

Can you please try one more time? I may have identified the issue.


#12

I see icons now


#13

Okay, so here is why the icons were blocked in the first place. There was a class .socialMediaIcon assigned to those i elements. It looks like Adblock scans html and blocks out all the elements containing certain keywords.

P.S. One icon is still being blocked, though. Apparently, it doesn’t like LinkedIn. :smile:


#14

Makes sense after all Adblock does remove social media buttons as part of its “blocking”

Do you think slightly altering the class name or something for the linkedIn button would make a difference to it not being blocked?


#15

Most icon fonts seem to employ social network names as part of their naming convention for classes (e.g., “icon ion-social-linkedin”). I guess it is safer to use SVG icons then.


#16

If it works then go for it but I much rather use font awesome than svg icons.
I would suggest seeing these first http://astronautweb.co/snippet/font-awesome/ and https://www.snip2code.com/Snippet/302903/fontawesome-ublock-adblock-workaround

If they don’t lead anywhere then just use svg icons


#17

That solves the problem. Props to you. :+1:t2:


#19

Hi I’m new here, I thought your page reacted quickly. Your social media buttons were visible and I liked the way you let your personality show with invite on social media. I was disappointed that there weren’t more projects to see; I’m sure you are working on it. Thank you for sharing!


#20

Hi,

Yes, I’m still learning a lot to make sure there will be more projects to see :man_technologist:t2:. Thank you for taking the time to review it; much appreciated. :+1:t2:


#21

Hi,

Looks nice. One point: you can use gradient backgrounds with CSS3 instead of a relatively large PNG file (8.3 MB) for <div id="section1">. Also you can use background-repeat with a 1px-width image file.

Happy coding!