diff --git a/.drone.yml b/.drone.yml index a534737..2556b66 100644 --- a/.drone.yml +++ b/.drone.yml @@ -7,31 +7,32 @@ trigger: - push steps: - - name: code-analysis - image: aosapps/drone-sonar-plugin - settings: - sonar_host: - from_secret: sonar_host - sonar_token: - from_secret: sonar_token + + # - name: code-analysis + # image: aosapps/drone-sonar-plugin + # settings: + # sonar_host: + # from_secret: sonar_host + # sonar_token: + # from_secret: sonar_token_pifolio - name: docker-build-and-push image: plugins/docker settings: - dockerfile: docker/Dockerfile - context: . - registry: hub.codefirst.iut.uca.fr - mirror: https://proxy.iut.uca.fr:8443 - repo: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira - username: - from_secret: SECRET_REGISTRY_USERNAME - password: - from_secret: SECRET_REGISTRY_PASSWORD + dockerfile: docker/Dockerfile + context: . + registry: hub.codefirst.iut.uca.fr + mirror: https://proxy.iut.uca.fr:8443 + repo: hub.codefirst.iut.uca.fr/pierre.ferreira/portfolio-pierreferreira + username: + from_secret: SECRET_REGISTRY_USERNAME + password: + from_secret: SECRET_REGISTRY_PASSWORD - name: deploy-container image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest environment: - IMAGENAME: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira:latest - CONTAINERNAME: Portfolio-PierreFerreira - COMMAND: create - OVERWRITE: true + IMAGENAME: hub.codefirst.iut.uca.fr/pierre.ferreira/portfolio-pierreferreira:latest + CONTAINERNAME: portfolio-pierreferreira + COMMAND: create + OVERWRITE: true diff --git a/README.md b/README.md index 4d8eb54..2469c80 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,8 @@ # Portfolio-PierreFerreira ### :construction: -work in progress \ No newline at end of file +work in progress + +:warning: **Tant qu'il n'y a pas de redirection sur le lien, il faut ajouter un ``/`` au lien du runner ! (*sinon, on n'a pas de style...*)** + +```https://codefirst.iut.uca.fr/containers/pierreferreira-portfolio-pierreferreira/``` diff --git a/Porte-folio.html b/index.html similarity index 60% rename from Porte-folio.html rename to index.html index b2543a9..918414f 100644 --- a/Porte-folio.html +++ b/index.html @@ -1,252 +1,296 @@ - - - - - - Mon Portefolio - - - - - -
-
-
-
-

Pierre FerreiraDéveloppeur

-
-
-
-
- - -
-
- - - -
-
- -
-

À propos de moi

-

Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.

-
-
-
-
-

Développeur
Web

-
-
-

Card Hover

-

- Lorem ipsum dolor sit amet, consectetur adipii - voluptas ten mollitia pariatur odit, ab - minus ratione adipisci accusamus vel est excepturi laboriosam magnam - necessitatibus dignissimos molestias. -

-
-
-
-
-
-
-

Développeur
Mobile

-
-
-

Card Hover

-

- Lorem ipsum dolor sit amet, consectetur adipii - voluptas ten mollitia pariatur odit, ab - minus ratione adipisci accusamus vel est excepturi laboriosam magnam - necessitatibus dignissimos molestias. -

-
-
-
-
-
-
-

Apprenti
Pixel-Artist

-
-
-

Card Hover

-

- Lorem ipsum dolor sit amet, consectetur adipii - voluptas ten mollitia pariatur odit, ab - minus ratione adipisci accusamus vel est excepturi laboriosam magnam - necessitatibus dignissimos molestias. -

-
-
-
-
-
- - -
-

Mon parcours

-
-
-
-
-
-
-

Collège

-

Lorem Ipsum

-
-
-

Lycée

-

Lorem Ipsum

-
-
-
-
- -
-
- -
-
-
-
-

BUT informatique

-

Lorem Ipsum

-
-
-
- -
-
-
- - -
- -
-

Projets

-
-
-

Art e-Show

-

Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu : - - Plus d'infos -

-
-

Spelltastic

-

Description du projet 2.

- -
-
-

Cryptid

-

Description du projet 3.

- -
-
-
- -
-

Contact

- -
- -
- - - - - - - - - - - -
- -
-
- - -
- -
- - -
- -
- - -
- -
- -
- - -
- -
- -
- -
-
-
- - - - - - - - + + + + + + Pifolio + + + + + + +
+
+
+
+

Pierre FerreiraDéveloppeur

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

À propos de moi

+

Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.

+

Centres d'intéret

+
+
+
+
+ Cyclisme +

Cyclisme

+
+
+

Cyclisme

+

+ Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir. + J'aime me balader en montagne et découvrir de nouveaux paysages. + Ou tout simplement me deplacer en vélo. +

+
+
+
+
+
+
+ Musculation +

Musculation

+
+
+

Musculation

+

+ Cela va faire maintenant 1 ans que je pratique la musculation. + Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps. + C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction. +

+
+
+
+
+
+
+ Slime +

Pixel-Artist

+
+
+

Pixel-Artist

+

+ Lorem ipsum dolor sit amet, consectetur adipii + voluptas ten mollitia pariatur odit, ab + minus ratione adipisci accusamus vel est excepturi laboriosam magnam + necessitatibus dignissimos molestias. +

+
+
+
+
+
+ + +
+

Mon parcours

+
+
+
+
+
+
+

Collège

+

Lorem Ipsum

+
+
+

Lycée

+

Lorem Ipsum

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

BUT informatique

+

Lorem Ipsum

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

Projets

+
+
+

Art e-Show

+

Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu : + Plus d'infos +

+
+

Spelltastic

+

Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.

+ Plus d'infos +
+
+

SocialGraph

+

Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !

+ Plus d'infos +
+
+
+ +
+

Contact

+ +
+ +
+ + + + + + + + + + + +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ +
+
+
+ + + + + + + + + diff --git a/logo/cyclisme.png b/logo/cyclisme.png new file mode 100644 index 0000000..6e10407 Binary files /dev/null and b/logo/cyclisme.png differ diff --git a/logo/muscu.png b/logo/muscu.png new file mode 100644 index 0000000..dc81a3c Binary files /dev/null and b/logo/muscu.png differ diff --git a/logo/slime.png b/logo/slime.png new file mode 100644 index 0000000..7334d0b Binary files /dev/null and b/logo/slime.png differ diff --git a/styles.css b/styles.css index db7cdf6..8ef2d88 100644 --- a/styles.css +++ b/styles.css @@ -13,6 +13,12 @@ html { --Secondary: #900C3F; --Tertiary: #C70039; --Quaternary: #250F1E; + /**BG**/ + --BackgroundLight: #f4f4f4; + --TextLight: #333; + + --BackgroundDark: #1e1e1e; + --TextDark: #f4f4f4; } body { @@ -21,6 +27,10 @@ body { background-color: #f4f4f4; color: #333; } +body.dark-mode { + background-color: var(--BackgroundDark); + color: var(--TextDark); +} .accueil{ background-color: #b5d2fc @@ -38,6 +48,10 @@ header { color: white; } +/* header.dark-mode { + background: url('img/accueil_dark.jpeg') no-repeat center center; +} */ + .header-content { position: relative; z-index: 2; @@ -103,6 +117,10 @@ background-color:#f8f8f8; .topnav { background-color: #333; overflow: hidden; + position: sticky; + top: 0; + width: 100%; + z-index: 1000; } /* Style the links inside the navigation bar */ @@ -127,6 +145,45 @@ background-color:#f8f8f8; color: white; } +/** Switch Dark Mode*/ +.toggle { + background-color: #1e1e1e; + width: 56px; + height: 56px; + border-radius: 50%; + display: grid; + place-items: center; + cursor: pointer; + box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1); + line-height: 1; +} + +.input { + display: none; +} + +.icon { + grid-column: 1 / 1; + grid-row: 1 / 1; + transition: transform 500ms; +} + +.icon--moon { + transition-delay: 200ms; +} + +.icon--sun { + transform: scale(0); +} + +#theme-toggle:checked + .icon--moon { + transform: rotate(360deg) scale(0); +} + +#theme-toggle:checked ~ .icon--sun { + transition-delay: 200ms; + transform: scale(1) rotate(360deg); +} /* .header-content { max-width: 600px; margin: 0 auto; @@ -180,8 +237,9 @@ background-color:#f8f8f8; width: 100%; height: 100%; display: flex; - align-items: center; + flex-direction: column; justify-content: center; + align-items: center; transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) } @@ -330,6 +388,13 @@ opacity: 0; margin-bottom: 1em; } +.text-title { + margin-top: 1em; + color: var(--Secondary); + font: bolder; + font-size: 1.5em; +} + .project-card-button { transform: translate(-50%, 125%); width: 60%;