Using Bootstrap 4, to keep up with the latest, I’ve put together a portfolio page using bold colors and creative use of SVG. The Svg’s overlapping content at some screen sizes was done intentionally and configured in such a way that it allows for subtle visual impact without obstructing user engagement.
I tried to make sure that page is responsive in both landscape and portrait mode for most common devices.
It looks pretty cool. The color design is engaging, and the photos are very pretty.
Minor critiques:
A few typos/grammar issues (Javscript => Javascript, “designs was =>were done”), but this isn’t a big deal right now. I take it English isn’t your first language [Definitely recommend sitting next to a person who can correct the errors in real time if you are pushing a site to production. Especially if you are advertising yourself.]
Major critiques:
The top section: Those look like progress bars, and Javascript is <50%. It is hard to back up a claim that “I know 95%” of HTML5, and even then, it raises the question: “What about that other 5%? Shouldn’t I go with someone who knows it all?”
The site claims you have a full spread of technologies, including “Other.” I have heard that one shouldn’t do that, and rather be specific. (If this is aspirational, and these are technologies you plan on acquiring, I get why you chose that).
When the SVGs come in front of text or photos, it looks accidental. Is it possible to z-index them between the section’s colored containers and the text in them?
Possible Non-issues:
None of the links point to anything. Given the implicit claims of the technologies you have listed, it seems weird. (Again, if this is because you have yet to produce projects, even for FCC, I get it, but you can always start with your FCC projects and replace as you get more).
I used combinations of linear gradients with SVG overlays for the multicolor backgrounds. The fill for the SVG’s has an opacity set which allows them to blend in the way it does.
Having a graphic design background I’m half obsessed about SVG’s and plan to delve around deeper on the topic when I’m done with this course.
Search youtube for “Sarah Dresnar SVG” and you’ll be amazed at what’s possible.
Thanks for the critique @vipatron . Such insightful feedback is what enables us to improve.
Thanks for spotting the typo, corrected
Major critiques:
The top section: Those look like progress bars, and Javascript is <50%. It is hard to back up a claim that “I know 95%” of HTML5, and even then, it raises the question: “What about that other 5%? Shouldn’t I go with someone who knows it all?”
The site claims you have a full spread of technologies, including “Other.” I have heard that one shouldn’t do that, and rather be specific. (If this is aspirational, and these are technologies you plan on acquiring, I get why you chose that).
Very valid points. This was a project completed to serve as a template and not a representative and actual “portfolio” but when I do the real thing I will defs follow your guidelines, thanks.
When the SVGs come in front of text or photos, it looks accidental. Is it possible to z-index them between the section’s colored containers and the text in them?
It is possible to get the SVG’s behind the text and photos. In this case however they are intentionally set to overlay text and photos at certain breakpoints. I guess it’s the graphic design background kicking in there, I like designing as if it was meant for print and even then I can’t help myself to rebelliously break some rules.
Possible Non-issues:
None of the links point to anything. Given the implicit claims of the technologies you have listed, it seems weird. (Again, if this is because you have yet to produce projects, even for FCC, I get it, but you can always start with your FCC projects and replace as you get more).
Good point, will implement when I do build a representative and actual portfolio page.
Thanks again for your valued observation and guidance.
I didn’t say this the first time, but: Great job learning new technologies like SVG. It shows that you’ve been reading That, combined with CSS grid, HTML 5 and vanilla JS is probably the most powerful and lightweight stack of which I can think.
As for the SVG z-index comment, I actually got the idea from you: at the mobile breakpoint, the layering of the section, SVG, and image looks fantastic:
but I thought if you could achieve that same interleaved effect as with the image, it would look superb and enforce the thematic consistency across viewports.
hmmmmm… now you got me thinking, at (almost) midnight
I do prefer the layouts for tablet and smaller, so I’ll see if I can hack the css tomorrow to replicate overlays for for larger and HD screens as well.
Nice codepen. I would just add some auto close code for the expanded navbar when on mobile after clicking one menu link or clicking elsewhere on the page
@vipatron So i played around with layering the svg over the “hero” box when on large width screens and even though it does look interesting, it takes away the focus from the content instead of elegantly blending into it.
For now I’m keeping it as is, but this has triggered an idea for a future rework.
<h2 class="responsive-headline">Skills</h2> was hard to read because it was over a color change in the background. As I was writing this the issue went away. Maybe you updated it just now???