Bonjour !Je suis Jarne.|
Étudiant en Web Design à la Haute École Albert Jacquard
Goeiedag
Jarne De Scheerder
Je suis un jeune étudiant en dernière année, travailleur et capable de respecter les délais. J'aime les nouveaux défis et je suis capable de gérer un projet de A à Z, de la création du visuelle de l’interface web au codage de la page.
Mes Case Study
Le projet RUX
Voir en quoi le projet consiste
En lien avec le cours de Rethinking UX (RUX), nous avons réalisé un Case Study. Afin de réaliser ce projet, nous avons commencé par la répartition des tâches. De mon côté, j’ai pris en charge les recherches concernant les peintures, les sources d’inspiration, ainsi que les alternatives au cas où la peinture ne serait pas validée par la direction de l’école. Pour finaliser le projet dans le cadre du cours, donc sans faire les peintures en pratique, nous avons tous de notre côté du faire un site internet. Sur celui-ci nous sommes parti du même Case Study que le groupe à réalisé en l’adaptant un peu si nécessaire.
Lire le case study ➡Le projet DataPlay
Voir en quoi le projet consiste
En lien avec les cours de PRCO, nous avons réalisé un site interactif reprenant les crashs d’avions de 2012 à 2022. Afin de réaliser ce projet, nous avons commencé par la répartition des tâches. Personnellement, je me suis occupé de la partie JavaScript et de la partie correction de bug et de problèmes de mise en page en corrigeant le SCSS là où il y avait besoin.
Lire le case study ➡Design Fiction
Dans le cadre du cours de Design Visuel - Design Fiction, j’ai réalisé un “What if” disant «Et si chacun doit produire de l’électricité pour la communauté ?». Dans ce cas, j’ai décidé de raconté une petite histoire du déroulement de cette catastrophe. Tout commence en 2038, un mardi ensoleillé comme un autre, quand soudain un orage magnétique mondial fasse disparaitre toutes nos sources d’électricité.
Visiter la catastrophe ➡Bonjour bienvenue sur l'onglet qui contient les crédits et les sources pour l'examen de Juin 2025.
Colorisation des icones des médias sociaux dans le footer lors de l'hover : stackoverflow
Copier mais modifier le code pour avoir le switch du dark mode CodePen
code JS repris du code fait lors du cours de Monsieur Thronte avec modifications pour aller avec mon code
var btnTheme = document.querySelector(".switch");
btnTheme.addEventListener("change", themeSelect);
function themeSelect(){
console.log("color")
var currentMode = document.body.getAttribute("data-theme");
var systemThemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if((!currentMode && systemThemeDark) || currentMode == "dark"){
document.body.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else{
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
}
var activeTheme = localStorage.getItem("theme");
if(activeTheme){
document.body.setAttribute("data-theme", activeTheme);
}
Question a Copilot pour savoir mon code ne fonctionnait pas :
how to make this work ?
var sideNavOpen = document.querySelector(".sideNav");
sideNavOpen.addEventListener("toggle", toggleSideNav);
function toggleSideNav() {
if (window.innerWidth >= 1250){
sideNavOpen.classList.add("active");
} else {
sideNavOpen.classList.remove("active");
}
}
réponse : Your code is trying to listen for a "toggle" event, but the "toggle" event is not a standard event for general elements like .sideNav. Instead, you might want to trigger this function based on a user interaction, such as clicking a button. Try using a "click" event instead: javascript
var sideNavOpen = document.querySelector(".sideNav");
sideNavOpen.addEventListener("click", toggleSideNav);
function toggleSideNav() {
if (window.innerWidth >= 1250) {
sideNavOpen.classList.toggle("active");
} else {
sideNavOpen.classList.remove("active");
}
}
If you actually meant to open the sidebar when clicking a different button, replace sideNavOpen in document.querySelector with the selector for that button.
je lui répond : ok but I don't want any interaction of the user, I want that it listens to the width of the window and if it is above or egal to 1250px in width. Than it shows the sideNav but if it is less than 1250px in width, than it doesn't show
il me donne : Got it! Since you want the .sideNav to automatically show or hide depending on the window width without any user interaction, you can use the resize event to listen for changes in window size and adjust the visibility accordingly. Here's the updated code: javascript
var sideNav = document.querySelector(".sideNav");
function toggleSideNav() {
if (window.innerWidth >= 1250) {
sideNav.classList.add("active");
} else {
sideNav.classList.remove("active");
}
}
// Run the function on page load to ensure the correct state is set initially
toggleSideNav();
// Listen for window resize events and update visibility accordingly
window.addEventListener("resize", toggleSideNav);
Explanation: The function toggleSideNav() checks the window width and adds or removes the "active" class based on the condition (>= 1250px). It runs immediately when the page loads to ensure correct styling from the start. It listens for resize events so that whenever the window is resized, it updates the visibility dynamically. This should now work exactly as you envisioned! 🎯 Let me know if you need further refinements. 🚀
L'inspiration pour la création de ce portfolio : Pinterest
Pour la partie about me : Ionos
Reprise d'un code provenant de MZcode01 sur Telegram
Lien vers le site de MZcode01 : MZcode01
.wrapper{
perspective: 3000px;
}
.card{
width: 360px;
height: 530px;
transform-style: preserve-3d;
transition: transform .8s ease-in-out;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2),
-5px -5px 10px rgba(0, 0, 0, 0.05);
border-radius: 15px;
}
.card:hover{
transform: rotateY(180deg);
}
.front-page,
.back-page{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
}
.front-page{
background-image: url(image.jpg);
background-size: cover;
}
.card-info{
position: absolute;
bottom: 50px;
left: 45px;
color: #fff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
text-align: center;
}
.back-page{
background-color: #1e272e;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.card-content{
text-align: center;
padding: 20px;
max-width: 300px;
}
GSAP questions
gsap.utils.toArray('#goeiedag', goeiedag){
gsap.fromTo(goeiedag,{ opacity: 0,
y: 100
},{
opacity: 1,
y: 0,
scrollTrigger: goeiedag
})
};
It looks like you're trying to animate an element with GSAP, but there are a couple of issues in your code. Here’s a fixed version:
gsap.utils.toArray("#goeiedag").forEach(goeiedag => {
gsap.fromTo(goeiedag, {
opacity: 0,
y: 100
}, {
opacity: 1,
y: 0,
scrollTrigger: {
trigger: goeiedag,
start: "top bottom"
}
});
});
Issues in your code:
- Incorrect toArray usage: gsap.utils.toArray(selector) returns an array, but you were trying to pass an additional argument.
- No forEach iteration: Since toArray returns an array, you need to loop through each element to apply animations individually.
- scrollTrigger setup: The object needs a trigger property to correctly bind the animation to scroll events.
This should work as expected, animating #goeiedag smoothly when it enters the viewport. Let me know if you need any refinements! 🚀
how to make it work even if I only have one element with that ID ?
If you only have a single element with that ID, you don’t necessarily need gsap.utils.toArray(). You can target the element directly like this:
gsap.fromTo("#goeiedag", {
opacity: 0,
y: 100
}, {
opacity: 1,
y: 0,
scrollTrigger: {
trigger: "#goeiedag",
start: "top bottom"
}
});
This ensures that the animation still works correctly without iterating over an array. GSAP will directly target #goeiedag and apply the animation when the element enters the viewport. Let me know if you need more tweaks! 🚀
const file = { name: window.location.pathname.split("/").pop() }; // Dynamically set name