-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (195 loc) · 12.5 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shanna Walsh | Porfolio</title>
<link rel="stylesheet" href="css/main.css">
<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=Alata&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
<meta name="description" content="This website is to showcase Shanna's projects, skills and personality. If you'd like to connect, check out her LinkedIn profile at https://www.linkedin.com/in/shanna-walsh or email her at [email protected]">
<meta property="og:title" content="Shanna Walsh Portfolio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://shannawalsh.github.io/portfolio2024/">
<meta property="og:image" content="https://shannawalsh.github.io/portfolio2024/img/shanna.png">
<meta property="og:image:alt" content="Shanna Walsh | Full Stack Developer Portfolio">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#fafafa">
<script src="https://kit.fontawesome.com/6f7742ae7e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<nav>
<ul>
<li><a href="#work">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact" id="contact-link">Contact Me</a></li>
</ul>
</nav>
<div class="home-title">
<h1><i class="fa-solid fa-code" style="color: #351d77;"></i> Hi! I'm Shanna Walsh!</h1>
<h2>I'm a Full Stack Developer and Air Force veteran with an insatiable curiosity for understanding how things work.</h2>
</div>
<button onclick="topFunction()" id="backToTopBtn" title="Go to top">Top</button>
</div>
</header>
<main>
<div id="portfolio">
<section id="work">
<div class="content-wrapper">
<h3 class="portfolio-header">Projects</h3>
<div class="portfolio-wrapper">
<div class="home-portfolio-piece">
<figure>
<a href="https://github.com/shannawalsh/np-tour" target="_blank"><img src="img/nature-nook-app.png" alt="nature nook project screenshot"></a>
</figure>
<h4>Nature Nook - National Park Tour App</h4>
<p class="project-description">This web app helps users plan trips to national parks in the United States. Users can plan trips by specifying details like location, date range, and activity preferences. The app utilizes OpenAI as well as APIs like the National Park Service API and Wikipedia’s API to gather pertinent information and generate detailed itineraries. Users can create as many trips as they like to compare itineraries. Users can log in and save their trips in a SQLite database.</p>
<p><span>Languages: </span>Python</p>
<p><span>Skills: </span>Flask Web Framework, REST API Framework, & Routing Requests</p>
<p><span>Tools: </span>Chrome Dev Tools, Visual Studio Code</p>
<a class="project-link" href="https://github.com/shannawalsh/np-tour" target="_blank">GitHub Repo</a>
</div>
<div class="home-portfolio-piece">
<figure>
<a href="https://github.com/shannawalsh/recipe-app" target="_blank"><img src="img/recipe-app.png" alt="recipe web app screenshot"></a>
</figure>
<h4>Recipe Card Web App</h4>
<p class="project-description">This project is a web application that stores your favorite recipes. It was built using Python and Flask on the back end. JavaScript and React were used on the front end. This web app will allow users to create, update, delete, and search recipes.</p>
<p><span>Languages: </span>Python, JavaScript, & React</p>
<p><span>Skills: </span>REST API Framework, Flask Web Framework, Routing Requests, SQL Databases, Conditional rendering, Deploying a React app, useEffect hook and useState hook</p>
<p><span>Tools: </span>Chrome Dev Tools, Visual Studio Code</p>
<a class="project-link" href="https://github.com/shannawalsh/recipe-app" target="_blank">GitHub Repo</a>
</div>
<div class="home-portfolio-piece">
<figure>
<a href="https://quotivation-shanna.netlify.app/" target="_blank"><img src="img/quotivation.png" alt="quotivation project screenshot"></a>
</figure>
<h4>Quotivation</h4>
<p class="project-description">This simple motivational web app retrieves a group of quotes from an API. It allows visitors to favorite up to 3 quotes and sort by category.</p>
<p><span>Languages: </span>JavaScript & React</p>
<p><span>Skills: </span>REST API Framework, array & object destructuring, Conditional rendering, Deploying a React app, useEffect hook, and useState hook</p>
<p><span>Tools: </span>Netlify</p>
<a class="project-link" href="https://quotivation-shanna.netlify.app/" target="_blank">live page</a>
</div>
<div class="home-portfolio-piece">
<figure>
<a href="https://main.d1cj56pgxugyoh.amplifyapp.com" target="_blank"><img src="img/sticky-notes-app.png" alt="super sticky notes project screenshot"></a>
</figure>
<h4>Super Sticky Notes</h4>
<p class="project-description">This is a Greenfield project creating an interactive app that will let users create "sticky notes". Multiple components are used to build the classic sticky note UI with the ability to create, save, edit, delete, and search for notes. React lifecycle methods are used in this project to save data across sessions and ensure the notes do not disappear when the user closes the window. </p>
<p><span>Languages: </span>JavaScript & React</p>
<p><span>Skills: </span>ES6, JSX, Managing data flow, Manipulate the DOM, Adding lifecycle methods</p>
<p><span>Tools: </span>Built using CodeSandbox and launched on AWS</p>
<a class="project-link" href="https://main.d1cj56pgxugyoh.amplifyapp.com" target="_blank">live page</a>
</div>
<div class="home-portfolio-piece">
<figure>
<a href="https://shannawalsh.github.io/github-repo-gallery/" target="_blank"><img src="img/github-repo-gallery.png" alt="github repo gallery project screenshot"></a>
</figure>
<h4>GitHub Repo Gallery</h4>
<p class="project-description">Using the GitHub API, this project pulls data from my GitHub portfolio to create a gallery of repos. Visitors can search my repos and click on them to see more details.</p>
<p><span>Languages: </span>JavaScript</p>
<p><span>Skills: </span>JavaScript, APIs, and DOM Manipulation</p>
<p><span>Tools: </span>GitHub Pages</p>
<a class="project-link" href="https://shannawalsh.github.io/github-repo-gallery/ " target="_blank">live page</a>
</div>
<div class="home-portfolio-piece">
<figure>
<a href="https://unplugged.shannawalsh.com/index.html" target="_blank"><img src="img/unplugged.png" alt="unplugged project screeshot"></a>
</figure>
<h4>Unplugged</h4>
<p class="project-description">A multi-page responsive website coded from a design comp using Flexbox. This versatile design has several sections and adapts to mobile, tablet, and desktop screens. This includes a Cards design pattern that can easily be repurposed for different sites.</p>
<p><span>Languages: </span>HTML5, CSS3 & Flexbox</p>
<p><span>Skills: </span>Media Queries & Responsive Typography</p>
<p><span>Tools: </span>Chrome Dev Tools, Visual Studio Code, GitHub, and GitHub Pages</p>
<a class="project-link" href="https://unplugged.shannawalsh.com/index.html" target="_blank">live page</a>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="content-wrapper">
<h3 class="skills-header">Skills</h3>
<h4>Developer Skills</h4>
<div class="language-wrapper">
<p class="skill">HTML5 & CSS3</p>
<p class="skill">APIs</p>
<p class="skill">JavaScript ES6</p>
<p class="skill">React, JSX & Hooks</p>
<p class="skill">Responsive Web Development</p>
<p class="skill">CSS Flexbox & Grid</p>
<p class="skill">WordPress</p>
<p class="skill">Git & GitHub</p>
<p class="skill">Python</p>
<p class="skill">Flask Web Framework</p>
<p class="skill">Jinja Templating</p>
<p class="skill">SQL</p>
</div>
<h4>Tech Stack</h4>
<div class="tool-wrapper">
<p class="tool">Chrome Dev Tools</p>
<p class="tool">Visual Studio Code</p>
<p class="tool">CodeSandbox</p>
<p class="tool">Replit</p>
<p class="tool">Adobe Suite</p>
</div>
</div>
</section>
</div>
<section id="about">
<div class="content-wrapper">
<div class="about-content-wrapper">
<figure>
<img src="img/shanna.png" alt="Shanna" id="profile-image">
</figure>
<div class="about-info">
<h3>Hey there, I'm Shanna Walsh.</h3>
<h4>I'm a Full Stack Developer passionate about clean code and creative problem-solving. </h4>
<p class="about-text">🚀 As a Full Stack Developer dedicated to clean code and problem-solving, I bring a unique blend of technical expertise and disciplined perseverance, honed through my service in the Air Force. I thrive on understanding how things work and leveraging that knowledge to craft innovative solutions.</p>
<p class="about-text">🔍 Continuous learning drives my professional journey. I stay ahead by embracing emerging technologies and industry best practices. My enthusiasm, curiosity, humility, and diligence fuel my growth. While I enjoy versatility, I excel in mentoring and fostering a collaborative, high-performing team.</p>
<p class="about-text">🏖️ When I am not coding, I relax by exploring new destinations and basking in the serenity of beachside retreats with my family. Traveling enriches my perspective, while moments spent by the shore refresh my spirit, fueling my creativity and passion for both work and life.</p>
<p><span>Let's collaborate to harness the power of technology and shape a brighter tomorrow, one line of code at a time!</span></p>
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="content-wrapper">
<h3>Let's Connect</h3>
<div class="contact-wrapper">
<div class="contact-info">
<h4 class="contact-title">Hire me</h4>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="contact-info follow-section">
<h4 class="contact-title">Follow me</h4>
<ul class="social-icons">
<li><a href="https://www.linkedin.com/in/shanna-walsh/" target="_blank"><span class="visually-hidden">LinkedIn account link</span><i class="fa-brands fa-linkedin-in"></i></a>
</li>
<li><a href="https://github.com/shannawalsh" target="_blank"><span class="visually-hidden">GitHub account link</span><i class="fa-brands fa-github"></i></a>
</li>
</ul>
</div>
<div class="contact-info">
<h4 class="contact-title">Meet me</h4>
<p>Austin, TX</p>
<p>Let's chat code and have a cup of coffee or meet on zoom!</p>
</div>
</div>
<p>© <span id="currentYear"></span> | Shanna Walsh</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>