Skip to content

Commit 53111fb

Browse files
Klaynight-devKlaynight-dev
committed
add contents
1 parent aa74492 commit 53111fb

3 files changed

Lines changed: 147 additions & 36 deletions

File tree

‎assets/css/style.css‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1787,14 +1787,18 @@ textarea.form-input::-webkit-resizer { display: none; }
17871787
.service-list {
17881788
grid-template-columns: 1fr 1fr;
17891789
grid-template-areas:
1790-
"item-1 item-2"
1791-
"item-3 item-3";
1790+
"item-1 item-2"
1791+
"item-3 item-4"
1792+
"item-5 item-6";
17921793
gap: 20px 25px;
17931794
}
17941795

17951796
.service-list .service-item:nth-child(1) { grid-area: item-1; }
17961797
.service-list .service-item:nth-child(2) { grid-area: item-2; }
17971798
.service-list .service-item:nth-child(3) { grid-area: item-3; }
1799+
.service-list .service-item:nth-child(4) { grid-area: item-4; }
1800+
.service-list .service-item:nth-child(5) { grid-area: item-5; }
1801+
.service-list .service-item:nth-child(6) { grid-area: item-6; }
17981802

17991803
/* testimonials */
18001804

@@ -2067,39 +2071,39 @@ textarea.form-input::-webkit-resizer { display: none; }
20672071
}
20682072

20692073
@media (min-width: 1200px) {
2070-
.sidebar.active .contacts-list {
2074+
main:not([style*="display: none"]) .sidebar.active .contacts-list {
20712075
display: grid;
20722076
grid-template-columns: 1fr 2fr;
20732077
grid-template-rows: repeat(4, auto);
20742078
gap: 20px;
20752079
align-items: start;
20762080
}
2077-
.sidebar.active .contact-item {
2081+
main:not([style*="display: none"]) .sidebar.active .contact-item {
20782082
grid-column: 1 / 2;
20792083
}
2080-
.sidebar.active .service-item {
2084+
main:not([style*="display: none"]) .sidebar.active .service-item {
20812085
grid-column: 2 / 3;
20822086
grid-row: 1 / -1;
20832087
align-self: stretch;
20842088
max-height: fit-content;
20852089
}
20862090

20872091
/* Pour mobile : une seule colonne */
2088-
.contacts-list {
2092+
main:not([style*="display: none"]) .contacts-list {
20892093
display: grid;
20902094
grid-template-columns: 1fr;
20912095
grid-template-rows: none;
20922096
gap: 16px;
20932097
}
2094-
.contact-item {
2098+
main:not([style*="display: none"]) .contact-item {
20952099
grid-column: 1 / 2;
20962100
}
2097-
.service-item {
2101+
main:not([style*="display: none"]) .service-item {
20982102
grid-column: 1 / 2;
20992103
grid-row: auto;
21002104
align-self: stretch;
21012105
}
2102-
.sidebar {
2106+
main:not([style*="display: none"]) .sidebar {
21032107
height: 100vh;
21042108
max-height: 100vh;
21052109
}

‎assets/js/script.js‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -164,35 +164,24 @@ document.addEventListener("DOMContentLoaded", function () {
164164
const marginInfoContent = document.querySelector(".info-content");
165165
const info_more_btn = document.querySelector(".info-more-btn");
166166
const service_item = document.querySelector(".sidebar .service-item");
167-
if (mainContent) {
168-
mainContent.style.display = "none";
169-
}
170167

171-
if (showMoreBtn) {
172-
// Set sidebar active at the start
173-
sidebar.classList.add("active");
168+
// Affiche la sidebar au chargement
169+
sidebar.classList.add("active");
170+
if (mainContent) mainContent.style.display = "none";
171+
if (info_more_btn) info_more_btn.style.display = "none";
172+
if (info_more_btn) info_more_btn.classList.remove("active");
174173

174+
if (showMoreBtn) {
175175
showMoreBtn.addEventListener("click", () => {
176-
if (mainContent) {
177-
mainContent.style.display = "block";
178-
showMoreBtn.style.display = "none";
179-
180-
if (marginInfoContent) {
181-
marginInfoContent.style.marginBottom = "0";
182-
}
183-
// Remove active from sidebar when showMoreBtn is clicked
176+
// Affiche le contenu principal et masque la sidebar
177+
if (mainContent) mainContent.style.display = "block";
178+
if (showMoreBtn) showMoreBtn.style.display = "none";
179+
if (info_more_btn) info_more_btn.style.display = "block";
180+
if (marginInfoContent) marginInfoContent.style.marginBottom = "0";
184181
sidebar.classList.remove("active");
185-
}
186-
187-
if (service_item.style.display != "none") {
188-
service_item.style.display = "none";
189-
}
190-
191-
if (showMoreBtn.style.display != "none") {
192-
sidebar.classList.add("active");
193-
info_more_btn.style.display = "none";
194-
}
182+
if (service_item) service_item.style.display = "none";
195183
});
196184
}
197185
});
198186

187+

‎index.html‎

Lines changed: 121 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h1 class="name" title="Elouan Passereau">Elouan Passereau</h1>
7474
<p class="title" style="display: inline-block; margin-top: 5px;">Développeur Application</p>
7575
</div>
7676

77-
<button class="info_more-btn" data-sidebar-btn>
77+
<button class="info_more-btn" data-sidebar-btn data-show-more-btn>
7878
<span>Voir Contacts</span>
7979

8080
<ion-icon name="chevron-down"></ion-icon>
@@ -283,7 +283,7 @@ <h5 class="h5">Langages Web</h5>
283283
<li><ion-icon name="logo-css3"></ion-icon>CSS</li>
284284
<li><ion-icon name="logo-javascript"></ion-icon>JS</li>
285285
<li><ion-icon name="cloudy-outline"></ion-icon>BootStrap</li>
286-
<li><ion-icon name="cloudy-outline"></ion-icon>TailWinCSS</li>
286+
<li><ion-icon name="cloudy-outline"></ion-icon>TailwindCSS</li>
287287
</ul>
288288
</div>
289289
</div>
@@ -660,7 +660,7 @@ <h5 class="h5">Langages Web</h5>
660660
<li><ion-icon name="logo-css3"></ion-icon>CSS</li>
661661
<li><ion-icon name="logo-javascript"></ion-icon>JS</li>
662662
<li><ion-icon name="cloudy-outline"></ion-icon>BootStrap</li>
663-
<li><ion-icon name="cloudy-outline"></ion-icon>TailWinCSS</li>
663+
<li><ion-icon name="cloudy-outline"></ion-icon>TailwindCSS</li>
664664
</ul>
665665
</div>
666666
</div>
@@ -726,6 +726,124 @@ <h5 class="h5">Autres</h5>
726726

727727
</section>
728728

729+
<section class="service">
730+
731+
<h3 class="h3 service-title">Mes 6 compétences clés</h3>
732+
733+
<ul class="service-list">
734+
735+
<li class="service-item">
736+
737+
<div class="service-icon-box">
738+
<img src="./assets/images/icon-design.svg" alt="icône de design" width="40">
739+
</div>
740+
741+
<div class="service-content-box">
742+
<h4 class="h4 service-item-title">Réaliser un développement d'application</h4>
743+
744+
<p class="service-item-text"></p>
745+
<a href="https://github.com/Klaynight-dev/links_website_template" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
746+
Lien vers la console linux Web
747+
</a>
748+
<a href="https://github.com/Klaynight-dev/plinkk" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
749+
Lien vers un plinkk open source
750+
</a>
751+
</p>
752+
</div>
753+
754+
</li>
755+
756+
<li class="service-item">
757+
758+
<div class="service-icon-box">
759+
<img src="./assets/images/icon-dev.svg" alt="icône de développement web" width="40">
760+
</div>
761+
762+
<div class="service-content-box">
763+
<h4 class="h4 service-item-title">Optimiser des applications informatiques</h4>
764+
765+
<p class="service-item-text">
766+
<a href="https://github.com/Klaynight-dev/Snake_Auto" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
767+
Lien vers Snake Auto
768+
</a>
769+
</p>
770+
</div>
771+
772+
</li>
773+
774+
<li class="service-item">
775+
776+
<div class="service-icon-box">
777+
<img src="./assets/images/icon-app.svg" alt="icône d'application mobile" width="40">
778+
</div>
779+
780+
<div class="service-content-box">
781+
<h4 class="h4 service-item-title">Administrer des systèmes informatiques communicants complexes</h4>
782+
783+
<p class="service-item-text">
784+
<a href="#" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
785+
Projet d'instalation au service réseau.
786+
</a>
787+
</p>
788+
</div>
789+
790+
</li>
791+
<li class="service-item">
792+
793+
<div class="service-icon-box">
794+
<img src="./assets/images/icon-app.svg" alt="icône d'application mobile" width="40">
795+
</div>
796+
797+
<div class="service-content-box">
798+
<h4 class="h4 service-item-title">Gérer des données de l'information</h4>
799+
800+
<p class="service-item-text">
801+
<a href="#" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
802+
Projet de création d'une base de données.
803+
</a>
804+
</p>
805+
</div>
806+
807+
</li>
808+
809+
<li class="service-item">
810+
811+
<div class="service-icon-box">
812+
<img src="./assets/images/icon-app.svg" alt="icône d'application mobile" width="40">
813+
</div>
814+
815+
<div class="service-content-box">
816+
<h4 class="h4 service-item-title">Conduite de projet</h4>
817+
818+
<p class="service-item-text">
819+
<a href="https://github.com/TheHubGames/hub_games" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
820+
Lien vers le projet HubGames.
821+
</a>
822+
</p>
823+
</div>
824+
825+
</li>
826+
827+
<li class="service-item">
828+
829+
<div class="service-icon-box">
830+
<img src="./assets/images/icon-app.svg" alt="icône d'application mobile" width="40">
831+
</div>
832+
833+
<div class="service-content-box">
834+
<h4 class="h4 service-item-title">Travailler dans une équipe informatique</h4>
835+
836+
<p class="service-item-text">
837+
<a href="https://github.com/TheHubGames/hub_games" class="btn" style="display:inline-block;padding:8px 16px;background:#4f46e5;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;">
838+
Lien vers le projet HubGames.
839+
</a>
840+
</p>
841+
</div>
842+
843+
</li>
844+
845+
</section>
846+
729847
</article>
730848

731849

0 commit comments

Comments
 (0)