-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (164 loc) · 11.1 KB
/
Copy pathindex.html
File metadata and controls
178 lines (164 loc) · 11.1 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
167
168
169
170
171
172
173
174
175
176
177
178
<!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" />
<link rel="icon" type="image/png" href="icons/me.png">
<script src="script.js"></script>
<title>7XDev Portfolio</title>
</head>
<body>
<div class="grid-overlay"></div>
<header>
<nav class="header">
<img src="icons/me.png" alt="Emoji Face" class="emoji" />
<a class="button-header" href="#about">
About
</a>
<a class="button-header" href="#experience">
Experience
</a>
<a class="button-header" href="#projects">
Projects
</a>
<a class="button-header source-link" href="https://github.com/7xdev/Portfolio" target="_blank"
rel="noopener noreferrer">
Source
</a>
</nav>
</header>
<main>
<section>
<div class="main-section section-1">
<h1 class="main-heading">Hey, I'm Florian 👋</h1>
<p class="main-subheading typing-text">I'm a 16 year old student located in Leonding, Austria</p>
<ul class="icon-list">
<li>
<a href="https://github.com/7xdev" target="_blank" rel="noopener noreferrer" class="hyperl-icon">
<svg class="icon" width="20" height="20" viewBox="0 0 16 16" fill="white">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</li>
<li>
<a href="https://instagram.com/flhetz" target="_blank" rel="noopener noreferrer" class="hyperl-icon">
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="white">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
</li>
<li>
<a href="https://discord.com/users/1286382178669695068" target="_blank" rel="noopener noreferrer"
class="hyperl-icon">
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="white">
<path
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
</svg>
</a>
</li>
<li>
<a href="mailto:f.hetzmann@students.htl-leonding.ac.at" target="_blank" rel="noopener noreferrer"
class="hyperl-icon">
<svg class="icon" width="20" height="20" viewBox="0 0 16 16" fill="white">
<path
d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z" />
<path
d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648Zm-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z" />
</svg>
</a>
</li>
</ul>
</div>
</section>
<section>
<h1 class="text-heading">About Me</h1>
<div class="main-section section-2" id="about">
<h1 class="text-subheading">Overall</h1>
<p class="text-normal">I've been following coding tutorials since the age of 12 but didn't learn how to really
code until I was nearly 15 as it took me a bit to find a good way to start learning. By the end of my
education, I hope to secure a rewarding job in Software Engineering, as it is a lifelong passion of mine. I
enjoy creating things and find great satisfaction when others genuinely use and appreciate the end product.
</p>
</div>
<ul class="about-list">
<li class="test-li">
<div class="main-section section-3">
<h1 class="text-subheading">Languages</h1>
<div class="slider-line"></div>
<div class="slider-container" id="content1"></div>
<div class="slider-line"></div>
</div>
</li>
<li class="test-li">
<div class="main-section section-4">
<h1 class="text-subheading">Other Technologies</h1>
<div class="slider-line"></div>
<div class="slider-container" id="content2"></div>
<div class="slider-line"></div>
</div>
</li>
</ul>
</section>
<section>
<h1 class="text-heading">Experience</h1>
<div class="main-section section-5" id="experience">
<div class="experience-section">
<img src="icons/htl-logo.png" alt="HTL Leonding Logo" class="experience-logo">
<div class="experience-text">
<h1 class="text-subheading">Student</h1>
<p class="text-date">HTL-Leonding | September 2024 - Present</p>
<div class="experience-underline"></div>
<p class="text-normal" style="text-align: left;">I'm a student at HTL-Leonding, where I am pursuing my education in software engineering. This has allowed me to deepen my knowledge in various programming languages and technologies.</p>
</div>
</div>
</div>
</section>
<section>
<h1 class="text-heading">Projects</h1>
<div class="projects-grid" id="projects">
<div class="main-section project-card">
<div class="experience-section">
<svg class="experience-logo" viewBox="0 0 24 24" fill="white">
<rect x="10" y="10" width="4" height="4"/>
<circle cx="8" cy="8" r="2"/>
<circle cx="16" cy="8" r="2"/>
<circle cx="8" cy="16" r="2"/>
<circle cx="16" cy="16" r="2"/>
</svg>
<div class="experience-text">
<h1 class="text-subheading">AeroMesh Drones</h1>
<p class="text-date"><a href="https://github.com/7XDev/drone-project" target="_blank" rel="noopener noreferrer">GitHub Repo</a> | Ongoing</p>
<div class="experience-underline"></div>
<p class="text-normal" style="text-align: left;">This project aims to create a comprehensive website that provides detailed guidance on building and 3D printing drones, utilizing control software to operate them and map out image depth maps of areas. The website will feature a user-friendly interface inspired by GitBook, with structured navigation and detailed step-by-step instructions.</p>
</div>
</div>
</div>
<div class="main-section project-card">
<div class="experience-section">
<svg class="experience-logo" viewBox="0 0 24 24" fill="white">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8" fill="none" stroke="white" stroke-width="1.5"/>
<line x1="16" y1="13" x2="8" y2="13" stroke="black" stroke-width="1.5"/>
<line x1="16" y1="17" x2="8" y2="17" stroke="black" stroke-width="1.5"/>
<polyline points="10 9 9 9 8 9" fill="none" stroke="black" stroke-width="1.5"/>
</svg>
<div class="experience-text">
<h1 class="text-subheading">MarkDown Doc</h1>
<p class="text-date"><a href="https://github.com/7XDev/MarkDownConverter" target="_blank" rel="noopener noreferrer">GitHub Repo</a> | Finished</p>
<div class="experience-underline"></div>
<p class="text-normal" style="text-align: left;">A streamlined documentation template that converts Markdown files into well-formatted HTML pages. Features include a navigable page list, heading-based scroll navigation, full-text search, and customizable help & credits pages — all configured through a single config file.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-line"></div>
<p class="footer-text">7XDev.is-a.dev - Made with ❤️ by 7XDev</p>
</footer>
</body>
</html>