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
- 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 .
- 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.
Social Media buttons
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!
Oh yeah I had ad block on
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
Do you happen to know if there is an alternative for “Font Awesome” not blocked by ad blocks?
I think there is something called fontello that you can use
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?
Can you please try one more time? I may have identified the issue.
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.
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?
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.
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
That solves the problem. Props to you.
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!
Yes, I’m still learning a lot to make sure there will be more projects to see . Thank you for taking the time to review it; much appreciated.
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.