fsylvain/portfolio
1
0
Fork 0
mirror of https://github.com/Floriansylvain/portfolio.git synced 2026-08-19 11:43:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎉 First commit!

Browse Source
This commit is contained in:
Florian Sylvain
2022-01-25 19:50:57 +01:00
committed by GitHub
parent 96fe3550db
commit 72e02a412c
6 changed files with 328 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/Manrope-VariableFont_wght.ttf
BIN
View File
Binary file not shown.
assets/OverpassMono-VariableFont_wght.ttf
BIN
View File
Binary file not shown.
assets/test.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

index.html
+69
View File
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Florian Sylvain</title>
</head>
<body>
<header>
<nav>
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<div class="hamburger" onclick="switchNavBar()">
<span></span>
<span></span>
</div>
</header>
<div class="main-title">
<h1><a href="#about">Florian Sylvain</a></h1>
</div>
<div id="content">
<div class="to-fade" id="about">
<h2>About</h2>
<p>Bonsoir à tous</p>
<img src="assets/test.jpg">
</div>
<div class="to-fade" id="education">
<h2>Education</h2>
<p>Bonsoir à tous</p>
</div>
<div class="to-fade" id="experience">
<h2>Experience</h2>
<p>Bonsoir à tous</p>
</div>
<div class="to-fade" id="projects">
<h2>Projects</h2>
<p>Bonsoir à tous</p>
</div>
<div class="to-fade" id="contact">
<h2>Contact</h2>
<p>Bonsoir à tous</p>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
+57
View File
@@ -0,0 +1,57 @@
const mainTitle = document.querySelector('.main-title')
const navBarElems = document.querySelector('body > header > nav')
const mainContent = document.querySelectorAll('#content')
function fadeIn() {
const elementsToFade = document.querySelectorAll(".to-fade")
if (elementsToFade !== null) {
elementsToFade.forEach(elem => {
const distInView = (elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2) - window.innerHeight
if (distInView < 0) {
elem.classList.add("fade-in")
} else {
elem.classList.remove("fade-in")
}
})
}
}
function scrollHandler() {
fadeIn()
const y = window.scrollY
const titlePos = mainTitle.getBoundingClientRect()
if (titlePos.bottom > 0) {
const distanceToTop = window.pageYOffset + titlePos.top
const elementHeight = mainTitle.offsetHeight
const opacity = 1 - ((y - distanceToTop) / elementHeight) * 2
if (opacity > 0) {
mainTitle.style.letterSpacing = (y * 0.005 <= 0.1 ? 0.1 : y * 0.005) * 2 + 'em'
mainTitle.style.opacity = opacity
}
}
}
scrollHandler()
window.addEventListener('scroll', scrollHandler)
function switchNavBar() {
const header = document.querySelector('.hamburger').parentNode.classList
if (header.contains('slide-in') || header.contains('to-cross')) {
header.remove('slide-in')
header.remove('to-cross')
navBarElems.classList.remove('slide-elements')
} else {
header.add('slide-in')
header.add('to-cross')
navBarElems.classList.add('slide-elements')
}
}
document.querySelectorAll('nav a').forEach(a => {
a.onclick = switchNavBar
})
stylesheet.css
+202
View File
@@ -0,0 +1,202 @@
@font-face {
font-family: 'Manrope';
src: url('assets/Manrope-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'Overpass';
src: url('assets/OverpassMono-VariableFont_wght.ttf') format('truetype');
}
* {
box-sizing: border-box;
scroll-behavior: smooth;
color: #fff;
font-family: Manrope;
font-variation-settings: "wght" 600;
}
body {
width: 100%;
height: 2000px;
margin: 0;
background-color: #101010;
}
header {
position: fixed;
z-index: 10;
width: 100%;
padding: 10px 10px 10px 110px;
background-color: #253622;
transform: translateY(-100%);
transition: transform 200ms ease-in-out;
}
nav {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 1.6em;
letter-spacing: 4px;
}
nav a:first-letter {
font-weight: bolder;
font-size: larger;
}
nav a {
font-family: Manrope;
transform: translateX(-100%);
opacity: 0;
transition: transform 600ms, opacity 600ms, letter-spacing 200ms;
}
nav a:hover {
letter-spacing: 6px;
}
nav a:nth-child(0n+2) {
transition: transform 500ms, opacity 500ms, letter-spacing 200ms;
}
nav a:nth-child(0n+3) {
transition: transform 400ms, opacity 400ms, letter-spacing 200ms;
}
nav a:nth-child(0n+4) {
transition: transform 300ms, opacity 300ms, letter-spacing 200ms;
}
nav a:nth-child(0n+5) {
transition: transform 200ms, opacity 200ms, letter-spacing 200ms;
}
.slide-elements a {
opacity: 100%;
transform: translateX(0);
}
a {
text-decoration: none;
}
.hamburger {
position: absolute;
z-index: 15;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 5px;
cursor: pointer;
top: 100%;
left: 50px;
width: 50px;
height: 50px;
background-color: #3AC414;
border-radius: 0 0 0.5em 0.5em;
}
.hamburger::before {
position: absolute;
content: '';
width: 100%;
height: 100vh;
bottom: 100%;
background-color: #3AC414;
}
.hamburger > span {
width: 35px;
height: 5px;
background: #CAEBC0;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
}
.hamburger:hover > span {
background: #D0DBCC;
}
.to-cross .hamburger {
gap: 0;
}
.to-cross > .hamburger > span {
transform: rotate(45deg) translateY(2px) translateX(1px);
}
.to-cross > .hamburger > span + span {
transform: rotate(-45deg) translateY(-2px) translateX(1px);
}
.slide-in {
transform: translateY(0);
}
.main-title {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100vh;
text-align: center;
font-family: Manrope;
font-variation-settings: "wght" 600;
font-size: 2em;
letter-spacing: 0.1em;
color: #fff;
text-shadow: #ffff 0 0 0;
}
.main-title h1 {
cursor: pointer;
transition: text-shadow 200ms ease-in-out, transform 200ms ease-in-out;
}
.main-title h1:hover {
transform: translateX(-5px) translateY(-5px);
text-shadow: #253622 10px 10px 10px;
}
#content {
width: 80%;
margin: auto;
}
#content img {
width: 100%;
border-radius: 0.5em;
}
#content > div {
padding-top: 55px;
}
#content > div:last-child {
margin-bottom: 100vh;
}
.to-fade {
opacity: 0;
transition: opacity 1000ms;
}
.fade-in {
opacity: 100%;
}