-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
166 lines (157 loc) · 7.93 KB
/
index.html
File metadata and controls
166 lines (157 loc) · 7.93 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Charlie's portfolio — Tech enthusiast, cybersecurity aspirant, and game developer. Projects in web dev, security, and open source." />
<title>Charlie's Portfolio</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
</head>
<body>
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="initial-scroll">
<div class="mouse"></div>
<p>Scroll to Explore</p>
</div>
<nav>
<div class="nav-logo"><span>ch4rlesexe</span> / portfolio</div>
<button class="hamburger" id="hamburger" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<div class="nav-links" id="nav-links">
<a href="#home" class="nav-link">Home</a>
<a href="#work" class="nav-link">Work</a>
<a href="#about" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
</nav>
<section id="home" class="section">
<div class="hero">
<h1 class="hero-title">Hello, I'm <span class="accent">Charlie</span></h1>
<p class="subtitle">Tech Enthusiast, Cybersecurity Aspirant, and Game Developer</p>
</div>
</section>
<section id="work" class="section">
<div class="section-inner">
<h2>Some of My Projects</h2>
<div class="projects">
<div class="project" data-tilt data-link="https://3z0.org/">
<div class="project-content">
<h3>3Z0 [Open Source Blog Site]</h3>
<p>An open-source blogging website made with HTML, CSS, and Javascript, made for me to document things I discover and want to discuss.</p>
<div class="project-links">
<a href="https://github.com/ch4rlesexe/3z0" target="_blank" class="project-link">
<i class="fab fa-github"></i>
</a>
<a href="https://www.3z0.org/" target="_blank" class="project-link">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</div>
<div class="project" data-tilt data-link="https://github.com/ch4rlesexe/rockethacksforums">
<div class="project-content">
<h3>RocketHacks Forum & Application Site</h3>
<p>Rocket Hacks Forums is a web-based application that provides user authentication, dashboard management, and application handling functionalities. It includes administrative and user-facing pages for managing accounts, applications, and forum interactions.</p>
<div class="project-links">
<a href="https://github.com/ch4rlesexe/rockethacksforums" target="_blank" class="project-link">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="project" data-tilt data-link="https://github.com/ch4rlesexe">
<div class="project-content">
<h3>And much more coming soon...</h3>
<p>To view all of my other open source projects, please visit my GitHub.</p>
<div class="project-links">
<a href="https://github.com/ch4rlesexe/" target="_blank" class="project-link">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="section">
<div class="section-inner">
<div class="about-content">
<h2>About Me</h2>
<p class="reveal-text">I am currently pursuing dual degrees in Computer Science & Engineering Technology and Cybersecurity, with experience in programming, game development, and backend systems. My ambition is to specialize in ethical hacking and penetration testing, helping secure digital landscapes.</p>
<p class="reveal-text">My journey into technology has been both academically enriching and hands-on. I’ve dedicated my studies to fields such as malware analysis, ethical hacking, and web application security. Through a blend of coursework and personal projects, I’m continuously expanding my knowledge.</p>
<p class="reveal-text">In my academic life, I focus on both foundational principles and the latest advancements in technology. I am actively working on building a solid understanding of various programming languages like Java and Python, along with web-based languages such as PHP, HTML, and JavaScript. Each step brings me closer to mastering digital defense strategies and developing cybersecurity solutions.</p>
<p class="reveal-text">Looking ahead, I’m eager to continue exploring cybersecurity, particularly in areas like ethical hacking and threat intelligence. I aim to complete certifications such as Security+ and PenTest+ to formally validate my skills. With a commitment to lifelong learning, I’m excited to see where my curiosity and drive for innovation will take me. Ultimately, I aspire to contribute to the digital defense field, helping secure systems and protect data worldwide.</p>
<div class="skills">
<div class="skill">
<span class="skill-name">Cybersecurity</span>
<div class="skill-bar" data-level="100"></div>
</div>
<div class="skill">
<span class="skill-name">Software & Development</span>
<div class="skill-bar" data-level="80"></div>
</div>
<div class="skill">
<span class="skill-name">Emerging Tech</span>
<div class="skill-bar" data-level="65"></div>
</div>
<div class="skill">
<span class="skill-name">Data & AI</span>
<div class="skill-bar" data-level="50"></div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="section-inner">
<h2>Get In Touch</h2>
<div class="contact-content">
<p class="reveal-text">I'm always interested in hearing about new projects and opportunities. Whether you have a question or just want to say hi, feel free to reach out!</p>
<div class="contact-links">
<a href="mailto:corkscrew20k2@gmail.com" class="contact-link">
<i class="fas fa-envelope"></i>
<span>Email Me</span>
</a>
<a href="https://github.com/ch4rlesexe" target="_blank" class="contact-link">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
<a href="https://www.spigotmc.org/members/corkscrew.2008400/" target="_blank" class="contact-link">
<i class="fas fa-gamepad"></i>
<span>Spigot</span>
</a>
<a href="https://discord.com/users/998056477493301269/" target="_blank" class="contact-link">
<i class="fab fa-discord"></i>
<span>Discord</span>
</a>
</div>
</div>
</div>
</section>
<footer class="site-footer">
<p>Built by Charlie · <span id="year"></span></p>
</footer>
<a href="#home" class="back-to-top" id="back-to-top" aria-label="Back to top">
<i class="fas fa-chevron-up"></i>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
<script src="main.js"></script>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
document.getElementById('hamburger').addEventListener('click', function() {
document.getElementById('nav-links').classList.toggle('active');
});
document.querySelectorAll('.nav-link').forEach(function(link) {
link.addEventListener('click', function() {
document.getElementById('nav-links').classList.remove('active');
});
});
</script>
</body>
</html>