-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaboutMe.html
More file actions
150 lines (150 loc) · 7.85 KB
/
aboutMe.html
File metadata and controls
150 lines (150 loc) · 7.85 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Solveig Portfolio">
<link rel="stylesheet" href="style.css">
<title> Hei! I'm Solveig </title>
</head>
<body>
<header>
<label class="hamburger-menu">
<input type="checkbox">
</label>
<aside class="sidebar">
<nav>
<ul>
<li>
<button id="light-mode-btn">Light Mode 🌞</button>
<button id="dark-mode-btn">Dark Mode 🌙</button>
</li>
<li><a href="aboutMe.html" class="nav_li">About_Me</a></li>
<li><a href="index.html" class="nav_li">Previous_work</a></li>
<li><a href="index.html#housemate" class="nav_li">Housemate_HQ</a></li>
<li><a href="index.html#selfhelp" class="nav_li">Self_Help</a></li>
<li><a href="index.html#sustainability" class="nav_li">Sustainability_Diary</a></li>
</ul>
</nav>
</aside>
</header>
<main>
<div class="presentation">
<div>
<h1>Solveig Ranøien Engen</h1>
<p><i>Web Developer Student at NTNU</i></p>
</div>
<div>
<img class="main_profile_image" src="img/Me_in_Color_3.png" alt="Picture of Solveig in colors">
</div>
</div>
<blockquote>"Go ahead and live with your head held high. No matter how devastated you may be by your own weakness or uselessness…set your heart ablaze." - <i>Kyojuro Rengoku</i></blockquote>
<div>
<h2 class="about">About Me</h2>
<p class="p_too_far">Hi! I am overall a positive and energetic person who likes to <b>get things done properly</b>. As a problem solver with a creative open mind, I like to find new solutions to my challenges for character development. Through my strengths such as hardworking and good communication, I have in previous years been a good team player and have good experience in customer service. Now, I’ve taken a liking to <b>UX Design</b> and <b>Web Development</b> and is looking forward to see what the future holds.
</p>
</div>
<div class="zzz_profile">
<h2 class="technology_headline">Technologies I Know</h2>
<div class="profile-stats">
<div class="profile-image">
<img src="img/Me_full.png" alt="Solveig Full body mirror selfie" class="zzz_profile_img">
</div>
<div class="stats-container">
<ul class="stats-list">
<li>
<img src="img/Logo_HTML.png" class="icon_logo" alt="Picture of HTML logo">
<span>HTML</span>
<div class="bar"><div class="fill" style="width: 95%;"></div></div>
<span class="score">95%</span>
</li>
<li>
<img src="img/Logo_CSS.png" class="icon_logo" alt="Picture of CSS logo">
<span>CSS</span>
<div class="bar"><div class="fill" style="width: 100%;"></div></div>
<span class="score">100%</span>
</li>
<li>
<img src="img/Logo_Javascript.png" class="icon_logo" alt="Picture of Javascript logo">
<span>Javascript</span>
<div class="bar"><div class="fill" style="width: 90%;"></div></div>
<span class="score">90%</span>
</li>
<li>
<img src="img/Logo_Figma.png" class="icon_logo" alt="Picture of Figma logo">
<span>Figma</span>
<div class="bar"><div class="fill" style="width: 89%;"></div></div>
<span class="score">89%</span>
</li>
<li>
<li class="icon_tech"><img src="img/Logo_Github.png" class="icon_logo" alt="Picture of Github logo">
<span>Github</span>
<div class="bar"><div class="fill" style="width: 80%;"></div></div>
<span class="score">80%</span>
</li>
<li>
<img src="img/Logo_MongoDB.svg" class="icon_logo" alt="Picture of MongoDb logo">
<span>MongoDB</span>
<div class="bar"><div class="fill" style="width: 90%;"></div></div>
<span class="score">90%</span>
</li>
<li>
<img src="img/Logo_React.png" class="icon_logo" alt="Picture of React logo">
<span>React</span>
<div class="bar"><div class="fill" style="width: 78%;"></div></div>
<span class="score">78%</span>
</li>
<li>
<img src="img/Logo_SQL.png" class="icon_logo" alt="Picture of SQL logo">
<span>SQL</span>
<div class="bar"><div class="fill" style="width: 92%;"></div></div>
<span class="score">92%</span>
</li>
<li>
<img src="img/Logo_Docker" class="icon_logo" alt="Picture of Docker logo">
<span>Docker</span>
<div class="bar"><div class="fill" style="width: 10%;"></div></div>
<span class="score">10%</span>
</li>
</ul>
</div>
<div class="zzz_info_card">
<img src="img/Logo_s_rank.webp" class="icon_logo">
<h4>Solveig Ranøien Engen</h4>
<h4> Level: 22</h4>
</div>
<div>
<h3>Personality traits</h3>
<ul class="personality_traits">
<li>
<img src="img/creative.png" class="profile_icon_logo">
<p class="zzz_text">Creative</p>
</li>
<li>
<img src="img/determined_dark.png" class="profile_icon_logo">
<p class="zzz_text">Hardworking</p>
</li>
<li>
<img src="img/tenacity.png" class="profile_icon_logo">
<p class="zzz_text">Resiliant</p>
</li>
</ul>
</div>
</div>
<p class="hide">thank you</p>
</div>
</main>
<footer id="footer">
<h2 class="aboutMe">나에 대해서 ~</h2>
<div class="ending">
<img src="img/Me_Pose_2.png" alt="Mirror selfie of Solveig, full body">
<p>Thank you for you attention!
<br>
Mail: solraneng@gmail.com
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>