Personal Portfolio - Components

Code Feedback
1

Hi guys, I’d love some feedback on my personal portfolio.
I have refrained from using any frameworks and am phasing out of using sgrid for the grid system.
Everything is laid out using flex.
I’ve used stylus as the css preprocessor and pug for html. I’ve used mixins to create components and am moving all code to self-contained component folders.
Eg the code-window component is held in a folder called code-window in which you will find code-window.styl and code-window.pug. This means that I can then take this code window and use it in any other project. I really like the idea of components and hope to use it with React and Vue asap!
Links:
Portfolio page: http://thiagodebastos.gitlab.io/
Code: GitLab Project Page

Code Window component at codepen.io

Note: To get syntax highlighting I used prismjs.

Still to do:

  • move all components into their own folders
  • clean up and style contact form, especially submit button and mobile layout
  • some other mobile-responsive styling
  • add more projects to projects area and link them to actual pages
2

That’s really interesting. Until recently, I’ve really disliked HTML preprocessors because aside from looking cool, they didn’t seem to do anything worthwhile and relied too heavily on whitespace. The functional notation of Pug does seem to lend a bit of expressiveness that I couldn’t get through just HTML. I’ll have to try that out someday.

Anyways, your site looks great. :thumbsup:

1 Like
3

I felt the same for a long time. I actually only really started to use it when using codepen because its a quick and easy way to template. If you like regular HTML you can check out nunjucks which is maintained by Mozilla. I’ve used it a few times already and it is quite powerful and relatively easy to stick into a gulp process.
Thanks for the feedback!