-
Notifications
You must be signed in to change notification settings - Fork 0
/
skills.html
120 lines (96 loc) · 3.33 KB
/
skills.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
<!DOCTYPE html>
<html lang="en">
<!-- Include this in the head of your HTML -->
<link rel="stylesheet" href="path_to_your_css_file.css">
<!-- Your navbar HTML -->
<div class="navbar">
<a href="index.html">Home</a>
<a href="skills.html">Who Am I</a>
<a href="skills.html">What I Do</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#achievements">Achievements</a>
<a href="contact.html">Contact</a>
</div>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skyler Lang's Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div class="hero-section">
<h1>What I do</h1>
</div>
<div class="skills-container">
<div class="left-skills">
<h2>I am a:</h2>
<ul>
<li>Computer Engineer</li>
<li>Web Developer</li>
<li>Writer</li>
<li>Copywriter</li>
</ul>
</div>
<div class="right-skills">
<h2>I am proficient in:</h2>
<ul>
<li>Java, Python, C</li>
<li>HTML, CSS, Javascript</li>
<li>English and Chinese</li>
<li>Generating more Clicks</li>
</ul>
</div>
</div>
</html>
<!-- Add this to your HTML file -->
<footer class="footer">
<div class="footer-content">
<div class="footer-left">
<!-- Add an id to your email link to target it with JavaScript -->
<a href="#" id="emailPopup">Email</a>
<a href="YOUR_RESUME_LINK" target="_blank">Resume</a>
<a href="https://www.linkedin.com/in/skyler-lang/" target="_blank">LinkedIn</a>
<a href="https://www.instagram.com/skyler0117_/" target="_blank">Instagram</a>
</div>
<div class="footer-right">
Updated January 2024 | Made using HTML/CSS/JS</a>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>You can reach me via email at [email protected]</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("emailPopup");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// When the user clicks the button, update the modal content and display the modal
btn.onclick = function() {
document.getElementById("emailAddress").textContent = "[email protected]"; // Change the email dynamically if needed
modal.style.display = "block";
}
</script>