Getting Work Done: Creating My Developer Portfolio (Part 11)
This is the eleventh part of my developer portfolio journey so if you somehow came across this article I would suggest that you read part 1.
Finally, I have something to report for an article. Somehow this week I was able to really turn up the heat, and manage to get a lot of work done on the site. I started by taking the different components that I wanted to create and sorting them into a file that I could reference.
From there I was able to use my component ideas in order to create different CSS classes and then use my mockup in order to create the actual site. This week in work was able to show me that working from a mockup speeds things up and makes it more enjoyable. Rather than having to solve the problem of creation and implementation all at once, I can take on each at a separate time.
SASS and SCSS
In order to make the resulting pages a bit easier to create in a bid, I wanted to create a component system that I could use in order to easily replicate what I did in the VRKit page. My thought on this is simply that by doing this I won’t have to create mockups for each, rather working off of what I already created for the VRKit page.
In order to do this, I thought about simply creating an external CSS file, and while this would have worked, it would have forced me to create a new class for each color that I wanted to be able to create something in. So rather, I took after Bulma and used SCSS in order to create the different classes for each item.
Using the list function within SCSS I was able to loop through all of the colors that I needed to be able to create the different components in. For example, I had different tiles that could be one of the three colors that were available for the project. This made it way easier to make modular components that could be used almost anywhere.
Honestly, I am so proud of this little CSS trick that I want to give it is own section. As shown below, I wanted to be able to create a CSS class that when applied would give the text an underline that was a little lighter and sat just underneath the text.
This turned out to be really difficult, mainly due to the fact that rounding the borders on anything could be used as an underline was really difficult. Searching the internet proved there was a way to do it but then the underline would take up the whole
div rather than just the text.
While what I did wasn’t special I was able to use some fancy CSS online to round the corners and after a lot of searching, found out that
inline-block on the
p tag would stop it from taking up the whole page. Using these together allowed me to create a really cool CSS class that I can’t wait to use on the other projects.
During this week I spend most of my time working to create the
section-title class, but once I finished with that I made quick work of the other components. Most of the components that I had to create were tiles, so to do this I simply used code from other parts of the website making that really easy to implement. However, during one of the tiles in which the content is separated into columns, I did have to learn how to use SCSS mixins which was rather cool.
As shown above I then created a timeline to show the progression of the project. Thankfully, a quick Google search showed that there was already a way to do this using NPM through the bulma-extensions package. Installing this allowed for me to quickly add in the different parts of the project and quickly bring this page to a close.
I need to write up the explanations for my other projects and then create the pages for them.