elkecodes / elkewritescode

My resume and portfolio website

ElkeWritesCode

Curriculum Vitae site for Elke Heymans. A live version can be seen at elkewritescode.be

The story behind this

I've always wanted to tackle the challenge of designing and implementing my own responsive website in HTML5 & CSS3 with the help of Bootstrap3 and as little as possible JavaScript/jQuery/AngularJS. I've built everything from scratch which isn't easy but I like the challenge.

The future of this

I will continue to update this CV site as much as possible. My goal is to utilise more relevant technologies. What started out as a site only built in HTML5, CSS3 & JavaScript/jQuery, grew into a site where I also introduced LESS and some AngularJS. It could be an interesting playground to test out on a small basis some new stuff like introducing my own deployment mechanism.

Changelog

Version 4.0 (Future release): date TBD

Mostly optimisations to enhance the speed. We'll add precompilation of the LESS, minification of the JS, minification of the CSS, a generic approach to deploy everything, ...

Version 3.0 (Next release): live on 16 sep 2017

Introducing support for xs and sm views as well as testing on other devices and browsers.

Version 2.0 (Current release): live on 13 sep 2017

Optimisation of the HTML & CSS code by introducing concepts as LESS and cleaning up all the code.

Version 1.0: live on 11 sep 2017

Earliest version was only in HTML5, CSS3 & some small JavaScript. It contained the most basic styling and basic text and could be regarded as a setup phase. There was only support for >md views and was only tested in Chrome.

Deployment notes

• If you're using .less directly in the browser on an IIS server, don't forget to add the MIME-type for .less. It should be text/css. This can be done in the web.config or (if possible) in the controlpanel of your host

elkewritescode's Issues

Minify AngularJS

Look at https://docs.angularjs.org/tutorial/step_07#a-note-on-minification beforehand to ensure correct minification

Implement scrollspy

See https://getbootstrap.com/docs/3.3/javascript/#scrollspy
It's a visual enhancement to the menu so you can see more where you are on the page.

Refactor the experience and education parts into "location" component

Picture of me not correctly inlined

Depending on the resolution, my picture in the introduction overflows the section. It should be made dynamic so that it's always contained in the surrounding container.

Refactor the progress bars into components

The progress bars are made of lots of duplication. We will refactor it into an easy-to-use component.

Implement contact form

Original contact form that I designed has been removed with commit b12225b. I'll reintroduce it later when I also implemented the actual mail sending functionality behind it.

Add variables for colors in LESS/SASS

Setup makefile

Setup a proper makefile that will do all the stuff like precompiling, packaging, ... and outputs the actual code to deploy

Add a download CV button

Add it in the header so everybody can easily access my generic CV

Xs style classes are missing

Minify CSS

After precompile with lessc, we should consider minification of the CSS. For example with https://github.com/jakubpawlowicz/clean-css

Smoothscrolling doesn't take header size into account

When doing a smoothscroll, the margin-top is not respected which causes the header to overlap the elements where we scrolled to.

Horizontal scrollbar is visible

In Chrome, a horizontal scrollbar is visible. A little bit of horizontal scrolling is possible, this should be removed. Maybe there's some padding or margin defined incorrectly?

Sm style classes are missing

Download and install AngularJS

Support for sm and xs views

Currently we only fully use md and lg classes of Bootstrap3. We still need to add the appropriate sm and xs classes.

CV image missing in PersonalProjects section

Add a screenshot of the CV site to make the PersonalProjects section more visually appealing.

Setup LESS/SASS in prod

Solid grey progress line overlaps footer

Make sure that the grey progress line is behind the footer

Add vendor prefixes in LESS/SASS

Precompile LESS

Make use of the lessc to compile at deployment time

Add Google Maps functionality

As a followup of #23 , we will add Google Maps so all of my locations can be shown on a map.

Menu items lose styling when scrolled

After you've scrolled down, the menu items in the header lose their styling:

The visible styling is the default that Bootstrap3 sets.

Refactor experience and education into a "timeframe" component

Both use a concept of a timeframe that should be visible. We'll refactor it so we can use something in the style of:
Content

Refactoring the main sections into components

Remove the duplication by creating a "CV-section" component that contains stuff like the header and uses transclusion for the actual section content

Add mixins in LESS/SASS

Setup LESS/SASS in dev

Add nesting in LESS/SASS

Bland footer

We really need some more styling for the footer. Idea is to include something like a handwritten part as the logo is also handwritten.