Skip to content

UPDATE of the website #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TechNerdSam wants to merge 1 commit into
base: main
Choose a base branch
from
Open

UPDATE of the website #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 28 additions & 153 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,37 @@
<!-- JOHN DOE’S PAGE - https://github.com/cadars/john-doe/ -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Site title</title>
<meta name="description" content="Site description">

<!-- Recommended minimum -->
<meta property="og:title" content="Site title">
<meta property="og:description" content="Site description">
<meta property="og:image" content="img/site-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Portfolio Moderne</title>
<meta name="description" content="Un portfolio moderne et interactif.">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- You could also inline the stylesheet -->
<link rel="stylesheet" href="style.css">

</head>
<body>

<header>
<h1>
<a href="#home">Site title</a>
</h1>
<nav>
<a href="#about">About</a>
<a href="#news">News</a>
<a href="#photos">Photos</a>
<a href="#portfolio">Portfolio</a>
</nav>
</header>

<main>

<section id="home"> <!-- HOME -->

<p>This is the homepage, displayed by default.</p>

</section>

<section id="about"> <!-- ABOUT -->

<p>This is the about page. <a href="#another-page">This is a link to another page</a>.</p>

<figure>
<a href="#img-about">
<img loading="lazy" alt="" src="//dummyimage.com/1200x600/ddd/bbb" width="1200" height="600">
</a>
<figcaption>Example of an image with a link to a larger version.</figcaption>
</figure>

</section>

<section id="news"> <!-- NEWS -->

<article>
<h2>Blogging with Joe Bloggs <time datetime="2020-10-10">10.10.2020</time></h2>
<p> One <em>could</em> use this setup to write <s>a blog</s> short updates. For images make sure to use the <code>loading="lazy"</code> attribute, so they get loaded only when needed.<label for="lazy">1</label><input type="checkbox" id="lazy"><small>

You might be able to use it for <code>iframe</code> embeds too(?), but maybe just write a link to the Youtube video instead.

</small></p>
</article>

<article>
<h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="2004-12-12">12.12.2004</time></h2>
<p>Honestly you don't want to know.</p>
</article>

</section>

<section id="photos"> <!-- PHOTOS -->

<p>An example of a photo gallery with a lightbox.</p>
</head>
<body>

<!-- You can use this grid of images in any page -->

<div class="grid">
<a href="#img-01"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-02"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-03"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-04"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-05"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-06"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-07"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-08"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-09"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-10"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-11"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-12"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-13"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-14"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-15"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
</div>

</section>

<section id="portfolio"> <!-- PORTFOLIO -->
<div id="canvas-container"></div>

<div class="slides">
<figure><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure>
<p>You could also have text over here…</p>
</figure>
<figure>
<img loading="lazy" alt="" src="//dummyimage.com/1000x1000/ddd/bbb">
<figcaption>…or image captions</figcaption>
</figure>
<figure style="background:#fdcb39">
<img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb">
<figcaption>add a solid background</figcaption>
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="https://64.media.tumblr.com/7904066936b9324571738bbbeeb082e9/tumblr_myopxy8uJI1qz4vi0o1_1280.jpg">
<p style="color:#fff">or go full bleed</p>
</figure>
</div>
<header class="container mt-4">
<nav class="nav nav-pills justify-content-center">
<a class="nav-link" href="#home">Accueil</a>
<a class="nav-link" href="#about">À propos</a>
<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#news">Actualités</a>
</nav>
</header>

</section>

<section id="another-page"> <!-- ANOTHER PAGE -->

<p>This page is not referenced in the menu, yet it exists.</p>
<p><a href="#about">← back</a></p>

</section>

</main>

<!-- ----------
LIGHTBOX IMAGES
----------- -->
<main id="main-content" class="container"></main>

<!-- PHOTOS grid -->

<a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-04"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-05"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-06"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-07"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-08"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-09"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-10"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-11"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-13"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-14"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Other images -->

<a href="#about" class="lightbox" id="img-about"><img loading="lazy" alt="" src="//dummyimage.com/2400x1200/ddd/bbb"></a>

</body>
<script src="main.js"></script>

</body>
</html>
109 changes: 109 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
$(document).ready(function() {
// --- SCÈNE 3D AVEC THREE.JS ---
let scene, camera, renderer, cube;

function initThree() {
const container = $('#canvas-container')[0];
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
const material = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

animate();
}

function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.005;
cube.rotation.y += 0.005;
renderer.render(scene, camera);
}

$(window).on('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});

// --- GESTION DE LA NAVIGATION (ROUTING CÔTÉ CLIENT) ---
const routes = {
'#home': `
<div class="text-center page-content">
<h1 class="display-3">Bienvenue</h1>
<p class="lead">Un portfolio interactif construit avec les dernières technologies du web.</p>
</div>`,
'#about': `
<div class="page-content">
<h2>À propos de moi</h2>
<p>Je suis un développeur passionné par le design créatif et les expériences utilisateur immersives. Ce site est une démonstration de ce qu'il est possible de faire avec des outils comme Three.js et GSAP.</p>
</div>`,
'#portfolio': `
<div class="page-content">
<h2>Portfolio</h2>
<div class="row">
${Array.from({length: 6}, (_, i) => `
<div class="col-md-4 mb-4">
<div class="card">
<img src="//dummyimage.com/400x300/ddd/bbb" class="card-img-top" alt="Projet ${i + 1}">
<div class="card-body">
<h5 class="card-title">Projet ${i + 1}</h5>
</div>
</div>
</div>
`).join('')}
</div>
</div>`,
'#news': `
<div class="page-content">
<h2>Actualités</h2>
<p>Les dernières nouvelles et mises à jour seront publiées ici.</p>
</div>`
};

function loadContent(hash) {
const content = routes[hash] || routes['#home'];
const $mainContent = $('#main-content');

// Animation de sortie avec GSAP
gsap.to($mainContent, {
opacity: 0,
y: 20,
duration: 0.4,
onComplete: () => {
$mainContent.html(content);
// Animation d'entrée
gsap.fromTo($mainContent, { opacity: 0, y: -20 }, { opacity: 1, y: 0, duration: 0.5 });
}
});

// Visibilité de la scène 3D
if (hash === '#home' || !hash) {
gsap.to('#canvas-container', { opacity: 1, duration: 1 });
} else {
gsap.to('#canvas-container', { opacity: 0, duration: 1 });
}
}

// Gestion des clics sur les liens de navigation
$('.nav-link').on('click', function(e) {
e.preventDefault();
const hash = $(this).attr('href');
window.location.hash = hash;
});

// Gérer le changement de hash (navigation via les boutons précédent/suivant du navigateur)
$(window).on('hashchange', function() {
loadContent(window.location.hash);
}).trigger('hashchange'); // Charge le contenu initial

// Initialiser la scène 3D
initThree();
});
Loading