diff --git a/gulpfile.js b/gulpfile.js index 3661685e3896b5c8fd2b5c9c6170cbd1c101a4b2..d3d5e3cc26b1892daba126864fdb5e130918db25 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,8 +8,8 @@ const w3cjs = require('gulp-w3cjs'); const autoprefixer = require('gulp-autoprefixer'); const cleanCSS = require('gulp-clean-css'); const csscomb = require('gulp-csscomb'); -const sass = require('gulp-dart-sass'); -const uglify = require('gulp-uglify-es').default; +const sass = require('gulp-sass')(require('sass')); +const uglify = require('gulp-uglify'); const imagemin = require('gulp-imagemin'); const concat = require('gulp-concat'); @@ -27,7 +27,7 @@ const paths = { }, scss: { src: './src/assets/scss/**/*.scss', - dest: './src/assets/css', + dest: './src/assets/css/', }, js: { src: './src/assets/js/**/*.js', @@ -76,9 +76,9 @@ function css() { } function scss() { return gulp - .src(paths.scss.src, { since: gulp.lastRun(scss) }) + .src(paths.scss.src) .pipe(plumber()) - .pipe(sass().on('error', sass.logError)) + .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest(paths.scss.dest)) .pipe(browserSync.stream()); } @@ -120,4 +120,4 @@ const build = gulp.series(clear, html, scss, css, js, images); exports.default = dev; exports.dev = dev; exports.build = build; -exports.clear = clear; +exports.clear = clear; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ad3ba9ebc77a839f09e401587f9d12bc7b3f06d1..e512a78471c05f71de250151f9247202850453fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,7 @@ "gulp-dart-sass": "^1.0.2", "gulp-imagemin": "^7.1.0", "gulp-plumber": "^1.2.1", + "gulp-sass": "^5.1.0", "gulp-uglify": "^3.0.2", "gulp-uglify-es": "^3.0.0", "gulp-w3cjs": "^1.3.2", @@ -10515,6 +10516,53 @@ "node": ">=0.8.0" } }, + "node_modules/gulp-sass": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.1.0.tgz", + "integrity": "sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==", + "dev": true, + "dependencies": { + "lodash.clonedeep": "^4.5.0", + "picocolors": "^1.0.0", + "plugin-error": "^1.0.1", + "replace-ext": "^2.0.0", + "strip-ansi": "^6.0.1", + "vinyl-sourcemaps-apply": "^0.2.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/gulp-sass/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/gulp-sass/node_modules/replace-ext": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", + "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/gulp-sass/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/gulp-uglify": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz", @@ -30919,6 +30967,43 @@ } } }, + "gulp-sass": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.1.0.tgz", + "integrity": "sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==", + "dev": true, + "requires": { + "lodash.clonedeep": "^4.5.0", + "picocolors": "^1.0.0", + "plugin-error": "^1.0.1", + "replace-ext": "^2.0.0", + "strip-ansi": "^6.0.1", + "vinyl-sourcemaps-apply": "^0.2.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "replace-ext": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", + "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==", + "dev": true + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } + }, "gulp-uglify": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz", diff --git a/package.json b/package.json index 395fd19fbb0242ccb57745f59c12f5449326a0d4..d3cb9fe8b50f15f459617c7e388d792452a3c35d 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "gulp-dart-sass": "^1.0.2", "gulp-imagemin": "^7.1.0", "gulp-plumber": "^1.2.1", + "gulp-sass": "^5.1.0", "gulp-uglify": "^3.0.2", "gulp-uglify-es": "^3.0.0", "gulp-w3cjs": "^1.3.2", diff --git a/src/assets/css/style.css b/src/assets/css/style.css index fad2fc37a76074c8eaf365044232efd98bb8f673..da367347bfb88e816c649323596a199aba25435d 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -401,6 +401,163 @@ img { background-color: #505455; } } +/* + Intended for sizes, margins, paddings, borders, ... + SYNTAX: block-element-modifier-details-property +*/ +/* -------- +* +* Titles +* +-------- */ +/* navbar */ +/* burger */ +/* Button */ +/* Section */ +/* scrollIndicator */ +/* Contact */ +/* Home */ +.menu { + display: flex; + position: absolute; + top: 0vh; + width: 100vw; + transition: all 1s; +} +.menu--active { + top: 0; +} +.menu__tile { + background-color: #000; + flex: 1 0 16%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-position: center; + background-size: 200%; + transition: background-size 0.25s; +} +.menu__tile:hover { + background-size: 210%; +} +.menu__tile:hover .menu__title::after { + width: 90%; +} +.menu__tile:hover .menu__number { + color: #fff; + text-shadow: 0 0 10px #fffcd1; +} +.menu__tile--open { + height: 100vh; + display: flex; + visibility: visible; + border-left: 0.5px solid #000; +} +.menu__tile--open .menu__number, .menu__tile--open .menu__title { + opacity: 1; +} +.menu__tile--close { + height: 0vh; + visibility: hidden; + border-left: 0.5px solid #fae738; +} +.menu__tile--close .menu__number, .menu__tile--close .menu__title { + opacity: 0; +} +.menu__tile:nth-child(1) { + background-image: url("/src/assets/img/menu/menu-1-accueil.png"); +} +.menu__tile:nth-child(2) { + background-image: url("/src/assets/img/menu/menu-2-presentation.png"); +} +.menu__tile:nth-child(3) { + background-image: url("/src/assets/img/menu/menu-5-services.png"); +} +.menu__tile:nth-child(4) { + background-image: url("/src/assets/img/menu/menu-6-team.png"); +} +.menu__tile:nth-child(5) { + background-image: url("/src/assets/img/menu/menu-3-projets.png"); +} +.menu__tile:nth-child(6) { + background-image: url("/src/assets/img/menu/menu-4-contact.png"); +} +.menu__title { + color: #FFF; + font-size: 2rem; + transition: opacity 0.5s; + font-family: "Crimson Text", serif; + text-transform: uppercase; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.menu__title::after { + content: ""; + display: block; + height: 1px; + width: 0%; + background-color: #fae738; + position: relative; + top: 10px; + transition: width 0.5s; +} +.menu__number { + color: #FFF; + font-size: 8rem; + transition: opacity 0.5s; + font-family: "Crimson Text", serif; + color: #8B8B8B; +} + +@media screen and (max-width: 992px) { + .menu { + flex-direction: column; + top: 0; + left: -100vw; + width: 100vw; + height: 100vh; + transition: all 1s; + } + .menu--active { + top: 0; + left: 0; + } + .menu__tile { + flex-direction: row; + justify-content: flex-start; + } + .menu__tile:nth-child(n) { + background-image: none; + } + .menu__tile--open { + width: 100vw; + left: 0vw; + border-bottom: 1px solid #1a1a1a; + } + .menu__tile--close { + width: 0vw; + left: -100vw; + border-bottom: 1px solid #fae738; + } + .menu__title { + padding: 0 5vw; + } + .menu__title::after { + content: ""; + display: none; + } + .menu__number { + margin-left: 10vw; + } +} +@media screen and (max-width: 576px) { + .menu__number { + font-size: 4rem; + } +} .progress-bar { position: relative; height: 0.5rem; @@ -429,22 +586,6 @@ img { width: 100%; } } -/* - Intended for sizes, margins, paddings, borders, ... - SYNTAX: block-element-modifier-details-property -*/ -/* -------- -* -* Titles -* --------- */ -/* navbar */ -/* burger */ -/* Button */ -/* Section */ -/* scrollIndicator */ -/* Contact */ -/* Home */ .section { height: 100vh; width: 100vw; @@ -681,6 +822,9 @@ img { .home__title { z-index: 10; } +.home__canvas { + display: none; +} .home__pilar { display: none; } @@ -766,7 +910,7 @@ img { display: flex; flex-direction: column-reverse; justify-content: center; - align-items: end; + align-items: flex-end; flex-wrap: nowrap; gap: 3vh; align-self: flex-start; @@ -785,6 +929,9 @@ img { background: black; background: -webkit-linear-gradient(left, #000, #fff); } + .home__titles::before { + z-index: 25; + } .home__sentence { top: 30%; font-size: 1rem; @@ -806,9 +953,14 @@ img { left: 40%; top: 100%; } - .home__pilar { + .home__canvas { + position: absolute; display: block; - max-height: 100vh; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 0; } } @media screen and (min-width: 1200px) { @@ -837,7 +989,7 @@ img { display: flex; flex-direction: column-reverse; justify-content: center; - align-items: end; + align-items: flex-end; flex-wrap: nowrap; gap: 3vh; align-self: flex-start; @@ -866,6 +1018,7 @@ img { gap: 2vw; height: 100%; cursor: pointer; + z-index: 100; } .burger__bar { display: block; @@ -1424,9 +1577,6 @@ img { width: 75%; } .team__canvas { - position: relative; - top: -5vh; - align-self: flex-start; height: 90vh; order: 3; max-width: 30vw; diff --git a/src/assets/js/lib/team.js b/src/assets/js/lib/team.js index 34f5e3875a3e721fc0363e289b5e236de2ce9b1a..85da654c631f208f7d4ecdccf895ef75cb738147 100644 --- a/src/assets/js/lib/team.js +++ b/src/assets/js/lib/team.js @@ -68,23 +68,12 @@ const gltfLoader = new GLTFLoader(); gltfLoader.load( '/models/low_poly_hand_painted_dungeon_stone_pillar/scene.gltf', (gltf) => { - console.log('success'); - console.log(gltf); - const pillar = gltf.scene; pillar.scale.set(0.005, 0.007, 0.005); pillar.position.y = -0.25; // Update model scene.add(pillar); - }, - (progress) => { - console.log('progress'); - console.log(progress); - }, - (error) => { - console.log('error'); - console.log(error); - }, + } ); /** * Scale sizeInit @@ -170,12 +159,6 @@ scene.add(pointLight); /** * Helpers */ -// const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.9); -// const directionalLightHelper = new THREE.DirectionalLightHelper( -// directionalLight, -// 0.5 -// ); -// scene.add(directionalLightHelper, pointLightHelper); /** * Renderer @@ -196,25 +179,6 @@ window.addEventListener('mousemove', (event) => { mouse.y = -(event.clientY / sizes.height) * 2 + 1; }); -// window.addEventListener('resize', () => { -// // Update sizes -// sizes.width = window.innerWidth; -// sizes.height = window.innerHeight; - -// // Update camera -// camera.aspect = sizes.width / sizes.height; -// camera.updateProjectionMatrix(); - -// // Update controls -// controls.update(); -// // Update renderer -// renderer.setSize(sizes.width, sizes.height); -// renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); -// }); - -// document -// .querySelector('.indexpage__main--canvas') -// .appendChild(renderer.domElement); let currentIntersect = null; /** diff --git a/src/assets/js/main.js b/src/assets/js/main.js index d94045f4202cac284fb5c71370a0a5b18b7c67e9..158fdb7a812aa804acd0bb62e37ee1b20f517ded 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -33,6 +33,39 @@ function main() { }); /* End of team style rules */ + /* Contact form styles */ + const inputs = Array.from(document.querySelectorAll('.contact__field')).slice(0, -1); + + const checkIsFilled = (input) => { + const container = input.closest('.contact__field-container'); + + if (input.value === '') { + container.classList.remove('contact__field-container--filled') + } else { + container.classList.add('contact__field-container--filled'); + } + } + + const handleClick = (event) => { + const input = event.target; + + checkIsFilled(input); + } + + const handleBlur = (event) => { + const input = event.target; + + checkIsFilled(input); + } + + inputs.forEach((input) => { + input.addEventListener('click', handleClick); + input.addEventListener('blur', handleBlur) + + checkIsFilled(input); + }); + /* End of contact form styles */ + /* End of style rules */ /* Modules */ @@ -74,7 +107,6 @@ function main() { fullpage_api.moveSlideLeft(); } }); - // console.clear(); /* End of Fullpage */ /* End of modules */ diff --git a/src/assets/js/modules/menu.js b/src/assets/js/modules/menu.js index 2e8f6fd70e1ebc080352be1b877ddd73a2f9ae89..b3273a113af25ee2488246caa58239f20cf0c0ea 100644 --- a/src/assets/js/modules/menu.js +++ b/src/assets/js/modules/menu.js @@ -21,9 +21,7 @@ menuTrigger.addEventListener('click', showMenu); menuTiles.forEach((element) => { element.addEventListener('click', () => { target = element.getAttribute('data-target') - console.log(target); fullpage_api.moveTo(target) - showMenu() - index ++; + showMenu(); }); }); \ No newline at end of file diff --git a/src/assets/js/modules/pilar.js b/src/assets/js/modules/pilar.js index e4133fb95c1dafb0050c18b39ff8181f40d6ffa4..cbef9bd56060b625b2a22b7fa6847b20432eca58 100644 --- a/src/assets/js/modules/pilar.js +++ b/src/assets/js/modules/pilar.js @@ -92,7 +92,7 @@ function tick() { requestAnimationFrame(tick) } -console.log(scene); +// console.log(scene); tick() //responsive diff --git a/src/assets/scss/global/_base.scss b/src/assets/scss/global/_base.scss index 5e4d0fb3b6af1213fd6529cd0a73f3bac8cf66ed..27fdad1e387b42ab6b1e547e2d7779218d8826c3 100644 --- a/src/assets/scss/global/_base.scss +++ b/src/assets/scss/global/_base.scss @@ -3,8 +3,8 @@ /* Regles generales */ *, -*:after, -*:before { +*::after, +*::before { box-sizing: border-box; cursor: none; } diff --git a/src/assets/scss/modules/_contact.scss b/src/assets/scss/modules/_contact.scss index d2d2223e177cff40a67e68f473895f8d8417908b..df2aa84fc58fc6dd9fecc8d455620d0ed25c6cb6 100644 --- a/src/assets/scss/modules/_contact.scss +++ b/src/assets/scss/modules/_contact.scss @@ -110,6 +110,21 @@ } } + &__field-container--filled { + .contact__label { + top: 0; + font-size: layout.$contact-label-focus-font-size; + color: colors.$yellow; + } + + .contact__field-border { + &::before, + &::after { + width: 50%; + } + } + } + &__field--textarea { resize: none; } @@ -135,6 +150,12 @@ font-size: layout.$contact-label-font-size - 1vw; } + &__field-container--filled { + .contact__label { + font-size: layout.$contact-label-focus-font-size - 1vw; + } + } + &__fields { gap: layout.$contact-fields-gap + 2rem; } @@ -161,6 +182,12 @@ font-size: layout.$contact-label-font-size - 2vw; } + &__field-container--filled { + .contact__label { + font-size: layout.$contact-label-focus-font-size - 1.5vw; + } + } + &__fields { gap: layout.$contact-fields-gap + 2rem; } @@ -199,6 +226,12 @@ font-size: layout.$contact-label-font-size - 3vw; } + &__field-container--filled { + .contact__label { + font-size: layout.$contact-label-focus-font-size - 2.25vw; + } + } + &__fields { justify-content: flex-end; gap: layout.$contact-fields-gap - 1rem; diff --git a/src/assets/scss/modules/_section.scss b/src/assets/scss/modules/_section.scss index 6aca76218a8632fa208bfecac04ff41654bf2d5a..fd6de4d144cc682569662620a3daa4d648bc5e4d 100644 --- a/src/assets/scss/modules/_section.scss +++ b/src/assets/scss/modules/_section.scss @@ -1,7 +1,30 @@ +@use '../variables/colors'; +@use '../variables/fonts'; @use '../variables/mixins'; @use '../variables/layout'; .section { @include mixins.full-size; + position: relative; padding: layout.$section-padding-vertical layout.$section-padding-horizontal; + + &::after { + content: attr(data-name); + position: absolute; + padding: 5vh 0; + width: 100vh; + bottom: 0; + left: 0; + border: { + top: 1px solid colors.$yellow; + bottom: 1px solid colors.$yellow; + } + font: { + family: fonts.$font-accent-1; + size: 1.25vw; + } + text-align: center; + transform-origin: bottom left; + transform: rotate(-90deg) translateY(100%); + } } diff --git a/src/index.html b/src/index.html index 9039f7ff3a02cfcbd1c74570a4719c2ea91ee120..c95abe4d5b87c86502c54775f54c5fc405a613c3 100644 --- a/src/index.html +++ b/src/index.html @@ -75,8 +75,8 @@
-
-
+
+

agence web la rochelle

@@ -97,7 +97,7 @@
-
+

Présentation @@ -122,7 +122,7 @@
-
+

Services @@ -168,7 +168,7 @@
-
+

Team @@ -178,29 +178,27 @@

  • Flavien - Développement

    - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, - ex commodi? Inventore iste ea nisi. + Développeur pour qui le back n'a plus de mystère. + Attention cependant à ne pas lui demander du HTML/CSS, il en a horreur.

  • Valentin - Développement

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate - vel laboriosam rerum doloribus magni mollitia. + Développeur ambivalent avec une qualité graphique qui sait le distinguer.

  • Enzo - Développement

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem - similique, nobis iure dolorum libero incidunt! + Développeur ambivalent mais préférant tout de même le front. + Possède aussi une qualité graphique intéressante.

  • Elisa - Web designer

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Necessitatibus doloremque autem ipsam blanditiis impedit! Minima. + Webdesigneuse ambitieuse qui n'a pas pas peur de faire face au code et aux règles habituelles.

    • @@ -209,7 +207,7 @@
    -
    +

    @@ -260,31 +258,31 @@
    -
    +

    Contact

    -
    +
    - + - + - + - + @@ -311,7 +309,7 @@
    -

    2021 ©Pilartis, All rights reserved.

    +

    2021 © Pilartis, All rights reserved.

    @@ -323,7 +321,6 @@ - diff --git a/webpack.config.js b/webpack.config.js index eeab6470e453341a0274661aaafc74f3dad6ada1..5685d2a1aa5d73e8fa9ec264b37b8149b99a8eb9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,9 +4,9 @@ const webpack = require('webpack'); module.exports = { entry: './src/assets/js/main.js', - output: { - assetModuleFilename: 'assets/img/[name].[hash][ext][query]', - }, + // output: { + // assetModuleFilename: 'assets/img/[name].[hash][ext][query]', + // }, plugins: [ new CopyWebpackPlugin({ patterns: [