-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
108 lines (94 loc) · 5.01 KB
/
index.html
File metadata and controls
108 lines (94 loc) · 5.01 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<script src="https://kit.fontawesome.com/2564131498.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Nova+Square:display=swap" rel="stylesheet" />
<title>Personal Portfolio</title>
</head>
<body>
<section id="background">
<nav class="nav">
<ul id="navbar" class="navbar">
<li>
<a href="#welcomeSection">Home</a>
</li>
<li>
<a href="#aboutMeSection">About</a>
</li>
<li>
<a href="#projectsSection">Work</a>
</li>
<li>
<a href="#contactSection">Contact</a>
</li>
</ul>
</nav>
<section id="welcomeSection" class="welcomeSection">
<div id="headshot">
<h1 id="namePlate">Chad Harper</h1>
</div>
<div class="welcomeSectionText">
<h1 class="textShadowLarge">Welcome, I am <br>Chad Harper <br>Software Engineer</h1>
<p class="textShadowSmall">with a focus on Full Stack Web Development</p>
</div>
</section>
<section id="aboutMeSection" class="aboutMeSection">
<h2>My Journey so far...</h2>
<p class="aboutMeSectionText">My coding journey started in high school when I took HTML my junior year. I learned the basics and even started a Photoshop club with my friends for fun. After that I honestly didn't touch coding again until one of my friends changed careers into coding. I started learning on my own for a while before I looked into some schooling and bootcamps. I applied to a couple bootcamps and was referred to <a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a> to start learning on my own. I also relearned HTML and CSS with the help of <a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a> where this project you are currently looking at was started. I keep updating it as I learn more to improve its look and over feel. After that I started my real journey with <a href="https://www.launchcode.org/" target="_blank"> Launch_Code</a> in the beginning of 2023 and finished the course in February 2024. I now have multiple certificates including:<br>
Launch_Code: <span id="LaunchCodeCert" class="certificate">Web Development Course Certificate</span> Feb 2023<br>
freeCodeCamp: <span id="freeCodeCampRWDCert" class="certificate">Responsive Web Design Certificate (RWD Cert.)</span> March 2024 <br>
freeCodeCamp: <span id="freeCodeCampJSADSCert" class="certificate">JavaScript Algorithms and Data Structures Certificate (JSADS Cert.)</span> Jan 2025
</p>
</section>
<section id="projectsSection" class="projectsSection">
<h2 class="textShadowLarge">These are some of my projects</h2>
<div id="projects" class="projects">
<!-- projects added here -->
</div>
</section>
</div>
<!-- Modal for image full screen -->
<div id="modal-container">
<div id="modal">
<!-- Close button -->
<div class="closeBtn">×</div>
<!-- Modal image -->
<img id="modalImg">
</div>
</div>
<!-- Modal for full screen gallery images -->
<div id="gallery-container" class="gallery-container">
<div id="gallery" class="fade">
<!-- Slide Number -->
<div id="slide-number" class="slideNum"></div>
<!-- image dots-->
<div id="dots"></div>
<!-- Site link -->
<div id="site-link" class="link"></div>
<!-- Coding link -->
<div id="code-link" class="link"></div>
<!-- Close button -->
<div class="closeBtn">×</div>
<!--Gallery images & numbers-->
<div id="gallery-imgs"></div>
<!-- gallery prev/next buttuns-->
<span id="prev"><</span>
<span id="next">></span>
</div>
</div>
<section id="contactSection" class="contactSection">
<h1>How to get in touch</h1>
<div id="contactLinks" class="contactLinks">
<!-- Contact links -->
</div>
</section>
<footer>
<p> **This is a project Completed for: <a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a> <br> © Harper Productions</p>
</footer>
</section>
<script src="./script.js"></script>
</body>
</html>