-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (127 loc) · 6.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<title>thisIsTheFoxe</title>
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" />
<link rel="manifest" href="./assets/site.webmanifest" />
<link rel="mask-icon" href="./assets/images/safari-pinned-tab.svg" color="#f18719" />
<link rel="shortcut icon" type="image/x-icon" href="./assets/images/favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)" />
<meta property="og:image" content="./assets/images/apple-touch-icon.png" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/assets/js/percircle.js"></script>
<script src="/assets/js/siteload.js"></script>
<meta name="viewport" content="width = device-width" />
<link rel="stylesheet" href="./assets/css/percircle.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css"
integrity="sha384-SOnAn/m2fVJCwnbEYgD4xzrPtvsXdElhOVvR8ND1YjB5nhGNwwf7nBQlhfAwHAZC" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/styles.css" />
</head>
<body>
<noscript>Please Enable JavaScript to enjoy this website in all its beauty :)</noscript>
<header id="header"></header>
<h1>Official website of @thisIsTheFoxe</h1>
<br />
<div class="about">
<h3><u>About Me</u>:</h3>
<img style="height:250px;width:250px;" src="./assets/images/profile.jpg" alt="Profile picture" />
<p>Hi, I am B.S. Henrik Storch, <span id="age"></span> years old, from Stuttgart, Germany.<br />
I started developing iOS apps back in 2012 using Objective-C, the first programing language I came to know.
Later, I did my High School graduation in Computer Science and studied Informatics at the Cooperative State
University of Baden-Wuerttemberg (DHBW) Stuttgart. Nowadays, I spend my time with my own ideas and personal
projects.<br />
In my free time I also enjoy making music, especially on trumpet, piano, or ukulele.
I am also a fully licensed private pilot!
Furthermore, I am volunteering in a worldwide bible education work
(<a target="_blank" href="https://jw.org">learn more</a>).
</p>
</div>
<h3><u>My Coding Skills</u>:</h3>
<div class="big-rings">
<div id="swiftcircle" data-text="Swift" data-percent="90" class="orange percircle animate gt50">
<span>Swift</span>
<div class="slice">
<div class="bar" style="transform: rotate(324deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="webcircle" data-text="Web" data-percent="85" class="red percircle animate gt50">
<span>Web</span>
<div class="slice">
<div class="bar" style="transform: rotate(306deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="objCcircle" data-text="Obj.-C" data-percent="80" class="darkblue percircle animate gt50">
<span>Obj.-C</span>
<div class="slice">
<div class="bar" style="transform: rotate(288deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="javacircle" data-text="Java" data-percent="70" class="brown percircle animate gt50">
<span>Java</span>
<div class="slice">
<div class="bar" style="transform: rotate(252deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="Ccircle" data-text="C/C++" data-percent="65" class="blue percircle animate gt50">
<span>C/C++</span>
<div class="slice">
<div class="bar" style="transform: rotate(234deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="assemblercircle" data-text="asm" data-percent="60" class="green percircle animate gt50">
<span>asm</span>
<div class="slice">
<div class="bar" style="transform: rotate(216deg);"></div>
<div class="fill"></div>
</div>
</div>
</div>
<h3><u>My Language Skills</u>:</h3>
<div class="small-rings">
<div id="gercircle" data-text="German" data-percent="100" class="black percircle animate gt50">
<span>German</span>
<div class="slice">
<div class="bar" style="transform: rotate(359deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="engcircle" data-text="English" data-percent="100" class="darkblue percircle animate gt50">
<span>English</span>
<div class="slice">
<div class="bar" style="transform: rotate(360deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="japcircle" data-text="Jap." data-percent="35" class="red percircle animate gt50">
<span>Japanese</span>
<div class="slice">
<div class="bar" style="transform: rotate(360deg);"></div>
<div class="fill"></div>
</div>
</div>
<div id="espcircle" data-text="Spanish" data-percent="25" class="yellow percircle animate gt50">
<span>Spanish</span>
<div class="slice">
<div class="bar" style="transform: rotate(360deg);"></div>
<div class="fill"></div>
</div>
</div>
</div>
<footer id="footer"></footer>
<script>
$(function () {
$("[id$='circle']").percircle();
});
document.getElementById("age").innerHTML = (new Date(Date.now() - 897516000000)).getUTCFullYear() - 1970
</script>
</body>
</html>