-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
home page ordi done miss description card and tablet responsive
- Loading branch information
1 parent
4fc7ab5
commit 52e35c2
Showing
1 changed file
with
36 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,59 +8,54 @@ | |
| <title>My Portfolio</title> | ||
| </head> | ||
|
|
||
| <body class="overflow-x-hidden background-body" id="transition-animation" onload="applyLanguagePreference()"> | ||
| <section class="fr snap-y snap-mandatory h-screen"> | ||
| <ul class="flex justify-end space-x-4 text-color-section"> | ||
| <li class="lang-switch mt-8 mr-8"><a href="#" data-lang="en">Switch to English</a></li> | ||
| </ul> | ||
| <div class="grid grid-cols-1 mt-24 md:grid-cols-2 lg:mt-0 lg:mb-8 gap-4 h-full"> | ||
| <div class="w-full lg:mt-[30%] md:mt-[140%] sm:mt-[60%] lg:ml-24 h-[80%]"> | ||
| <div class="animation-container"> | ||
| <canvas id="canvas"> | ||
| </canvas> | ||
| </div> | ||
| <body class="overflow-x-hidden" id="transition-animation" onload="applyLanguagePreference()"> | ||
| <section class="fr snap-y snap-mandatory background-body"> | ||
| <div class="h-full"> | ||
| <ul class="flex justify-end space-x-4 text-color-section"> | ||
| <li class="lang-switch mt-8 mr-8"><a href="#" data-lang="en">Switch to English</a></li> | ||
| </ul> | ||
| <div class="grid grid-cols-1 mt-24 md:grid-cols-2 lg:mt-0 lg:mb-8 gap-4 h-full"> | ||
| <div class="w-full lg:mt-[30%] md:mt-[140%] sm:mt-[60%] lg:ml-24 h-[80%]"> | ||
| <!-- <div class="animation-container"> | ||
| <canvas id="canvas"> | ||
| </canvas> | ||
| </div> --> | ||
|
|
||
| <div class="flex ml-12 md:ml-16 lg:ml-16"> | ||
| <p class="lg:text-[24px] md:text-[18px] text-color-section mr-2">ALEXANDRE</p> | ||
| <p class="lg:text-[24px] md:text-[18px] text-color-section">ARTUS</p> | ||
| <div class="flex ml-12 md:ml-16 lg:ml-16"> | ||
| <p class="lg:text-[24px] md:text-[18px] text-color-section mr-2">ALEXANDRE</p> | ||
| <p class="lg:text-[24px] md:text-[18px] text-color-section">ARTUS</p> | ||
| </div> | ||
| <hr class="border-t background-text-color h-[2px] w-[40%] ml-12 md:ml-16 lg:ml-16 md:mt-2 lg:mt-2 mb-4"> | ||
| <h4 class="pres text-[18px] font-manrope-ultra-light font-bold text-color-section pr-4 ml-12 md:pr-32 lg:mt-8 lg:ml-16 md:mt-8 md:ml-16">Developpeur web full stack<br>Design et intégration de sites internet</h4> | ||
| </div> | ||
| <hr class="border-t background-text-color h-[2px] w-[40%] ml-12 md:ml-16 lg:ml-16 md:mt-2 lg:mt-2 mb-4"> | ||
| <h4 class="pres text-[18px] font-manrope-ultra-light font-bold text-color-section pr-4 ml-12 md:pr-32 lg:mt-8 lg:ml-16 md:mt-8 md:ml-16">Developpeur web full stack<br>Design et intégration de sites internet</h4> | ||
| <ul class="text-color-section text-lg font-manrope-ultra-light flex flex-col justify-center mb-96 gap-y-4 ml-12 md:gap-y-12 lg:leading-0 lg:gap-y-12 h-[60%] md:h-[80%] md:mr-12"> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="workadventure.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Workadventure</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="surf-course.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">The Surf Course</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="tudo-bem-maman.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">Tudo Bem Maman</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="portfolio.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Portfolio</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="surfmate.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">SurfMate</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="others-projects.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">Others Projects</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="contact.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
| <ul class="text-color-section text-lg font-manrope-ultra-light flex flex-col justify-center mb-96 gap-y-4 ml-12 md:gap-y-12 lg:leading-0 lg:gap-y-12 h-[60%] md:h-[80%] md:mr-12"> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="workadventure.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Workadventure</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="surf-course.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">The Surf Course</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="tudo-bem-maman.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">Tudo Bem Maman</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="portfolio.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Portfolio</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="surfmate.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">SurfMate</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="others-projects.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px] line-height-responsive" id="transition-link">Others Projects</a></li> | ||
| <li class="transition-transform hover:translate-x-4 letter-by-letter"><a href="contact.html" class="font-butler transition-transform transform hover:italic font-medium text-[38px] md:text-[54px] lg:text-[80px]" id="transition-link">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Schema portfolio | ||
| 1. Menu | ||
| 2. Présentation | ||
| 3. Compétences | ||
| 4. Projets | ||
| 5. Footer avec get in touch | ||
| --> | ||
| <div class="menu-bar-when-scroll"></div> | ||
|
|
||
| <!--Animation d'une potentiel nav bar--> | ||
| <!-- <div class="menu-bar-when-scroll"></div> --> | ||
|
|
||
| <div class="presentation background-color text-color-main mt-[-128px] w-full"> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16">Qui suis je ?</p> | ||
| <hr class="border-t w-[45%] md:w-[28%] mb-16 mx-auto background-color-section underline-animation"> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4"> | ||
| <div class="flex justify-center mt-8"> | ||
| <img src="images/profile-picture.jpg" alt="Alexandre Artus" class="w-[80%] rounded"> | ||
| <img src="images/profile-picture.jpg" alt="Alexandre Artus" class="w-[80%] lg:w-[60%] rounded"> | ||
| </div> | ||
| <div class="flex flex-col mt-8 w-[80%] mx-auto"> | ||
| <p class="font-butler font-medium text-[28px] md:text-[48px] lg:text-[72px] text-center mb-8">Un développeur web passionné</p> | ||
| <div class="flex flex-col mt-8 w-[80%] mx-auto lg:my-auto"> | ||
| <p class="font-butler font-medium text-[28px] md:text-[48px] lg:text-[52px] text-center mb-8">Un développeur web passionné</p> | ||
| <p class="text-color-main font-manrope-ultra-light">Développeur web full stack. J'ai d'abord effectué un Master en communication pour ensuite suivre ma voix dans le développement web. <br><br>J'ai depuis travaillé sur de nombreux projets personnels mais aussi professionnels du design à l'intégration web. </p> | ||
| </div> | ||
| </div> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16 mt-12">Mes compétences</p> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16 mt-12 lg:mt-24">Mes compétences</p> | ||
| <hr class="border-t w-[70%] md:w-[40%] mb-24 mx-auto background-color-section underline-animation"> | ||
| <div class="grid grid-rows-3 gap-4 md:grid-cols-3 md:grid-rows-none w-[80%] mx-auto"> | ||
| <div class="w-full mx-auto rounded-full background-body h-full"> | ||
|
|
@@ -136,9 +131,9 @@ <h4 class="pres text-[18px] font-manrope-ultra-light font-bold text-color-sectio | |
| </div> | ||
| </div> | ||
| </div> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16 mt-12">Mes projets</p> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16 mt-12 lg:mt-24">Mes projets</p> | ||
| <hr class="border-t w-[45%] md:w-[27%] mb-24 mx-auto background-color-section underline-animation"> | ||
| <div class="grid grid-rows-3 gap-12 md:grid-cols-3 md:grid-rows-none w-4/5 mx-auto"> | ||
| <div class="grid grid-rows-3 gap-12 lg:gap-24 md:grid-cols-3 md:grid-rows-none w-4/5 mx-auto"> | ||
| <div class="card w-full mx-auto h-[300px] relative"> | ||
| <div class="card-inner w-full h-full"> | ||
| <div class="card-front background-body flex items-center justify-center"> | ||
|
|
@@ -226,7 +221,7 @@ <h4 class="pres text-[18px] font-manrope-ultra-light font-bold text-color-sectio | |
| </div> | ||
| </div> | ||
| <!-- <hr class="border-t w-[50%] mt-24 mb-4 mx-auto background-body"> --> | ||
| <div class="background-color mb-24"> | ||
| <div class="background-color lg:pt-24"> | ||
| <p class="flex justify-center font-butler font-medium text-[38px] md:text-[54px] lg:text-[80px] pt-16 mb-8 text-color-main">Get in touch</p> | ||
| <script type="module"> | ||
| import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'; | ||
|
|
||