diff --git a/assets/Luke Else - CV.pdf b/assets/Luke Else - CV.pdf new file mode 100644 index 0000000..1807dd7 Binary files /dev/null and b/assets/Luke Else - CV.pdf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c6b4189 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + Luke Else + + + + + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + Person me = new Person
+ { +
Name = "Luke Else",
+
Age = ,
+
Title = "Software Engineer / Student",
+
EMail = "contact@luke-else.co.uk",
+
Website = "git.luke-else.co.uk"
+ } +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + internal class Person
+ { //Hover to flip +
public string Name { get; init; }
+
internal int Age { get; set; }
+
internal string Title { get; set; }
+
public string EMail { get; set; }
+
public string Website { get; set; }
+ } + +
+
+ \ No newline at end of file diff --git a/js/age.js b/js/age.js new file mode 100644 index 0000000..0c31204 --- /dev/null +++ b/js/age.js @@ -0,0 +1,10 @@ +function getAge(dateString) { + var today = new Date(); + var birthDate = dateString; + var age = today.getFullYear() - birthDate.getFullYear(); + var m = today.getMonth() - birthDate.getMonth(); + if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + return age; +} \ No newline at end of file diff --git a/js/flip.js b/js/flip.js new file mode 100644 index 0000000..9e16ee1 --- /dev/null +++ b/js/flip.js @@ -0,0 +1,14 @@ +var flipped = false; + +function flipCard() { + + if (!flipped) { + document.getElementById('card-front').style.transform = 'rotateX(-180deg)'; + document.getElementById('card-back').style.transform = 'rotateX(0deg)'; + flipped = true; + }else{ + document.getElementById('card-front').style.transform = 'rotateX(0deg)'; + document.getElementById('card-back').style.transform = 'rotateX(-180deg)'; + flipped = false; + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..15c930c --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ +*, *:before, *:after { + box-sizing: border-box; + outline: none; + } + + html { + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; + font-smooth: auto; + font-weight: 300; + line-height: 1.5; + color: #444; + } + + body { + position: relative; + display: flex; + align-items: center; + justify-content: center; + /* width: 99%; */ + height: 98vh; + background: linear-gradient(45deg, #372c75, #5e5e5e); + } + + code, .card .line-numbers { + font-family: "Lucida Console", Monaco, monospace; + font-size: 14px; + } + + .card { + position: relative; + width: 30rem; + height: 15rem; + perspective: 150rem; + } + .card-front, .card-back { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + border-radius: 5px; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4); + transition: 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); + backface-visibility: hidden; + overflow: hidden; + } + .card-front:before, .card-front:after, .card-back:before, .card-back:after { + position: absolute; + } + .card-front:before, .card-back:before { + top: -40px; + right: -40px; + content: ""; + width: 80px; + height: 80px; + background-color: rgba(255, 255, 255, 0.08); + transform: rotate(45deg); + z-index: 1; + } + .card-front:after, .card-back:after { + content: "+"; + top: 0; + right: 10px; + font-size: 24px; + transform: rotate(45deg); + z-index: 2; + } + .card-front { + width: 100%; + height: 100%; + background: linear-gradient(45deg, #101010, #2c3e50); + } + .card-front:after { + color: #212f3c; + } + .card-back { + background: linear-gradient(-45deg, #101010, #2c3e50); + transform: rotateX(180deg); + } + .card-back:after { + color: #11181f; + } + + .card:hover .card-front{ + transform: rotateX(-180deg); + } + .card:hover .card-back{ + transform: rotateX(0deg); + } + + .card .line-numbers { + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + margin: 0; + padding: 0 10px; + background-color: rgba(255, 255, 255, 0.03); + font-size: 13px; + } + .card .line-numbers > div { + padding: 2.5px 0; + opacity: 0.15; + } + .card code, .card .line-numbers { + color: whitesmoke; + } + .card .indent { + padding-left: 30px; + } + .card .operator { + color: #4dd0e1; + } + .card .string { + color: #9ccc65; + } + .card .int { + color: #d4922f; + } + .card .variable { + color: #BA68C8; + } + .card .property { + color: #ef5350; + } + .card .method { + color: #29b6f6; + } + .card .function { + color: #FDD835; + } + .card .boolean { + color: #4dd0e1; + } + .card .comment { + color: #229977 + } + +a:link { text-decoration: none; } + + +a:visited { text-decoration: none; } + + +a:hover { text-decoration: none; } + + +a:active { text-decoration: none; } \ No newline at end of file