fsylvain/compact-portfolio
1
0
Fork 0
mirror of https://github.com/Floriansylvain/compact-portfolio.git synced 2026-08-19 11:43:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: gained some space.. kinda..

Browse Source
This commit is contained in:
Florian Sylvain
2026-06-20 10:45:44 +02:00
parent abe1a6c120
commit a8072f22c4
2 changed files with 76 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+43 -43
View File
@@ -78,17 +78,17 @@
<div class="hero-card"> <div class="hero-card">
<p class="eyebrow animate-fade-in">Développeur web fullstack</p> <p class="eyebrow animate-fade-in">Développeur web fullstack</p>
<h1 id="hero-title" class="animate-slide-up"> <h1 id="hero-title" class="animate-slide-up">
<span class="word">Je</span> <span>Je</span>
<span class="word">conçois,</span> <span>conçois,</span>
<span class="word">développe</span> <span>développe</span>
<span class="word">et</span> <span>et</span>
<span class="word">déploie</span> <span>déploie</span>
<span class="word">des</span> <span>des</span>
<span class="word">applications</span> <span>applications</span>
<span class="word">web</span> <span>web</span>
<span class="word">performantes</span> <span>performantes</span>
<span class="word">et</span> <span>et</span>
<span class="word">maintenables.</span> <span>maintenables.</span>
</h1> </h1>
<p class="animate-fade-in-delayed"> <p class="animate-fade-in-delayed">
Diplômé d'un Bachelor Développeur Web à l'ESD Paris et récemment en poste chez Tool4Staffing, je porte une Diplômé d'un Bachelor Développeur Web à l'ESD Paris et récemment en poste chez Tool4Staffing, je porte une
@@ -111,62 +111,62 @@
<div class="group"> <div class="group">
<h3>Backend</h3> <h3>Backend</h3>
<div class="tags"> <div class="tags">
<span class="tag">PHP</span><span class="tag">Symfony</span><span class="tag">Doctrine</span> <span>PHP</span><span>Symfony</span><span>Doctrine</span>
<span class="tag">Node</span><span class="tag">Fastify</span><span class="tag">Prisma</span> <span>Node</span><span>Fastify</span><span>Prisma</span>
<span class="tag">Jest</span><span class="tag">Go</span> <span>Jest</span><span>Go</span>
<span class="tag">Java</span><span class="tag">C#</span><span class="tag">C++</span> <span>Java</span><span>C#</span><span>C++</span>
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<h3>Frontend</h3> <h3>Frontend</h3>
<div class="tags"> <div class="tags">
<span class="tag">Vue</span> <span>Vue</span>
<span class="tag">Nuxt</span> <span>Nuxt</span>
<span class="tag">React</span> <span>React</span>
<span class="tag">Next</span> <span>Next</span>
<span class="tag">TypeScript</span> <span>TypeScript</span>
<span class="tag">HTML</span> <span>HTML</span>
<span class="tag">CSS</span> <span>CSS</span>
<span class="tag">Tailwind</span> <span>Tailwind</span>
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<h3>Mobile</h3> <h3>Mobile</h3>
<div class="tags"> <div class="tags">
<span class="tag">Flutter</span> <span>Flutter</span>
<span class="tag">Kotlin</span> <span>Kotlin</span>
<span class="tag">React Native</span> <span>React Native</span>
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<h3>Base de données</h3> <h3>Base de données</h3>
<div class="tags"> <div class="tags">
<span class="tag">MySQL</span> <span>MySQL</span>
<span class="tag">PostgreSQL</span> <span>PostgreSQL</span>
<span class="tag">SQLite</span> <span>SQLite</span>
<span class="tag">Supabase</span> <span>Supabase</span>
<span class="tag">Firebase</span> <span>Firebase</span>
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<h3>DevOps</h3> <h3>DevOps</h3>
<div class="tags"> <div class="tags">
<span class="tag">Docker</span> <span>Docker</span>
<span class="tag">Nginx</span> <span>Nginx</span>
<span class="tag">Debian</span> <span>Debian</span>
<span class="tag">CI/CD</span> <span>CI/CD</span>
<span class="tag">GitHub Actions</span> <span>GitHub Actions</span>
<span class="tag">Jenkins</span> <span>Jenkins</span>
<span class="tag">Dockploy</span> <span>Dockploy</span>
<span class="tag">Coolify</span> <span>Coolify</span>
<span class="tag">GCP</span> <span>GCP</span>
<span class="tag">AWS</span> <span>AWS</span>
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<h3>Pratiques</h3> <h3>Pratiques</h3>
<div class="tags"><span class="tag">DDD</span><span class="tag">Tests</span><span class="tag">Agile</span> <div class="tags"><span>DDD</span><span>Tests</span><span>Agile</span>
<span class="tag">Anglais C1</span> <span>Anglais C1</span>
</div> </div>
</div> </div>
</div> </div>
style.css
+33 -26
View File
@@ -42,8 +42,8 @@ main.container {
padding: 0; padding: 0;
} }
main.container > section:not(.hero-fullscreen), main.container>section:not(.hero-fullscreen),
main.container > .card { main.container>.card {
padding: 24px; padding: 24px;
} }
@@ -211,43 +211,53 @@ main.container > .card {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.hero h1 .word { .hero h1>span {
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
animation: slideUpWord 0.6s ease forwards; animation: slideUpWord 0.6s ease forwards;
} }
.hero h1 .word:nth-child(1) { .hero h1>span:nth-child(1) {
animation-delay: 0.1s; animation-delay: 0.1s;
} }
.hero h1 .word:nth-child(2) {
.hero h1>span:nth-child(2) {
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.hero h1 .word:nth-child(3) {
.hero h1>span:nth-child(3) {
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.hero h1 .word:nth-child(4) {
.hero h1>span:nth-child(4) {
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.hero h1 .word:nth-child(5) {
.hero h1>span:nth-child(5) {
animation-delay: 0.5s; animation-delay: 0.5s;
} }
.hero h1 .word:nth-child(6) {
.hero h1>span:nth-child(6) {
animation-delay: 0.6s; animation-delay: 0.6s;
} }
.hero h1 .word:nth-child(7) {
.hero h1>span:nth-child(7) {
animation-delay: 0.7s; animation-delay: 0.7s;
} }
.hero h1 .word:nth-child(8) {
.hero h1>span:nth-child(8) {
animation-delay: 0.8s; animation-delay: 0.8s;
} }
.hero h1 .word:nth-child(9) {
.hero h1>span:nth-child(9) {
animation-delay: 0.9s; animation-delay: 0.9s;
} }
.hero h1 .word:nth-child(10) {
.hero h1>span:nth-child(10) {
animation-delay: 1s; animation-delay: 1s;
} }
.hero h1 .word:nth-child(11) {
.hero h1>span:nth-child(11) {
animation-delay: 1.1s; animation-delay: 1.1s;
} }
@@ -256,6 +266,7 @@ main.container > .card {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -278,6 +289,7 @@ main.container > .card {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
@@ -295,13 +307,6 @@ main.container > .card {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* Remove any image-specific styles that might still be present */
.hero img,
.hero-image,
.about-image {
display: none;
}
/* Sections */ /* Sections */
section { section {
margin-top: 48px; margin-top: 48px;
@@ -363,7 +368,7 @@ p.lead {
gap: 6px; gap: 6px;
} }
.tag { .tags>span {
border: 1px solid #263626; border: 1px solid #263626;
border-radius: 999px; border-radius: 999px;
padding: 4px 8px; padding: 4px 8px;
@@ -478,6 +483,7 @@ a:visited:hover {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -568,8 +574,8 @@ footer .to-top {
padding: 16px; padding: 16px;
} }
main.container > section:not(.hero-fullscreen), main.container>section:not(.hero-fullscreen),
main.container > .card { main.container>.card {
padding: 16px; padding: 16px;
} }
@@ -590,7 +596,8 @@ footer .to-top {
position: fixed; position: fixed;
left: 16px; left: 16px;
right: 16px; right: 16px;
top: 78px; /* 70px header height + 8px gap */ top: 78px;
/* 70px header height + 8px gap */
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
@@ -610,4 +617,4 @@ footer .to-top {
padding: 12px 10px; padding: 12px 10px;
border-radius: 8px; border-radius: 8px;
} }
} }