-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
252 lines (228 loc) · 14.1 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!--
Andrew Deal
Professional Website
August 31, 2023
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hi, I'm Andrew Deal </title>
<meta charset="UTF-8">
<meta name="description" content="Hi, I'm Andrew, a high school senior & EVIT Software and App Design student passionate about programming. I'm currently know a variety of languages, such as Python and JavaScript.">
<!--Update description as time goes on and I learn new things-->
<meta name="author" content="Andrew Deal">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--get viewport to use vh and vw units-->
<link rel="icon" type="image/x-icon" href="Images/favicon7.jpg"> <!--Link favicon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--Link fontawesome for symbols/icons-->
<link rel="stylesheet" href="style.css"> <!--Link CSS stylesheet-->
</head>
<body>
<!--The main div that holds basically all of the body content-->
<div class="main">
<!--Pages-->
<div id="homePage">
<h2 id="greeting">Hi, my name is</h2>
<h1 id="name" class="fancy">Andrew Deal</h1>
<h3 id="intro">I'm an aspiring software engineer</h3>
<!--Instructions that explain the double clicking of folders-->
<h3 id="instructions"><span class="blueText">Double-click</span> on a folder to see more!</h3>
</div>
<div id="aboutMePage">
<h1 id="aboutMeTitle">About Me</h1>
<p id="aboutMeParagraph"> <!--This is version 2 of my about me bio. Update as time goes on-->
<!--Using non-breaking spaces to create indents-->
I am an aspiring software engineer with a love of coding, interest in graphic design, and a passion for learning. I was born and raised in Arizona,
where I've lived for 18 years. I just graduated high school and completed a course at EVIT, studying Software and App Design.
Here, I'm diving deep into the realm of programming, honing my skills and harnessing my creativity. I enjoy learning about all facets of the industry,
but my current focus is web development. I am continuing my education journey at ASU this fall!
<br><br>
Outside of work, I enjoy collecting a variety of things, such as Lego, action figures, and comics. I love to read many types of books, but science fiction is my favorite.
When I'm not reading, I enjoy playing (and creating) games on my PC. My hobbies have helped motivate some of my personal projects, such as the book
inventory and social media site I am currently building, ProLog Books.
</p>
<!--Picture of me-->
<img id="me" src="Images/21noBG1.png" alt="photo of me"> <!--https://st.depositphotos.com/1144472/2003/i/950/depositphotos_20030237-stock-photo-cheerful-young-man-over-white.jpg-->
</div>
<div id="projectsPage">
<h1 id="projectsTitle">Projects</h1>
<p id="projectsInstructions">Click a project to see it on Github • Drag anywhere on the screen to see more</p>
<div id="projectsGallery">
<div class="gallery">
<!--Gallery containers hold an image that links to a Github page, plus a description that holds tags that "describe" the project-->
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/Pong" role="button" tabindex="-1" name="Pong project screenshot">
<img src="Images/pongScreenshot.png" alt="Pong">
</a>
<div class="desc">
<p>Pong</p>
<div class="tags">
<p class="html tag">HTML</p>
<p class="css tag">CSS</p>
<p class="js tag">JavaScript</p>
<p class="game tag">Game</p>
</div>
</div>
</div>
<div class="gallery">
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/Science_Fair_Project_2023" role="button" tabindex="-1" name="Science Fair site screenshot">
<img src="Images/scienceFairScreenshot.png" alt="Science Fair">
</a>
<div class="desc">
<p>Science Fair: Music and Reaction Time</p>
<div class="tags">
<p class="html tag">HTML</p>
<p class="css tag">CSS</p>
<p class="js tag">JavaScript</p>
<p class="tool tag">Tool</p>
</div>
</div>
</div>
<div class="gallery">
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/read-rover" role="button" tabindex="-1" name="Read Rover site screenshot">
<img src="Images/readroverScreenshot.png" alt="Read Rover">
</a>
<div class="desc">
<p>Read Rover</p>
<div class="tags">
<p class="html tag">HTML</p>
<p class="css tag">CSS</p>
<p class="js tag">JavaScript</p>
<p class="tool tag">Tool</p>
</div>
</div>
</div>
<div class="gallery">
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/Aspire-Planning-Helper" role="button" tabindex="-1" name="Aspire Planner project screenshot">
<img src="Images/aspireScreenshot.png" alt="Aspire Planner">
</a>
<div class="desc">
<p>Aspire Planning Helper</p>
<div class="tags">
<p class="python tag">Python</p>
<p class="tool tag">Tool</p>
</div>
</div>
</div>
<div class="gallery">
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/Illuminate" role="button" tabindex="-1" name="Illuminate project screenshot">
<img src="Images/illuminateScreenshot.png" alt="Illuminate">
</a>
<div class="desc">
<p>Illuminate</p>
<div class="tags">
<p class="html tag">HTML</p>
<p class="css tag">CSS</p>
<p class="js tag">JavaScript</p>
<p class="game tag">Game</p>
</div>
</div>
</div>
<div class="gallery">
<a target="_blank" class="galleryImg" href="https://github.com/AndrewD25/Pop-the-Lock" role="button" tabindex="-1" name="Pop the Lock project screenshot">
<img src="Images/popLockScreenshot.png" alt="Pop the Lock">
</a>
<div class="desc">
<p>Pop the Lock</p>
<div class="tags">
<p class="html tag">HTML</p>
<p class="css tag">CSS</p>
<p class="js tag">JavaScript</p>
<p class="game tag">Game</p>
</div>
</div>
</div>
</div>
</div>
<div id="experiencePage">
<h1 id="experienceTitle">Experience</h1>
<!--Brief summary of important elements found in my resume-->
<div id="experienceDescription">
<p>Education:</p>
<ul>
<li>Currently in 12th Grade</li>
<li>EVIT Software and App Design Year 2</li>
</ul>
<p>Work Experience:</p>
<ul>
<li>Coach at Aspire Kids Sports Center</li>
</ul>
<p>Certifications:</p>
<ul>
<li>IT Specialist - Python</li>
<li>IT Specialist - HTML + CSS</li>
<li>IT Specialist - JavaScript</li>
<li>Software and App Design Fundamentals</li>
</ul>
</div>
<div id="myResume">
<!--My resume as img-->
<img id="resumeImg" src="Images/Resume.jpg" alt="My Resume">
<br>
<!--Link that opens resume pdf in browser for the user to view and download-->
<a href="Resume.pdf" target="_blank" role="button" tabindex="-1" name="resume view link">View My Full Resume</a>
</div>
</div>
<div id="contactPage">
<h1 id="contactTitle">Contact Me</h1>
<div id="contactBox">
<div id="contactLeftSide">
<h2>Send Me A Message:</h2>
<!--Form Submit allows form to work on web page (andrew-deal.com) but it does not work when just the HTML file is open-->
<form action="https://formsubmit.co/f5b03f621f41d934e13a7f21fd8f56ae" method="post" target="_blank"> <!--Uses FormSubmit program-->
<input type="text" id="nameInput" name="name input" placeholder="Name" tabindex="-1" required>
<input type="email" id="emailInput" name="email input" placeholder="Email" tabindex="-1" required>
<textarea id="messageInput" name="message input" placeholder="Write your message here" tabindex="-1" required></textarea>
<input type="submit" id="submitContactForm" name="submit contact form" class="fa" value=' Send' role="button" tabindex="-1"> <!--Submit button sends me an email-->
</form>
</div>
<div id="contactRightSide">
<h2>Or Find Me On...</h2>
<!--List of contact info + pictures-->
<div id="contactsFlex">
<div id="gmailInfo" class="contactInfoDiv">
<img src="Images/gmail.png" alt="gmail logo">
<!--Link that starts an email to me-->
<a href="mailto:[email protected]" target="_blank" class="contactLink" role="button" tabindex="-1" name="email draft link">[email protected]</a>
</div>
<div id="githubInfo" class="contactInfoDiv">
<img src="Images/github.png" alt="github logo">
<!--My Github-->
<a href="https://github.com/AndrewD25" target="_blank" class="contactLink" role="button" tabindex="-1" name="my Github link">AndrewD25</a>
</div>
<div id="linkedinInfo" class="contactInfoDiv">
<img src="Images/linkedin.png" alt="linkedin logo">
<!--My LinkedIn-->
<a href="https://www.linkedin.com/in/andrew-deal-9b41b2274/" target="_blank" class="contactLink" role="button" tabindex="-1" name="my LinkedIn link">Andrew Deal</a>
</div>
</div>
</div>
</div>
</div>
<!--Folders-->
<nav id="folderContainer">
<div class="folderBox">
<img src="Images/folder.png" alt="title folder" class="folder" id="homeFolder" name="Home Folder" role="button" tabindex="0">
<p>Home</p>
</div>
<div class="folderBox">
<img src="Images/folder.png" alt="about me folder" class="folder" id="aboutMeFolder" name="About Me Folder" role="button" tabindex="0">
<p>About Me</p>
</div>
<div class="folderBox">
<img src="Images/folder.png" alt="projects folder" class="folder" id="projectsFolder" name="Projects Folder" role="button" tabindex="0">
<p>Projects</p>
</div>
<div class="folderBox">
<img src="Images/folder.png" alt="resume folder" class="folder" id="experienceFolder" name="Experience Folder" role="button" tabindex="0">
<p>Experience</p>
</div>
<div class="folderBox">
<img src="Images/folder.png" alt="contact information folder" class="folder" id="contactFolder" name="Contact Folder" role="button" tabindex="0">
<p>Contact Info</p>
</div>
</nav>
</div>
<!--Link JavaScript code-->
<script src="script.js"></script>
</body>
</html>