Skip to content

Commit bedf8bf

Browse files
kenny516kenny516
authored
Merge pull request #16 from kenny516/dev
Dev
2 parents 06f81e4 + e1753b2 commit bedf8bf

File tree

3 files changed

+323
-3
lines changed

3 files changed

+323
-3
lines changed

‎src/assets/css/styles.css

+320
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ header {
8585
transition: all 0.3s ease;
8686
}
8787

88+
8889
/* Nouvelle structure du header */
8990
.header-content {
9091
max-width: 1200px;
@@ -592,6 +593,160 @@ footer {
592593
line-height: 1.6;
593594
}
594595

596+
.footer-section.social .social-links {
597+
display: flex;
598+
flex-wrap: wrap;
599+
gap: 1rem;
600+
justify-content: center;
601+
width: 100%;
602+
padding: 0.5rem;
603+
}
604+
605+
.social-link {
606+
display: flex;
607+
align-items: center;
608+
justify-content: center;
609+
gap: 0.5rem;
610+
padding: 0.8rem 1.2rem;
611+
background: var(--glass-bg);
612+
border-radius: 8px;
613+
color: var(--light-text);
614+
text-decoration: none;
615+
transition: all 0.3s ease;
616+
width: 140px;
617+
}
618+
619+
.social-link i {
620+
font-size: 1.2rem;
621+
}
622+
623+
.social-link span {
624+
font-size: 0.9rem;
625+
}
626+
627+
.social-link:hover {
628+
background: rgba(0, 247, 255, 0.1);
629+
transform: translateY(-3px);
630+
color: var(--neon-blue);
631+
box-shadow: 0 0 15px rgba(0, 247, 255, 0.2);
632+
}
633+
634+
/* Media queries pour les liens sociaux */
635+
@media (max-width: 768px) {
636+
.social-links {
637+
flex-direction: row;
638+
justify-content: center;
639+
gap: 0.8rem;
640+
padding: 0;
641+
}
642+
643+
.social-link {
644+
width: calc(50% - 0.4rem); /* 2 liens par ligne avec gap */
645+
padding: 0.7rem 1rem;
646+
}
647+
}
648+
649+
@media (max-width: 480px) {
650+
.social-links {
651+
flex-direction: column;
652+
align-items: center;
653+
max-width: 280px;
654+
margin: 0 auto;
655+
}
656+
657+
.social-link {
658+
width: 100%;
659+
}
660+
}
661+
662+
.footer-bottom {
663+
text-align: center;
664+
padding-top: 2rem;
665+
border-top: 1px solid rgba(255, 255, 255, 0.1);
666+
font-size: 0.9rem;
667+
color: var(--light-text);
668+
}
669+
670+
/* Media queries pour le footer */
671+
@media (max-width: 768px) {
672+
footer {
673+
padding: 2rem 0 1rem;
674+
}
675+
676+
.footer-content {
677+
padding: 0 1rem;
678+
text-align: center;
679+
}
680+
681+
.footer-grid {
682+
grid-template-columns: 1fr;
683+
gap: 2rem;
684+
}
685+
686+
.footer-section {
687+
text-align: center;
688+
padding: 1rem;
689+
display: flex;
690+
flex-direction: column;
691+
align-items: center;
692+
}
693+
694+
.footer-section h3 {
695+
margin-bottom: 1rem;
696+
}
697+
698+
.footer-section p {
699+
max-width: 300px;
700+
margin: 0 auto;
701+
}
702+
703+
.footer-section.social .social-links {
704+
display: flex;
705+
flex-direction: column;
706+
align-items: center;
707+
gap: 1rem;
708+
width: 100%;
709+
max-width: 280px;
710+
margin: 0 auto;
711+
}
712+
713+
.social-link {
714+
width: 100%;
715+
justify-content: center;
716+
text-align: center;
717+
}
718+
719+
.social-link i {
720+
margin-right: 0.5rem;
721+
}
722+
723+
.footer-bottom {
724+
margin-top: 2rem;
725+
text-align: center;
726+
font-size: 0.9rem;
727+
}
728+
}
729+
730+
@media (max-width: 480px) {
731+
.footer-section.social .social-links {
732+
max-width: 240px;
733+
}
734+
735+
.social-link {
736+
padding: 0.8rem;
737+
font-size: 0.9rem;
738+
}
739+
740+
.footer-section h3 {
741+
font-size: 1.1rem;
742+
}
743+
744+
.footer-section p {
745+
font-size: 0.85rem;
746+
max-width: 250px;
747+
}
748+
}
749+
595750
.footer-section.social .social-links {
596751
display: flex;
597752
flex-direction: row;
@@ -1103,6 +1258,27 @@ li {
11031258
font-size: 2.5rem;
11041259
margin-bottom: 0.5rem;
11051260
color: var(--text-primary);
1261+
word-wrap: normal;
1262+
word-break: normal;
1263+
hyphens: none;
1264+
white-space: pre-wrap;
1265+
line-height: 1.2;
1266+
}
1267+
1268+
@media (max-width: 768px) {
1269+
.profile-name {
1270+
font-size: 2rem;
1271+
text-align: center;
1272+
padding: 0 0.5rem;
1273+
}
1274+
}
1275+
1276+
@media (max-width: 480px) {
1277+
.profile-name {
1278+
font-size: 1.8rem;
1279+
padding: 0 0.5rem;
1280+
line-height: 1.3;
1281+
}
11061282
}
11071283

11081284
.profile-title {
@@ -1926,4 +2102,148 @@ li {
19262102
}
19272103
}
19282104

2105+
/* ...existing code... */
2106+
2107+
/* Styles de base pour la section profil */
2108+
.profile-section {
2109+
padding: 2rem;
2110+
margin-bottom: 2rem;
2111+
}
2112+
2113+
.profile-container {
2114+
display: flex;
2115+
align-items: center;
2116+
gap: 2rem;
2117+
max-width: 1000px;
2118+
margin: 0 auto;
2119+
background: var(--glass-bg);
2120+
backdrop-filter: blur(10px);
2121+
padding: 2rem;
2122+
border-radius: 15px;
2123+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
2124+
}
2125+
2126+
/* Media queries pour la responsivité */
2127+
@media (max-width: 968px) {
2128+
.profile-container {
2129+
gap: 1.5rem;
2130+
padding: 1.5rem;
2131+
}
2132+
2133+
.profile-name {
2134+
font-size: 2rem;
2135+
}
2136+
2137+
.profile-title {
2138+
font-size: 1.1rem;
2139+
}
2140+
}
2141+
2142+
@media (max-width: 768px) {
2143+
.profile-section {
2144+
padding: 1rem;
2145+
}
2146+
2147+
.profile-container {
2148+
flex-direction: column;
2149+
text-align: center;
2150+
}
2151+
2152+
.profile-image-container {
2153+
width: 150px;
2154+
height: 150px;
2155+
margin: 0 auto;
2156+
}
2157+
2158+
.profile-info {
2159+
width: 100%;
2160+
}
2161+
2162+
.profile-stats {
2163+
justify-content: center;
2164+
flex-wrap: wrap;
2165+
gap: 1.5rem;
2166+
}
2167+
}
2168+
2169+
@media (max-width: 480px) {
2170+
.profile-section {
2171+
padding: 0.5rem;
2172+
}
2173+
2174+
.profile-container {
2175+
padding: 1rem;
2176+
gap: 1rem;
2177+
}
2178+
2179+
.profile-image-container {
2180+
width: 120px;
2181+
height: 120px;
2182+
}
2183+
2184+
.profile-name {
2185+
font-size: 1.8rem;
2186+
}
2187+
2188+
.profile-title {
2189+
font-size: 1rem;
2190+
}
2191+
2192+
.profile-stats {
2193+
flex-direction: column;
2194+
align-items: center;
2195+
gap: 1rem;
2196+
}
2197+
2198+
.stat {
2199+
width: 100%;
2200+
justify-content: center;
2201+
}
2202+
}
2203+
2204+
/* ...existing code... */
2205+
2206+
/* Styles pour l'effet typing responsive */
2207+
.typing-effect {
2208+
display: inline-block;
2209+
white-space: nowrap;
2210+
overflow: hidden;
2211+
animation: typing 3.5s steps(40, end),
2212+
blink-caret 0.75s step-end infinite;
2213+
border-right: 2px solid var(--neon-blue);
2214+
margin: 0;
2215+
padding: 0;
2216+
max-width: 100%;
2217+
}
2218+
2219+
@media (max-width: 768px) {
2220+
.typing-effect {
2221+
font-size: 1.8rem;
2222+
animation: typing 2.5s steps(30, end),
2223+
blink-caret 0.75s step-end infinite;
2224+
}
2225+
}
2226+
2227+
@media (max-width: 480px) {
2228+
.typing-effect {
2229+
font-size: 1.4rem;
2230+
white-space: normal;
2231+
border-right: none;
2232+
animation: fadeIn 1s ease-in;
2233+
text-align: center;
2234+
word-wrap: break-word;
2235+
}
2236+
}
2237+
2238+
/* Actualisation des keyframes */
2239+
@keyframes typing {
2240+
from { width: 0 }
2241+
to { width: 100% }
2242+
}
2243+
2244+
@keyframes fadeIn {
2245+
from { opacity: 0; }
2246+
to { opacity: 1; }
2247+
}
2248+
19292249
/* ...existing code... */

‎src/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868

6969
</div>
7070
<div class="profile-info">
71-
<h1 class="profile-name typing-effect">Kenny Andriantsirafy Chan</h1>
71+
<h1 class="profile-name">Kenny Andriantsirafy Chan</h1>
7272
<p class="profile-title" data-i18n="role">Développeur Full Stack en formation</p>
7373
<p class="profile-location"><i class="fas fa-map-marker-alt"></i> Madagascar, Antananarive</p>
7474
<div class="profile-stats">
@@ -118,7 +118,7 @@ <h3>Lecture</h3>
118118

119119
<section class="hero">
120120
<div class="hero-content animate-in">
121-
<h1 class="typing-effect" data-i18n="hello">Salut, je suis Kenny 👋</h1>
121+
<h1 data-i18n="hello">Salut, je suis Kenny 👋</h1>
122122
<h2 data-i18n="role">Développeur Full Stack en formation</h2>
123123
<p class="subtitle" data-i18n="student">Étudiant en 3ème année à ITUniversity</p>
124124
<div class="cta-buttons">

‎src/pages/contact.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,4 +140,4 @@ <h3 data-i18n="footerSocial">Réseaux sociaux</h3>
140140
</script>
141141
</body>
142142

143-
</html>
143+
</html>

0 commit comments

Comments
 (0)