thepaperpilot/pages
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Making room for more featured projects on homepage

Browse source
This commit is contained in:
Anthony Lawn 2019-11-15 23:44:57 -06:00
parent 56b30bfc58
commit a9f6a89567
3 changed files with 85 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_posts/2017-07-28-slime.md
View file

@ -7,4 +7,4 @@ cards: [Slime Chargers Embed, Slime Chargers!, Slime Chargers Screenshot 1, Slim
links: ["Source Code|https://github.com/thepaperpilot/Slime-Chargers", "Play Game|https://thepaperpilot.itch.io/ld39", "Ludum Dare Entry|https://ldjam.com/events/ludum-dare/39/slime-chargers"]
tags: [javascript, pixi.js, ludum dare]
---
A game made for Ludum Dare 39 about using slimes to charge crystals.
A game made for Ludum Dare 39 about using slimes to charge crystals. It was made entirely by me, including the design, art, sound, and of course code.

45
css/main.css
View file

@ -12,12 +12,12 @@
}
footer {
background: #242a33;
font-size: .8em;
width: 90%;
max-width: 900px;
margin: auto;
margin-top: 20px;
padding-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
a {
@ -55,7 +55,6 @@ body {
background: transparent;
margin: 0;
padding: 0;
margin-bottom: 10px;
overflow-x: hidden;
}
@ -81,7 +80,7 @@ h1:first-child {
}
body > h4 {
width: 90%;
width: 95%;
max-width: 940px;
margin: 20px auto -10px auto;
color: white;
@ -139,7 +138,7 @@ ul:not(.browser-default) li {
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
width: 95%;
text-align: justify;
}
@ -301,10 +300,35 @@ button.accordion:focus {
text-align: center;
}
.two-section,
.three-section {
display: flex;
flex-flow: wrap;
}
.two-section .card {
width: calc(50% - 40px) !important;
}
.three-section .card {
width: calc(33% - 40px) !important;
}
.card-title a {
color: white;
}
.card-content .card-image:first-child {
margin-top: -20px;
}
@media screen and (max-width: 1200px) {
.two-section .card,
.three-section .card {
width: 95% !important;
}
}
@media screen and (max-device-width: 480px) {
.head {
padding: 10px;
@ -370,7 +394,8 @@ button.accordion:focus {
margin: 0 -20px 20px -20px;
}
.card .card-image img {
.card .card-image img,
.card .card-image video {
display: block;
border-radius: 2px 2px 0 0;
position: relative;
@ -417,7 +442,7 @@ table {
}
.off {
width: 90%;
width: 95%;
max-width: 940px;
margin: auto;
margin-top: 10px;
@ -438,7 +463,7 @@ a.btn, a.btn-flat, input.btn, input.btn-flat {
}
body > .collapsible, body > .collection, body .card, body .slider, body > .container {
width: 90% !important;
width: 95% !important;
max-width:940px !important;
margin:auto !important;
margin-bottom:20px !important;

79
index.html
View file

@ -21,49 +21,68 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
<div class="section" id="featured">
<h1>Featured Projects</h1>
<div class="card">
<div class="card-content">
<span class="card-title"><a href="/babble">I made Babble Buds!</a></span>
<div class="card-image">
<a href="/babble"><img src="/assets/babble-assets/screenshot.jpg"></a>
<div class="two-section">
<div class="card">
<div class="card-content">
<div class="card-image">
<a href="/babble"><img src="/assets/babble-assets/screenshot.jpg"></a>
</div>
<span class="card-title"><a href="/babble">I made Babble Buds!</a></span>
<p>Babble Buds is a free, open source virtual puppet show engine I made for web and unity, as well as an accompanying electron-based puppet editor and multiplayer stage. Use it for enhancing your digital tabletop roleplaying game, creating silly videos, or even scripting cutscenes in a videogame!</p>
<a href="/babble">read more</a>
</div>
<p>Babble Buds is a free, open source virtual puppet show engine I made for web and unity, as well as an accompanying electron-based puppet editor and multiplayer stage. Use it for enhancing your digital tabletop roleplaying game, creating silly videos, or even scripting cutscenes in a videogame!</p>
<a href="/babble">read more</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title"><a href="/dicearmor">I was the lead programmer on Dice Armor!</a></span>
<div class="card-image">
<a href="/dicearmor"><img src="/assets/dicearmor-assets/da2.jpg"></a>
<div class="card">
<div class="card-content">
<div class="card-image">
<a href="/dicearmor"><img src="/assets/dicearmor-assets/editors.jpg"></a>
</div>
<span class="card-title"><a href="/dicearmor">I was the lead programmer on Dice Armor!</a></span>
<p>I was the lead programmer on a team of nine creating this game in a semester long college course. I programmed all the gameplay systems as well as incorporated Babble Buds for the cutscenes and tutorial.</p>
<a href="/dicearmor">read more</a>
</div>
<p>I was the lead programmer on a team of nine creating this game in a semester long college course. I programmed all the gameplay systems as well as incorporated Babble Buds for the cutscenes and tutorial.</p>
<p>During the development of this game I discovered my passion for building tools for the game designers to be able to create content as quickly and easily as possible. I even designed a custom editor window that would run simulated matches between two AI opponents to help the game designers test and balance the dice and opponents.</p>
<div class="card-image">
<a href="/dicearmor"><img src="/assets/dicearmor-assets/editors.jpg"></a>
</div>
<div class="card">
<div class="card-content">
<div class="card-image">
<video src="" controls>
</div>
<span class="card-title">I'm a Computer Scientist!</span>
<p>I know many advanced topics of computer science, and have experience implementing complex systems including the Boids flocking algorithm, Inverse Kinematics, and many more!</p>
<p>Additionally I know many different programming languages and can pick up new tools and technologies quickly and thoroughly!</p>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image">
<img src="https://i.imgur.com/hIQB5g1.png">
</div>
<span class="card-title">I've worked with VR!</span>
<p>This is a screenshot from a prototype of a VR project I made with Grant Barbee. It involves manipulating cards in a rougelike dungeon crawler in VR, taking advantage of the medium with meta-abilities like throwing a card at an enemy to deal ranged damage and remove the card from your deck!</p>
</div>
<a href="/dicearmor">read more</a>
</div>
</div>
</div>
<div class="section" id="favorites">
<h1>Favorite Projects</h1>
{% for project in page.favorites %}
<h1>Favorite Projects</h1>
<div class="three-section">
{% for project in page.favorites %}
{% for page in site.posts %}
{% if page.title == project %}
<div class="card">
<div class="card-content" markdown="1">
<span class="card-title"><a href="{{ page.url }}">{{ page.title }}</a></span>
<div class="card-image">
<a href="{{ page.url }}"><img src="/assets/banners/{{ page.banner }}.png"></a>
</div>
{{ page.content }}
{% if page.title == project %}
<div class="card">
<div class="card-content" markdown="1">
<div class="card-image">
<a href="{{ page.url }}"><img src="/assets/banners/{{ page.banner }}.png"></a>
</div>
<span class="card-title"><a href="{{ page.url }}">{{ page.title }}</a></span>
{{ page.content }}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
<script src="https://cdn.rawgit.com/thepaperpilot/babble.js/master/dist/babble.js"></script>