diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/css/style.css b/css/style.css index ff3be4f..11800d7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,111 +1,301 @@ /* GENERICS */ -body { max-width: 1280px; margin: 0 auto; padding: 0; font-family: "Avenir Next", sans-serif; } +body{ max-width: 1280px; margin: 0 auto 50px auto; padding: 0; background: #282828; font-family: "Avenir Next", sans-serif; } .pointer{ cursor: pointer; } +h1{ + font-weight: initial; + margin: 0; +} +h2{ + font-weight: 600; + font-size: 30px; + margin: 20px 0; +} + +.main-bg{ + position: relative; + background: rgba(86,97,151,1); + background: -moz-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(86,97,151,1)), color-stop(20%, rgba(86,97,151,1)), color-stop(21%, rgba(103,115,177,0)), color-stop(100%, rgba(103,115,177,0))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%); + background-size: 6px 6px; + background-position-x: 3px; + background-position-y: 3px; +} + +.main-bg:before{ + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + top: 0; + background: rgba(86,97,151,1); + background: -moz-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(86,97,151,1)), color-stop(20%, rgba(86,97,151,1)), color-stop(21%, rgba(103,115,177,1)), color-stop(100%, rgba(103,115,177,1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%); + background-size: 6px 6px; + z-index: -1; +} + +.secondary-bg{ + background: #232424; + background: -moz-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(35,36,36,1)), color-stop(20%, rgba(35,36,36,1)), color-stop(21%, rgba(50,50,50,0)), color-stop(100%, rgba(50,50,50,0))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%); + background: radial-gradient(ellipse at center, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232424', endColorstr='#323232', GradientType=1 ); + background-position-x: 3px; + background-position-y: 3px; + background-size: 6px 6px; +} + +.secondary-bg:before{ + content: ''; + position: absolute; + left: 0px; + top: 0px; + right: 0; + bottom: 0; + background: rgba(35,36,36,1); + background: -moz-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(35,36,36,1)), color-stop(20%, rgba(35,36,36,1)), color-stop(21%, rgba(50,50,50,1)), color-stop(100%, rgba(50,50,50,1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%); + background: radial-gradient(ellipse at center, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232424', endColorstr='#323232', GradientType=1 ); + background-size: 6px 6px; + z-index: -1; +} + /* END GENERICS */ -#main-container { +#main-container{ display: grid; grid-template-columns: 400px auto; grid-template-rows: 80px auto auto auto auto 150px; grid-template-areas: "header header" - "photo main" - "contact main" + "me main" + "summary-contact main" "skills main" - ". main" + "filler main" "footer footer"; - align-items: start; - align-content: stretch; } -#sub-container { +#filler{ + grid-area: filler; + align-self: stretch; + height: 100%; +} + +#sub-container{ grid-area: main; display: grid; + background: white; grid-template-columns: auto; grid-template-rows: auto auto; grid-template-areas: - "summary" + "experiences" "experiences"; + height: 100%; + z-index: -3; } - -#skills { - grid-area: skills; - height: 600px; -} - -#summary { - background: #f9f9ff; - grid-area: summary; - padding: 40px; - font-size: 25px; - line-height: 35px; -} - -#experiences { - background: violet; - grid-area: experiences; - height: 1500px; -} - -footer { - background: cyan; - grid-area: footer; - height: 150px; +#sub-container h2 { + font-size: 40px; + font-weight: 700; + color: #343434; } /* HEADER */ -header { grid-area: header; background: #000000; height: 80px; position: relative; } -header h1 { font-size: 40px; margin: 0 0 0 20px; font-weight: 100; height: 80px; line-height: 80px; color: white; } -header #search-bar { position: absolute; right: 15px; top: 15px; height: 50px; width: 50px; border-radius: 25px; overflow: hidden; background: white; transition: width 0.3s; } -header #search-bar:hover { width: 400px; } -header #search-bar::before { position: absolute; width: 30px; height: 30px; margin: 10px; content: ''; background: url("../img/icon-search.png") no-repeat; background-size: contain; } +header{ grid-area: header; background: #282828; height: 80px; position: relative; } +header #languages{ position: absolute; left: 15px; top: 15px; height: 50px; } +header #languages #french{ display: inline-block; border-radius: 100%; width: 50px; height: 50px; margin-right: 20px; background: url('../img/fr_flag.jpg'); background-size: cover; } +header #languages #english{ display: inline-block; border-radius: 100%; width: 50px; height: 50px; background: url('../img/en_flag.jpg'); background-size: cover; } +header #search-bar{ position: absolute; right: 15px; top: 15px; height: 50px; width: 50px; border-radius: 25px; overflow: hidden; background: white; transition: width 0.3s; } +header #search-bar:hover{ width: 400px; } +header #search-bar::before{ position: absolute; width: 30px; height: 30px; margin: 10px; content: ''; background: url("../img/icon-search.png") no-repeat; background-size: contain; } header #search-bar-input{ border: none; height: 40px; width: 350px; margin: 5px 15px 5px 40px; padding: 5px 10px; font-size: 20px; font-weight: 100; } header #search-bar-input::placeholder{ color: black; font-weight: 100; } header #search-bar-input:focus, header #search-bar-input:active{ outline:0; } /* END HEADER */ -/* PHOTO */ -#photo { - grid-area: photo; - height: 400px; +/* ME */ +#me{ + grid-area: me; + position: relative; + font-family: 'Bebas Neue', cursive; + color: #fff; +} +#me #name{ + padding: 30px 0 0 30px; + font-size: 100px; + line-height: 85px; +} +#me #job{ + padding: 0 0 0 30px; + margin: 0; + font-size: 45px; + font-weight: initial; +} +#me #picture{ + position: relative; + margin: 50px auto -115px auto; + width: 230px; height: 230px; + background: linear-gradient(to bottom, #ffffff 0%, #6773b1 100%); + border-radius: 100%; + z-index: 1; +} +#me #picture:before{ + content: ''; + position: absolute; + top: 10px; + right: 10px; + bottom: 10px; + left: 10px; background: url("../img/antoine.jpg"); background-size: cover; - overflow: hidden; + border-radius: inherit; + z-index: 5; } -/* END PHOTO */ +/* END ME */ -/* CONTACT-LINKS */ -#contact-links { - background: rgba(8, 20, 41, 0.71); - grid-area: contact; - padding: 20px 0; +/* SUMMARY-CONTACT */ +#summary-contact{ + grid-area: summary-contact; + position: relative; + font-family: 'Montserrat', sans-serif; + padding-top: 120px; + padding-bottom: 30px; + margin-right: -30px; + color: #dadada; } - -#contact-links .contact-link { - height: 40px; - line-height: 40px; - width: 100%; - margin: 0 20px 0 40px; - padding-left: 50px; +#summary-contact:after{ + content: ''; + position: absolute; + right: -30px; + top: -30px; + bottom: -30px; + border: 30px solid transparent; + border-left-color: #222221; + z-index: -2; +} +#summary-contact #summary{ + padding: 30px 20px 20px 30px; + font-size: 20px; + line-height: 28px; +} +#summary-contact .contact{ + line-height: 22px; + min-height: 25px; + font-size: 18px; + margin: 0 20px 15px 40px; + padding-left: 40px; position: relative; } - -#contact-links .contact-link.icon:before { +#summary-contact .contact.icon:before{ content: ''; position: absolute; - width: 30px; - height: 30px; - top: 5px; + width: 25px; + height: 25px; + top: -1px; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center; + filter: invert(0.9); } - -#contact-links .icon-mail:before { background: url("../img/icon-mail.png"); } -#contact-links .icon-phone:before { background: url("../img/icon-phone.png"); } +#summary-contact .icon-mail:before{ background: url("../img/icon-mail.png"); } +#summary-contact .icon-phone:before{ background: url("../img/icon-phone.png"); } +#summary-contact .icon-here:before{ background: url("../img/icon-here.png"); } /* END CONTACT-LINKS */ /* SKILLS */ -#skills .skill{ width: 100%; position: relative; height: 50px; line-height: 50px; padding-left: 20px; font-size: 25px; background: orange } -#skills .skill::before{ content: ''; position: absolute; height: 100%; left: 0; top: 0; background: red; width: 30%; mix-blend-mode: multiply; } \ No newline at end of file +#skills{ + grid-area: skills; + position: relative; + color: #fff; + padding: 20px 40px; +} + +#skills .skill{ + position: relative; + height: 32px; + line-height: 32px; + font-size: 20px; + font-weight: 500; +} +#skills .skill .skill-bar{ + content: ''; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + transform: translateY(-50%); + height: 9px; + background: white; +} +progress::-webkit-progress-bar { + width: 100%; + margin:0; + background-color: #343434; + border-radius: 0; +} +progress::-webkit-progress-value { + background: white; +} +/* END SKILLS */ + +#experiences{ + padding: 40px 60px; + grid-area: experiences; + font-family: 'Montserrat', sans-serif; +} + +.experience{ + margin-bottom: 35px; +} + +.experience .experience-title { + font-weight: 700; + font-size: 24px; + color: #292929; + margin-bottom: 2px; +} + +.experience .experience-place { + font-weight: normal; + font-style: italic; + font-size: 23px; + color: #414042; + margin-bottom: 5px; +} + +.experience .experience-description { + font-weight: normal; + font-size: 20px; + color: #6d6e71; +} + +footer{ + background: lightblue; + grid-area: footer; + height: 150px; +} + +/* +#7279a9 +#636c9a + +#4c548a +#434f7e + +#41403b +#272924 +*/ \ No newline at end of file diff --git a/img/en_flag.jpg b/img/en_flag.jpg new file mode 100644 index 0000000..11d30dd Binary files /dev/null and b/img/en_flag.jpg differ diff --git a/img/fr_flag.jpg b/img/fr_flag.jpg new file mode 100644 index 0000000..869f7f1 Binary files /dev/null and b/img/fr_flag.jpg differ diff --git a/img/icon-here.png b/img/icon-here.png new file mode 100644 index 0000000..f6136d6 Binary files /dev/null and b/img/icon-here.png differ diff --git a/img/icon-mail.png b/img/icon-mail.png index e3f95bd..7d3cbb3 100644 Binary files a/img/icon-mail.png and b/img/icon-mail.png differ diff --git a/img/icon-phone.png b/img/icon-phone.png index b7579d8..ff8c401 100644 Binary files a/img/icon-phone.png and b/img/icon-phone.png differ diff --git a/index.html b/index.html index 796795d..ed6149f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,8 @@ - + + + + @@ -7,39 +10,150 @@
- -

Antoine Nedelec - Full stack developer

- +
+
+
+
-
-
- -