added img, style improvements, overall site completed, need some animation and good redirection.

This commit is contained in:
Léo 2025-03-11 02:26:46 +01:00
parent 056ed5be7d
commit 52d9344f84
12 changed files with 92 additions and 17 deletions

View File

@ -13,43 +13,72 @@
<body class="d-flex flex-column min-vh-100">
<div id="tsparticles"></div>
<div class="container m-5 mx-auto text-center">
<h1 class="ml2">Bienvenue sur orabis.fr</h1>
<h2>Retrouvez tous mes projets déployés :</h2>
<h1>Bienvenue sur <strong>orabis.fr</strong></h1>
<h2>Retrouvez ici tous mes projets déployés</h2>
<div class="d-flex justify-content-center mt-4">
<a href="http://x.com/orabisss" target="_blank">
<img class="img-fluid social-icon" src="/x.svg" alt="x.com" >
</a>
<a href="http://github.com/orabis">
<img class="img-fluid social-icon" src="/github.svg" alt="github.com">
</a>
<a href="https://behance.net/orabis">
<img class="img-fluid social-icon" src="/behance.svg" alt="behance.com">
</a>
</div>
</div>
<hr class="my-4" />
<hr class="my-4 w-50 mx-auto"/>
<div class="container m-5 mx-auto row">
<div class="col-sm-6 mb-4">
<div class="card bg-dark bg-opacity-50 text-white">
<img class="card-img-top" src="/berserk.png" alt="Card image cap">
<img class="card-img-fluid" src="/stockseekerimage.png" alt="Image du projet">
<div class="card-body">
<h5 class="card-title">Projet 1</h5>
<p class="card-text">Description du projet 1</p>
<a href="#" class="btn btn-outline-light">Voir le projet</a>
<h5 class="card-title">E5-Stockseeker</h5>
<p class="card-text">
Outil de gestion de stock. Ajoutez vos entrepôts,
créez vos produits et gérez vos stocks en toute simplicité.
Profitez dune interface épurée et intuitive pour une gestion efficace.
Suivez vos stocks en temps réel, sans complication.
</p>
<a href="#" class="btn btn-outline-light">Accéder au projet <img class="icon" src="/arrow.svg" alt=""></a>
<a href="#" class="btn btn-outline-light">Code source <img class="icon icon-gear" src="/gear.svg" alt=""></a>
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
<div class="card bg-dark bg-opacity-50 text-white">
<img class="card-img-top" src="/berserk.png" alt="Card image cap">
<img class="card-img-fluid" src="/exportgit.png" alt="Image du projet">
<div class="card-body opacity-100">
<h5 class="card-title">Projet 2</h5>
<p class="card-text">Description du projet 2</p>
<a href="#" class="btn btn-outline-light">Voir le projet</a>
<h5 class="card-title">E5-ExportGitlab</h5>
<p class="card-text">
L'application simplifie l'exportation des issues d'un projet,
permettant de les télécharger au format PDF.
Le projet a été réalisé pendant ma période de formation à la Direction du Numérique de l'Université de Strasbourg.
</p>
<a href="#" class="btn btn-outline-light">Accéder au projet <img class="icon" src="/arrow.svg" alt=""></a>
<a href="#" class="btn btn-outline-light">Code source <img class="icon icon-gear" src="/gear.svg" alt=""></a>
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
<div class="card bg-dark bg-opacity-50 text-white">
<img class="card-img-top" src="/berserk.png" alt="Card image cap">
<img class="card-img-top" src="/blog.png" alt="Image du projet">
<div class="card-body opacity-100">
<h5 class="card-title">Projet 2</h5>
<p class="card-text">Description du projet 2</p>
<a href="#" class="btn btn-outline-light">Voir le projet</a>
<h5 class="card-title">La chambre à l'heure</h5>
<p class="card-text">
Blog interactif fait avec WordPress, un coin détente pour lire mes articles.
Jy partage mes veilles technologiques, mes analyses d'œuvres,
mes idées de développement ainsi que diverses astuces et conseils.
</p>
<a href="#" class="btn btn-outline-light">Accéder au projet <img class="icon" src="/arrow.svg" alt=""></a>
</div>
</div>
</div>
</div>
<footer class="mt-auto">
<footer>
<div class="container m-5 mx-auto text-center">
<p>© 2025 Orabis</p>
</div>

7
public/arrow.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#ffffff" height="201px" width="201px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-33 -33 396.00 396.00" xml:space="preserve" stroke="#ffffff" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"/> </g>
</svg>

After

Width:  |  Height:  |  Size: 955 B

1
public/behance.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path d="M 1 6.75 L 1 25.25 L 9.9375 25.25 C 10.765625 25.25 16.46875 25.082031 16.46875 19.875 C 16.46875 16.621094 14.230469 15.515625 13.09375 15.1875 C 13.929688 14.792969 15.59375 13.855469 15.59375 11.34375 C 15.59375 9.945313 15.394531 6.75 9.6875 6.75 Z M 21.375 8.46875 L 21.375 10.15625 L 28.28125 10.15625 L 28.28125 8.46875 Z M 5.0625 9.90625 L 8.875 9.90625 C 9.234375 9.90625 11.65625 9.714844 11.65625 12.03125 C 11.65625 14.011719 9.90625 14.21875 9.1875 14.21875 L 5.0625 14.21875 Z M 25 11.6875 C 19.777344 11.6875 18.6875 16.222656 18.6875 18.1875 C 18.6875 24.019531 23.46875 24.6875 25 24.6875 C 29.128906 24.6875 30.300781 22.015625 30.78125 20.53125 L 27.78125 20.53125 C 27.664063 20.914063 26.789063 22.15625 25.125 22.15625 C 22.335938 22.15625 22.09375 19.976563 22.09375 19 L 30.96875 19 C 31.148438 15.625 29.671875 11.6875 25 11.6875 Z M 24.90625 14.21875 C 25.738281 14.21875 26.410156 14.460938 26.8125 14.90625 C 27.214844 15.355469 27.511719 16.011719 27.59375 16.875 L 22.09375 16.875 C 22.109375 16.636719 22.164063 16.363281 22.25 16.0625 C 22.335938 15.753906 22.46875 15.460938 22.6875 15.1875 C 22.90625 14.917969 23.210938 14.683594 23.5625 14.5 C 23.921875 14.3125 24.367188 14.21875 24.90625 14.21875 Z M 5.0625 17 L 9.46875 17 C 10.34375 17 12.40625 17.136719 12.40625 19.65625 C 12.40625 22.097656 9.808594 22.09375 9.40625 22.09375 L 5.0625 22.09375 Z"/></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1002 KiB

BIN
public/blog.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 713 KiB

BIN
public/exportgit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

9
public/gear.svg Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path clip-rule="evenodd" d="m12 2.25c-1.5208 0-2.79833 1.14348-2.96627 2.65494l-.0917.82526c-.01543.13888-.11542.30627-.31935.42432-.20104.11638-.39276.11958-.52314.06246l-.7609-.33338c-1.39293-.61029-3.022-.07562-3.78238 1.2414s-.40889 2.9952.81611 3.8963l.66963.4927c.11406.0839.20801.2529.20801.486s-.09395.4021-.20801.486l-.66963.4927c-1.225.9011-1.57649 2.5793-.81611 3.8963s2.38945 1.8517 3.78238 1.2414l.7609-.3334c.13038-.0571.3221-.0539.52314.0625.20393.118.30392.2854.31935.4243l.0917.8253c.16794 1.5114 1.44547 2.6549 2.96627 2.6549s2.7983-1.1435 2.9663-2.6549l.0917-.8253c.0154-.1389.1154-.3063.3193-.4243.2011-.1164.3928-.1196.5232-.0625l.7609.3334c1.3929.6103 3.022.0756 3.7824-1.2414.7603-1.317.4088-2.9952-.8162-3.8963l-.6696-.4927c-.114-.0839-.208-.2529-.208-.486s.094-.4021.208-.486l.6696-.4927c1.225-.9011 1.5765-2.57928.8162-3.8963-.7604-1.31702-2.3895-1.85169-3.7824-1.2414l-.7609.33337c-.1304.05713-.3221.05393-.5232-.06245-.2039-.11805-.3039-.28544-.3193-.42433l-.0917-.82525c-.168-1.51146-1.4455-2.65494-2.9663-2.65494zm-1.4754 2.82059c.0835-.75181.719-1.32059 1.4754-1.32059s1.3919.56878 1.4755 1.32059l.0917.82525c.0781.70365.5289 1.25021 1.0586 1.55686.5335.30881 1.2296.42166 1.8766.13819l.7609-.33337c.6929-.30357 1.5032-.03762 1.8814.61748s.2034 1.48982-.4059 1.93807l-.6696.49263c-.5691.4186-.8192 1.0794-.8192 1.6943s.2501 1.2757.8192 1.6943l.6696.4926c.6093.4483.7841 1.283.4059 1.9381s-1.1885.921-1.8814.6175l-.7609-.3334c-.647-.2835-1.3431-.1706-1.8766.1382-.5297.3067-.9805.8532-1.0586 1.5569l-.0917.8252c-.0836.7518-.7191 1.3206-1.4755 1.3206s-1.3919-.5688-1.4754-1.3206l-.0917-.8252c-.0782-.7037-.529-1.2502-1.05873-1.5569-.53347-.3088-1.2296-.4217-1.87659-.1382l-.76089.3334c-.69286.3035-1.50317.0376-1.88139-.6175-.37823-.6551-.20339-1.4898.40594-1.9381l.66963-.4926c.56902-.4186.81914-1.0794.81914-1.6943s-.25012-1.2757-.81914-1.6943l-.66963-.49263c-.60933-.44825-.78417-1.28297-.40594-1.93807.37822-.6551 1.18853-.92105 1.88139-.61748l.76089.33337c.64699.28347 1.34312.17062 1.87659-.13819.52973-.30665.98053-.85321 1.05873-1.55685zm.2254 6.92941c0-.6904.5597-1.25 1.25-1.25.6904 0 1.25.5596 1.25 1.25s-.5596 1.25-1.25 1.25c-.6903 0-1.25-.5596-1.25-1.25zm1.25-2.75c-1.5188 0-2.74999 1.2312-2.74999 2.75s1.23119 2.75 2.74999 2.75 2.75-1.2312 2.75-2.75-1.2312-2.75-2.75-2.75z" fill="#ffffff" fill-rule="evenodd"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

1
public/github.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"/></svg>

After

Width:  |  Height:  |  Size: 975 B

BIN
public/stockseekerimage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

1
public/twitter.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/></svg>

After

Width:  |  Height:  |  Size: 404 B

1
public/x.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"/></svg>

After

Width:  |  Height:  |  Size: 298 B

View File

@ -1,6 +1,6 @@
@import "bootstrap/scss/bootstrap";
$primary-color: #3498db;
$secondary-color: #2ecc71;
$secondary-color: #ffffff;
$font-stack: 'Quicksand', sans-serif;
body {
@ -9,4 +9,30 @@ body {
color: #ffffff;
margin: 0;
padding: 0;
}
.social-icon{
width: 50px;
height: auto;
margin: 0 5px;
}
.icon{
width: 20px;
height: auto;
margin-left: 5px;
}
@keyframes infinite-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.btn:hover .icon{
filter: invert(100%) sepia(100%) hue-rotate(180deg);
}
.btn:hover .icon-gear{
animation: infinite-rotate 5s linear infinite;
}