diff --git a/html/index.html b/html/index.html deleted file mode 100644 index 725df3c..0000000 --- a/html/index.html +++ /dev/null @@ -1,182 +0,0 @@ - - - - - - - My Website - - - - - -
-

Random Sentence

- -
-
- -
-
-

Hello ! I'm

-

AI enthousiast

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

Looking for something ?

-

Hello World

 -
-
- -
-
-

Thanks for coming !

-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Aenean nec ante tristique, tincidunt dolor a, maximus nisl. - Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim. - Etiam tincidunt mauris quis elit egestas, vel viverra justo - efficitur. Nulla facilisi. Cras porttitor odio a massa pretium - varius. Vivamus felis risus, luctus vel mollis nec, lacinia non - libero. Proin mattis, ante vitae mattis sollicitudin, turpis - erat auctor arcu, vel fringilla arcu diam aliquam urna. -

-
-
-
-
- -
-
- -
-
-

Titre de la catégorie.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis - lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id - porttitor erat, vitae dapibus velit. Praesent id felis tincidunt, - efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt, - suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor. - Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam. - Aenean faucibus neque id nibh facilisis auctor.

-
- -
-
- -
-
-

Titre de la catégorie.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis - lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id - porttitor erat, vitae dapibus velit. Praesent id felis tincidunt, - efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt, - suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor. - Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam. - Aenean faucibus neque id nibh facilisis auctor.

-
- -
-
- -
-
- -
-
-

Looking for something ?

-

Hello World

 -
-
- -
-
-

Les projets que j'ai déjà fait

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis - lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id - porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.

-
- -
- -
-
- -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Proin felis lectus, feugiat in eros sit amet, venenatis euismod - urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent - id felis tincidunt,

-
- -
-
- -
-
- - - - - diff --git a/html/style.css b/html/style.css deleted file mode 100644 index 76750c0..0000000 --- a/html/style.css +++ /dev/null @@ -1,381 +0,0 @@ -* { - overflow-y: hidden; - overflow-x: hidden; -} -html, body{ - background-color: #1E1E1E; - margin: 0; - overflow-x: hidden; - overflow-y: scroll !important; -} - -h1,h2,h3,h4,h5,p{ - color: #EAEAEA; - /*Family Roboto or Atma ?*/ -} - -a{ - text-decoration: none; -} -a:visited{ - color: #EAEAEA; - text-decoration: none; -} - -.test{ - border: red dotted 2px; -} - -.button{ - padding-left: 8px; - padding-right: 8px; - padding-top: 5px; - padding-bottom: 5px; - border: none; - border-radius: 6px; - cursor: pointer; - text-align: center; -} - -#welcome_div{ - width: 100vw; - height: 100vh; - margin: 0; -} - -#random_citation{ - position: absolute; - top: 180px; - left: 65%; - font-size: 2em; - transform:rotate(15deg); -} - -#name_div{ - margin-top: 10%; - margin-left: 15%; - height: fit-content; - width: fit-content; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#profile_picture{ - width: 300px; - height: 300px; -} -#profile_picture img{ - border-radius: 50%; -} - -#name_div_right_container{ - display: flex; - flex-direction: column; - height: fit-content; -} -#welcome_text_div{ - height: 100%; - width: fit-content; -} -#welcome_text_div h1{ - margin-top: 100px; -} - -#social_networks{ - height: fit-content; - display: flex; - flex-direction: row; -} -.network{ - height: 50px; - width: 50px; - margin-left: 15px; -} -.network img{ - border-radius: 50%; -} - -.intersection_div{ - width: 100vw; - height: 150px; - background-color: #D9D9D9; -} -.intersection_content{ - width: 90%; - margin: auto; - display: flex; - align-items: center; - flex-direction: row; - height: 100%; -} -.intersection_content h2{ - color: #1E1E1E !important; -} -.intersection_button_div{ - margin-left: 30px; - background-color: #A58181; - height: 2.5em; - width: fit-content; - padding-left: 15px; - padding-right: 15px; - border-radius: 8px; - cursor: pointer; -} -.intersection_button_div p{ - margin: 0; - margin-top: 0.75em; /* Half of parent height - Half of font size : 1.25 - 0.75*/ - transform: translateY(-50%); - font-size: 1.5em; - text-decoration: none; - color: black; -} - -#presentation_div{ - width: 80vw; - margin: auto; - margin-top: 40px; - height: fit-content; - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding-bottom: 25px; - border-bottom: 2px solid #EAEAEA; -} -#presentation_text{ - width: calc( 55% - 30px ); - margin-left: 30px; -} -#presentation_text h1{ - width: fit-content; - margin:auto; - margin-top: 5px; -} -#presentation_text article p{ - width: fit-content; - margin:auto; - margin-top: 20px; -} -#presentation_img{ - width: fit-content; - width: 40%; - min-width: 500px; -} -#presentation_img{ - margin-left: auto; - margin-top: 20px; -} - -.feature_div{ - width: 75%; - margin: auto; - margin-top: 40px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - gap: 6%; -} -.feature_img_div{ - width: 40%; - flex: 1; - min-width: 300px; -} -.feature_img_div img{ - height: 100%; - width: 100%; -} -.feature_text_div{ - width: 40%; - flex: 1; - min-width: 300px; -} -.feature_text_div h2{ - margin-bottom: 5px; -} -.feature_text_div article p{ - margin-top: 20px; -} -.feature_button{ - background-color: aqua; - font-size: 1.3em; -} - -#projects_summary{ - border: 4px dotted red; - width: 80%; - margin: auto; - margin-top: 30px; -} -#projects_summary_text h1{ - margin-top: 0; - margin-bottom: 20px; - text-align: center; -} -#projects_summary_text p{ - margin-top: 0; - margin-bottom: 20px; - text-align: center; -} -#projects_holder{ - width: 90%; - margin: auto; - margin-top: 15px; - border: 4px dotted green; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - gap: 20px; -} -.project{ - max-width: 400px; - max-height: 600px; - width: 100%; - height: 100%; - background-color: #2c2b2b; - border-radius: 8px; - border: 2px #EAEAEA solid; -} -.project_picture{ - height: 200px; - width: 95%; - margin: auto; - margin-top: 10px; -} -.project_picture img{ - width: 100%; - height: 100%; -} -.project_description{ - width: 90%; - margin: auto; - font-size: 1.1em; - margin-bottom: 20px; -} -.project_button{ - background-color: rgb(65, 185, 61); - font-size: 1.1em; -} - -footer{ - background-color: #2c2b2b; - margin-top: 50px; - border-top: #EAEAEA 2px solid; - height: fit-content; - position: relative; /* So img can be absolute */ -} -#footer_content{ - width: 80%; - margin: auto; - margin-top: 20px; - margin-bottom: 20px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - - gap: 30px; -} - -#footer_content h1{ - font-size: 1.8em; - width: 100%; - margin: 0; - margin-bottom: 4px; - height: fit-content; -} - -#footer_social_networks{ - width: 15%; - min-width: 200px; - border: 2px rgb(16, 207, 102) dotted; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: flex-start; -} -.footer_social_network_item{ - width: 50px; - height: 50px; - margin: 0; - margin-right: 20px; - margin-top: 10px; -} -.footer_social_network_item img{ - border-radius: 50%; - width: 100%; - height: 100%; -} - -#footer_content_links{ - display: flex; - flex-direction: row; - width: 25%; - min-width: 250px; - flex-wrap: wrap; - border: 2px rgb(212, 15, 230) dotted; - align-content: flex-start; -} -.footer_links_box{ - border: 3px blue dotted; - width: fit-content; - margin-right: 20px; - margin-bottom: 15px; -} -.footer_links_box_title{ - font-size: 1.4em; - border-bottom: rgb(179, 72, 122) 2px solid; - margin: 0; - margin-bottom: 2px; - margin-top: 2px; -} -.footer_links_box ul{ - text-decoration: none; - padding: 0; - margin: 0; - margin-top: 4px; -} -.footer_links_box li p{ - margin: 0; - font-size: 1.2em; - text-decoration: none; - margin-bottom: 2px; -} - -#footer_contact_div{ - border: rgb(82, 15, 170) 2px solid; - width: 15%; - min-width: 160px; -} -#footer_contact_div h1{ - width: fit-content !important; - margin: auto; - margin-bottom: 0; -} -#footer_contact_div p{ - margin-top: 10px; - margin-bottom: 12px; - text-align: center; -} -#footer_contact_button{ - background-color: rgb(65, 185, 61); - font-size: 1.1em; - width: 50%; - margin: auto; -} - -#footer_little_text{ - font-size: 0.8em; - margin: 0; - margin-left: 20px; -} -#footer_picture{ - width: 100px; - height: 100px; - margin-left: auto; - border: 2px green dotted; -} -#footer_picture img{ - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/index.html b/index.html index b19040a..b24ddec 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,7 @@ Vite App - -
+ diff --git a/src/App.vue b/src/App.vue index e864195..369316c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,175 @@ diff --git a/src/assets/base.css b/src/assets/base.css index 8816868..c9efb38 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,86 +1,10 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +* { + overflow-y: hidden; + overflow-x: hidden; } - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; +html, body{ + background-color: #1E1E1E; margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} + overflow-x: hidden; + overflow-y: scroll !important; +} \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..2bf0221 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,29 @@ @import './base.css'; -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; +h1,h2,h3,h4,h5,p{ + color: #EAEAEA; + /*Family Roboto or Atma ?*/ } -a, -.green { +a{ + text-decoration: none; +} +a:visited{ + color: #EAEAEA; text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +.test{ + border: red dotted 2px; } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} +.button{ + padding-left: 8px; + padding-right: 8px; + padding-top: 5px; + padding-bottom: 5px; + border: none; + border-radius: 6px; + cursor: pointer; + text-align: center; +} \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index eff59f1..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index f3ad467..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index ac366d0..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/home/feature.vue b/src/components/home/feature.vue new file mode 100644 index 0000000..61c7235 --- /dev/null +++ b/src/components/home/feature.vue @@ -0,0 +1,83 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/intersection.vue b/src/components/home/intersection.vue new file mode 100644 index 0000000..2722afe --- /dev/null +++ b/src/components/home/intersection.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/presentation.vue b/src/components/home/presentation.vue new file mode 100644 index 0000000..ca43f33 --- /dev/null +++ b/src/components/home/presentation.vue @@ -0,0 +1,63 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/projects.vue b/src/components/home/projects.vue new file mode 100644 index 0000000..e6b272c --- /dev/null +++ b/src/components/home/projects.vue @@ -0,0 +1,94 @@ + + + + + \ No newline at end of file diff --git a/src/components/home/welcome.vue b/src/components/home/welcome.vue new file mode 100644 index 0000000..c67c5b5 --- /dev/null +++ b/src/components/home/welcome.vue @@ -0,0 +1,97 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6bb706f..b8038ea 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,190 @@ + +