thibaud.la_riviere-gillet
/
portfolio
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout de l'effet de hover
continuous-integration/drone/push Build is passing Details

Browse Source
master
Thibaud LA RIVIERE-GILLET 1 month ago
parent f717c7e623
commit cfde1d4a9c
3 changed files with 82 additions and 92 deletions
Show Stats Download Patch File Download Diff File

51
css/style.css
Unescape View File

@ -1,25 +1,3 @@
header .cv-container {
position: absolute;
right: 25%;
transform: translateX(25%);
}
#cv-download-button {
padding: 8px 15px;
background: #FFF;
color: #173964;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#cv-download-button:hover {
background: #1A4D7B;
color: #FFF;
}
/* Autres styles */
body {
background: #011C2D;
margin: 0;
@ -90,7 +68,7 @@ header .left-pane a, header .right-pane a {
display: block;
}
header .left-pane a.active, header .right-pane li:hover {
header .left-pane a.active, header .right-pane li:hover, header .right-pane li.selected {
background: #1A4D7B;
border-radius: 5px;
}
@ -98,7 +76,7 @@ header .left-pane a.active, header .right-pane li:hover {
header .right-pane .file-item {
text-align: center;
width: 100px;
height: 100px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
@ -129,6 +107,27 @@ header .right-pane .file-item:hover a {
background: none;
}
.cv-container {
position: absolute;
right: 50%;
transform: translateX(50%);
}
#cv-download-button {
padding: 8px 15px;
background: #FFF;
color: #173964;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#cv-download-button:hover {
background: #1A4D7B;
color: #FFF;
}
.container {
flex: 1;
display: flex;
@ -136,7 +135,7 @@ header .right-pane .file-item:hover a {
align-items: center;
}
#sub-sections{
#sub-sections {
flex: 1;
display: flex;
flex-wrap: wrap;
@ -162,4 +161,4 @@ header .right-pane .file-item:hover a {
.sheet p, .sheet h3 {
margin: 15px 0;
}
}

BIN
js/.script.js.swp
View File

Binary file not shown.

123
js/script.js
Unescape View File

@ -1,66 +1,60 @@
document.addEventListener('DOMContentLoaded', function ()
{
document.addEventListener('DOMContentLoaded', function () {
const globalSections = document.getElementById('global-sections');
const subSections = document.getElementById('sub-sections');
const contentDisplay = document.getElementById('content-display');
const sectionsData =
{
about:
{
const sectionsData = {
about: {
name: 'About',
items: []
},
projects:
{
projects: {
name: 'Projects',
items: [
{
filename: 'ft_42',
filextension: '.css',
title: 'ft_42.css Project',
content: 'Contenu du projet ft_42.css',
repo: 'https://github.com/user/ft_42'
},
filename: 'ft_42',
filextension: '.css',
title: 'ft_42.css Project',
content: 'Contenu du projet ft_42.css',
repo: 'https://github.com/user/ft_42'
},
{
filename: 'Maquette',
filextension: '.html',
title: 'Maquette Project',
content: 'Contenu du projet Maquette.html',
repo: 'https://github.com/user/Maquette'
},
filename: 'Maquette',
filextension: '.html',
title: 'Maquette Project',
content: 'Contenu du projet Maquette.html',
repo: 'https://github.com/user/Maquette'
},
{
filename: 'Mont-blanc',
filextension: '.LDA',
title: 'Mont-blanc (LDA) Project',
content: 'Contenu du projet Mont-blanc (LDA)',
repo: 'https://github.com/user/Mont-blanc'
},
filename: 'Mont-blanc',
filextension: '.LDA',
title: 'Mont-blanc (LDA) Project',
content: 'Contenu du projet Mont-blanc (LDA)',
repo: 'https://github.com/user/Mont-blanc'
},
{
filename: 'test',
filextension: '.test',
title: 'test',
content: 'Contenu du projet test',
repo: 'https://github.com/user/test'
}
filename: 'test',
filextension: '.test',
title: 'test',
content: 'Contenu du projet test',
repo: 'https://github.com/user/test'
}
]
},
contact:
{
contact: {
name: 'Contact',
items: []
},
readme:
{
readme: {
name: 'Readme',
items: [
{
filename: 'README',
filextension: '.md',
title: 'README',
content: 'Contenu du README.md',
repo: 'https://github.com/user/repo'
}
filename: 'README',
filextension: '.md',
title: 'README',
content: 'Contenu du README.md',
repo: 'https://github.com/user/repo'
}
]
}
};
@ -76,13 +70,11 @@ document.addEventListener('DOMContentLoaded', function ()
const sectionElements = document.querySelectorAll('#global-sections .section');
function displaySectionContent(sectionName)
{
function displaySectionContent(sectionName) {
document.querySelector('.nav-link.active')?.classList.remove('active');
document.querySelector(`[data-section="${sectionName}"] .nav-link`).classList.add('active');
if (sectionName === 'readme')
{
if (sectionName === 'readme') {
subSections.innerHTML = '';
const item = sectionsData.readme.items[0];
@ -106,34 +98,33 @@ document.addEventListener('DOMContentLoaded', function ()
<a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">${item.filename}${item.filextension}</a>
`;
subSections.appendChild(li);
// Ajouter un événement de clic pour chaque sous-section
li.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector('.file-item.selected')?.classList.remove('selected');
li.classList.add('selected');
const content = li.querySelector('.sub-link').getAttribute('data-content');
const title = li.querySelector('.sub-link').getAttribute('data-title');
const repo = li.querySelector('.sub-link').getAttribute('data-repo');
contentDisplay.innerHTML = `
<div class="sheet">
<h1>${title}</h1>
<p>${content}</p>
<p><a href="${repo}" target="_blank">Repository</a></p>
</div>
`;
});
});
}
sectionElements.forEach(section => {
section.addEventListener('click', function ()
{
section.addEventListener('click', function () {
const sectionName = this.getAttribute('data-section');
displaySectionContent(sectionName);
});
});
subSections.addEventListener('click', function (e)
{
if (e.target.classList.contains('sub-link') || e.target.classList.contains('file-img'))
{
e.preventDefault();
const content = e.target.getAttribute('data-content');
const title = e.target.getAttribute('data-title');
const repo = e.target.getAttribute('data-repo');
contentDisplay.innerHTML = `
<div class="sheet">
<h1>${title}</h1>
<p>${content}</p>
<p><a href="${repo}" target="_blank">Repository</a></p>
</div>
`;
}
});
displaySectionContent('readme');
});

Write Preview
Loading…
Cancel
Save