89 lines
2.9 KiB
PHP
89 lines
2.9 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Matthieu Bessat - Web Developer</title>
|
||
|
|
<link href="dist/app.min.css" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<?php
|
||
|
|
$mainWidth = 200;
|
||
|
|
$imgsPerSide = 4;
|
||
|
|
$width = $mainWidth/$imgsPerSide;
|
||
|
|
$baseColor = "#27ae60";
|
||
|
|
$base = [0x27, 0xAE, 0x60];
|
||
|
|
|
||
|
|
?>
|
||
|
|
<body>
|
||
|
|
<section class="landing-section">
|
||
|
|
<div class="profile-container">
|
||
|
|
<div class="profile-imgs-container">
|
||
|
|
<div class="profile-imgs-wrapper" style="padding: <?= $width ?>px">
|
||
|
|
<div class="profile-imgs" style="width: <?= $mainWidth ?>px; height: <?= $mainWidth ?>px">
|
||
|
|
<?php
|
||
|
|
for ($side=0; $side < 4; $side++) {
|
||
|
|
for ($i=0; $i < 1+$imgsPerSide; $i++) {
|
||
|
|
?>
|
||
|
|
<img
|
||
|
|
class="additional-profile"
|
||
|
|
id="addprof-<?= (1+$side)*$i ?>"
|
||
|
|
style="
|
||
|
|
transform: rotateZ(<?= [0, 90, 180, -90][$i] ?>deg);
|
||
|
|
width: <?= $width ?>px;
|
||
|
|
height: <?= $width ?>px;
|
||
|
|
filter: hue-rotate(<?= (1-$i/(1+$imgsPerSide))*180 ?>deg);
|
||
|
|
top: <?= [-$width, -$width + $i*$width, $mainWidth, $i*$width][$side] ?>px;
|
||
|
|
left: <?= [-$width + $i * $width, $mainWidth, $i*$width, -$width][$side] ?>px;
|
||
|
|
"
|
||
|
|
src="imgs/profile.jpg"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="additional-profile-filter"
|
||
|
|
id="addprof-filter-<?= (1+$side)*$i ?>"
|
||
|
|
style="
|
||
|
|
width: <?= $width ?>px;
|
||
|
|
height: <?= $width ?>px;
|
||
|
|
top: <?= [-$width, -$width + $i*$width, $mainWidth, $i*$width][$side] ?>px;
|
||
|
|
left: <?= [-$width + $i * $width, $mainWidth, $i*$width, -$width][$side] ?>px;
|
||
|
|
background-color: rgba(
|
||
|
|
<?= $base[0] ?>, <?= $base[1] ?>, <?= $base[2] ?>, <?= 0.25 + 0.5*$i/(1+$imgsPerSide) ?>
|
||
|
|
);
|
||
|
|
">
|
||
|
|
</div>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<img
|
||
|
|
class="main-profile"
|
||
|
|
src="imgs/profile.jpg"
|
||
|
|
style="width: <?= $mainWidth ?>px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="profile-shadow"></div>
|
||
|
|
</div>
|
||
|
|
<div class="profile-content">
|
||
|
|
<span class="title-1">Hi! I'm Matthieu</span>
|
||
|
|
<span class="title-2">I like to program stuff</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- <section>
|
||
|
|
<h2>Skills and technologies I work with</h2>
|
||
|
|
</section> -->
|
||
|
|
<?php
|
||
|
|
include('../templates/skills.php')
|
||
|
|
?>
|
||
|
|
<!-- <section>
|
||
|
|
<h2>Projects I worked on</h2>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2>Contact me</h2>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
</section> -->
|
||
|
|
<script src="dist/app.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|