Added projects

This commit is contained in:
Notoric 2024-05-29 16:46:43 +01:00
parent 200223cbd2
commit cd403826b3
3 changed files with 110 additions and 3 deletions

BIN
assets/the-button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View File

@ -11,7 +11,7 @@
<p id="logo">[Notoric]</p> <p id="logo">[Notoric]</p>
<div id="nav"> <div id="nav">
<a href="#aboutme">About</a> <a href="#aboutme">About</a>
<a href="https://the-button.notoric.net">Projects</a> <a href="#projects">Projects</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </div>
<div id="links"> <div id="links">
@ -42,6 +42,21 @@
<p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p> <p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p>
</div> </div>
</div> </div>
<div id="projects">
<h1>Projects</h1>
<div class="project card">
<div class="text-content">
<h2>The Button</h2>
<div class="project-tags">
<p class="HTML">HTML</p>
<p class="CSS">CSS</p>
<p class="JS">JS</p>
</div>
<p class="project-description">The Button is a game created by Elendow on Steam. I have recreated this game in a single day using a basic web development stack. The user is presented with a button which contains a number. When the user clicks the button, the button with either reset back to zero or increase it's counter by one. The counter also represents the percantage chance of the button resetting to zero on the next press.</p>
</div>
<a href="https://the-button.notoric.net" target="_blank"><img src="/assets/the-button.png"></a>
</div>
</div>
</main> </main>
<script src="/scripts/homepage.js"></script> <script src="/scripts/homepage.js"></script>
</body> </body>

View File

@ -9,7 +9,7 @@ body {
background-color: #111; background-color: #111;
color: #eee; color: #eee;
margin: 0; margin: 0;
font-family: "Fira Mono", monospace; font-family: "Barlow", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
@ -176,6 +176,7 @@ em {
} }
#homepage .card { #homepage .card {
font-family: "Fira Mono", monospace;
flex-direction: row; flex-direction: row;
padding-block: 80px; padding-block: 80px;
gap: 70px; gap: 70px;
@ -290,7 +291,7 @@ em {
margin: auto; margin: auto;
position: relative; position: relative;
font-family: "Barlow", sans-serif; font-family: "Barlow", sans-serif;
font-size: 18px; margin-bottom: 100px;
} }
#aboutme h1 { #aboutme h1 {
@ -302,6 +303,10 @@ em {
z-index: 2; z-index: 2;
} }
#aboutme p {
font-size: 18px;
}
#box-with-title p { #box-with-title p {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -311,6 +316,89 @@ em {
font-family: "Fira Mono", monospace; font-family: "Fira Mono", monospace;
} }
#projects {
margin: auto;
width: fit-content;
}
#projects h1 {
padding-left: 75px;
}
.project {
display: flex;
flex-direction: row;
padding: 2em;
width: fit-content;
margin: auto;
gap: 20px;
align-content: center;
justify-content: center;
}
.project:nth-child(odd) {
flex-direction: row-reverse;
}
.project .text-content {
display: flex;
flex-direction: column;
align-self: start;
}
.project h2 {
margin-bottom: 0;
}
.project img {
width: 400px;
height: 300px;
border-radius: 3em;
border: 0.2em solid #222;
cursor: pointer;
}
.project-tags {
display: flex;
flex-direction: row;
gap: 10px;
margin: 0;
padding-block: 10px;
font-family: "Fira Mono", monospace;
font-weight: 500;
}
.HTML {
background-color: #E34F26 !important;
}
.CSS {
background-color: #1572B6 !important;
}
.JS {
background-color: #F7DF1E !important;
color: #000;
text-shadow: #eee 0px 0px 2px !important;
}
.project-tags p {
margin: 0;
font-size: 0.8em;
width: 40px;
border-radius: 1em;
background-color: #222;
padding: 0.2em;
text-align: center;
text-shadow: #111 0px 0px 2px;
}
.project-description {
max-width: 400px;
font-size: 1.1em;
margin: 0;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
#logo { #logo {
@ -428,6 +516,10 @@ em {
#name { #name {
font-size: 3em; font-size: 3em;
} }
.project {
flex-direction: column;
}
} }
@media (pointer: fine) and (hover: hover) and (max-width: 1100px) { @media (pointer: fine) and (hover: hover) and (max-width: 1100px) {