-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (78 loc) · 4.18 KB
/
index.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
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Some of my projects I have worked on.">
<meta name="keywords" content="GStudiosX, Portfolio, Software Developer, Skript Documentation">
<meta name="author" content="GStudiosX">
<meta property="og:title" content="GStudiosX">
<meta property="og:description" content="A showcase of my projects.">
<meta property="og:image" content="/assets/profile.png">
<meta property="og:url" content="https://gstudiosx2.github.io/">
<meta property="og:type" content="website">
<title>GStudiosX Portfolio</title>
<link rel="icon" type="image/png" href="/assets/profile.png">
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Additional styles for clickable articles and hover effects */
.clickable-article {
position: relative;
overflow: hidden; /* Prevent scrollbars */
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s; /* Smooth transition for hover effects */
}
.clickable-article:hover {
background-color: rgba(0, 0, 0, 0.3); /* Darken card on hover */
}
.content-overlay {
position: relative;
z-index: 10;
padding: 1rem;
height: 100%; /* Stretch content overlay to full height */
}
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive grid layout */
gap: 2rem; /* Reduced gap size */
justify-content: center; /* Center grid items horizontally */
align-items: start; /* Align grid items to the start vertically */
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center; /* Center content vertically */
align-items: center; /* Center content horizontally */
height: 100%;
}
</style></head>
<body class="bg-gray-900 text-gray-300 flex flex-col justify-center min-h-screen">
<div class="container mx-auto px-4">
<header class="mb-12 text-center">
<h1 class="text-4xl font-bold text-white mb-2">GStudiosX</h1>
<p class="text-gray-400">Developer, Gamer</p>
</header>
<main>
<section id="projects" class="grid-layout mt-8 mb-8 md:px-36">
<a class="clickable-article bg-gray-800 shadow-lg rounded-lg p-6 text-center h-full flex-grow" href="https://gstudiosx2.github.io/MHDailyLimitChecker/" aria-label="MHDailyLimitChecker Project">
<div class="content-overlay card-content">
<h2 class="text-2xl font-bold text-white">MHDailyLimitChecker</h2>
<p class="text-gray-300 mb-4">A tool that lets you check how much time you can play on your Minehut server.</p>
</div>
</a>
<a class="clickable-article bg-gray-800 shadow-lg rounded-lg p-6 text-center h-full flex-grow" href="https://skript.lol" aria-label="Skript.lol Project">
<div class="content-overlay">
<img src="/LogoV2.png" alt="Skript.lol Logo" class="mx-auto mb-4 h-20 w-20 object-cover">
<h2 class="text-2xl font-bold text-white">Skript.lol</h2>
<p class="text-gray-300 mb-4">The best website for modern Skript development documentation.</p>
</div>
</a>
</section>
</main>
<footer class="mt-12 text-center">
<section id="social-links" class="mt-12 flex justify-center space-x-6">
<a href="https://github.com/GStudiosX2" class="text-gray-300 hover:text-white">GitHub</a>
<a href="https://www.youtube.com/@gstudiosx8964" class="text-gray-300 hover:text-white">YouTube</a>
</section>
<p>Contact me on <a href="https://discord.com/users/389841806025687050" class="text-blue-400 hover:underline">Discord</a></p>
</footer>
</div>
</body></html>