My Personal Portfolio (No Bootstrap)

Code Feedback
1

Hey guys.

I just finished up my site. I’d love to hear your feedback on it. I focused on coding as much as possible without relying on existing frameworks, snippets, etc.

Check it out.

There’s a github repo too in case your interested.

5 Likes
2

I love it ! You did a great job putting stuff as CSS :smiley:

Also (i’m on PC) everything worked fine when rescaling. You did a great job of media queries!

1 Like
3

Thanks for the kind words!

1 Like
4

Great job. I like your design style.

1 Like
5

Cool man, i like your idea with a css bracket,
i just had a little opinion based on UX, why don’t you put cursor pointer in Things I’ve Done (work) section ??
so user now that list of your work can be clicked. and for the lightbox pop up, i think it’s better if you create them in a fix size with a close button on a top right corner ( good for UX ). it’s just my opinion anyway…

1 Like
6

Hmm, I ended up making those links buttons. I disabled page reload on click and I kept getting the text cursor. I should flip the cursor to the selection one. Good catch.

7

It looks really nice, one thing though: I always get annoyed when I have to scroll all the way back to the top to click the next link.

8

Fantastic work! I can tell you’ve got the design part of this down. It might just be a mobile thing since I’m viewing from my phone (or it’s just early and I haven’t finished my coffee… :slight_smile:) but it wasn’t immediately apparent to me that the top level items in your “#work” list were clickable links. I don’t know if there’s a way to differentiate them a little more?

(Actually, now that I’m looking at it on desktop, the hover effect does the trick, so it’s probably just a mobile thing.)

9

Absolutely amazing idea with the CSS brackets my friend! I’ve been trying to think of how a dev can showcase their work and was thinking of something (kinda!) similar. I really love this!!
I’ve avoided using Bootstrap myself, the hard way is the best way :smile:

EDIT:
@joethemovie I was inspired by the method you used creating that code window so I set out to create a Pug(formerly Jade) and Stylus component. I implemented it using a Pug mixin so that it can be reused. The syntax highlighting is done by utilising the prismjs library.

I hope you guys can make use of it. I’m looking for where to put it on my portfolio page: thiagodebastos.gitlab.io.
I will be writing up a tutorial shortly on how anyone can use Gitlab CI to connect to their local computer/laptop as a gitlab CI runner and upload a build’s production-ready files up to GitLab pages :slight_smile: