-
Notifications
You must be signed in to change notification settings - Fork 2
/
HavamalBand.html
194 lines (189 loc) · 8.66 KB
/
HavamalBand.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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!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" />
<title>Adrian | Havamal</title>
<meta name="description" content="Description of Havamal" />
<!-- Tab Icon -->
<link rel="icon" href="./assets/png/tabIcon.png" type="image/png">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Cambay&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<header class="header">
<div class="header__content">
<div class="header__logo-container">
<div class="header__logo-img-cont">
<img
src="./assets/png/adrian.png"
alt="Adrian Grimm Image"
class="header__logo-img"
/>
</div>
<span class="header__logo-sub">Adrian Grimm</span>
</div>
<div class="header__main">
<ul class="header__links">
<li class="header__link-wrapper">
<a href="./index.html" class="header__link"> Home </a>
</li>
<li class="header__link-wrapper">
<a href="./index.html#about" class="header__link">About </a>
</li>
<li class="header__link-wrapper">
<a href="./index.html#projects" class="header__link">
Projects
</a>
</li>
<li class="header__link-wrapper">
<a href="./index.html#contact" class="header__link"> Contact </a>
</li>
</ul>
<div class="header__main-ham-menu-cont">
<img
src="./assets/svg/ham-menu.svg"
alt="hamburger menu"
class="header__main-ham-menu"
/>
<img
src="./assets/svg/ham-menu-close.svg"
alt="hamburger menu close"
class="header__main-ham-menu-close d-none"
/>
</div>
</div>
</div>
<div class="header__sm-menu">
<div class="header__sm-menu-content">
<ul class="header__sm-menu-links">
<li class="header__sm-menu-link">
<a href="./index.html"> Home </a>
</li>
<li class="header__sm-menu-link">
<a href="./index.html#about"> About </a>
</li>
<li class="header__sm-menu-link">
<a href="./index.html#projects"> Projects </a>
</li>
<li class="header__sm-menu-link">
<a href="./index.html#contact"> Contact </a>
</li>
</ul>
</div>
</div>
</header>
<section class="project-cs-hero-havamal">
<div class="project-cs-hero__content">
<h1 class="heading-primary-havamal">Havamal</h1>
<div class="project-cs-hero__info">
<p class="text-primary">
This is a website for the Swedish band <strong>Havamal</strong>.
</p>
</div>
<div class="project-cs-hero__cta">
<a href="https://havamalband.com" class="btn btn--bg" target="_blank" rel="noreferrer">View Site</a>
</div>
</div>
</section>
<section class="project-details">
<div class="main-container">
<div class="project-details__content">
<div class="project-details__showcase-img-cont">
<img
src="./assets/jpeg/havamalScreen.JPG"
alt="Havamal Website Image"
class="project-details__showcase-img"
/>
</div>
<div class="project-details__content-main">
<div class="project-details__desc">
<h3 class="project-details__content-title">Project Overview</h3>
<p class="project-details__desc-para">
The website for Havamal started off as a database project for the VetsWhoCode program. I decided to work with them to create a website, and devoted countless hours to learn, grow and improve my skills as a developer. Currently, the site is built with Next.JS, and I've included Emotion to use styled components. The site uses markdown now instead of NetlifyCMS as the blog portion for updates from the band. The first version of the site, built with the basic HTML, CSS, and JavaScript was far too slow and clunky. I decided to learn more about Gatsby, and built the site with GatsbyJS and Tailwind CSS, with Sanity CMS for the blog component. When Gatsby updated to v3 I redesinged the website and maintained it through the updates to Gatsby v4 and above. With React 18, I wanted to migrate the site to Next.JS. The ease of this transition was surprising, and the site is now up and running with Next.JS, hosted by Vercel.
</p>
<p class="project-details__desc-para">Needless to say, the band loves their website, and I am currently adding analytics so I can measure and track user journeys. That way I can improve the experience and provide more value to the band. As they grow in popularity, my goal is for the website to grow and offer additional value.</p>
</div>
<div class="project-details__tools-used">
<h3 class="project-details__content-title">Tools Used</h3>
<div class="skills">
<div class="skills__skill-havamal">React</div>
<div class="skills__skill-havamal">Gatsby</div>
<div class="skills__skill-havamal">NextJS</div>
<div class="skills__skill-havamal">Emotion</div>
<div class="skills__skill-havamal">Styled Components</div>
<div class="skills__skill-havamal">Cloudinary</div>
<div class="skills__skill-havamal">Netlify CMS</div>
<div class="skills__skill-havamal">Git</div>
<div class="skills__skill-havamal">Netlify</div>
<div class="skills__skill-havamal">Google Analytics</div>
</div>
</div>
<div class="project-details__links">
<h3 class="project-details__content-title">Project Links</h3>
<a
href="https://havamalband.com"
class="btn btn--med btn--theme-havamal project-details__links-btn"
target="_blank"
rel="noreferrer"
>Live Link</a
>
<a
href="https://github.com/usmcamgrimm/havamalband"
class="btn btn--med btn--theme-inv-havamal project-details__links-btn"
target="_blank"
rel="noreferrer"
>GitHub</a
>
</div>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="main-container">
<div class="main-footer__upper">
<div class="main-footer__row main-footer__row-1">
<h2 class="heading heading-sm main-footer__heading-sm">
<span>Social Links</span>
</h2>
<div class="main-footer__social-cont">
<a target="_blank" rel="noreferrer" href="https://github.com/usmcamgrimm">
<i class="fab fa-github footer_social"></i>
</a>
<a target="_blank" rel="noreferrer" href="https://twitter.com/usmcamgrimm">
<i class="fab fa-twitter footer_social"></i>
</a>
<a target="_blank" rel="noreferrer" href="https://dev.to/usmcamgrimm">
<i class="fab fa-brands fa-dev footer_social"></i>
</a>
<a target="_blank" rel="noreferrer" href="https://linkedin.com/in/grimmam">
<i class="fab fa-linkedin-in footer_social"></i>
</a>
</div>
</div>
<div class="main-footer__row main-footer__row-2">
<h4 class="heading heading-sm text-lt">Adrian Grimm</h4>
<p class="main-footer__short-desc">
Thank you for taking the time to look through my portfolio. Let's connect!
</p>
</div>
</div>
<div class="main-footer__lower">
©<script>document.write(new Date().getFullYear())</script> Adrian Grimm
</div>
</div>
</footer>
<script src="./index.js"></script>
</body>
</html>