From f197d1dff7bf0d41050e2ec8997b471f3c185562 Mon Sep 17 00:00:00 2001 From: Alexis1663 <92861778+Alexis1663@users.noreply.github.com> Date: Wed, 26 Jun 2024 19:10:56 +0200 Subject: [PATCH] :tada: init: project --- .drone.yml | 29 +++++ .gitignore | 2 + index.html | 282 +++++++++++++++++++++++++++++++++++++++++++ style.css | 349 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 662 insertions(+) create mode 100644 .drone.yml create mode 100644 .gitignore create mode 100644 index.html create mode 100644 style.css diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 0000000..8c77731 --- /dev/null +++ b/.drone.yml @@ -0,0 +1,29 @@ +kind: pipeline +type: docker +name: CD_pipeline + +trigger: + event: + - push + +steps: + - name: docker-build-and-push + image: plugins/docker + settings: + dockerfile: Dockerfile + context: ./ + registry: hub.codefirst.iut.uca.fr + repo: hub.codefirst.iut.uca.fr/alexis.carreau/Portfolio + username: + from_secret: SECRET_REGISTRY_USERNAME + password: + from_secret: SECRET_REGISTRY_PASSWORD + + # container deployment + - name: deploy-container + image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest + environment: + IMAGENAME: hub.codefirst.iut.uca.fr/alexis.carreau/Portfolio:1.0 + CONTAINERNAME: portfolio + COMMAND: create + OVERWRITE: true \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3fe04d5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +assets \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1f2400 --- /dev/null +++ b/index.html @@ -0,0 +1,282 @@ + + + + + + + + + + + Portfolio + + + + +
+
+ + logo + + + +
+
+ + +
+
+
+

Salut, moi c'est Alexis
+ Étudiant en développement web

+
+
+ +
+
+
+ +
+ profile-pic +
+
+ +
+ +
+
+ + +
+
+

A propos

+
+
+
+

Alexis CARREAU,

+

Développeur web en devenir

+
+
+

+ Passionné d'informatique depuis plusieurs années, j'ai pu découvrir ce domaine durant le lycée, grâce au parcours N.S.I. En effet, j'ai pu y découvrir de nombreux secteurs du développement informatique. +

+ J'ai beaucoup apprécié cette spécialité, car elle m'a permis de me donner un ordre d'idée du secteur dans lequel je pourrai m'orienter durant mes études supérieures. Je me suis donc orienté dans un BUT Informatique à l'IUT de Clermont-Ferrand. Puis pendant deux années supplémentaires en Mastère informatique à l'école Hexagone situé également à Clermont-Ferrand. Cette fois-ci, je me spécialise un peu en me tournant vers la filière "Architecture des Systèmes d'information". +

+ Pour ce qui est de mes hobbies et de mes passions, j'aime beaucoup le sport. Notamment, la musculation en salle de sport et la boxe thaïlandaise. Je m'intéresse également de plus en plus à l'automobile. +

+
+
+
+ + +
+
+
+

1+

+

année d'expérience

+
+
+

20+

+

projets web terminé

+
+
+

3+

+

années d'études

+
+
+
+ + +
+
+

Projets

+
+ +
+
+
+
+

SAÉ (projet de groupe)

+

Jeu de quiz

+
+
+

Product Deign 2022

+
+
+
+ +
+
+
+

02. Webflow Awwwards Team

+

Runner Up - Webflow Expert Design

+
+
+

Development 2021

+
+
+
+ +
+
+
+

03. Webflow Awwwards Team

+

Runner Up - Webflow Expert Design

+
+
+

Branding 2021

+
+
+
+ +
+
+
+

04. Webflow Awwwards Team

+

Runner Up - Webflow Expert Design

+
+
+

Graphic Design 2019

+
+
+
+ +
+ + +
+ +
+ + +
+ +
+

Savoir-faire

+
+ +
+
+
+
+

Web Design

+

Every single project is a challenge that we accept eagerly. Let’s implement innovative + ideas together!

+
+
+
+
+

Product Design

+

Every single project is a challenge that we accept eagerly. Let’s implement innovative + ideas together!

+
+
+
+ +
+
+
+

UI/UX Design

+

Every single project is a challenge that we accept eagerly. Let’s implement innovative + ideas together!

+
+
+
+
+

Art Direction

+

Every single project is a challenge that we accept eagerly. Let’s implement innovative + ideas together!

+
+
+
+
+
+
+ + +
+ +
+

Me contacter

+
+ +
+
+
+ +
+
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+ + + + +
+

© Made by Alexis CARREAU

+ +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ede4819 --- /dev/null +++ b/style.css @@ -0,0 +1,349 @@ +::selection { + background: #ffbfb5; +} + +body { + font-family: "Bai Jamjuree", sans-serif; + background-color: #f2f1ef; + color: #161513; + overflow-x: hidden; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Bai Jamjuree", sans-serif; + font-weight: 600; +} + +h1 { + font-size: 3.5rem; +} + +.main-h1 { + margin-top: 50px; +} + +h2 { + font-size: 2.75rem; +} + +h3 { + font-size: 2.25rem; +} + +h4 { + font-size: 1.75rem; +} + +h5 { + font-size: 1.5rem; +} + +h6 { + font-size: 1.25rem; +} + +ul > li > a:hover { + text-decoration: underline; +} + +.nav-link { + font-weight: 600; + color: #161513; +} + +.nav-link:hover { + color: #e94d35; +} + +.profile-pic { + width: 45rem; + margin: -35% 0 0 0; + pointer-events: none; +} + +.newsletter { + display: flex; + justify-content: center; + gap: 1em; + padding-top: 1em; +} +.icon-color { + color: #e94d35; +} + +.btn-color { + color: #f2f1ef; + font-weight: 600; + background-color: #e94d35; +} + +#sub-title { + color: #e94d35; + font-size: 0.75rem; +} + +.container { + margin-bottom: 4rem; +} + +#home { + position: sticky; + top: 0; + z-index: 1000; + background: #FFFFFF; +} + +.demo-effect { + background-color: #f2f1ef; +} + +.demo-effect:hover { + background-color: #161513; + color: #f2f1ef; +} + +.outer-img2 { + position: absolute; + pointer-events: none; +} + +.outer-img1 { + position: absolute; + pointer-events: none; +} + +.inner-img1 { + font-size: 36rem; + color: #f2f1ef; + position: relative; + float: right; + right: -950px; + top: -300px; + transform: rotate(10deg); + -webkit-text-stroke: 1px #e94d35; + z-index: -100; +} + +.inner-img2 { + font-size: 32rem; + color: #f2f1ef; + position: relative; + float: left; + right: 350px; + top: -300px; + transform: rotate(110deg); + -webkit-text-stroke: 1px #e94d35; + z-index: -100; +} + +.git-container { + height: 450px; +} + +.ston { + margin-top: -5rem; + padding: 3rem; + background-color: #e6e3de; + height: 150px; +} + +.footer { + background-color: #161513; + height: 300px; + color: #e6e3de; +} + +.footer > .container > .icon-color { + color: #e6e3de; + padding: 1rem; + border-radius: 50%; +} + +.copy-tag { + padding-top: 20px; +} + +.footer-link { + padding-right: 2rem; +} + +.footer-link-no { + margin-top: 1.25rem; + cursor: pointer; +} + +.footer-link-no:hover { + color: #e94d35; +} + +.social-icon { + background-color: #161513; + padding: 1rem; + border: 2px solid #e94d35; + border-radius: 50%; + margin: 5px; +} + +.footer-icon { + padding-top: 150px; + margin-right: -10px; +} + +.social-icon:hover { + background-color: #e6e3de; + color: #e94d35; +} + +.animation { + transform: rotate(0deg); + animation-iteration-count: infinite; + animation-duration: 2s; + animation-name: example; + animation-timing-function: linear; +} + +@keyframes example { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.animation1 { + transform: rotate(0deg); + animation-iteration-count: infinite; + animation-duration: 10s; + animation-name: example1; + animation-timing-function: linear; +} + +@keyframes example1 { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@media screen and (max-width: 1000px) { + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.25rem; + } + + .profile-pic { + width: 30rem; + } + + .main-h1 { + margin: 0; + } + + .ston { + text-align: center; + display: inline; + padding: 0; + margin: 0; + } + + .inner-img1 { + right: -30rem; + top: -18rem; + } +} + +@media screen and (max-width: 720px) { + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.75rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1rem; + } + + .profile-pic { + width: 34rem; + } + + .ston { + text-align: center; + display: inline; + padding: 0; + margin: 0; + } + + .demo22 { + padding-top: 1.5rem; + } +} + +@media screen and (max-width: 575px) { + h1 { + font-size: 3rem; + } + + .profile-pic { + display: none; + } + + .inner-img1 { + font-size: 20rem; + right: -12rem; + top: -2.5rem; + } + + .inner-img2 { + font-size: 20rem; + right: 12.5rem; + top: 0rem; + } +} + +.gradient-start, .gradient-end { + position: relative; +} + +.gradient-start::after { + content: ""; + position: absolute; + bottom: -50px; /* Ajustez cette valeur pour contrôler la hauteur du chevauchement */ + left: 0; + width: 100%; + height: 300px; /* Ajustez cette valeur pour contrôler la hauteur du dégradé */ + background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); + pointer-events: none; +} + +.textarea { + resize: none; +} +