tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Home and Projects section

Browse source
This commit is contained in:
Patrick Schwarzer 2025-05-12 05:06:55 +02:00
parent 95e7f8f333
commit cac0398197
2 changed files with 176 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

152
index.css
View file

@ -34,7 +34,7 @@ header.scrolled {
}
.logo a {
color: white;
color: #5865f2;
text-decoration: none;
font-size: 32px;
font-weight: bold;
@ -69,7 +69,6 @@ nav ul li a:hover {
color: #6d6d6d;
}
body.light-mode .logo a,
body.light-mode nav ul li a {
color: #222222;
}
@ -112,6 +111,7 @@ footer {
padding: 48px 0px;
width: 100%;
border-top: 1px solid #222222;
margin-top: 5rem;
}
body.light-mode footer {
background-color: #eeeeee;
@ -140,20 +140,21 @@ footer a {
border: none;
border-radius: 50%;
text-decoration: none;
transition: color 0s;
transition: transform 0.15s ease;
}
footer a:hover {
background-color: #5865f2;
transform: translateY(-3px);
}
body.light-mode footer a {
background-color: rgb(231, 231, 231);
color: rgb(29, 29, 29);
transition: color 0s;
transition: transform 0.15s ease;
}
body.light-mode footer a:hover {
color: white;
background-color: #5865f2;
transform: translateY(-3px);
}
footer p {
@ -178,10 +179,143 @@ main {
/* Home Section */
.home-container {
height: 100vh;
margin-top: 4rem;
display: flex;
flex-direction: column;
align-items: center;
color: rgb(216, 216, 216);
}
.home-container h1 {
font-size: 3.5rem;
}
.home-container h2 {
margin-top: 0.5rem;
font-size: 2rem;
}
.home-container p {
margin-top: 2.5rem;
font-size: 1rem;
}
.home-container span {
color: #5865f2;
}
body.light-mode .home-container h1 {
color: #3a3a3a;
}
body.light-mode .home-container h2 {
color: rgb(43, 43, 43);
}
body.light-mode .home-container p {
color: rgb(43, 43, 43);
}
/* Showcase Section */
.showcase-container {
height: 100vh;
.home-container .links {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 2rem;
margin-bottom: 24px;
}
.home-container a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: rgb(44, 49, 54);
color: white;
font-size: 20px;
border: none;
border-radius: 50%;
text-decoration: none;
transition: color 0s;
transition: transform 0.15s ease;
}
.home-container a:hover {
background-color: #5865f2;
transform: translateY(-3px);
}
body.light-mode .home-container a {
background-color: rgb(231, 231, 231);
color: rgb(29, 29, 29);
}
body.light-mode .home-container a:hover {
color: white;
background-color: #5865f2;
}
/* projects Section */
.projects-container {
margin-top: 4rem;
display: flex;
flex-direction: column;
align-items: center;
color: rgb(216, 216, 216);
}
.projects-container h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
grid-gap: 2rem;
}
.project {
padding: 2rem;
margin: 0 auto;
text-align: center;
background-color: rgb(33, 37, 41);
border-radius: 4px;
}
.project h1 {
margin-bottom: 1.25rem;
font-size: 1.5rem;
}
.project ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1.25rem;
list-style: none;
}
.project li {
margin: 0.5em;
font-size: 0.85rem;
}
.project a {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
width: 42px;
height: 42px;
background-color: rgb(44, 49, 54);
color: white;
font-size: 20px;
border: none;
border-radius: 50%;
text-decoration: none;
transition: color 0s;
transition: transform 0.15s ease;
}
.project a:hover {
background-color: #5865f2;
transform: translateY(-3px);
}
body.light-mode .project a {
background-color: rgb(231, 231, 231);
color: rgb(29, 29, 29);
}
body.light-mode .project a:hover {
color: white;
background-color: #5865f2;
}

40
index.html
View file

@ -20,7 +20,7 @@
<a href="#">Home</a>
</li>
<li>
<a href="#showcase">Showcase</a>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#about">About</a>
@ -36,12 +36,38 @@
<main>
<section id="home">
<div class="home-container">
<p>Software Developer</p>
</div>
<h1>Hey 👋 I'm <span>Tarion</span>.</h1>
<h2>Game Programmer</h2>
<p>Currently working on a game in the Unity Engine.</p>
<div class="links">
<a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a></div>
</div>
</section>
<section id="showcase">
<div class="showcase-container">
<section id="projects">
<div class="projects-container">
<h1>Projects</h1>
<div class="projects">
<div class="project">
<h1>Game Engine</h1>
<p>A Game Engine written in c++ using Lua as it's scripting language.</p>
<ul>
<li>C++</li>
<li>Lua</li>
</ul>
<a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
</div>
<div class="project">
<h1>schwarzer-energie.de</h1>
<p>A Website for my Dads Chimney Sweeping & Energy Performance Certificate Business.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Hosting</li>
</ul>
<a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
</div>
</div>
</div>
</section>
<section id="about">
@ -58,7 +84,7 @@
<footer>
<div class="links">
<a href="https://discord.gg/APgmsfA9Ae"><i class='fab fa-discord'></i></a>
<a href="mailto:patrickschwarzer2000@gmail.com"><i class="fa-solid fa-envelope"></i></i></a>
<a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
<a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
<a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a>