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">
<p class="eyebrow animate-fade-in">Développeur web fullstack</p>
<h1 id="hero-title" class="animate-slide-up">
<span class="word">Je</span>
<span class="word">conçois,</span>
<span class="word">développe</span>
<span class="word">et</span>
<span class="word">déploie</span>
<span class="word">des</span>
<span class="word">applications</span>
<span class="word">web</span>
<span class="word">performantes</span>
<span class="word">et</span>
<span class="word">maintenables.</span>
<span>Je</span>
<span>conçois,</span>
<span>développe</span>
<span>et</span>
<span>déploie</span>
<span>des</span>
<span>applications</span>
<span>web</span>
<span>performantes</span>
<span>et</span>
<span>maintenables.</span>
</h1>
<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
@@ -111,62 +111,62 @@
<div class="group">
<h3>Backend</h3>
<div class="tags">
<span class="tag">PHP</span><span class="tag">Symfony</span><span class="tag">Doctrine</span>
<span class="tag">Node</span><span class="tag">Fastify</span><span class="tag">Prisma</span>
<span class="tag">Jest</span><span class="tag">Go</span>
<span class="tag">Java</span><span class="tag">C#</span><span class="tag">C++</span>
<span>PHP</span><span>Symfony</span><span>Doctrine</span>
<span>Node</span><span>Fastify</span><span>Prisma</span>
<span>Jest</span><span>Go</span>
<span>Java</span><span>C#</span><span>C++</span>
</div>
</div>
<div class="group">
<h3>Frontend</h3>
<div class="tags">
<span class="tag">Vue</span>
<span class="tag">Nuxt</span>
<span class="tag">React</span>
<span class="tag">Next</span>
<span class="tag">TypeScript</span>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">Tailwind</span>
<span>Vue</span>
<span>Nuxt</span>
<span>React</span>
<span>Next</span>
<span>TypeScript</span>
<span>HTML</span>
<span>CSS</span>
<span>Tailwind</span>
</div>
</div>
<div class="group">
<h3>Mobile</h3>
<div class="tags">
<span class="tag">Flutter</span>
<span class="tag">Kotlin</span>
<span class="tag">React Native</span>
<span>Flutter</span>
<span>Kotlin</span>
<span>React Native</span>
</div>
</div>
<div class="group">
<h3>Base de données</h3>
<div class="tags">
<span class="tag">MySQL</span>
<span class="tag">PostgreSQL</span>
<span class="tag">SQLite</span>
<span class="tag">Supabase</span>
<span class="tag">Firebase</span>
<span>MySQL</span>
<span>PostgreSQL</span>
<span>SQLite</span>
<span>Supabase</span>
<span>Firebase</span>
</div>
</div>
<div class="group">
<h3>DevOps</h3>
<div class="tags">
<span class="tag">Docker</span>
<span class="tag">Nginx</span>
<span class="tag">Debian</span>
<span class="tag">CI/CD</span>
<span class="tag">GitHub Actions</span>
<span class="tag">Jenkins</span>
<span class="tag">Dockploy</span>
<span class="tag">Coolify</span>
<span class="tag">GCP</span>
<span class="tag">AWS</span>
<span>Docker</span>
<span>Nginx</span>
<span>Debian</span>
<span>CI/CD</span>
<span>GitHub Actions</span>
<span>Jenkins</span>
<span>Dockploy</span>
<span>Coolify</span>
<span>GCP</span>
<span>AWS</span>
</div>
</div>
<div class="group">
<h3>Pratiques</h3>
<div class="tags"><span class="tag">DDD</span><span class="tag">Tests</span><span class="tag">Agile</span>
<span class="tag">Anglais C1</span>
<div class="tags"><span>DDD</span><span>Tests</span><span>Agile</span>
<span>Anglais C1</span>
</div>
</div>
</div>
style.css
+28 -21
View File
@@ -211,43 +211,53 @@ main.container > .card {
margin-bottom: 1.5rem;
}
.hero h1 .word {
.hero h1>span {
display: inline-block;
opacity: 0;
animation: slideUpWord 0.6s ease forwards;
}
.hero h1 .word:nth-child(1) {
.hero h1>span:nth-child(1) {
animation-delay: 0.1s;
}
.hero h1 .word:nth-child(2) {
.hero h1>span:nth-child(2) {
animation-delay: 0.2s;
}
.hero h1 .word:nth-child(3) {
.hero h1>span:nth-child(3) {
animation-delay: 0.3s;
}
.hero h1 .word:nth-child(4) {
.hero h1>span:nth-child(4) {
animation-delay: 0.4s;
}
.hero h1 .word:nth-child(5) {
.hero h1>span:nth-child(5) {
animation-delay: 0.5s;
}
.hero h1 .word:nth-child(6) {
.hero h1>span:nth-child(6) {
animation-delay: 0.6s;
}
.hero h1 .word:nth-child(7) {
.hero h1>span:nth-child(7) {
animation-delay: 0.7s;
}
.hero h1 .word:nth-child(8) {
.hero h1>span:nth-child(8) {
animation-delay: 0.8s;
}
.hero h1 .word:nth-child(9) {
.hero h1>span:nth-child(9) {
animation-delay: 0.9s;
}
.hero h1 .word:nth-child(10) {
.hero h1>span:nth-child(10) {
animation-delay: 1s;
}
.hero h1 .word:nth-child(11) {
.hero h1>span:nth-child(11) {
animation-delay: 1.1s;
}
@@ -256,6 +266,7 @@ main.container > .card {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
@@ -278,6 +289,7 @@ main.container > .card {
from {
opacity: 0;
}
to {
opacity: 1;
}
@@ -295,13 +307,6 @@ main.container > .card {
flex-wrap: wrap;
}
/* Remove any image-specific styles that might still be present */
.hero img,
.hero-image,
.about-image {
display: none;
}
/* Sections */
section {
margin-top: 48px;
@@ -363,7 +368,7 @@ p.lead {
gap: 6px;
}
.tag {
.tags>span {
border: 1px solid #263626;
border-radius: 999px;
padding: 4px 8px;
@@ -478,6 +483,7 @@ a:visited:hover {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
@@ -590,7 +596,8 @@ footer .to-top {
position: fixed;
left: 16px;
right: 16px;
top: 78px; /* 70px header height + 8px gap */
top: 78px;
/* 70px header height + 8px gap */
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;