Portfolio Page - Theuns Coetzee

Feedback would be greatly appreciated.

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.

9 Likes

B. E. A. uitiful work :slight_smile:

1 Like

Great work! Where do you find SVG images for backgrounds like this? Thanks

1 Like

what is the background you used. the multicolors?

1 Like

A.M.A.Z.I.N.G! The only word to describe it :sunglasses::sunglasses::sunglasses:.

1 Like

It looks pretty cool. The color design is engaging, and the photos are very pretty.

Minor critiques:

  1. 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:

  1. 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?”

  2. 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).

  3. 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:

  1. 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).

to get the svg’s I googled for “divi section dividers” and then just search through the generated css.

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 :slight_smile:

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.
:see_no_evil: :grin:

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. :ok_hand:

1 Like

I didn’t say this the first time, but: Great job learning new technologies like SVG. It shows that you’ve been reading :mortar_board: 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:

I understand the only part of the SVG covering the text at larger breakpoints is the semi-opaque part,


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.

1 Like

hmmmmm… now you got me thinking, at (almost) midnight :exploding_head: :rofl:

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 challenge… thanks :pray: :+1:

1 Like

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

1 Like

Thanks for spotting, I missed this doing testing.

Nice work, i like your creativity :slight_smile:

1 Like

@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. :slight_smile:

1 Like

Good on you for experimenting. The more code we write, the sharper our katanas become, until we achieve ninja status!

This feels innovative and I really like it!

Minor issues:

  • The text in the skill bars is tough to read.

  • <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???

1 Like

Thanks for the feedback :slight_smile:

I haven’t changed a thing so baffled why the readability 0f h2>Skills occurred .