-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (225 loc) · 9.31 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alex Nielsen Portfolio</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header id="top" class="hero">
<nav>
<ul>
<a href="#about">
<li>about</li>
</a>
<a href="#blog">
<li>blog</li>
</a>
<a href="#projects">
<li>projects</li>
</a>
<a href="#contact">
<li>contact</li>
</a>
</ul>
</nav>
<div class="hero-body">
<div>
<h1>Hi, I'm Alex Nielsen | Full Stack Web Developer</h1>
<div class="logos">
<a href="https://alexnielsen.com/resume"><img src="images/email.png" alt="email" /></a>
<a href="https://linkedin.com/in/alex-nielsen-nj"><img
src="images/5296501_linkedin_network_linkedin logo_icon.svg" alt="linkedin" /></a>
<a href="https://github.com/bushbass"><img src="images/3057638_github_media_network_social_icon.png"
alt="github" /></a>
<a href="https://www.youtube.com/channel/UCqdNQHOLz3PmB4cDvQkdQ1w/"><img
src="images/4202041_video_youtube_logo_social_social media_icon.png" alt="youtube" /></a>
</div>
<p class="hero-statement">
I love computers and building web sites.💻 I'm a life-long learner
who might occasionally be prone to eating too much pizza.🍕
</p>
</div>
</div>
</header>
<main>
<section id="about" class="bio">
<h2 class="skills-heading">My Skills</h2>
<div class="picture-and-info">
<div class="headshot">
<img class="box-shadow" src="images/me-wearing-hat.jpg" alt=" " />
</div>
<div class="bio-info">
<div class="skill-buttons">
<span class="skill-button">JavaScript</span><span class="skill-button">React</span><span
class="skill-button">HTML</span><span class="skill-button">CSS</span><span
class="skill-button">Node.js</span><span class="skill-button">Next.js</span><span
class="skill-button">Gatsby</span><span class="skill-button">MongoDB</span>
</div>
<div class="bio-text">
<h3>I love building stuff</h3>
<p>
I've loved computers for a long time. Although I studied music in
college, I worked as a web developer for a few years and I've
continued doing freelance work to this day. I've tried out a few
other career paths, but I've always come back to web
development... <a href="about.html">keep reading</a>
</p>
</div>
</div>
</div>
</section>
<section id="blog" class="featured-blogs">
<h2 class="featured-blogs-heading">Featured Blog Posts</h2>
<div class="blog-cards-area">
<article class="card box-shadow">
<h4>Algorithm Challenges</h4>
<img src="images/fcc-algo.png" alt="blog-thumbnail" />
<p>
freeCodeCamp has a section on algorithms. I created videos of me
going through my solution for them
</p>
<p><a href="blog/algorithms.html">more...</a></p>
</article>
<article class="card box-shadow">
<h4>Docker Build Problem</h4>
<img src="images/Docker-Logo.jpg" alt="blog-thumbnail" />
<p>
I had an issue getting a Docker container to build in Windows 10.
Here is how I solved the problem.
</p>
<p><a href="blog/docker.html">more...</a></p>
</article>
<article class="card box-shadow">
<h4>Netlify Routing</h4>
<img src="images/netlify.png" alt="blog-thumbnail" />
<p>
How to fix Netlify "page not found, broken link or entered a URL
that doesn't exist" error
</p>
<p><a href="blog/netlify.html">more...</a></p>
</article>
</article>
</section>
<section class="projects" id="projects">
<h2 class="projects-heading">Featured Projects</h2>
<article class="project-row">
<div class="project-info-area">
<div class="project-type">Fullstack</div>
<h3 class="project-title">Zetflix</h3>
<div class="skill-buttons">
<span class="skill-button">JavaScript</span><span class="skill-button">React</span><span
class="skill-button">HTML</span><span class="skill-button">CSS</span>
</div>
<div class="project-link">
<a href="projects/zetflix.html">more...</a>
</div>
<p class="project-description">
A full-stack MERN app with auth. Pulls movie data from a public API.
Users can create an account to login and create a list of favorite
movies. Uses JWT for auth. The backend is built in Node/Express with
MongoDB.
</p>
</div>
<div class="project-img-area">
<img class="box-shadow" src="images/zetflix.jpg" alt="" />
</div>
</article>
<article class="project-row">
<div class="project-info-area">
<div class="project-type">Fullstack</div>
<h3 class="project-title">Garden Recovery</h3>
<div class="skill-buttons">
<span class="skill-button">JavaScript</span><span class="skill-button">React</span><span
class="skill-button">HTML</span><span class="skill-button">CSS</span>
</div>
<div class="project-link">
<a href="projects/garden.html">more...</a>
</div>
<p class="project-description">
A single page React app to help with garden recovery at the big box
hardware store. When I have to bring in 20 or so pallets of various
materials it's easy to lose track of how many of each I've brought
in. This allows me to keep track with single button clicks.
</p>
</div>
<div class="project-img-area">
<img class="box-shadow" src="images/garden.jpg" alt="" />
</div>
</article>
<article class="project-row">
<div class="project-info-area">
<div class="project-type">Fullstack</div>
<h3 class="project-title">Other Projects</h3>
<div class="skill-buttons">
<span class="skill-button">JavaScript</span>
<span class="skill-button">React</span>
<span class="skill-button">HTML</span>
<span class="skill-button">CSS</span>
<span class="skill-button">Next.js</span>
<span class="skill-button">Gatsby</span>
</div>
<div class="project-link">
<a href="https://new-blog-portfolio-next.vercel.app/">more...</a>
</div>
<p class="project-description">
This is a site I used to learn Next.js. I was particularly
interested in learning how data fetching and static site generation
worked so the design is very minimalistic. I'm including it here
because it has links to all of my older blog posts and all of my
smaller projects. The current site you're viewing is meant to show a
nicer design and in the future I plan to add more of my older
projects and blogs in addition to the featured posts currently
shown.
</p>
</div>
<div class="project-img-area">
<img class="box-shadow" src="images/next-site.png" alt="" />
</div>
</article>
</section>
<aside class="contact" id="contact">
<h3 class="contact-header">Let's chat!</h3>
<div class="email-button-and-image">
<div class="email-and-button">
<p>[email protected]</p>
</div>
<div class="coffee-img"><img src="images/coffee.gif" alt="" /></div>
</div>
</aside>
</main>
<footer>
<div class="contact-copyright">
<p><a href="#top">Alex Nielsen</a></p>
<p>© 2023</p>
</div>
<div class="footer-links">
<p>Links</p>
<p><a href="#about">about </a> <a href="#projects">projects </a></p>
<p>
<a href="#blog">blog </a>
<a href="#contact">contact</a>
</p>
</div>
<div class="footer-logos">
<p>get in touch</p>
<div>
<a href="https://alexnielsen.com/resume"><img src="images/email.png" alt="email" /></a>
<a href="https://linkedin.com/in/alex-nielsen-nj"><img
src="images/5296501_linkedin_network_linkedin logo_icon.svg" alt="linkedin" /></a>
</div>
<div>
<a href="https://github.com/bushbass"><img src="images/3057638_github_media_network_social_icon.png"
alt="github" /></a>
<a href="https://www.youtube.com/channel/UCqdNQHOLz3PmB4cDvQkdQ1w/"><img
src="images/4202041_video_youtube_logo_social_social media_icon.png" alt="youtube" /></a>
</div>
</div>
</footer>
<script>
console.log('Thank you for looking at my site!')
</script>
</body>
</html>