-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
163 lines (147 loc) · 7.71 KB
/
about.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Dawson Kramer">
<title>Dawson Kramer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="timeline.css">
<!-- GOOGLE FONT Montserrat -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!----- CURSEUR ----->
<div id="curseur"></div>
<!----- NAVBAR ----->
<div class="navdiv">
<div class="contour">
<div class="navbar" onmouseover="black()" onmouseleave="white()">
<span onclick="location.href='about.html'">About me</span>
<span onclick="location.href='work.html'">My Work</span>
<span onclick="location.href='contact.html'">Contact</span>
</div>
</div>
</div>
<!----- HEADER ----->
<header>
<img onmouseover="black()" onmouseleave="white()" onclick="location.href='index.html'" src="IMG/DK-LOGO.png" class="dklogo">
<p onmouseover="black()" onmouseleave="white()" onclick="location.href='index.html'" class="dawson">DAWSON KRAMER</p>
</header>
<!----- CORPS DE LA PAGE ----->
<br>
<h1 class="landingtext">Here is everything about me</h1>
<div style="margin-top: 3rem" class="flexlineleft">
<img class="pp" width="38px" height="38px" src="IMG/dawson.png" alt="profile picture">
<div onmouseover="black()" onmouseleave="white()" class="msg">
Hi, I am Dawson Kramer, I study in the university of Rheims lorem ipsum dolor sit amet,
consectetur adipisicing elit. Porro quasi sed excepturi voluptatum adipisci, atque facere fugit iste labore beatae. <br>
</div>
</div>
<div class="competences">
<h3>Languages that I know</h3>
<div class="flexlineleft2" style="width: 90vw;">
<div class="trucs un">English</div>
<div class="trucs deux">French</div>
<div class="trucs trois">Spanish</div>
<div class="trucs quatre">HTML</div>
<div class="trucs cinq">CSS</div>
<div class="trucs six">JavaScript</div>
<div class="trucs sept">PHP</div>
<div class="trucs huit">UE5 Blueprint</div>
</div>
</div>
<div class="competences">
<h3>Things that I do</h3>
<div class="flexlineleft2" style="width: 90vw;">
<div class="trucs un">UI/UX Design</div>
<div class="trucs deux">Graphic Design</div>
<div class="trucs trois">Communication</div>
<div class="trucs quatre">3D Creation</div>
<div class="trucs cinq">Web Dev</div>
<div class="trucs six">Writing</div>
<div class="trucs sept">Photo/Video Editing</div>
</div>
</div>
<div class="reseaux flexline">
<img class="twitter" onmouseover="black()" onmouseleave="white()" src="IMG/twitter.png" alt="My Twitter">
<img class="behance" onmouseover="black()" onmouseleave="white()" src="IMG/behance.png" alt="My Behance">
<img class="linkedin" onmouseover="black()" onmouseleave="white()" src="IMG/linkedin.png" alt="My Linkedin">
</div>
<div class="flexline">
<a onmouseover="black()" onmouseleave="white()" id="download" href="IMG/CV_DAWSON_KRAMER_DARK.pdf" download="">Download my whole CV</a>
</div>
<section class="timeline">
<h2>For the curious ones, there is what I went through</h2>
<ul>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div onmouseover="black()" onmouseleave="white()">
<time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
</ul>
</section>
<!----- FOOTER ----->
<footer>
<p class="copyright">Copyright © 2022 Dawson Kramer. All rights reserved.</p>
</footer>
<script src="SCRIPT/timeline.js"></script>
<script src="jquery-3.6.0.min.js"></script>
<script src="SCRIPT/curseuranim.js"></script>
</body></html>