added project files
This commit is contained in:
Andreas Schaafsma
parent
cccec24361
commit
4766ed7fb0
4
porto/.htaccess
Normal file
4
porto/.htaccess
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
RewriteEngine on
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule ^.*$ /porto/index.php?path=$0 [L,QSA]
|
||||||
BIN
porto/assets/background.png
Normal file
BIN
porto/assets/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
porto/assets/bgmobile.png
Normal file
BIN
porto/assets/bgmobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 725 KiB |
BIN
porto/assets/blurred.png
Normal file
BIN
porto/assets/blurred.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 600 KiB |
BIN
porto/assets/blurredmobile.png
Normal file
BIN
porto/assets/blurredmobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
BIN
porto/assets/hguisfml.png
Normal file
BIN
porto/assets/hguisfml.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
porto/assets/hprojectlog.png
Normal file
BIN
porto/assets/hprojectlog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
porto/assets/hrastas3.png
Normal file
BIN
porto/assets/hrastas3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
porto/assets/ld30screenshot.png
Normal file
BIN
porto/assets/ld30screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
porto/assets/logos/1.png
Normal file
BIN
porto/assets/logos/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
porto/assets/logos/10.png
Normal file
BIN
porto/assets/logos/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
porto/assets/logos/2.png
Normal file
BIN
porto/assets/logos/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
porto/assets/logos/3.png
Normal file
BIN
porto/assets/logos/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
porto/assets/logos/4.png
Normal file
BIN
porto/assets/logos/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
porto/assets/logos/5.png
Normal file
BIN
porto/assets/logos/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
porto/assets/logos/6.png
Normal file
BIN
porto/assets/logos/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
porto/assets/logos/7.png
Normal file
BIN
porto/assets/logos/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
porto/assets/logos/8.png
Normal file
BIN
porto/assets/logos/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
porto/assets/logos/9.png
Normal file
BIN
porto/assets/logos/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
porto/assets/media/80ssynth.mp3
Normal file
BIN
porto/assets/media/80ssynth.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/electrotrack.mp3
Normal file
BIN
porto/assets/media/electrotrack.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/hionppkrmx.mp3
Normal file
BIN
porto/assets/media/hionppkrmx.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/sourcearenamaintheme.mp3
Normal file
BIN
porto/assets/media/sourcearenamaintheme.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/unnamed1.mp3
Normal file
BIN
porto/assets/media/unnamed1.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/unnamed1.wav
Normal file
BIN
porto/assets/media/unnamed1.wav
Normal file
Binary file not shown.
BIN
porto/assets/media/unnamed2.mp3
Normal file
BIN
porto/assets/media/unnamed2.mp3
Normal file
Binary file not shown.
BIN
porto/assets/media/unnamed3.mp3
Normal file
BIN
porto/assets/media/unnamed3.mp3
Normal file
Binary file not shown.
BIN
porto/assets/profiel.png
Normal file
BIN
porto/assets/profiel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
porto/assets/sourcearena.jpg
Normal file
BIN
porto/assets/sourcearena.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
porto/assets/sourcearenasite.png
Normal file
BIN
porto/assets/sourcearenasite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
porto/assets/subsonics.png
Normal file
BIN
porto/assets/subsonics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
55
porto/components/content_aboutme.php
Normal file
55
porto/components/content_aboutme.php
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<img src="./assets/profiel.png" width=150 height=150 ALIGN="center" class="profielfoto">
|
||||||
|
<h1>Over Mij</h1>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
<b>Naam:</b> Andreas Schaafsma<br>
|
||||||
|
<b>Functie:</b> Student Applicatieontwikkelaar<br>
|
||||||
|
<b>Woonplaats:</b> Groningen<br>
|
||||||
|
<b>Email:</b> <a href="mailto:and.schaafsma@gmail.com?Subject=Hello%20again" class="redlink">and.schaafsma@gmail.com</a><br>
|
||||||
|
<b>Twitter</b> <a href="http://twitter.com/_andreas_s" class="redlink">twitter.com/_andreas_s</a><br>
|
||||||
|
<br>
|
||||||
|
Jack of all trades, master of none.<br>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Algemene programmeer/ script vaardigheden</h1>
|
||||||
|
<br>
|
||||||
|
<h3>Frontend</h3>
|
||||||
|
<p>
|
||||||
|
HTML, CSS, Javascript.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<h3>Backend</h3>
|
||||||
|
<p>
|
||||||
|
NodeJS, XML, PHP, SQL.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<h3>Andere programmeertalen</h3>
|
||||||
|
<p>
|
||||||
|
C++, C#, Java (JDK), Python, ActionScript 3.0 flex-sdk(Flash), lua.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Media vormgeving</h1>
|
||||||
|
<br>
|
||||||
|
<h3>2d Grafisch design</h3>
|
||||||
|
<p>
|
||||||
|
Adobe Animate(Adobe flash Pro), Adobe Illustrator, Adobe photoshop, Paint.net.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<h3>3d design en game asset creatie</h3>
|
||||||
|
<p>
|
||||||
|
Blender.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<h3>Audio vormgeving</h3>
|
||||||
|
<p>
|
||||||
|
FL Studio, Audacity.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<h3>Video editing</h3>
|
||||||
|
<p>
|
||||||
|
Blender, Adobe After Effects, Adobe Premiere.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
48
porto/components/content_categories.php
Normal file
48
porto/components/content_categories.php
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<a href= "<?= $rootdir."project?categ=web"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>Web</h1>
|
||||||
|
<p>
|
||||||
|
Website frontend & backend projecten.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
<a href= "<?= $rootdir."project?categ=as3"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>AS3</h1>
|
||||||
|
<p>
|
||||||
|
ActionScript 3.0 projecten.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
<a href= "<?= $rootdir."project?categ=cpp"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>C++</h1>
|
||||||
|
<p>
|
||||||
|
C++ projecten.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
<a href= "<?= $rootdir."project?categ=logos"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>Logo's</h1>
|
||||||
|
<p>
|
||||||
|
Logo's die ik heb ontworpen.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
<a href= "<?= $rootdir."project?categ=java"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>Java/JDK</h1>
|
||||||
|
<p>
|
||||||
|
Java/JDK projecten
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
<a href= "<?= $rootdir."project?categ=muziek"?>">
|
||||||
|
<article class="transparant blur project">
|
||||||
|
<h1>Muziek</h1>
|
||||||
|
<p>
|
||||||
|
Muziek die ik aan het maken ben.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
12
porto/components/content_home.php
Normal file
12
porto/components/content_home.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Welkom</h1>
|
||||||
|
<p>
|
||||||
|
Welkom op de portfolio website van <a class="redlink" href="<?= $paginas[2] ?>">Andreas Schaafsma</a>. Om een overzicht te zien van alle projecten (op categorie) ga naar de <a class="redlink" href="<?= $paginas[1] ?>">Projecten</a> pagina.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Introductie</h1>
|
||||||
|
<p>
|
||||||
|
Ik ben een student Apllicatieontwikkelaar aan het Alfa College. Mijn eigen interesses liggen vooral bij desktop/ server applicaties schrijven, gamedevelopment, reverse engineering en het schrijven van eigen systemen. Je hoeft niet altijd het wiel opnieuw uit te vinden, maar je leert er wel het een en ander van.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
28
porto/components/content_project.php
Normal file
28
porto/components/content_project.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
$categ = '';
|
||||||
|
if(isset($_GET['categ'])){
|
||||||
|
$categ=$_GET['categ'];
|
||||||
|
}
|
||||||
|
switch($categ){
|
||||||
|
case 'web':
|
||||||
|
include_once("components/content_project_web.html");
|
||||||
|
break;
|
||||||
|
case 'as3':
|
||||||
|
include_once("components/content_project_as3.html");
|
||||||
|
break;
|
||||||
|
case 'cpp':
|
||||||
|
include_once("components/content_project_cpp.html");
|
||||||
|
break;
|
||||||
|
case 'logos':
|
||||||
|
include_once("components/content_project_logos.html");
|
||||||
|
break;
|
||||||
|
case 'java':
|
||||||
|
include_once("components/content_project_java.html");
|
||||||
|
break;
|
||||||
|
case 'muziek':
|
||||||
|
include_once("components/content_project_muziek.html");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
echo("<article class=\"transparent blur\"><h1>404 Error</h1>Je hebt ergens een verkeerde bocht genomen of wij hebben iets fout gedaan. Sorry!</article>");
|
||||||
|
}
|
||||||
|
?>
|
||||||
29
porto/components/content_project_as3.html
Normal file
29
porto/components/content_project_as3.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>
|
||||||
|
Deze pagina bevat links naar interactieve demo's. Om gebruik te maken van deze demo's is een browser nodig die flash player ondersteunt.
|
||||||
|
</h1>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>hRasteriserAS3 *Ontwikkeling voorlopig gestopt*</h1>
|
||||||
|
<p>
|
||||||
|
Software 3d rasterisering engine (geen hardware versnelling) geshreven in AS3. Ik was aan dit project begonnen als uitdaging voor mezelf en om fundamentele kennis op te doen over de achterliggende werking van game engines en 3d rendering algemeen.
|
||||||
|
<br>
|
||||||
|
Klik op de afbeelding hieronder voor een interactieve demo van een oude versie (Ik heb geen gecompileerde release van de nieuwste versie). Deze versie ondersteunt geen solid poligon rendering maar geeft wel een idee van ruimte doormiddel van vertex rotation. Hier is een browser voor nodig die flash player ondersteunt.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="demos/hRast/"><img src="assets/hrastas3.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Ludum Dare 30 game</h1>
|
||||||
|
<p>
|
||||||
|
Game geschreven voor de Ludum Dare 30 "Other Worlds" competitie. De Ludum Dare competitie wordt meerdere keren per jaar gehouden. Het doel is om binnen 48 uur een game te programmeren wat binnen een bepaald thema past. Voor mijn game was ik begonnen met het schrijven van de achterliggende systemen voor een 2d platformer, maar ik liep hiermee tegen veel problemen aan met mijn collision detection en optimalisatie. Hierdoor heb ik uiteindelijk alleen de eerste twee kamers afgekregen. Ik ben intussen de source code voor dit project verloren toen mijn harde schijf was gecrashed. Met dit project heb ik geleerd effectief om te gaan met spritesheets, bitmap data, collision meshes, local offset movement, tool tips en het produceren van redelijke kwaliteit pixel art.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
Mijn idee voor dit thema was om er een soort puzzel platformer van te maken waarin je via deuren in een andere dimensie kunt komen. In deze dimensie heb je een andere versie van het level waarin je rondloopt met kleine veranderingen in layout en met andere voorwerpen.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="demos/ld30"><img src="assets/ld30screenshot.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
18
porto/components/content_project_cpp.html
Normal file
18
porto/components/content_project_cpp.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>SourceArena</h1>
|
||||||
|
<p>
|
||||||
|
SourceArena is een Quake 3 CPMA style arena shooter. Deze game ontwikkel ik in mijn eentje doormiddel van de source engine 2013 branch. Dit project was eerst te ingewikkeld, totdat ik een keer goed de tijd had genomen om vanaf de grond op een c++ OOP project te beginnen, en fundamentele 3d kennis heb geleerd doormiddel van mijn project hRasteriserAS3. <a class="redlink" href="http://sourcearena.subsonics.nl">Klik hier om de devblog te bezoeken.</a>
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="assets/sourcearena.jpg"><img src="assets/sourcearena.jpg" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>hGUISFML</h1>
|
||||||
|
<p>
|
||||||
|
hGUISFML is een graphical user interface systeem ontwikkeld dormiddel van de SFML library. Bij dit systeem wordt ook een editor gekoppeld. Dit project is bedoeld als basis voor een stel andere projecten waar ik aan wil beginnen zoals het schrijven van een eigen file explorer en een eigen text editor. Het systeem is nog in een beginfase maar is al wel in staat pictogrammen in te laden.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="assets/hguisfml.png"><img src="assets/hguisfml.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
9
porto/components/content_project_java.html
Normal file
9
porto/components/content_project_java.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>hProjectLog</h1>
|
||||||
|
<p>
|
||||||
|
hProjectLog is een applicatie die ik voor mezelf bouw om activiteiten te loggen wanneer ik met projecten bezig ben. De applicatie laad data uit en slaat data op in een XML formaat. Dit project is vooral bedoeld als manier voor mezelf om de basics van JFrame en Java Events te leren.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="assets/hprojectlog.png"><img src="assets/hprojectlog.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
18
porto/components/content_project_logos.html
Normal file
18
porto/components/content_project_logos.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Logo's</h1>
|
||||||
|
<p>
|
||||||
|
Een paar logo's die ik heb ontworpen voor mezelf en voor anderen doormiddel van Flash Pro, Illustrator en Paint.net.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="assets/logos/1.png"><img src="assets/logos/1.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/2.png"><img src="assets/logos/2.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/3.png"><img src="assets/logos/3.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/4.png"><img src="assets/logos/4.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/5.png"><img src="assets/logos/5.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/6.png"><img src="assets/logos/6.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/7.png"><img src="assets/logos/7.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/8.png"><img src="assets/logos/8.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/9.png"><img src="assets/logos/9.png" class="screenshot"></a>
|
||||||
|
<a href="assets/logos/10.png"><img src="assets/logos/10.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
69
porto/components/content_project_muziek.html
Normal file
69
porto/components/content_project_muziek.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>Muziek</h1>
|
||||||
|
<p>
|
||||||
|
Muziek die ik aan het maken ben. Dit zijn vooral remixes en nummers die bedoeld zijn als deel van de soundtrack voor games die ik aan het ontwikkelen ben/ was.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Foster the people - Pumped up Kicks (Hion-V Remix)</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/hionppkrmx.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - Source Arena Main Theme (preview)</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/sourcearenamaintheme.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - Electro Track</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/electrotrack.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - 80ssynth</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/80ssynth.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - Unnamed Audio 1</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/unnamed1.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - Unnamed Audio 2</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/unnamed2.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
|
||||||
|
<h1>Hion-V - Unnamed Audio 3</h1>
|
||||||
|
<audio controls>
|
||||||
|
<source src="assets/media/unnamed3.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</article>
|
||||||
18
porto/components/content_project_web.html
Normal file
18
porto/components/content_project_web.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<article class="transparant blur">
|
||||||
|
<h1>subsonics.nl</h1>
|
||||||
|
<p>
|
||||||
|
Persoonlijke site voor het delen van informatie en bestanden met vrienden, en als centrale hub voor al mijn projecten. Tevens is dit een perfecte plek om een portfolio te hosten. Deze website heeft meerdere iteraties gehad over de laatste 8 jaar en begon als webpagina voor muziekcollaboratie met een vriend van mij. Wij maakten destijds muziek onder de naam Subsonic Maniacs. Deze site is vooral functie over form en gebruikt bijna geen HTML5 standaarden. Dit is tevens een restant van hoe ik oorspronkelijk webdesign heb geleerd rond 2011.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="http://www.subsonics.nl"><img src="assets/subsonics.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article class="transparant blur">
|
||||||
|
<h1>SourceArena devblog</h1>
|
||||||
|
<p>
|
||||||
|
Ontwikkelings logboek en centrale hub voor alle publieke informatie over mijn game development project SourceArena. Deze site is grotendeels een copypaste van het hoofddomein subsonics.nl maar heeft een grote aanpassing in de vorm van een blogsysteem dat ik heb geschreven in een combinatie van PHP en XML. De XML data bevat alle blogposts en metadata om ervoor te zorgen dat de posts die erin staan niet hardcoded zijn. Ik had geen zin om hier SQL voor te gebruiken omdat ik dat niet geinstalleerd had en ik het leuker vind om custom oplossingen te schrijven.
|
||||||
|
</p>
|
||||||
|
<section class="screenshotparent">
|
||||||
|
<a href="http://sourcearena.subsonics.nl"><img src="assets/sourcearenasite.png" class="screenshot"></a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
15
porto/components/dochead.php
Normal file
15
porto/components/dochead.php
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Portfolio Andreas Schaafsma</title>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$useragent=$_SERVER['HTTP_USER_AGENT'];
|
||||||
|
|
||||||
|
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){
|
||||||
|
echo '<link type="text/css" rel="stylesheet" href="styles/mobile.css">';
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
echo '<link type="text/css" rel="stylesheet" href="styles/desktop.css">';
|
||||||
|
};
|
||||||
|
?>
|
||||||
|
</head>
|
||||||
3
porto/components/footer.html
Normal file
3
porto/components/footer.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<footer class="transparant blur min-size">
|
||||||
|
<h1>©2018 Subsonics Media, Alle rechten voorbehouden.</h1>
|
||||||
|
</footer>
|
||||||
7
porto/components/header.php
Normal file
7
porto/components/header.php
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<header class="transparant blur min-size">
|
||||||
|
<nav>
|
||||||
|
<a id="home" href="<?= $rootdir?>">Home</a>
|
||||||
|
<a id="projecten" href="<?= $rootdir.$paginas[1]?>">Projecten</a>
|
||||||
|
<a id="aboutme" href="<?= $rootdir.$paginas[2]?>">Over mij</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
BIN
porto/demos/hRast/3dEZ.swf
Normal file
BIN
porto/demos/hRast/3dEZ.swf
Normal file
Binary file not shown.
40
porto/demos/hRast/game.html
Normal file
40
porto/demos/hRast/game.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>3dEZ</title>
|
||||||
|
<meta name="description" content="" />
|
||||||
|
|
||||||
|
<script src="js/swfobject.js"></script>
|
||||||
|
<script>
|
||||||
|
var flashvars = {
|
||||||
|
};
|
||||||
|
var params = {
|
||||||
|
menu: "false",
|
||||||
|
scale: "ShowAll",
|
||||||
|
allowFullscreen: "true",
|
||||||
|
allowScriptAccess: "always",
|
||||||
|
bgcolor: "",
|
||||||
|
wmode: "direct" // can cause issues with FP settings & webcam
|
||||||
|
};
|
||||||
|
var attributes = {
|
||||||
|
id:"3dEZ"
|
||||||
|
};
|
||||||
|
swfobject.embedSWF(
|
||||||
|
"3dEZ.swf",
|
||||||
|
"altContent", "100%", "100%", "10.0.0",
|
||||||
|
"expressInstall.swf",
|
||||||
|
flashvars, params, attributes);
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
html, body { height:100%; overflow:hidden; }
|
||||||
|
body { margin:0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="altContent">
|
||||||
|
<h1>3dEZ</h1>
|
||||||
|
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
porto/demos/hRast/index.html
Normal file
50
porto/demos/hRast/index.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<center>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>LD</title>
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<script src="js/swfobject.js"></script>
|
||||||
|
<script>
|
||||||
|
var flashvars = {
|
||||||
|
};
|
||||||
|
var params = {
|
||||||
|
menu: "false",
|
||||||
|
scale: "ShowAll",
|
||||||
|
allowFullscreen: "true",
|
||||||
|
allowScriptAccess: "always",
|
||||||
|
bgcolor: "",
|
||||||
|
wmode: "direct" // can cause issues with FP settings & webcam
|
||||||
|
};
|
||||||
|
var attributes = {
|
||||||
|
id:"LD"
|
||||||
|
};
|
||||||
|
swfobject.embedSWF(
|
||||||
|
"3dEZ.swf",
|
||||||
|
"altContent", "800px", "600px", "10.0.0",
|
||||||
|
"expressInstall.swf",
|
||||||
|
flashvars, params, attributes);
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
html, body { height:100%; overflow:hidden; background-color:black; }
|
||||||
|
body { margin:0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="altContent">
|
||||||
|
<h1>LD</h1>
|
||||||
|
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
<h3 style="font-family: Helvetica, Arial, sans-serif; color: white; margin-left: auto; margin-right: auto; width: 800px">
|
||||||
|
- CONTROLS - <br>
|
||||||
|
MOVEMENT: WASD<br>
|
||||||
|
KLOOK: UP LEFT DOWN RIGHT<br>
|
||||||
|
- PERSPECTIVES - <br>
|
||||||
|
topdown 2d: 1<br>
|
||||||
|
topdown pseudo3d: 2<br>
|
||||||
|
3d: 3
|
||||||
|
</h3>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
porto/demos/hRast/js/swfobject.js
Normal file
4
porto/demos/hRast/js/swfobject.js
Normal file
File diff suppressed because one or more lines are too long
BIN
porto/demos/ld30/LD.swf
Normal file
BIN
porto/demos/ld30/LD.swf
Normal file
Binary file not shown.
BIN
porto/demos/ld30/expressInstall.swf
Normal file
BIN
porto/demos/ld30/expressInstall.swf
Normal file
Binary file not shown.
41
porto/demos/ld30/index.html
Normal file
41
porto/demos/ld30/index.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<center>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>LD</title>
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<script src="js/swfobject.js"></script>
|
||||||
|
<script>
|
||||||
|
var flashvars = {
|
||||||
|
};
|
||||||
|
var params = {
|
||||||
|
menu: "false",
|
||||||
|
scale: "noScale",
|
||||||
|
allowFullscreen: "true",
|
||||||
|
allowScriptAccess: "always",
|
||||||
|
bgcolor: "",
|
||||||
|
wmode: "direct" // can cause issues with FP settings & webcam
|
||||||
|
};
|
||||||
|
var attributes = {
|
||||||
|
id:"LD"
|
||||||
|
};
|
||||||
|
swfobject.embedSWF(
|
||||||
|
"LD.swf",
|
||||||
|
"altContent", "640px", "512px", "10.0.0",
|
||||||
|
"expressInstall.swf",
|
||||||
|
flashvars, params, attributes);
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
html, body { height:100%; overflow:hidden; background-color:black; }
|
||||||
|
body { margin:0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="altContent">
|
||||||
|
<h1>LD</h1>
|
||||||
|
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
porto/demos/ld30/js/swfobject.js
Normal file
4
porto/demos/ld30/js/swfobject.js
Normal file
File diff suppressed because one or more lines are too long
35
porto/index.php
Normal file
35
porto/index.php
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginas = ["./home", "./projecten", "./aboutme"];
|
||||||
|
$path = "";
|
||||||
|
$rootdir = "./";
|
||||||
|
$selectedLinkColor = "#ff4444";
|
||||||
|
if(isset($_GET['path'])){
|
||||||
|
$path = $_GET['path'];
|
||||||
|
$rootdir = "./";
|
||||||
|
}else{
|
||||||
|
header('Location: '."home");
|
||||||
|
}
|
||||||
|
echo('<style>#'.$path.'{color:'.$selectedLinkColor.';}</style>');
|
||||||
|
switch($path){
|
||||||
|
case 'home':
|
||||||
|
include_once("pages/home.php");
|
||||||
|
break;
|
||||||
|
case 'projecten':
|
||||||
|
include_once("pages/projecten.php");
|
||||||
|
break;
|
||||||
|
case 'aboutme':
|
||||||
|
include_once("pages/aboutme.php");
|
||||||
|
break;
|
||||||
|
case 'project':
|
||||||
|
include_once("pages/project.php");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
include_once("pages/404.php");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
?>
|
||||||
15
porto/pages/404.php
Normal file
15
porto/pages/404.php
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>404 ERROR</title>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
font-family: monospace, roboto, helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 style="margin-left: auto; margin-right: auto; text-align: center;">404 ERROR</h1>
|
||||||
|
<h1 style="margin-left: auto; margin-right: auto; text-align: center;">SNEL TERUG JONGEMAN, U HEEFT EEN VERKEERDE AFSLAG GENOMEN!!!!</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
porto/pages/aboutme.php
Normal file
12
porto/pages/aboutme.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<?php include_once("components/dochead.php"); ?>
|
||||||
|
<body>
|
||||||
|
<?php include_once('components/header.php')?>
|
||||||
|
<main class = "flexcolumn min-size">
|
||||||
|
<?php include_once("components/content_aboutme.php");?>
|
||||||
|
<div class="flexcolumn"></div>
|
||||||
|
</main>
|
||||||
|
<?php include_once("components/footer.html"); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
porto/pages/home.php
Normal file
12
porto/pages/home.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<?php include_once("components/dochead.php"); ?>
|
||||||
|
<body>
|
||||||
|
<?php include_once('components/header.php'); ?>
|
||||||
|
<main class = "flexcolumn min-size">
|
||||||
|
<?php include_once("components/content_home.php"); ?>
|
||||||
|
<div class="flexcolumn"></div>
|
||||||
|
</main>
|
||||||
|
<?php include_once("components/footer.html"); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
porto/pages/project.php
Normal file
12
porto/pages/project.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<?php include_once("components/dochead.php"); ?>
|
||||||
|
<body>
|
||||||
|
<?php include_once('components/header.php')?>
|
||||||
|
<main class = "flexcolumn min-size">
|
||||||
|
<?php include_once("components/content_project.php"); ?>
|
||||||
|
<div class="flexcolumn"></div>
|
||||||
|
</main>
|
||||||
|
<?php include_once("components/footer.html"); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
porto/pages/projecten.php
Normal file
14
porto/pages/projecten.php
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<?php include_once("components/dochead.php"); ?>
|
||||||
|
<body>
|
||||||
|
<?php include_once('components/header.php');?>
|
||||||
|
<main class = "flexcolumn min-size">
|
||||||
|
<div class = "flexrow">
|
||||||
|
<?php include_once("components/content_categories.php");?>
|
||||||
|
</div>
|
||||||
|
<div class="flexcolumn"></div>
|
||||||
|
</main>
|
||||||
|
<?php include_once("components/footer.html"); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
193
porto/styles/desktop.css
Normal file
193
porto/styles/desktop.css
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
*{
|
||||||
|
margin: 0px;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: 19200px 10800px;
|
||||||
|
/*background-size: 100vw 56vw;
|
||||||
|
background-size: 100vmax 100vmax;*/
|
||||||
|
backface-visibility: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background: url("../assets/background.png") no-repeat 0vh 0vh fixed;
|
||||||
|
background-position: 0 0;
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: overlay
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
header, main, footer
|
||||||
|
{
|
||||||
|
margin: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
margin-top: 16px;
|
||||||
|
min-height: 60px;
|
||||||
|
width: auto;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
display:block;
|
||||||
|
float: bottom;
|
||||||
|
justify-self: flex-end;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 30px;
|
||||||
|
margin: auto;
|
||||||
|
background-color: red;
|
||||||
|
margin-top: 32px;
|
||||||
|
width: auto;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
/*Make padding go inside the element rather than making it bigger*/
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
nav{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
header nav a{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: auto; margin-bottom: auto;
|
||||||
|
line-height: 60px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 900;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
footer h1{
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.redlink{
|
||||||
|
color:#ff4444;
|
||||||
|
}
|
||||||
|
.min-size{
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
.longboi{
|
||||||
|
min-width: 60vw;
|
||||||
|
}
|
||||||
|
.blur{
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 10px 10px 15px #000000;
|
||||||
|
background: url("../assets/blurred.png") no-repeat 0 0 fixed;
|
||||||
|
background-blend-mode: hard-light;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex{
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:inline-flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex: 1 0 auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
/*Make flex items wrap around*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexrow{
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:inline-flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex-shrink: 1;
|
||||||
|
/*Make flex items wrap around*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexcolumn{
|
||||||
|
width: inherit;
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex: 1 0 auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
/*Make padding go inside the element rather than making it bigger*/
|
||||||
|
/*padding: 16px;*/
|
||||||
|
}
|
||||||
|
.transparant{
|
||||||
|
background-color: #FFFFFF55;
|
||||||
|
}
|
||||||
|
article{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 16px;
|
||||||
|
max-width: 60vw;
|
||||||
|
max-height: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
audio{
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
.project{
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
align-self: space-between;
|
||||||
|
}
|
||||||
|
.project:hover{
|
||||||
|
filter: brightness(1.5);
|
||||||
|
}
|
||||||
|
.project:hover, .screenshot:hover{
|
||||||
|
box-shadow: 0px 0px 50px white;
|
||||||
|
}
|
||||||
|
.screenshot{
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
box-shadow: 0px 0px 50px black;
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.screenshotparent{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.nowrap{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.profielfoto{
|
||||||
|
display: block;
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
}
|
||||||
193
porto/styles/mobile.css
Normal file
193
porto/styles/mobile.css
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
*{
|
||||||
|
margin: 0px;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: 19200px 10800px;
|
||||||
|
/*background-size: 100vw 56vw;
|
||||||
|
background-size: 100vmax 100vmax;*/
|
||||||
|
backface-visibility: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color: #333333;
|
||||||
|
background: url("../assets/bgmobile.png") no-repeat 0vh 0vh fixed;
|
||||||
|
background-position: 0 0;
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: overlay
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
header, main, footer
|
||||||
|
{
|
||||||
|
margin: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
margin-top: 16px;
|
||||||
|
min-height: 60px;
|
||||||
|
width: auto;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
display:block;
|
||||||
|
float: bottom;
|
||||||
|
justify-self: flex-end;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 30px;
|
||||||
|
margin: auto;
|
||||||
|
background-color: red;
|
||||||
|
margin-top: 32px;
|
||||||
|
width: auto;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
/*Make padding go inside the element rather than making it bigger*/
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
nav{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
header nav a{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: auto; margin-bottom: auto;
|
||||||
|
line-height: 60px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 900;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
footer h1{
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.redlink{
|
||||||
|
color:#ff4444;
|
||||||
|
}
|
||||||
|
.min-size{
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
.longboi{
|
||||||
|
min-width: 60vw;
|
||||||
|
}
|
||||||
|
.blur{
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 10px 10px 15px #000000;
|
||||||
|
background-blend-mode: hard-light;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex{
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:inline-flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex: 1 0 auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
/*Make flex items wrap around*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexrow{
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:inline-flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex-shrink: 1;
|
||||||
|
/*Make flex items wrap around*/
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexcolumn{
|
||||||
|
width: inherit;
|
||||||
|
/*Set display mode to flexbox*/
|
||||||
|
display:flex;
|
||||||
|
/*Make the element stretch to the bottom of the page pushing the footer down*/
|
||||||
|
flex: 1 0 auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
/*Make padding go inside the element rather than making it bigger*/
|
||||||
|
/*padding: 16px;*/
|
||||||
|
}
|
||||||
|
.transparant{
|
||||||
|
background-color: #FFFFFF55;
|
||||||
|
}
|
||||||
|
article{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 16px;
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
audio{
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
.project{
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
align-self: space-between;
|
||||||
|
}
|
||||||
|
.project:hover{
|
||||||
|
filter: brightness(1.5);
|
||||||
|
}
|
||||||
|
.project:hover, .screenshot:hover{
|
||||||
|
box-shadow: 0px 0px 50px white;
|
||||||
|
}
|
||||||
|
.screenshot{
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
box-shadow: 0px 0px 50px black;
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.screenshotparent{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.nowrap{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.profielfoto{
|
||||||
|
display: block;
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
margin-left: auto; margin-right: auto;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user