﻿<?php
	require_once('utils/Slugify.php');

	$dir		='projects';
	$files		= scandir( $dir );
	$projects	= array();
	$tagsList	= array();
	$catsList	= array();
	$totalProj	= 0;
	$curCat		= isset($_GET["cat"])? $_GET["cat"] : "";

	//Build indexed array for fast accesses to categories names
	$categories		= file_get_contents(  $dir.'/categories.conf' );
	preg_match_all('/.*([0-9]+)=(.*).*/', $categories, $matches);
	$categories		= array();
	for ($i =0; $i < count($matches[2]); $i++) {
		$categories[ $matches[1][$i] ] = preg_replace('/\r|\n/', '', $matches[2][$i]);
	}

	if($curCat != '') {
		//Convert category name to corresponding index
		$curCat = array_search($curCat, array_map('strtolower', $categories));
	}

	//Parse projects folders
	foreach($files as $file) {
		//If it's a project
		$path = $dir . '/' . $file;
		if(is_dir( $path ) && $file != '.' && $file != '..') {
			if(file_exists( $path.'/project.conf' )) {
				$conf = file_get_contents(  $path.'/project.conf' );
				preg_match('/.*name=([^\n\r]*).*/', $conf, $matches);
				$projectName = $matches[1];

				preg_match('/.*date=([^\n\r]*).*/', $conf, $matches);
				$projectDate = $matches[1];

				preg_match('/.*categories=([^\n\r]*).*/', $conf, $matches);
				$projectCats = preg_split('/(;|,)/', $matches[1]);

				preg_match('/.*tags=([^\n\r]*).*/', $conf, $matches);
				$projectTags =  preg_split('/(;|,)/', $matches[1]);

				preg_match('/.*love=([^\n\r]*).*/', $conf, $matches);
				$projectLove =  (count($matches) > 0)? $matches[1] : 0;

				preg_match('/.*subtitle=([^\n\r]*).*/', $conf, $matches);
				$projectSubtitle = count($matches)>1? $matches[1] : '';

				//Convert date to timestamp
				$chunks = explode('-', $projectDate);
				while(count($chunks) < 3) array_unshift($chunks, '1');
				$projectDate2 = implode('-', $chunks);

				$totalProj ++;
				$tagsList = array_merge($tagsList,$projectTags);
				$catsList = array_merge($catsList,$projectCats);

				if($curCat != "" && !in_array($curCat, $projectCats)) continue;

				//check f the article is actually written or not
				$projectReady = file_exists( $path.'/content.php' );
				if(!$projectReady) {
					$projectSubtitle = '<span class="comming-soon">Coming soon...</span>';
				}

				$projects[]	 = array(	'name'=>$projectName,
										'subt'=>$projectSubtitle,
										'date'=>$projectDate,
										'time'=>strtotime($projectDate2),
										'cats'=>$projectCats,
										'tags'=>$projectTags,
										'love'=>$projectLove,
										'dir'=>$file,
										'ready'=>$projectReady
								);
			}
		}
	}

	$tagsCount= array_count_values($tagsList);
	$catsCount= array_count_values($catsList);
	$tagsList = array_unique($tagsList);
	$catsList = array_unique($catsList);
	
	//Sort projects by date
	usort($projects, function($a, $b) {
	    $ret =  $b['love'] - $a['love'];
	    if($ret == 0) $ret =  $b['time'] - $a['time'];
	    return $ret;
	});
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" lang="en">
<html>
<!--
################################
##############333333333333333###
######<<<<<<<3:::::::::::::::33#
#####<:::::<#3::::::33333::::::3
####<:::::<##3333333#####3:::::3
###<:::::<###############3:::::3
##<:::::<################3:::::3
#<:::::<#########33333333:::::3#
<:::::<##########3:::::::::::3##
#<:::::<#########33333333:::::3#
##<:::::<################3:::::3
###<:::::<###############3:::::3
####<:::::<##############3:::::3
#####<:::::<#3333333#####3:::::3
######<<<<<<<3::::::33333::::::3
#############3:::::::::::::::33#
##############333333333333333###
################################

Hello curious buddy !
Just a quick note so you don't lose your, undoubtedly precious, time :
Don't bother judging my HTML/CSS/JS code, it's quite old and it was my first non-flash project after years without touching html/css/js.
It's also my very first typescript test which makes it an absolute mess.

Still it has been made with passion and love.
I just hope it works not too bad for you !
<3
-->
	<head>
		<title>François Dursus</title>
		<meta content='width=device-width, initial-scale=.4, maximum-scale=.4, user-scalable=0' name='viewport' />
		<meta name="description"               content="Check out what my sick brain can create with help of design, programming or electronics. Mostly personal and some professional works." />
		<meta http-equiv="Content-Type"        content="text/html; charset=UTF-8" />
		<meta property="og:url"                content="https://www.durss.ninja" />
		<meta property="og:type"               content="website" />
		<meta property="og:title"              content="François Dursus Portfolio" />
		<meta property="og:description"        content="All my works" />
		<meta property="og:image"              content="https://www.durss.ninja/img/share_img.jpg" />
		<meta name="revisit-after"             content="30 days">
		<meta name="robots"                    content="index, follow">
		<meta name="p:domain_verify"           content="d18607aa566333756484bdfe5588e560"/>
		<link rel="author"                     href="https://www.durss.ninja"/>
		<link rel="canonical"                  href="https://www.durss.ninja"/>
		<style>
			/*Some inline styles for faster rendering of the top visible view*/
			html, body {
				margin: 0;
				width:100%;
				height:100%;
				font-family: 'Open Sans', sans-serif;
				line-height: 1.6em;
			}
			html {
				background : #f05848;
			}

			.menu {
				overflow-y: hidden;
				max-height:0px;
				margin-bottom: 0px;
				transition: all .2s ease-in-out;
			}

			.menuBt {
				height: 30px;
				width: 100%;
				cursor: pointer;
				position: relative;
				margin-top: -40px;
				top: 45px;
				overflow: hidden;
			}
			.menuBt svg {
				margin: auto;
				color: #F05848;
				fill: currentColor;
				display: block;
				width: 30px;
				height: 30px;
			}

			.header {
				z-index: 1;
				margin:0px;
				padding-top:20px;
				padding-bottom:20px;

				text-align: center;

				background: #fff;

				border-bottom: 1px solid #d1493a;

				-webkit-box-shadow: 0px -10px 16px 9px rgba(0,0,0,0.52);
				-moz-box-shadow: 0px -10px 16px 9px rgba(0,0,0,0.52);
				box-shadow: 0px -10px 16px 9px rgba(0,0,0,0.52);
			}

			.header .title {
				margin-bottom: 0px;
				width: 514px;
				margin-left: auto;
				margin-right: auto;
				position: relative;
			}

			.header .title #logo-head {
				height: 253px;
				position: relative;
				transition: all .5s ease-out;
			}

			.header .title .eye {
				background: url(/img/logo-eye.png) 0 0;
				position: absolute;
				width: 45px;
				height: 45px;
				left:0px;
				top:0px;
				background-size: auto 100%;
			}

			.header .title #logo-mask {
				background: url(/img/eyes.png) 0 0;
				position: absolute;
				width: 170px;
				height: 73px;
				left:172px;
				top:118px;
				background-size: auto 100%;
				transition: width .5s ease-out, height .5s ease-out, top .5s ease-out, left .5s ease-out;
			}

			.header .title #logo-rightEye,
			.header .title #logo-leftEye {
				position: absolute;
				height: 45px;
				webkit-transition: left .4s ease-out,  top .4s ease-out;
				transition: left .4s ease-out,  top .4s ease-out;
			}

			.header .title #logo-leftEye {
				left:215px;
				top:140px;
			}

			.header .title #logo-rightEye {
				left:260px;
				top:138px;
			}

			.sort {
				color: #f05848;
				font-size: 2.5em;
				height: 1em;
				padding: 0.25em;
				display: block;
				opacity: 1;
				overflow: hidden;
				margin-bottom: .2em;
				transition: display 1s, all .3s ease-in-out;
			}

			.sort.hidden {
				opacity: 0;
				height: 0px;
				padding: 0px;
				/*display: none;*/
			}

			#genericError {
				text-align: center;
				color: #F05848;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50px;
				display: none;
			}

			.content-closed {
				z-index: -1;

				display: none;
				opacity: 0;

				position: fixed;
			}

			#aboutContent {
				max-width: 800px;
				color: #000000;
				margin-top:20px;
				margin-left: auto;
				margin-right: auto;
				display: none;
			}

			.loader {
				opacity: 0;
				position:fixed;
				top:50%;
				left:50%;
				transform: translate(-50%, -50%) scale(1, 1);
			}

			@media only screen and (max-device-width : 480px) {
				body {
					font-size: 2em;
				}
				body:after {
					content: 'mobile';
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<div id="openBG" class="openBG-closed"></div>
		<div class="page">
			<div class="header">
				<div class="title" id="logo">
					<a href="/" id="logoLink">
						<div id="logo-rightEye" class="eye"></div>
						<div id="logo-leftEye" class="eye"></div>
						<div id="logo-mask"></div>
						<img src='/img/logo_head.png' alt="logo" id="logo-head">
						<img src='/img/logo_name_small.png' alt="logo" id="logo-name" />
					</a>
				</div>
				<div class="hashtag close" id="hashtag"></div>
				<div class="sort hidden" id="sortHolder">
					Most <ul class="sortList">
						<li class="selected"><a href="#" class="sortLink" data-sort='love'>beloved</a></li>
						<li><a href="#" class="sortLink" data-sort='date'>recent</a></li>
					</ul> first.
				</div>
				<div id="menu" class="menu">
					<ul class="categories">
						<?php
							$li = '';
							$a = '';
							if((isset($_GET["cat"]) && $_GET["cat"] == 'all') || !isset($_GET["cat"])) {
								$li = ' class="selected"';
								$a  = ' selected';
							}
						?>
						<li<?php echo $li; ?>><a href="/category/all" class="category-link<?php echo $a; ?>">All&nbsp;<span class="count">(<?php echo $totalProj; ?>)</span></a></li>
	<?php
		foreach ($catsCount as $key => $value) {
			$li = '';
			$a = '';
			if(isset($_GET["cat"]) && $_GET["cat"] == slugify( $categories[ $key ] )) {
				$li = ' class="selected"';
				$a  = ' selected';
			}
	?>
						<li><a href="/category/<?php echo slugify( $categories[ $key ] ); ?>" class="category-link <?php if(isset($_GET["cat"]) && $_GET["cat"] == slugify( $categories[ $key ] )) echo ' selected'; ?>"><?php echo $categories[ $key ]; ?>&nbsp;<span class="count">(<?php echo $value; ?>)</span></a></li>
	<?php
		}
	?>
					</ul>
				</div>
				<div id="menuBt" class="menuBt close">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Loader" x="0px" y="0px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
						<g>
							<polygon points="0,0 30,0 15,20" style="fill:#F05848;stroke:white;stroke-width:4" />
						</g>
					</svg>
				</div>
			</div>


			<div class="innerPage" id="innerPage">
				<div id="content" class="content-closed">
					<!-- <div class="articleNav">
						<div id="prevBt" title="Previous article"><div>&lt;</div></div>
						<div id="closeBt" title="Close article"><div>X</div></div>
						<div id="nextBt" title="Next article"><div>&gt;</div></div>
					</div> -->
					<div id="article" class="article"><!--ARTICLE--></div>
				</div>
				<div id='genericError'>
					<img src="/img/404.png" id='Error' alt="Error" />
					<h2>Oops...</h2>
					<h3>An error has occurred.</h3>
					<p>The content you requested hasn't been found or is not available for now.</p>
				</div>

				<div id='aboutContent'>
					<?php include($_SERVER['DOCUMENT_ROOT'] .'/about.php'); ?>
				</div>

				<div class="projects">
					<ul class="projectsHolder" id="projectsHolder">
<?php
	foreach($projects as $project) {
		$cats = $project['cats'];
		foreach ($cats as $key => $value) {
			$cats[ $key ] = $categories[ $value ];
		}
?>
						<li class="project" id="<?php echo $project['dir']; ?>" data-tags="<?php echo implode(";", $project['tags']); ?>" data-cats="<?php echo implode(";", $cats); ?>" data-love="<?php echo $project['love']; ?>" data-date="<?php echo $project['time']; ?>" data-ready="<?php echo $project['ready'] === true ? 'true' : 'false'; ?>">
							<div class="inner">
								<a href="<?php echo $project['ready']? '/project/'.$project['dir'] : 'javascript:void(0)'; ?>">
									<img src="/<?php echo 'projects/' . $project['dir']  . '/icon.jpg'; ?>" alt="<?php echo addslashes( $project['name'] ); ?>" />
									<div class="caption"><?php echo $project['name']; ?><div class="subtitle"><?php echo $project['subt']; ?></div><div class="date"><?php echo $project['date']; ?></div></div>
								</a>
							</div>
							
						</li>
<?php
	}
?>
					</ul>
				</div>
			</div>
			<div class="footer">François Dursus - <a href="/about" id="aboutLink">About/Contact</a> - <a href="https://www.linkedin.com/in/fran%C3%A7ois-dursus-86040182/" target="_blank">Linked-in</a> - <a href="https://youtube.com/durss" target="_blank">Youtube</a> - <a href="https://www.facebook.com/francois.dursus" target="_blank">Facebook</a></div>
		</div>

<?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/photoswipe.php"); ?>
		<!-- <canvas id='splashes'></canvas> -->
		<div class="loader hidden" id="loader"><img src="/img/spin.svg" alt="loading..." title="loading..." /></div>

		<script type="text/javascript" src="/js/scripts.min.js"></script>
		<script>
			if(location.hostname.indexOf('local') == -1) {
				(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
				})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

				ga('create', 'UA-74882759-1', 'auto');
				ga('send', 'pageview');
			}
		</script>
	</body>
</html>
<link rel="stylesheet" href="/css/styles.min.css" async>
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700,300,800,400' rel='stylesheet' type='text/css'>