You need to convert the < and > signs to < and > signs. But don't do it by hand, of course - you can use an online tool like textfixer to do it for you. For example, if I added the code <p>foobar</p> it would come out as
foobar
So I have to write it as <p>foobar</p>. (Although I have also to escape the & by using & which I also had to escape oO )
When loading the main page, you saw a loading animation completely made in CSS. It would be too long to write it here, so I'll just explain the jumping cube. Its markup is
<div class="load_jumper_shadow"></div>
<div class="jumper-align"></div>
<div class="load_jumper"></div>
</div>
It consists basically in two shapes: a jumping square and its shadow. Here's the CSS animation, which basically consists of changing the width and height of the square so it gets thinner when jumping and fatter when landed, and of the shadow, which gets wider when the square is down and thinner when the square is up. The $w and $h are variables that point to the initial width and height of the square.
/*Animation: jumping square*/
@keyframes jump-square{
0% {bottom: 0;}
10% {width: $w + 15px; height: $h - 15px; bottom: 0;}
45% {width: $w - 15px; height: $h + 15px; bottom: 70px;
animation-timing-function: ease-in;}
80% {width: $w - 15px; height: $h + 15px; bottom: 0;}
90% {width: $w + 15px; height: $h - 15px;}
100% {width: $w; height: $h; bottom: 0;}
}
/*Animation: shadow from jumping*/
@keyframes jump-shadow{
0% {}
10% {width: $sw;}
45% {width: $sw - 50px;animation-timing-function: ease-in;}
80% {width: $sw - 50px;}
90% {width: $sw;}
100% {}
}
If you look closely, there's a background parallax on the main page. To create, I just fired this code after the page was loaded.
function setParallaxBG(){
var pBG = $("#background-parallax");
var docH = $(document).height();
var bgH = 0.6*docH;
if(bgH<$(window).height()*1.05) bgH=$(window).height()*1.05;
var windowH = $(window).height();
var scrollRate = $(window).scrollTop() / ( docH - windowH );
var bgPos = scrollRate * ( bgH - windowH ) * -1;
pBG.css({
"height": bgH,
"top": bgPos
});
}
What it does, is quite simple: it defines the size of the background div as 60% of the document, and when you scroll the document, it gets what is the percentage of the document that has been scrolled and applies that percentage to the background. But it makes sure the background isn't smaller than the window size.
You may not want to add a one-size-fits-all transition (animation) to your page, but having one ready is great for prototyping, at least. And who, knows, you might like it enough to keep it. And why not try this?
*{transition: all 0.5s ease;}
You may notice the projects and education data are not written in the markup, but actually loaded from ajax and built into a component. Whithout any framework, just how did I do it? Let's take the education example for simplicity. It has the following markup.
<template id="table-title">
<tr><th class="specialization-name">specialization</th><th class="institution-name">institution</th><td class="specialization-hours">hours</td></tr>
</template>
It uses the template tag hide from view all inner code. It becomes directly unavailable even for the code. Then to load the information, I use the following code.
function loadCourses(){
var newTable;
var tableItem;
coursesDB.forEach(function(specialization){
newTable = $("#table-head").html();
newTable = $(newTable);
let course_link = "<a href='"+specialization["site"]+"' target='_blank'$>"+specialization["specialization"]+"</a$>";
newTable.find(".specialization-name").html(course_link);
newTable.find(".specialization-institution").html(specialization["institution"]);
newTable.find(".specialization-hours").html(specialization["hours"]+"h");
specialization["courses"].forEach(function(course){
tableItem = $("#table-body").html();
tableItem = $(tableItem);
if(course.charAt(0)=="-"){
course = course.substr(1);
tableItem.addClass("enrolled");
}
tableItem.find("td").html(course)
newTable.find("tbody").append(tableItem);
});
$("#table-target").append(newTable);
});
}
It extracts the innerHTML from the template and create an element out of it, then sends an AJAX request for the data and inserts thar data into the element, finally it attaches the element to the main tree. Voilà! Dynamically generated components using only core technology.