-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (168 loc) · 9.21 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
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
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thomas Eikhaugen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Thomas Eikhaugen - Frontend Developer Portfolio showcasing projects and skills in HTML, CSS, JavaScript, and Python.">
<meta name="keywords" content="Thomas Eikhaugen, Frontend Developer, HTML, CSS, JavaScript, Python, Portfolio">
<meta name="author" content="Thomas Eikhaugen">
<link rel="stylesheet" href="css/style.css"><link>
<script src="https://kit.fontawesome.com/84d9821b5f.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="hero">
<div id="heroContent">
<h1>Hi I'm Thomas Eikhaugen.</h1>
<p>I'm a frontend developer</p>
<a class="viewWorkBTN gradientBorderHero" href="#projectsSection" aria-label="go to projects section">View my work <i class="fa-light fa-arrow-down" style="color: #ffffff;"></i></a>
</div>
<div class="bg-animation">
<div id="stars1"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</div>
</section>
<nav id="navbar" aria-label="page navigation">
<ul>
<li><a href="#hero" aria-label="go back to top of page">Home</a></li>
<li><a href="#projectsSection" aria-label="go to projects section">Projects</a></li>
<li><a href="#about" aria-label="go to about section">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="projectsSection">
<div id="projectsContainer">
<h2>Projects</h2>
<div class="project">
<img class="projectImageDesktop" src="assets/images/is-desktop.png" alt="Screenshot of Innovatech Solutions Blog">
<div class="projectDetails">
<div class="projectDetailsText">
<h3>Innovatech Solutions Blog</h3>
<p>This website serves as a blog for a company named Innovatech Solutions. It was developed as the final project exam for the second semester of the Front End Development program at Noroff.</p>
<p>The project was created using HTML, CSS and JavaScript. It features full CRUD functionality, integrated with the Noroff API</p>
</div>
<div class="projectLinks">
<div class="gradientBorder">
<a href="https://github.com/Eikhaugen/FED1-Project-Exam-1" aria-label="Go to project Github Repository">Learn More</a>
</div>
</div>
</div>
</div>
<div class="project ">
<img class="projectImageDesktop reverse" src="assets/images/sm-desktop.png" alt="Screenshot of Science Museum website">
<div class="projectDetails">
<div class="projectDetailsText">
<h3>Science Museum</h3>
<p>The website is an information website for a museum.</p>
<p>This project was the semester project, at the end of the first semester of Front End Development at Noroff.</p>
<p>The project was created using HTML, CSS and JavaScript.</p>
</div>
<div class="projectLinks">
<div class="gradientBorder">
<a href="https://main--splendorous-unicorn-f120c1.netlify.app/" aria-label="Go to the deployed website">Live Demo</a>
</div>
<div class="gradientBorder">
<a href="https://github.com/Eikhaugen/Semester-Project-1" aria-label="Go to project Github Repository">Learn More</a>
</div>
</div>
</div>
</div>
<div class="project">
<img class="projectImageDesktop" src="assets/images/gh-desktop.png" alt="Screenshot of GameHub website">
<div class="projectDetails">
<div class="projectDetailsText">
<h3>GameHub</h3>
<p>This website is an e-commerce website, for a company called GameHub, that sells video games.</p>
<p>This project was a course assignment, at the end of the HTML and CSS course in the first semester of Front End Development at Noroff.</p>
<p>The project was created using HTML and CSS, and has limited functionality due to lack of javascript. Still I chose to showcase GameHub as this was my first project made with HTML and CSS.</p>
</div>
<div class="projectLinks">
<div class="gradientBorder">
<a href="https://preeminent-madeleine-86cefd.netlify.app/" aria-label="Go to the deployed website">Live Demo</a>
</div>
<div class="gradientBorder">
<a href="https://github.com/Eikhaugen/CA-GameHub" aria-label="Go to project Github Repository">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div id="aboutContainer">
<div id="aboutContent">
<h2>About me</h2>
<p>Hi I'm Thomas Eikhaugen!</p>
<p>I am currently studying Frontend Development at Noroff.</p>
<p>I have a passion for learning and exploring tech.</p>
<p>I am always looking for new challenges and opportunities to grow as a developer.</p>
</div>
<div id="techStack">
<h2>My Tech Stack</h2>
<div id="techStackContainer">
<div class="gradientBorder">
<div class="techStackItem ">
<img src="assets/images/html5-original.svg" alt="HTML5 logo" aria-hidden="true">
<span>HTML</span>
</div>
</div>
<div class="gradientBorder">
<div class="techStackItem ">
<img src="assets/images/css3-original.svg" alt="CSS3 logo" aria-hidden="true">
<span>CSS</span>
</div>
</div>
<div class="gradientBorder">
<div class="techStackItem ">
<img src="assets/images/javascript-original.svg" alt="JavaScript logo" aria-hidden="true">
<span>JavaScript</span>
</div>
</div>
<div class="gradientBorder">
<div class="techStackItem">
<img src="assets/images/python-original.svg" alt="Python logo" aria-hidden="true">
<span>Python</span>
</div>
</div>
<div class="gradientBorder">
<div class="techStackItem ">
<img src="assets/images/git-original.svg" alt="Git logo" aria-hidden="true">
<span>Git</span>
</div>
</div>
<div class="gradientBorder">
<div class="techStackItem ">
<img src="assets/images/figma-original.svg" alt="Figma logo" aria-hidden="true">
<span>Figma</span>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="contactContent">
<div class="contactBlurb">
<h2>Contact</h2>
<p>If you have any questions, want to work together, or just want to say hello?</p>
<p>Feel free to leave me a message here, you can also find me on LinkedIn.</p>
</div>
<div class="socialLinks">
<a href="https://github.com/Eikhaugen" aria-label="Go to my Github"><i class="fa-brands fa-square-github" style="color: #ffffff;" aria-hidden="true"></i></i></i></a>
<a href="https://www.linkedin.com/in/thomas-eikhaugen-897234264/" aria-label="Go to my LinkedIn"><i class="fa-brands fa-linkedin" style="color: #ffffff;" aria-hidden="true"></i></a>
</div>
</div>
<div class="formContainer">
<form name="contact" method="POST" data-netlify="true" action="/pages/success">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<textarea name="message" placeholder="Message" rows="3" required></textarea>
<div class="gradientBorder">
<button class="contactFormBTN" type="submit" name="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
</body>
</html>