Updated portfolio:
This commit is contained in:
parent
5b75465452
commit
bfe0ab0375
26 changed files with 361 additions and 166 deletions
|
|
@ -6,4 +6,6 @@ Babble buds is a free, open source virtual puppet show software. It is heavily b
|
|||
|
||||
Users can create puppets with different faces for different emotions, and then use the puppet on a stage where you and other users can each make your respective puppets move, change emotions, and "babble" at each other. The stage has a green screen feature and can be popped out, which gives the users tons of possibilities in terms of using the program for a role playing live stream, faux video chatting with friends, game development, or whatever else you want!
|
||||
|
||||
Users can connect to the public server and create private rooms so that they and their friends can see each others puppets and use the software however they please. For the security conscious, you can also use the server's source code to self host your own private server.
|
||||
|
||||
Credit to [@TheGravyNator](https://forums.urealms.com/profile/TheGravyNator) for the awesome puppet on display in the screenshot.
|
||||
|
|
|
|||
7
_content/babble/engine.md
Executable file
7
_content/babble/engine.md
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
title: Engine
|
||||
---
|
||||
### Engine
|
||||
|
||||
The engine originally made to make the Babble Buds program was separated out into its own engine called [babble.js](https://github.com/thepaperpilot/babble.js), so that projects created in Babble Buds can be used in other projects. For example, a game can create puppets in Babble Buds and then use them for cutscenes or player agency inside of the game. Additionally, it has been ported to C# (called [babble.cs](https://github.com/thepaperpilot/babble.cs)) for use with Unity, for the same kinds of purposes. You can check out [Tower Offense](/toweroffense) for a pixi.js game using Babble Buds puppets for the cutscenes, or [Dice Armor](/dicearmor) for a unity game using Babble Buds puppets for the cutscenes.
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Hosting
|
||||
---
|
||||
#### Hosting
|
||||
|
||||
Here are some rough instructions for setting up an AWS server to run babble buds. It could work on any server you have so long as you can open a port on it.
|
||||
|
||||
1. Create an AWS instance running Ubuntu (just so you can use aptitude, you could also use a different distribution, if you know how to search for the needed packages in its respective package manager). If you're using a server you've set up previously, then you can skip this step.
|
||||
|
||||
2. Install node and the node package manager:
|
||||
|
||||
```
|
||||
sudo apt-get install nodejs npm
|
||||
```
|
||||
|
||||
If you're not running ubuntu then that command will look different. There is probably a tutorial out there somewhere if you look up "How to install node and npm on <operating system>". The rest of the commands should work on any operating system, even Windows.
|
||||
|
||||
3. Install the node packages listed in server.js:
|
||||
|
||||
```
|
||||
npm install fs-extra
|
||||
npm install socket.io
|
||||
npm install socket.io-stream
|
||||
```
|
||||
|
||||
I plan on making a package.json for the standalone server so that you'd just need to run "npm install" and it'd automatically install all 3 of those for you. It should be pointed out you don't need to install http or path, as those are included in nodejs.
|
||||
|
||||
4. In whatever form you choose, get the server.js file onto your server. You could do this over scp or by downloading it from github. You only need the server.js file!
|
||||
|
||||
5. Start the server by running "node server.js". I'd recommend doing this in a program called tmux or screen, as those will allow you to start the server, and exit out of the AWS instance without closing the server. The server will now be running, and all the users can just put in the IP address of your AWS server into Babble Buds and press "Connect to Server". They will not need to deal with node or npm or anything else.
|
||||
7
_content/babble/moviemaker.md
Executable file
7
_content/babble/moviemaker.md
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
title: Movie Maker
|
||||
---
|
||||
### Babble Movie Maker
|
||||
|
||||
Babble Movie Maker is a cutscene editor for Babble Buds puppets. You open a babble buds project in it, and you can add actors to a stage and have them move and change expressions, etc., on a timeline. You can then use the cutscene in a game using babble.js or babble.cs, or export the cutscene into a video file. There is even support for defining custom commands with custom fields, so that if you've extended on the default actions provided in babble.js or babble.cs, you can still use Movie Maker to create your cutscenes.
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Networking
|
||||
---
|
||||
### Networking
|
||||
|
||||
It can be a bit complicated to connect to other users (but no more than it would be for, say, a minecraft server), so here are some basic instructions on the various methods you can try:
|
||||
|
||||
1. To connect to other instances on the same computer, leave the IP address set to "localhost" and just open the application a bunch of times, press "Host Server" on one of them, and "Connect to Server" on the rest.
|
||||
|
||||
2. To connect over LAN (e.g. two people in the same house), have one person press "Host Server", and find your local IP (generally in the format of 192.168.1.XXX). Other users put that IP in the "Server IP" field in project settings, and then press "Connect to Server".
|
||||
|
||||
You have three options for connecting to people world wide:
|
||||
|
||||
1. One user can port forward port 8080 (or whatever port they prefer, its configurable), press "Host Server", find their global IP (google search "what's my IP?" and google will tell you this), and the other users put that into the "Server IP" field.
|
||||
|
||||
2. You can use hamachi, and have everyone connect to the same hamachi room. Then one user presses "Host Server", and the others will plug in the IP address for that user, as given by hamachi, into the "Server IP" field, at which point they should be able to connect.
|
||||
|
||||
3. If you have a server running somewhere (through AWS or Azure or something), on the github page there is a "server.js" file you can run that will host the server for you, and then people just connect to the IP of your server.
|
||||
|
||||
I realize some of that sounds complicated, but fortunately you only need to do most of it once. For example, after you've found the IP you need to use, that gets saved in the project file so you don't need to find it again.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Incarcerated Embed
|
||||
embed: /assets/scripting-assets/Incarcerated/index.html
|
||||
---
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
layout: default
|
||||
title: Incarcerated
|
||||
---
|
||||
Note: Web preview may be slow and resize undesirably. You can download it for windows [here](/assets/scripting-assets/Incarcerated/win.zip).
|
||||
#### Incarcerated
|
||||
|
||||
Note: If the web version is too slow, you can download it for windows [here](/assets/scripting-assets/Incarcerated/win.zip).
|
||||
|
||||
The purpose of this project was to demonstrate how to create a game where you use Unity's physics system to control a ball, with enemies and pickups and jump pads, etc.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Questable Embed
|
||||
embed: /assets/scripting-assets/Questable/index.html
|
||||
---
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
layout: default
|
||||
title: Questable
|
||||
---
|
||||
Note: Web preview may be slow and resize undesirably. You can download it for windows [here](/assets/scripting-assets/Questable/win.zip).
|
||||
#### Questable
|
||||
|
||||
Note: If the web version is too slow, you can download it for windows [here](/assets/scripting-assets/Questable/win.zip).
|
||||
|
||||
The purpose of this project was to demonstrate how to create a game where you use raycasts and projectiles to make guns, and nav meshes for basic AI.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
<head>
|
||||
<title>{{ page.title }}</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -37,9 +35,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<div class="head">
|
||||
{% if page.title != "The Paper Pilot" %}
|
||||
<h5><a class="white-text" href="/">The Paper Pilot</a></h5>
|
||||
<h5><a href="/" style="color: #fff">The Paper Pilot</a></h5>
|
||||
{% endif %}
|
||||
<h1 class="page-title white-text">{{ page.title }}</h1>
|
||||
<h1 class="page-title">{{ page.title }}</h1>
|
||||
</div>
|
||||
|
||||
{% if page.links %}
|
||||
|
|
@ -109,8 +107,6 @@
|
|||
</ul>
|
||||
</footer>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="/js/index.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ title: 12 is Strange
|
|||
category: Game
|
||||
cards: [12 is Strange]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/12-is-strange", "Store Page|https://thepaperpilot.itch.io/12-is-strange"]
|
||||
tags: [java, libgdx, SGDA]
|
||||
tags: [java, libgdx, sgda]
|
||||
---
|
||||
This is a point and click adventure made in under 48 hours for UT Dallas' SDGA Fall 2015 Game Jam!
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Solar TD
|
|||
category: Game
|
||||
banner: solar
|
||||
cards: [Solar TD, Solar TD Screenshot 1, Solar TD Screenshot 2, Solar TD Screenshot 3, Solar TD Screenshot 4, Solar TD Screenshot 5, Solar TD Screenshot 6]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/SolarTD", "Store Page|http://thepaperpilot.itch.io/solar-td"]
|
||||
tags: [java, libgdx]
|
||||
---
|
||||
A game inspired by Onslaught TD, an old flash game. Now its in HTML5 and in space, with some other new mechanics.
|
||||
A game inspired by Onslaught TD, an old flash game. Now its in HTML5 and in space, with some other new mechanics. Made in 24 hours for the libGDX game jam.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
layout: default
|
||||
title: Fourth Order
|
||||
category: Game
|
||||
banner: fourth
|
||||
cards: [Fourth Order, Fourth Order Title]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/fourth-order", "Store Page|https://thepaperpilot.itch.io/fourth-order"]
|
||||
tags: [java, libgdx, SGDA]
|
||||
tags: [java, libgdx, sgda]
|
||||
---
|
||||
A game made in under 48 hours for UT Dallas' SGDA Spring 2016 Game Jam! A match-3 RPG, reminiscent of Puzzle Quest.
|
||||
A game made in under 48 hours for UT Dallas' SGDA Spring 2016 Game Jam! A match-3 puzzle RPG, reminiscent of Puzzle Quest.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
layout: default
|
||||
title: Shape Tycoon
|
||||
category: Game
|
||||
banner: shape
|
||||
cards: [Shape Tycoon, Shape Tycoon Screenshot 1, Shape Tycoon Screenshot 2, Shape Tycoon Screenshot 3, Shape Tycoon Screenshot 4, Shape Tycoon Screenshot 5]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/shape-tycoon", "Store Page|https://thepaperpilot.itch.io/shape-tycoon", "Ludum Dare Entry|http://ludumdare.com/compo/ludum-dare-35/?action=preview&uid=90524"]
|
||||
tags: [java, libgdx, ludum dare]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ title: NaN
|
|||
category: Game
|
||||
banner: nan
|
||||
cards: [NaN, NaN Screenshot 1, NaN Screenshot 2, NaN Screenshot 3]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/NaN", "Store Page|https://thepaperpilot.itch.io/nan"]
|
||||
tags: [python, pygame, chillenium]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ title: Tower of Penultimate Sorcery
|
|||
category: Game
|
||||
cards: [Tower of Penultimate Sorcery]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Tower-Of-Penultimate-Sorcery", "Store Page|https://thepaperpilot.itch.io/tower-of-penultimate-sorcery"]
|
||||
tags: [rpg maker, SGDA]
|
||||
tags: [rpg maker, sgda]
|
||||
---
|
||||
A puzzle adventure game made in 48 hours for the Spring 2017 Game Jam by UTD's SGDA. It was made by Anthony Lawn and Grant Barbee in RPG Maker MV. The theme was "loops", which you'll find very relevant while solving the puzzles.
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ layout: default
|
|||
title: Babble Buds
|
||||
category: Software
|
||||
banner: babble
|
||||
cards: [Babble Buds, Babble Buds Screenshot, Networking, Hosting]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Babble-Buds", "URealms Post|https://forums.urealms.com/discussion/272/babble/p1"]
|
||||
cards: [Babble Buds, Babble Buds Screenshot, Engine, Movie Maker]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Babble-Buds", "URealms Post|https://forums.urealms.com/discussion/272/babble/p1", "Babble Buds Download Page|https://github.com/thepaperpilot/Babble-Buds/releases", "Babble Movie Maker Download Page|https://github.com/thepaperpilot/BabbleMovieMaker/releases"]
|
||||
tags: [javascript, pixi.js]
|
||||
---
|
||||
A free, open source virtual puppet show software, based on URealms' Puppet Pals software, using electron and PIXI.js
|
||||
A free, open source virtual puppet show engine for pixi.js and unity, as well as an accompanying electron-based software suite
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ title: Slime Chargers!
|
|||
category: Game
|
||||
banner: slime
|
||||
cards: [Slime Chargers Embed, Slime Chargers!, Slime Chargers Screenshot 1, Slime Chargers Screenshot 2, Slime Chargers Screenshot 3, Slime Chargers Screenshot 4]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Slime-Chargers", "Store Page|https://thepaperpilot.itch.io/ld39", "Ludum Dare Entry|https://ldjam.com/events/ludum-dare/39/slime-chargers"]
|
||||
tags: [javascript, pixi.js, ludum dare]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@ layout: default
|
|||
title: Scripting for Games
|
||||
category: Game
|
||||
banner: scripting
|
||||
cards: [Questable Embed, Questable, Incarcerated Embed, Incarcerated]
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Scripting-For-Games"]
|
||||
cards: [Questable, Incarcerated]
|
||||
featured: false
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Scripting-For-Games", "Questable|/assets/scripting-assets/Questable/index.html", "Incarcerated|/assets/scripting-assets/Incarcerated/index.html"]
|
||||
tags: [c#, unity]
|
||||
---
|
||||
A collection of projects made for Scripting for Games course.
|
||||
A collection of projects made for my Scripting for Games course.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ title: Tower Offense
|
|||
category: Game
|
||||
banner: toweroffense
|
||||
cards: [Tower Offense Embed, Tower Offense, Tower Offense Screenshot 1, Tower Offense Screenshot 2, Tower Offense Screenshot 3]
|
||||
featured: true
|
||||
links: ["Source Code|https://github.com/thepaperpilot/Tower-Offense", "Store Page|https://thepaperpilot.itch.io/tower-offense"]
|
||||
tags: [javascript, pixi.js, chillenium]
|
||||
---
|
||||
|
|
|
|||
BIN
assets/babble-assets/screenshot.png
Executable file → Normal file
BIN
assets/babble-assets/screenshot.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 521 KiB |
BIN
assets/banners/fourth.png
Normal file
BIN
assets/banners/fourth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
assets/banners/shape.png
Normal file
BIN
assets/banners/shape.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
238
css/main.css
238
css/main.css
|
|
@ -28,6 +28,27 @@ html {
|
|||
width:100%;
|
||||
height: 100%;
|
||||
background-color: #2a323d;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight:normal;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 0) {
|
||||
html {
|
||||
font-size:14px
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
html {
|
||||
font-size:14.5px
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
html {
|
||||
font-size:15px
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -37,6 +58,23 @@ body {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.28rem;
|
||||
line-height: 110%;
|
||||
margin: 1.14rem 0 0.912rem 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.64rem;
|
||||
line-height: 110%;
|
||||
margin: 0.82rem 0 0.656rem 0;
|
||||
}
|
||||
|
||||
body > h4 {
|
||||
width: 90%;
|
||||
max-width: 940px;
|
||||
|
|
@ -44,6 +82,177 @@ body > h4 {
|
|||
color: white;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.collection {
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul:not(.browser-default) {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.collection.with-header .collection-header {
|
||||
background-color: #242a33;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul:not(.browser-default) li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.collection.with-header .collection-item {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.collection a.collection-item {
|
||||
display: block;
|
||||
transition: .25s;
|
||||
}
|
||||
.collection .collection-item {
|
||||
background-color: #242a33;
|
||||
line-height: 1.5rem;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
border-top: 1px solid rgba(160,160,160,0.2) !important;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.collection .collection-item:hover {
|
||||
background-color: #333c4a !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
width: 90%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
.container {
|
||||
width:85%
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.container {
|
||||
width:70%
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.4s;
|
||||
background-color: #242a33;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.accordion:not(:first-child) {
|
||||
border-top: 1px solid rgba(160,160,160,0.2) !important;
|
||||
}
|
||||
|
||||
.active, .accordion:hover {
|
||||
background-color: #333c4a !important;
|
||||
}
|
||||
|
||||
.panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
button.accordion:focus {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.desc p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.desc a {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.head {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 4.2rem;
|
||||
line-height: 110%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card .card-content .card-title {
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.card .card-image .card-title {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card .card-title {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.card .card-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card .card-image img {
|
||||
display: block;
|
||||
border-radius: 2px 2px 0 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card .card-action {
|
||||
position: relative;
|
||||
background-color: inherit;
|
||||
border-top: 1px solid rgba(160,160,160,0.2);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
|
||||
color: #ffab40;
|
||||
margin-right: 20px;
|
||||
transition: color .3s ease;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card > h5 {
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
|
|
@ -86,7 +295,7 @@ a.btn, a.btn-flat, input.btn, input.btn-flat {
|
|||
height: 100% !important;
|
||||
}
|
||||
|
||||
body > .collapsible, body > .collection, body > .card, body > .carousel, body .slider {
|
||||
body > .collapsible, body > .collection, body > .card, body > .carousel, body .slider, body > .container {
|
||||
width: 90% !important;
|
||||
max-width:940px !important;
|
||||
margin:auto !important;
|
||||
|
|
@ -166,6 +375,15 @@ footer ul li {
|
|||
background-color: #242a33;
|
||||
color: #fff;
|
||||
box-shadow: 2px 2px 3px #222;
|
||||
position: relative;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
transition: box-shadow .25s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card .card-content {
|
||||
padding: 20px;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
.card .card-content p {
|
||||
|
|
@ -208,7 +426,15 @@ footer ul li {
|
|||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
height: unset;
|
||||
margin-top: 12px;
|
||||
margin-top: 0;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,0.6);
|
||||
padding: 0 12px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chip a {
|
||||
|
|
@ -276,3 +502,11 @@ h1 {
|
|||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.container .chip {
|
||||
background-color: #2a323d;
|
||||
float: unset;
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
|
|
|||
129
index.html
129
index.html
|
|
@ -2,23 +2,21 @@
|
|||
layout: default
|
||||
title: The Paper Pilot
|
||||
nocard: true
|
||||
featured: [Babble Buds, Tower Offense, Scripting for Games, NaN, Slime Chargers!, Solar TD]
|
||||
featured: [Babble Buds]
|
||||
---
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Hello!</span>
|
||||
<p>I'm Anthony Lawn, or "The Paper Pilot", and I develop free, open source programs and games, using a variety of languages and engines. I'm currently working towards my B.S. in Computer Science, after which I hope to go on to getting a Masters degree, with a focus on Data Science.</p>
|
||||
<p>I really liked playing free online games growing up, but most of those sites have died. Armor games peaked in 2010! There needs to be more of those kind of sites, those kind of games, to inspire the next generation of game developers and computer scientists. That's why I want to make free online games anyone can play. No credit cards or even admin privileges required. All free, and open source. Enjoy :)</p>
|
||||
<p>I'm Anthony Lawn, or "The Paper Pilot", and I develop free, open source programs and games, using a variety of languages and engines. I'm currently working towards my B.S. in Computer Science, after which I plan to go on to earning a Masters degree in the same, with a focus on Data Science.</p>
|
||||
<p>I really liked playing free online games growing up, but most of those sites have died- Armor games peaked in 2010! I do not believe mobile games have the same effect since you can't develop on a phone. I believe there needs to be a new generation of these kinds of sites, with those kinds of games, to inspire the next generation of game developers and computer scientists. That's why I want to make free online games anyone can play, and see how they work. No credit cards or even admin privileges required. All free, and open source. Enjoy :)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Featured Projects</h4>
|
||||
<h4>Active Projects</h4>
|
||||
|
||||
<div class="carousel carousel-slider" data-indicators="true">
|
||||
{% for project in page.featured %}
|
||||
{% assign post = site.posts | where:"title",project | first %}
|
||||
<div class="carousel-item">
|
||||
<div class="card" style="width: 100%; max-width: unset; height: 100%">
|
||||
<div class="card" style="padding-bottom: calc(1rem + 40px);">
|
||||
<div class="card-image">
|
||||
<img src="/assets/banners/{{ post.banner }}.png">
|
||||
<span class="card-title" style="font-weight: 500;">{{ project }}</span>
|
||||
|
|
@ -30,77 +28,56 @@ featured: [Babble Buds, Tower Offense, Scripting for Games, NaN, Slime Chargers!
|
|||
<a href="{{ post.url }}">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h4>All Projects</h4>
|
||||
<h4>Featured Projects</h4>
|
||||
|
||||
<div class="card">
|
||||
<h5>Games</h5>
|
||||
<ul class="collapsible" data-collapsible="accordion">
|
||||
{% assign projects = site.posts | where:"category","Game" %}
|
||||
{% for project in projects %}
|
||||
<li>
|
||||
<div class="collapsible-header">
|
||||
{{ project.title }}
|
||||
{% for tag in project.tags %}
|
||||
<div class="chip secondary-content"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="card-content" markdown="1">
|
||||
{{ project.content }}
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="{{ project.url }}">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h5>Software</h5>
|
||||
<ul class="collapsible" data-collapsible="accordion">
|
||||
{% assign projects = site.posts | where:"category","Software" %}
|
||||
{% for project in projects %}
|
||||
<li>
|
||||
<div class="collapsible-header">
|
||||
{{ project.title }}
|
||||
{% for tag in project.tags %}
|
||||
<div class="chip secondary-content"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="card-content" markdown="1">
|
||||
{{ project.content }}
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="{{ project.url }}">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h5>Other</h5>
|
||||
<ul class="collapsible" data-collapsible="accordion">
|
||||
{% assign projects = site.posts | where:"category","Other" %}
|
||||
{% for project in projects %}
|
||||
<li>
|
||||
<div class="collapsible-header">
|
||||
{{ project.title }}
|
||||
{% for tag in project.tags %}
|
||||
<div class="chip secondary-content"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="card-content" markdown="1">
|
||||
{{ project.content }}
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="{{ project.url }}">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% assign projects = site.posts | where:"featured","true" %}
|
||||
{% for project in projects %}
|
||||
<div class="accordion">
|
||||
{{ project.title }}
|
||||
|
||||
{% for tag in project.tags %}
|
||||
<div class="chip"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="card-image">
|
||||
<img src="/assets/banners/{{ project.banner }}.png">
|
||||
</div>
|
||||
<div class="card-content desc" markdown="1">
|
||||
{{ project.content }} <a href="{{ project.url }}"> read more</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h4>All Projects (by tag)</h4>
|
||||
|
||||
<div class="card container">
|
||||
<div class="card-content">
|
||||
{% assign rawtags = "" %}
|
||||
{% for post in site.posts %}
|
||||
{% assign ttags = post.tags | join:'|' | append:'|' %}
|
||||
{% assign rawtags = rawtags | append:ttags %}
|
||||
{% endfor %}
|
||||
{% assign rawtags = rawtags | split:'|' | sort %}
|
||||
|
||||
{% assign tags = "" %}
|
||||
{% for tag in rawtags %}
|
||||
{% if tag != "" %}
|
||||
{% if tags == "" %}
|
||||
{% assign tags = tag | split:'|' %}
|
||||
{% endif %}
|
||||
{% unless tags contains tag %}
|
||||
{% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for tag in tags %}
|
||||
<div class="chip"><a href="/tags/#{{ tag | slugify }}"> {{ tag }} </a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
35
js/index.js
35
js/index.js
|
|
@ -1,3 +1,29 @@
|
|||
// Variables
|
||||
let acc = document.getElementsByClassName("accordion");
|
||||
|
||||
// Set up accordion
|
||||
for (let i = 0; i < acc.length; i++) {
|
||||
acc[i].addEventListener("click", accordionClick);
|
||||
}
|
||||
|
||||
function accordionClick() {
|
||||
let active = false
|
||||
let activeElements = document.getElementsByClassName("active")
|
||||
while (activeElements[0]) {
|
||||
let activeElement = activeElements[0]
|
||||
activeElement.classList.remove("active");
|
||||
activeElement.nextElementSibling.style.maxHeight = null;
|
||||
if (activeElement == this)
|
||||
active = true
|
||||
}
|
||||
|
||||
if (active) return
|
||||
|
||||
this.classList.add("active")
|
||||
let panel = this.nextElementSibling;
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
|
||||
// Set up fullscreen buttons (used on pages with embedded games)
|
||||
function fullscreen() {
|
||||
// check if fullscreen mode is available
|
||||
|
|
@ -5,9 +31,9 @@ function fullscreen() {
|
|||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled) {
|
||||
|
||||
|
||||
// which element will be fullscreen
|
||||
var iframe = document.getElementById('embed');
|
||||
var iframe = document.getElementById('embed');
|
||||
// Do fullscreen
|
||||
if (iframe.requestFullscreen) {
|
||||
iframe.requestFullscreen();
|
||||
|
|
@ -27,8 +53,3 @@ function fullscreen() {
|
|||
|
||||
let btn = document.getElementById('fullscreenBtn')
|
||||
if (btn) btn.addEventListener('click', fullscreen)
|
||||
|
||||
// Setup Carousel (used on homepage)
|
||||
$(document).ready(function(){
|
||||
$('.carousel.carousel-slider').carousel({full_width: true});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue