added source
This commit is contained in:
SG101
commit
353ebb210c
BIN
assets/boids-cover.jpg
Normal file
BIN
assets/boids-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
assets/octicon.png
Normal file
BIN
assets/octicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
assets/personal-info-photo.jpg
Normal file
BIN
assets/personal-info-photo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
assets/ruins-of-edis-cover.jpg
Normal file
BIN
assets/ruins-of-edis-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
BIN
assets/spirit-of-science-cover.jpg
Normal file
BIN
assets/spirit-of-science-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
assets/stig-kart-cover.png
Normal file
BIN
assets/stig-kart-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
102
index.html
Normal file
102
index.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="shared/style.css">
|
||||
<link rel="stylesheet" href="shared/projects.css">
|
||||
<style>
|
||||
#intro-sentence {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="shared/jquery.min.js"></script>
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1 id="intro-sentence">Hello, my name is Scott. I'm a programming obsessive with a love for odd solutions and figuring out complex problems</h1>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<h2 id="projects">Projects</h2>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<div>
|
||||
<a class="internal" href="projects/ruins-of-edis.html">
|
||||
<div class="project-card" ruins-of-edis></div>
|
||||
<h2>Ruins of Edis - Unity Game</h2>
|
||||
<p class="project-card-role">
|
||||
C# Gameplay and physics programmer
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="internal" href="projects/spirit-of-science.html">
|
||||
<div class="project-card" spirit-of-science></div>
|
||||
<h2>Spirit of Science - IEGJ Entry</h2>
|
||||
<p class="project-card-role">
|
||||
General C# Programmer
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="internal" href="projects/stig-kart.html">
|
||||
<div class="project-card" stig-kart></div>
|
||||
<h2>Stig Kart 64 - Unity Game</h2>
|
||||
<p class="project-card-role">
|
||||
C# Gameplay and physics programmer
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="internal" href="projects/boids.html">
|
||||
<div class="project-card" boids></div>
|
||||
<h2>Boids - C++ Simulation</h2>
|
||||
<p class="project-card-role">
|
||||
C++ Programmer
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<h2 id="about-me">About Me</h2>
|
||||
<div class="personal-info-grid" indented>
|
||||
<div>
|
||||
<p>
|
||||
I started out programming at twelve years old and haven't been able to let go ever since. I have intermediate experience working with C# in Unity and Google Cloud Functions. I have worked with Git and Scrum. For personal projects I work with mainly C and C++. I also have previous experience with Javascript and GameMaker-Language.
|
||||
I am hardworking with a pragmatic attention to technical detail. I love seeing a project come together and working with motivated teams. My favourite part of any project is learning all the intricacies of my tools as I use them. I strive to write organized code, that is efficient to run, build and maintain.
|
||||
</p>
|
||||
</div>
|
||||
<div class="personal-info-photo"></div>
|
||||
</div>
|
||||
|
||||
<h2 id="experience">Experience</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>Graphisch Lyceum Utrecht</h3>
|
||||
<p>Game Programming Student</p>
|
||||
<p>September 2021 - Now</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot</h3>
|
||||
<p>Junior API and automation developer</p>
|
||||
<p>September 2021 - Now</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot(internship)</h3>
|
||||
<p>API and automation intern</p>
|
||||
<p>June 2021 - August 2021</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Hobby Programmer</h3>
|
||||
<p>Chief Experimentor</p>
|
||||
<p>2016 - forever</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<body>
|
||||
</html>
|
||||
81
projects/boids.html
Normal file
81
projects/boids.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Boids</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2 id="info">Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: C++ Simulation</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2 id="video">Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/h6zuPfniL2s?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
|
||||
<a class="internal" target="_blank" href="https://github.com/Scott-G-GD/boids-cpp">
|
||||
<div class="github-block">
|
||||
<div class="github-logo"></div>
|
||||
<h2>Scott-G-GD/boids-cpp</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<h2 id="product-overview">Product Overview</h2>
|
||||
<p indented>
|
||||
I worked on this for about week inspired by the lessons on steering behaviours at school.
|
||||
</p>
|
||||
|
||||
<h2 id="project-overview">Project Overview</h2>
|
||||
<p indented>
|
||||
An implementation of boids in C++ with sfml.
|
||||
</p>
|
||||
|
||||
<h2 id="code">Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h2>Boid</h2>
|
||||
<div indented>
|
||||
<p>
|
||||
The boids themselves are primarily a position, a velocity, a mass, and a collection of behaviour function pointers. These boids are then stored in a vector and each of the behaviours is run for each of the boids, resulting in the demonstrated movements.
|
||||
</p>
|
||||
<div id="code-boids" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-boids").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/boids-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Behaviours</h2>
|
||||
<div indented>
|
||||
<p>
|
||||
As previously mentioned, the boids all store a collection of behaviours, represented by function pointers. These function pointers take as input a context object representing the program state at the start of the frame, and output a desired change in velocity. The original boids paper describes cohesion, separation, and alignment, so these are the main behaviours implemented.
|
||||
</p>
|
||||
<div id="code-behaviour-cohesion" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-cohesion").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/cohesion-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
<div id="code-behaviour-separation" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-separation").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/separation-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
<div id="code-behaviour-alignment" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-alignment").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/alignment-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</html>
|
||||
63
projects/ruins-of-edis.html
Normal file
63
projects/ruins-of-edis.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ruins of Edis</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: Unity Game</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/9HS_cBV1rOg?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A relaxing desert driving game about following a blue light around the ruins of a long lost civilization. Stay within the light or be lost to the desert.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
For this project, I was a responsible for the car's controls and physics. I also helped with programming the terrain generation script.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h3>Controls</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The drifting system uses a "force angle" which describes the angle relative to the forward direction in which the car should apply force.
|
||||
This allows the direction while drifting to be changed to be somewhere to the side of the car for it to slide properly.
|
||||
</p>
|
||||
<div id="car-update-code" class="code-content code-box">
|
||||
<script>$(function(){$("#car-update-code").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/update-car-roe.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Terrain Generator</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
To make the terrain generation extensively configurable, we used a whole collection of stacked animation curves and multipliers.
|
||||
These were then applied to the result of a perlin noise function to create a heightmap, which can then be applied to one or more terrain objects.
|
||||
</p>
|
||||
<div id="terrain-generator-code" class="code-content code-box">
|
||||
<script>$(function(){$("#terrain-generator-code").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/terrain-generator-roe.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
69
projects/spirit-of-science.html
Normal file
69
projects/spirit-of-science.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$('#site-header').load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Spirit of Science</h1>
|
||||
<section class="project">
|
||||
<h2 class="inline">Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Unity Game for IEGJ</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://youtube.com/embed/7Zueiw9SIrI?mute=1&autoplay=1&loop=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
<iframe
|
||||
src="https://itch.io/embed/1415379"
|
||||
class="embed" itch
|
||||
frameborder="0">
|
||||
<a href="https://sg-dev.itch.io/spirit-signal-iegj2022">
|
||||
Spirit Signal by sg_dev, Saltoc, villewilly, jrosenbe, hallo_schoonheid
|
||||
</a>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A top down exploration game setting you to exploring an abandoned factory looking for tools and key-cards while avoiding the unexplained dangers around the place
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
This was made for the International Educational Game Jam with a team of three artists and two programmers. My role was mainly that of gameplay programmer. I wrote the interaction and movement systems, as well as a few interactions using those systems.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
<h3>Interaction</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
When the player clicks, clickable objects near the cursor should be notified that they've been activated. For this, I created an Interactible interface. This interface can then be inherited to clearly mark a component as clickable.
|
||||
</p>
|
||||
<div id="interaction-code" class="code-content code-box">
|
||||
<script>$(function(){$("#interaction-code").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/iinteractible-ss.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Clicking</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The player interaction script triggers any IInteractible components within a radius around wherever the player has clicked.
|
||||
It only does this after ensuring that the clicked object can be reached.
|
||||
</p>
|
||||
<div id="clicking-code" class="code-content code-box">
|
||||
<script>$(function(){$("#clicking-code").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/interaction-ss.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
84
projects/stig-kart.html
Normal file
84
projects/stig-kart.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$('#site-header').load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Stig Kart 64</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: Unity Game</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/0gehGW9LS58?mute=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
<iframe
|
||||
src="https://itch.io/embed/1372223"
|
||||
width="552" height="167"
|
||||
class="embed" itch
|
||||
frameborder="0">
|
||||
<a href="https://aafke.itch.io/bottom-gear-stig">
|
||||
Bottom Gear - Stig Kart 64 by Aafke van roon, Jeroeno_Boy, sg_dev, Chirp77, Jyce
|
||||
</a>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A fast paced kart racer about timing your drifts and boosts just right. Play against your friends in splitscreen or the AI in singleplayer and try to get the quickest time.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
The game was made by a team of six people over two weeks. I spent most of that working on the input and kart physics. After the time trial mode was done, I also worked on the AI.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h3>Steering</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
For steering we had some very specific requirements. While drifting, the player needed to be able to control their direction, without being able to flip the direction of the drift or 'drift' straight forward.
|
||||
When drifting, the UpdateSteering function will transform the current steering input so that, if the drift was started while steering left, the possible range of steering values is within the range of -1 to -min, where min is a positive number lower than one which signifies the minimum amount of steering. When the drift is started while steering right, the range would be opposite, ranging from min to one.
|
||||
</p>
|
||||
<div id="update-steering" class="code-content code-box">
|
||||
<script>$(function(){$('#update-steering').load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/update-steering-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Basic AI</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
After we had completed the basic time trial mode, we still had about a week to add more features. So while another programmer went ahead to implement splitscreen, I wanted to try and get AI working. The player input component was already separate from the kart physics part. So the basic steering AI works by steering until it is aiming at the next invisible checkpoint on the course.
|
||||
</p>
|
||||
<div id="aim-at-target" class="code-content code-box">
|
||||
<script>$(function(){$("#aim-at-target").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/rotate-to-target-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Expanded AI</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
Allowing the AI to drift required it turning into the next turn rather than just aiming at the next checkpoint.
|
||||
To do this, i first get the next three checkpoints to calculate the total angle of the next turn. This angle is then used to decide whether to drift or not.
|
||||
After figuring out whether to drift or not, the AI will modify its physics in the same way as when the players presses the drift button.
|
||||
With the drift started, the AI needs to aim at the checkpoint after the next to drift.
|
||||
</p>
|
||||
<div id="update-target" class="code-content code-box">
|
||||
<script>$(function(){$('#update-target').load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/update-target-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
15
shared/header.html
Normal file
15
shared/header.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<link type="stylesheet" href="style.css">
|
||||
<div class="site-header">
|
||||
<ul>
|
||||
<li>
|
||||
<a class="internal" href="../index.html#projects">
|
||||
<h2>Projects</h2>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="internal" href="../index.html#experience">
|
||||
<h2>Experience</h2>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
2
shared/jquery.min.js
vendored
Normal file
2
shared/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
33
shared/projects.css
Normal file
33
shared/projects.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.project-card {
|
||||
padding: 10px;
|
||||
height: 500px;
|
||||
background-color: #333F;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-card-role {
|
||||
color: #888F;
|
||||
font-weight: bold;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.project-card[ruins-of-edis] {
|
||||
background-image: url('../assets/ruins-of-edis-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[stig-kart] {
|
||||
background-image: url('../assets/stig-kart-cover.png');
|
||||
}
|
||||
|
||||
.project-card[spirit-of-science] {
|
||||
background-image: url('../assets/spirit-of-science-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[boids] {
|
||||
background-image: url('../assets/boids-cover.jpg');
|
||||
}
|
||||
159
shared/style.css
Normal file
159
shared/style.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
html {
|
||||
font: 100% monospace, sans-serif;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1040px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
h2.inline {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a.internal {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.info {
|
||||
margin-top: 10px;
|
||||
color: #222F;
|
||||
font-style: italic;
|
||||
}
|
||||
div.info-old {
|
||||
background-color: #0000000C;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.embed {
|
||||
background-color: #000F;
|
||||
border-radius: 10px;
|
||||
background-color: #000F;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 3px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.embed[itch] {}
|
||||
|
||||
.embed[youtube] {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.github-block {
|
||||
display: grid;
|
||||
color: white;
|
||||
grid-template-columns: 125px auto;
|
||||
vertical-align: center;
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
background-color: #445F;
|
||||
border-color: #111F;
|
||||
border-width: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
div.github-logo {
|
||||
background-color: #0000;
|
||||
background-image: url("../assets/octicon.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
filter: invert(100%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.project {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center; background-color: #0000;
|
||||
}
|
||||
|
||||
.site-header > ul > li {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.personal-info-grid {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 80% auto;
|
||||
}
|
||||
|
||||
.personal-info-photo {
|
||||
background-image: url("../assets/personal-info-photo.jpg");
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.experience-grid > div {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
*[indented] {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
background-color: #2C2C3CFF;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
overflow: visible;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
Loading…
Reference in a new issue