Portfolio

why this project?

This project is the very first one I did when I started my training, however it has evolve since the first version. The very first version was not efficient at all, I was trying many thing and it wasn't perfect so I did a second version more organized.

The current version is the third one, the display is slighlty different with now a sorting option on "All my Projects" page that wasn't there before. But the main changes are in the code itself. The theme folder is more organized with subfolder to updated later it will be easier.

It was created with WordPress with a full custom theme.

design

I did the design myself, I create some models with AdobeXD to have several options. I also checked a bit online different Web Dev Portfolio for inspiration, and I ended up with this design, it didn't change in the different version, the colors and fonts are the same since the beginning.

I decided for a simple design, only two colors because I like minimalist design especially for this Portfolio.

development

As mentionned above, this is the third version.

WordPress

I used WordPress as for now my backend skills are not enough to create a full optimized backend.

I create the theme myself from scratch.

theme structure

My structure is simple but easy to understand. Here is a quick view :

  • Theme folder
    • js
      • javascript files
    • loops
      • all the loops that I use to display content from my Custom Post Types (CPT)
    • single-templates
      • all the single-templates from my CPT
    • templates
      • my pages custom templates
    • then all my basic files such as header.php, functions.php ....

For this theme there is no specific or complex function, the point was mainly to organize how to display content.

SASS/CSS

I used SASS to optimize the CSS, with several files for reset, normalize, variables, generic, header, footer, pages, mixins ...

With this structure it was easy to work on one specific part of the code without being lost in a huge file. SASS is also way faster to work with.

plugins

I used few plugins to help for this theme, Classic Editor, ACF and ACF Medium Editor, EWWW Image Optimizer, FileBird Lite, and Font Awesome.

Portfolio

type

used

HTML, CSS, SASS, PHP

online