diff --git a/awwwards/assets/logo.png b/awwwards/assets/logo.png new file mode 100644 index 0000000..f19c3f6 Binary files /dev/null and b/awwwards/assets/logo.png differ diff --git a/awwwards/index.html b/awwwards/index.html new file mode 100644 index 0000000..5a6686f --- /dev/null +++ b/awwwards/index.html @@ -0,0 +1,195 @@ + + + + + + + + Awwwards Series Rebuild + + +
+
+
+ +
+

Grid

+
+
+
+

Index

+
+
+
+
+
+
+

All projects

+
+
+
+
+ +
+

Ochi Design Rebuild

+
+
+

(01)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • GSAP
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

Sundown Studio Rebuild

+
+
+

(02)

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

REJOUICE Rebuild

+
+
+

(03)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • GSAP
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+ +
+ +
+

Kit: Rebuild

+
+
+

(04)

+
    +
  • Vite + React
    • +
  • Tailwind
    • +
  • Framer Motion
    • +
+
+ Demo + Source code +
+
+
+
+ +
+
+
+
+

Ochi Rebuild

+
+

1

+
+
+

→

+ + + + +
+
+ +
+
+
+

Sundown Studio Rebuild

+
+

2

+
+
+

→

+ + + + +
+
+ +
+
+
+

REJOUICE Rebuild

+
+

3

+
+
+

→

+ + + + +
+
+ +
+
+
+

Kit: Rebuild

+
+

4

+
+
+

→

+ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/awwwards/main.js b/awwwards/main.js new file mode 100644 index 0000000..f55c477 --- /dev/null +++ b/awwwards/main.js @@ -0,0 +1,76 @@ +const toggle = { + element: document.querySelector('.nav-select-toggle'), + circle: document.querySelector('.nav-toggle'), +}; +const view = { + grid: document.querySelector('.work-grid'), + index: document.querySelector('.work-index'), + indexItem: document.querySelectorAll('.work-index-item'), + indexMediaImage: document.querySelectorAll('.work-index-item-img'), + indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'), +}; + +const animateIndexItem = (item) =>{ + const itemImages = item.querySelectorAll('.work-index-item-img'); + const itemArrows = item.querySelectorAll('.work-index-item-media-arrow'); + const itemTitle = item.querySelectorAll('.work-index-item-title'); + + const tlIndexrow = gsap.timeline({ + paused: true, + defaults: { + duration: 0.6, + ease: 'expo.inOut' + }, + }) + .to(itemArrows, {autoAlpha: 1, xPercent: 0}) + .to(itemImages, {autoAlpha: 1, yPercent: 0, stagger: 0.03}, 0) + .to(itemTitle, {autoAlpha: 0}, 0); + + item.addEventListener('mouseenter', () => tlIndexrow.play()) + item.addEventListener('mouseleave', () => tlIndexrow.reverse()) +}; + +let isActive = false; +const addEventListener = () => { + const tlToggle = gsap.timeline({paused:true}).to(toggle.circle, { + xPercent: 140, + duration: 0.2, + ease: 'expo.inOut', + }); + gsap.set(view.index, { + autoAlpha:0, + display: 'none' + }); + + const tlView = gsap.timeline({paused: true}).to(view.grid, { + duration: 0.6, + autoAlpha: 0, + display: 'none', + ease: 'expo.inOut', + onComplete: () => { + tlView.to(view.index, { + autoAlpha: 1, + display: 'block' + }); + }, + }); + toggle.element.addEventListener('click', () => { + !isActive ? tlToggle.play() : tlToggle.reverse(); + !isActive ? tlView.play() : tlView.reverse(); + + isActive = !isActive; + }); + view.indexItem.forEach((item) => { + gsap.set(view.indexMediaImage, { + autoAlpha: 0, + yPercent: 100 + }); + gsap.set(view.indexMediaArrow, { + autoAlpha: 0, + xPercent: -100 + }); + animateIndexItem(item); + }); + +}; +addEventListener(); \ No newline at end of file diff --git a/awwwards/style.css b/awwwards/style.css new file mode 100644 index 0000000..ff92563 --- /dev/null +++ b/awwwards/style.css @@ -0,0 +1,247 @@ +*{ + margin: 0; + padding:0; + box-sizing: border-box; +} +:root{ + --primary: #f7f7f7; + --secondary: #181818; +} +html{ + font-size: calc(100vw / 1920 * 10); +} +body{ + background: var(--primary); + color: var(--secondary); +} +h1{ + font-size: 13rem; + text-transform: uppercase; + +} +h2{ + font-size: 9rem; + text-transform: uppercase; +} +h3{ + font-size: 4.8rem; + text-transform: uppercase; + +} +h4{ + font-size: 3.2rem; + text-transform: uppercase; +} +p, li{ + font-size: 2.4rem; + text-decoration: none; + list-style: none; +} +a{ + text-decoration: none; +} +span{ + font-size: 1.6rem; +} +/*=== navbar ===*/ +.nav{ + position: absolute; + width: 100%; + left: 0; + top: 0; + padding: 3.2rem 6.4rem; + overflow: hidden; +} +.nav-container{ + display: flex; + justify-content: space-between; + width: 100%; +} +.nav-select{ + display: flex; + align-items: center; + gap: 1.5rem; +} +.nav-select-toggle{ + width: 6rem; + padding: 0.4rem; + border: 1px solid var(--secondary); + border-radius: 200rem; + cursor: pointer; +} +.nav-toggle{ + background-color: var(--secondary); + width: 2rem; + height: 2rem; + border-radius: 200rem; +} +/*=== projects ===*/ +.work{ + position: relative; + width: 100%; + margin-top: 15rem; + overflow: hidden; +} +.wrok-container{ + padding: 6.4rem; +} +.work-title{ + display: inline-flex; + width: 100%; + gap: 3.2rem; + padding-bottom: 4.8rem; + border-bottom: 1px solid var(--secondary); +} +.work-title h1{ + font-size: 12rem; +} +.work-selector{ + position: relative; + padding-top: 12rem; +} +/*=== grid ===*/ +.work-grid-item{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 1.5rem; + grid-row-gap: 1.5rem; + grid-template-areas: 'grid-img grid-info' 'grid-title .'; + margin-bottom: 12.8rem; +} +.--item-left{ + grid-template-areas: 'grid-info grid-img ' '. grid-title'; +} +.work-grid-item-img{ + grid-area: grid-img; + width: 96rem; + height: 64rem; + object-fit: cover; +} +.work-grid-item-info{ + grid-area: grid-info; +} +.work-grid-item-title{ + grid-area: grid-title; +} +.grid-btn{ + margin-top: 2.5rem; + font-size: 2rem; +} +.grid-btn-1{ + margin-right: 10px; + padding: 10px; + background-color: #181818; + color: white; + border: 1px solid black; + transition: all 0.3s ease-in; +} +.grid-btn-1:hover{ + background-color: gray; + color: black; + border: 1px solid gray; +} +.grid-btn-2{ + padding: 10px; + color: black; + border: 1px solid black; + transition: all 0.3s ease-in; +} +.grid-btn-2:hover{ + background-color: gray; + color: white; + border: 1px solid gray; +} +/*=== index ===*/ +.work-index-item{ + position: relative; + height: 100%; + margin-bottom: 3.2rem; + overflow: hidden; + cursor: pointer; +} +.work-index-item:last-child{ + margin-bottom: 0; +} +.work-index-item-title{ + display: flex; + justify-content: space-between; + width: 100%; +} +.work-index-item-flex{ + display: inline-flex; + align-items: center; + gap: 3.2rem; +} +.work-index-item-media{ + display: flex; + position: absolute; + left: 0; + top: 0; + gap: 1.5rem; +} +.work-index-item-img{ + width: 32rem; + height: 13rem; + object-fit: cover; +} + +/*=== grid responsive ===*/ +@media screen and (min-width: 768px){ + .--item-left .work-grid-item-info{ + justify-self: right; + } + .work-grid-item:nth-child(2) .work-grid-item-img{ + width: 90rem; + height: 96rem; + } + .work-grid-item:nth-child(3) .work-grid-item-img{ + width: 120rem; + height: 90rem; + } + .work-grid-item:nth-child(4) .work-grid-item-img{ + width: 140rem; + height: 90rem; + } + +} +/*=== index responsive ===*/ +@media screen and (max-width: 768px){ + html{ + font-size: calc(100vw / 768 * 10); + } + h1{ + font-size: 7rem; + } + h2{ + font-size: 4.8rem; + } + h3{ + font-size: 3.2rem; + } + h4{ + font-size: 2.4rem; + } + p,li{ + font-size: 2.4rem; + } + span{ + font-size: 1.6rem; + } + .work-grid-item, .work-grid-item.--item-left{ + grid-template-columns: 1fr; + grid-template-areas: 'grid-img' 'grid-title' 'grid-info'; + } + .work-grid-item-img{ + width: 100%; + height: 64rem; + object-fit: cover; + } + .work-title h1{ + font-size: 7rem; + } + .work-index-item-flex{ + flex-direction: column; + align-items: flex-start; + gap: 0; + } +} \ No newline at end of file