Skip to content

Commit

Permalink
Update Layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@haydenmlh
haydenmlh committed Feb 21, 2024
1 parent cb5f221 commit 67edaf8
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 141 deletions.
Binary file added images/coding_bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 10 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,17 @@
<div id="pre-footer">
<header class="noselect">
<nav id="buttons">
<a href="/" id="name-link"><h1 id="header-name">Hayden Mak</h1></a>
<!-- Typewriter class only on main page to avoid too much effects -->
<a href="/" id="name-link"><h1 id="header-name" class="name-typewriter"></h1></a>
<a href="javascript:void(0);" class="nav-link icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<div id="header-left" class="header-flanks">
<a class="nav-link" href="/about" id="about-link">About</a></li>
<a class="nav-link" href="/about" id="about-link">Resume</a></li>
<a class="nav-link" href="/projects" id="projects-link" >Projects</a></li>
<a class="nav-link" href="/blog" id="blog-link">Blog</a></li>

</div>

<div id="header-right" class="header-flanks">
<a class="nav-link" href="/photography" id="photography-link">Photography</a></li>
<a class="nav-link" href="/contact" id="contact-link">Contact</a></li>
Expand All @@ -87,18 +88,14 @@
<div id="main-intro-image"></div>
</div>
<div id="main-intro-text">
<div id="main-intro-text-p1" class="has-dropcap">
Hayden Mak is a third year Computer Science and Economics major at the University of
Toronto. He currently works as the Photos Editor at the Medium, the university's student
newspaper.

He is currently learning more about
web development and lighting in portrait photography.
<div id="main-intro-text-p1">
Hayden Mak is in his final year studying a Computer Science and Economics double major at the University of
Toronto.
He is looking for software development related positions after graduation.
In his free time, he enjoys playing table tennis, tennis and playing casual video games like Mario Kart and MouseHunt.
</div>
<div id="main-intro-text-p2" class="indent">
One of his biggest hobbies is table tennis, which he plays whenever he has free time
at the RAWC at UTM. He also enjoys going on walks, tennis, and
rock climbing.

</div>
</div>
</div>
Expand All @@ -123,5 +120,4 @@
<script src="/scripts/main.js" defer></script>
<script src="/scripts/navbar.js" defer></script>
<script src="/scripts/typewriter.js" defer></script>
<script src="/scripts/preloader_main.js" defer></script>
</html>
4 changes: 4 additions & 0 deletions scripts/content_header_scroll.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
document.getElementById("body").onscroll = resizeContentHeader;
window.onresize = resizeContentHeader;

// Resizes the content header image to give a parralax effect
// use content-header-img id to specify the image.


function resizeContentHeader() {
var scrolltotop = document.scrollingElement.scrollTop;
var target = document.getElementById("content-header-img");
Expand Down
6 changes: 0 additions & 6 deletions scripts/preloader_main.js
View file

This file was deleted.

115 changes: 6 additions & 109 deletions scripts/typewriter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,127 +12,24 @@ var random_delay = 40;

var cur1_txt = 'Have a very nice day!';

var cur2_txt = "I am a ";
var cur2_edit_txt_1 = "Computer Scientist";
var cur2_edit_txt_2 = "developer";
var cur2_edit_txt_3 = "photography lover";
var cur2_edit_txt_4 = "Hayden Mak.";
var cur2_txt = "Hayden Mak";
var cur2_edit_txt_1 = "";


var cur2_edit_txts = [cur2_edit_txt_1, cur2_edit_txt_2, cur2_edit_txt_3, cur2_edit_txt_4];
var cur2_edit_txts_lens = [];
var total_cur2_edit_txt_len = 0;

for (var i = 0; i < cur2_edit_txts.length; i++){
cur2_edit_txt_len = cur2_edit_txts[i].length;
cur2_edit_txts_lens.push(cur2_edit_txt_len);
total_cur2_edit_txt_len += cur2_edit_txt_len;
}

var cur2_edit_txts = [cur2_edit_txt_1];
var cur2_edit_txts_lens = [10];
var total_cur2_edit_txt_len = 10;

var delete_delay = 14; /* Delay to wait before deleting */
var type_delay = 7; /* Delay to wait for before typing */

editor_delays = [];
editor_delays.push(type_delay)
for (var i = 0; i < (cur2_edit_txts.length - 2) ; i++) {
editor_delays.push(editor_delays[editor_delays.length - 1] + cur2_edit_txts_lens[i]);
editor_delays.push(editor_delays[editor_delays.length - 1] + delete_delay);
editor_delays.push(editor_delays[editor_delays.length - 1] + cur2_edit_txts_lens[i]);
editor_delays.push(editor_delays[editor_delays.length - 1] + type_delay);
}
editor_delays.push(editor_delays[editor_delays.length - 1] + cur2_edit_txts_lens[cur2_edit_txts_lens.length - 2]);
editor_delays.push(editor_delays[editor_delays.length - 1] + delete_delay);
// delete the "a " to allow for final element of Hayden Mak
editor_delays.push(editor_delays[editor_delays.length - 1] + cur2_edit_txts_lens[cur2_edit_txts_lens.length - 2] + 2);
editor_delays.push(editor_delays[editor_delays.length - 1] + type_delay);
// write final element ("Hayden Mak.")
editor_delays.push(editor_delays[editor_delays.length - 1] + cur2_edit_txts_lens[cur2_edit_txts_lens.length - 1]);
editor_delays.push(editor_delays[editor_delays.length - 1] + delete_delay);


var cur_2 = document.getElementById("welcome-1");
var cur_1 = document.getElementById("welcome-2");


var cur_2 = document.getElementById("header-name");

function typeWriter() {
if (i_type_2 < cur2_txt.length) {
char_i = cur2_txt.charAt(i_type_2);
cur_2.innerHTML += char_i;
i_type_2++;
setTimeout(typeWriter, Math.floor(Math.random() * random_delay) + base_delay);
} else if (i_type_editor < editor_delays[editor_delays.length - 1]) {

if (i_type_editor < editor_delays[0]) { // wait delay

}
else if (i_type_editor < editor_delays[1]) { // print 1st cur_2_edit_txts

cur_2.innerHTML += cur2_edit_txts[0].charAt(i_edit_txt)
i_edit_txt += 1;

} else if (i_type_editor < editor_delays[2]) { // wait delay

} else if (i_type_editor < editor_delays[3]) { // delete 1st cur_2_edit_txts

cur_2.innerHTML = cur_2.innerHTML.slice(0, -1);

} else if (i_type_editor < editor_delays[4]) { // wait delay

i_edit_txt = 0;

} else if (i_type_editor < editor_delays[5]) { // print 2nd cur_2_edit_txts

cur_2.innerHTML += cur2_edit_txts[1].charAt(i_edit_txt)
i_edit_txt++;

} else if (i_type_editor < editor_delays[6]) { // wait delay

} else if (i_type_editor < editor_delays[7]) { // delete 2nd cur_2_edit_txts

cur_2.innerHTML = cur_2.innerHTML.slice(0, -1);
i_edit_txt++;

} else if (i_type_editor < editor_delays[8]) { // wait delay

i_edit_txt = 0;

} else if (i_type_editor < editor_delays[9]) { // print 3rd cur_2_edit_txts

cur_2.innerHTML += cur2_edit_txts[2].charAt(i_edit_txt);
i_edit_txt++;

} else if (i_type_editor < editor_delays[10]) { // wait delay

} else if (i_type_editor < editor_delays[11]) { // delete 3nd cur_2_edit_txts

cur_2.innerHTML = cur_2.innerHTML.slice(0, -1);
i_edit_txt++;

} else if (i_type_editor < editor_delays[12]) { // wait delay

i_edit_txt = 0;

} else if (i_type_editor < editor_delays[13]) { // print 4th cur_2_edit_txts

cur_2.innerHTML += cur2_edit_txts[3].charAt(i_edit_txt);
i_edit_txt++;
}


i_type_editor++;
setTimeout(typeWriter, Math.floor(Math.random() * random_delay) + base_delay);
} else if (i_type_1 < cur1_txt.length) {
if (cur_2.className == "current noselect") {
cur_2.className = "noselect";
cur_1.className = "current noselect";
}

char_i = cur1_txt.charAt(i_type_1);
cur_1.innerHTML += char_i;
i_type_1++;

setTimeout(typeWriter, Math.floor(Math.random() * random_delay) + base_delay);
}
}
Expand Down
14 changes: 4 additions & 10 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
}

#main-intro-image {
height: 200px;
width: 200px;
height: 150px;
width: 150px;
border-radius: 50%;
background-image: url("/images/portrait.jpg");
background-image: url("/images/coding_bg.jpg");
background-size: cover;
}

Expand All @@ -30,13 +30,7 @@
border-left: 1px solid #0b3c5d;
font-size: 16px;
}
.has-dropcap:first-letter {
font-family: 'Libre Baskerville', serif;
float: left;
font-size: 4em;
line-height: 0.65;
margin: 0.22em 0.02em 0.06em 0;
}

.indent{
text-indent: 1.5em;
}
Expand Down
4 changes: 2 additions & 2 deletions styles/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
margin: 0 0 5px 0;
}
#footer-copyright::after {
content: "Copyright © Hayden Mak 2021";
content: "Copyright © Hayden Mak 2024";
}

/* Header CSS - 31px tall */
Expand Down Expand Up @@ -340,7 +340,7 @@
width: clamp(580px, 100%, 1200px);
padding: 0;
height: 100px;
justify-content: center;
justify-content: space-between;
align-items: center;
}

Expand Down

0 comments on commit 67edaf8

Please sign in to comment.