Skip to content

Commit 2522d63

Browse files
PSEMOPSEMO
authored
Update index.html
1 parent fb74a9b commit 2522d63

File tree

1 file changed

+138
-96
lines changed

1 file changed

+138
-96
lines changed

‎index.html

Lines changed: 138 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,151 @@
1-
<!-- Thanks to: https://github.com/johnggli/linktree -->
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Semih Yılmaz</title>
8-
<!-- Favicon -->
9-
<link rel="icon" href="https://avatars.githubusercontent.com/u/85266757?v=4" type="image/x-icon" />
10-
<!-- Font Awesome icons -->
11-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
12-
<!-- Core theme CSS -->
13-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Semih Yılmaz - Links</title>
8+
9+
<!-- Favicon -->
10+
<link rel="icon" href="https://avatars.githubusercontent.com/u/85266757?v=4" type="image/png" />
11+
12+
<!-- Font Awesome Icons -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
14+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
15+
crossorigin="anonymous" referrerpolicy="no-referrer" />
16+
17+
<!-- Google Fonts -->
18+
<link rel="preconnect" href="https://fonts.googleapis.com">
19+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20+
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Space+Mono:wght@400;700&display=swap"
21+
rel="stylesheet">
22+
23+
<!-- Core theme CSS -->
24+
<link rel="stylesheet" href="style.css">
1425
</head>
1526

1627
<body>
17-
<div id="first100percent">
18-
<!-- Parallax Pixel Background Animation -->
19-
<section class="animated-background">
20-
<div id="stars1"></div>
21-
<div id="stars2"></div>
22-
<div id="stars3"></div>
23-
</section>
24-
<!-- End of Parallax Pixel Background Animation -->
25-
26-
<a id="profilePicture" href="#popup">
27-
<img src="https://avatars.githubusercontent.com/u/85266757?v=4" alt="Profile Picture">
28-
</a>
29-
30-
<div class="overlay" id="popup">
31-
<div class="popup">
32-
<div class="popup-photo">
33-
<a href="https://avatars.githubusercontent.com/u/85266757?v=4" target="_blank">
34-
<img src="https://avatars.githubusercontent.com/u/85266757?v=4" alt="Profile Picture">
35-
</a>
36-
</div>
37-
<a class="popup-close" onclick="history.back()">&times;</a>
38-
</div>
39-
</div>
28+
<!-- Animated Background Overlay -->
29+
<div class="background-overlay"></div>
4030

41-
<div id="texts">
42-
Semih "PSEMO" Yılmaz
43-
</div>
31+
<!-- Main Content Container -->
32+
<div class="container">
4433

45-
<div id="links">
46-
<a class="link" href="./resume.pdf" target="_blank">
47-
<i class="far fa-file-alt">&nbsp;</i>Game Development focused Resume
48-
</a>
49-
<a class="link" href="./Resume.pdf" target="_blank">
50-
<i class="far fa-file-alt">&nbsp;</i>Full Stack focused Resume
51-
</a>
52-
<a class="link" href="https://www.linkedin.com/in/semih-y%C4%B1lmaz-377545201/details/projects/" target="_blank">
53-
<i class="fab fa-linkedin">&nbsp;</i>Organized projects (You need to be logged in)
54-
</a>
55-
<a class="link" href="https://www.youtube.com/@semihylmaz3949/playlists" target="_blank">
56-
<i class="fab fa-youtube">&nbsp;</i>Short introduction videos for most of my projects
57-
</a>
58-
<a class="link" href="http://play.google.com/store/apps/developer?id=Semih+Y%C4%B1lmaz" target="_blank">
59-
<i class="fab fa-google-play">&nbsp;</i>Android Apps and games made by me
60-
</a>
61-
<a class="link" href="https://psemo.itch.io/" target="_blank">
62-
<i class="fas fa-gamepad">&nbsp;</i>Games that I made for GameJam competitions
63-
</a>
64-
<a class="link" href="https://github.com/PSEMO" target="_blank">
65-
<i class="fab fa-github">&nbsp;</i>Github
66-
</a>
67-
68-
<br>
69-
<div id="texts">
70-
Personal
71-
</div>
72-
<br>
73-
74-
<a class="link" href="https://www.linkedin.com/in/semih-y%C4%B1lmaz-377545201/" target="_blank">
75-
<i class="fab fa-linkedin">&nbsp;</i>Linkedin
76-
</a>
77-
<a class="link" href="https://discord.gg/VyhyFkv86N" target="_blank">
78-
<i class="fab fa-discord">&nbsp;</i>My Discord server
79-
</a>
80-
<a class="link" href="https://steamcommunity.com/id/PSEMO/" target="_blank">
81-
<i class="fab fa-steam">&nbsp;</i>Steam
82-
</a>
83-
84-
<div id="hashtag">❤❤❤❤❤</div>
85-
</div>
86-
</div>
34+
<header class="profile-header">
35+
<button id="profilePicButton" class="profile-picture-button" aria-label="View Profile Picture">
36+
<img src="https://avatars.githubusercontent.com/u/85266757?v=4" alt="Semih Yılmaz Profile Picture"
37+
loading="lazy">
38+
</button>
39+
<h1 class="profile-name">Semih "PSEMO" Yılmaz</h1>
40+
<p class="profile-tagline">Computer Engineer</p>
41+
</header>
42+
43+
<main class="links-container">
8744

88-
<div id="links">
89-
<br>
90-
<div id="texts">
91-
Other
45+
<!-- Professional Links Section -->
46+
<section class="link-section professional-section">
47+
<h2><i class="fas fa-briefcase fa-fw"></i> Professional</h2>
48+
<nav aria-labelledby="professional-heading">
49+
<a class="link-item" href="./resume_gamedev.pdf" target="_blank" rel="noopener noreferrer">
50+
<i class="fas fa-file-alt fa-fw"></i> Game Dev Resume
51+
</a>
52+
<a class="link-item" href="./resume_fullstack.pdf" target="_blank" rel="noopener noreferrer">
53+
<i class="fas fa-file-code fa-fw"></i> Full Stack Resume
54+
</a>
55+
<a class="link-item"
56+
href="https://www.linkedin.com/in/semih-y%C4%B1lmaz-377545201/details/projects/" target="_blank"
57+
rel="noopener noreferrer">
58+
<i class="fab fa-linkedin fa-fw"></i> Organized Projects (LinkedIn)
59+
</a>
60+
<a class="link-item" href="https://www.youtube.com/@semihylmaz3949/playlists" target="_blank"
61+
rel="noopener noreferrer">
62+
<i class="fab fa-youtube fa-fw"></i> Project Videos (YouTube)
63+
</a>
64+
<a class="link-item" href="http://play.google.com/store/apps/developer?id=Semih+Y%C4%B1lmaz"
65+
target="_blank" rel="noopener noreferrer">
66+
<i class="fab fa-google-play fa-fw"></i> Android Apps & Games
67+
</a>
68+
<a class="link-item" href="https://psemo.itch.io/" target="_blank" rel="noopener noreferrer">
69+
<i class="fas fa-gamepad fa-fw"></i> Game Jam Games (itch.io)
70+
</a>
71+
<a class="link-item" href="https://github.com/PSEMO" target="_blank" rel="noopener noreferrer">
72+
<i class="fab fa-github fa-fw"></i> GitHub Profile
73+
</a>
74+
</nav>
75+
</section>
76+
77+
<!-- Personal Links Section -->
78+
<section class="link-section personal-section">
79+
<h2><i class="fas fa-user fa-fw"></i> Personal</h2>
80+
<nav aria-labelledby="personal-heading">
81+
<a class="link-item" href="https://www.linkedin.com/in/semih-y%C4%B1lmaz-377545201/" target="_blank"
82+
rel="noopener noreferrer">
83+
<i class="fab fa-linkedin fa-fw"></i> LinkedIn Profile
84+
</a>
85+
<a class="link-item" href="https://discord.gg/VyhyFkv86N" target="_blank" rel="noopener noreferrer">
86+
<i class="fab fa-discord fa-fw"></i> My Discord Server
87+
</a>
88+
<a class="link-item" href="https://steamcommunity.com/id/PSEMO/" target="_blank"
89+
rel="noopener noreferrer">
90+
<i class="fab fa-steam fa-fw"></i> Steam Profile
91+
</a>
92+
</nav>
93+
</section>
94+
95+
<!-- Other Projects Section -->
96+
<section class="link-section other-projects-section">
97+
<h2><i class="fas fa-terminal fa-fw"></i> Other Projects</h2>
98+
<nav aria-labelledby="other-projects-heading">
99+
<a class="link-item" href="https://psemo.itch.io/hack" target="_blank" rel="noopener noreferrer">
100+
<i class="fa fa-code fa-fw"></i> Hack(); Game
101+
</a>
102+
<a class="link-item" href="./Hack(2)%3B/index.html" target="_blank" rel="noopener noreferrer">
103+
<i class="fa fa-code fa-fw"></i> Hack(2); Game
104+
</a>
105+
<a class="link-item" href="./sorter.html" target="_blank" rel="noopener noreferrer">
106+
<i class="fa fa-sort-alpha-down fa-fw"></i> Sorter Tool
107+
</a>
108+
</nav>
109+
</section>
110+
111+
</main>
112+
113+
<footer class="page-footer">
114+
<!-- Animated Hashtag -->
115+
<div class="animated-hashtag">#OpenSource</div>
116+
</footer>
117+
118+
</div> <!-- / .container -->
119+
120+
<!-- Image Popup Modal -->
121+
<div id="imagePopup" class="popup-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-heading"
122+
aria-hidden="true">
123+
<div class="popup-content">
124+
<h2 id="popup-heading" class="visually-hidden">Profile Picture Large View</h2> {/* Added for screen readers
125+
*/}
126+
<button id="closePopup" class="popup-close" aria-label="Close popup">×</button>
127+
<img src="https://avatars.githubusercontent.com/u/85266757?v=4"
128+
alt="Semih Yılmaz Profile Picture - Large View">
129+
</div>
92130
</div>
93-
<br>
94-
95-
<a class="link" href="https://psemo.itch.io/hack" target="_blank">
96-
<i class="fa fa-terminal">&nbsp;</i>Hack();
97-
</a>
98-
<a class="link" href="./Hack(2)%3B/index.html" target="_blank">
99-
<i class="fa fa-terminal">&nbsp;</i>Hack(2);
100-
</a>
101-
<a class="link" href="./sorter.html" target="_blank">
102-
<i class="fa fa-terminal">&nbsp;</i>Sorter
103-
</a>
104-
</div>
105-
106-
<br><br><br>
131+
132+
<!-- Visually Hidden Class (for accessibility) -->
133+
<style>
134+
.visually-hidden {
135+
position: absolute;
136+
width: 1px;
137+
height: 1px;
138+
padding: 0;
139+
margin: -1px;
140+
overflow: hidden;
141+
clip: rect(0, 0, 0, 0);
142+
white-space: nowrap;
143+
border: 0;
144+
}
145+
</style>
146+
147+
<!-- JavaScript -->
148+
<script src="script.js"></script>
107149
</body>
108150

109151
</html>

0 commit comments

Comments
 (0)