commit dcbb0b9eb3efcd33454382bc0bc31f5eb5b4c242 Author: 이희원 Date: Thu Jun 18 13:25:15 2026 +0900 초기 작업물 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..42c279e --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +dist/ +.DS_Store +*.local +package-lock.json \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..a167f5f --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "boda-lab", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "sass": "^1.101.0", + "vite": "^8.0.16", + "vite-plugin-imagemin": "^0.6.1" + }, + "dependencies": { + "jquery": "^4.0.0", + "sharp": "^0.35.1" + } +} diff --git a/src/images/about-hand.jpg b/src/images/about-hand.jpg new file mode 100644 index 0000000..9005c09 Binary files /dev/null and b/src/images/about-hand.jpg differ diff --git a/src/images/history-1.jpg b/src/images/history-1.jpg new file mode 100644 index 0000000..0469336 Binary files /dev/null and b/src/images/history-1.jpg differ diff --git a/src/images/history-2.jpg b/src/images/history-2.jpg new file mode 100644 index 0000000..b74b58f Binary files /dev/null and b/src/images/history-2.jpg differ diff --git a/src/images/history-3.jpg b/src/images/history-3.jpg new file mode 100644 index 0000000..fd056f0 Binary files /dev/null and b/src/images/history-3.jpg differ diff --git a/src/images/map.svg b/src/images/map.svg new file mode 100644 index 0000000..db9ebea --- /dev/null +++ b/src/images/map.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/project-1.jpg b/src/images/project-1.jpg new file mode 100644 index 0000000..f2b993e Binary files /dev/null and b/src/images/project-1.jpg differ diff --git a/src/images/project-2.jpg b/src/images/project-2.jpg new file mode 100644 index 0000000..1b26803 Binary files /dev/null and b/src/images/project-2.jpg differ diff --git a/src/images/project-3.jpg b/src/images/project-3.jpg new file mode 100644 index 0000000..e5be54f Binary files /dev/null and b/src/images/project-3.jpg differ diff --git a/src/images/project-4.jpg b/src/images/project-4.jpg new file mode 100644 index 0000000..f67b74e Binary files /dev/null and b/src/images/project-4.jpg differ diff --git a/src/images/project-5.jpg b/src/images/project-5.jpg new file mode 100644 index 0000000..73cd6f6 Binary files /dev/null and b/src/images/project-5.jpg differ diff --git a/src/images/project-6.jpg b/src/images/project-6.jpg new file mode 100644 index 0000000..af7d906 Binary files /dev/null and b/src/images/project-6.jpg differ diff --git a/src/images/project-7.jpg b/src/images/project-7.jpg new file mode 100644 index 0000000..2a2c531 Binary files /dev/null and b/src/images/project-7.jpg differ diff --git a/src/images/project-8.jpg b/src/images/project-8.jpg new file mode 100644 index 0000000..ca5aa42 Binary files /dev/null and b/src/images/project-8.jpg differ diff --git a/src/images/vision-1.jpg b/src/images/vision-1.jpg new file mode 100644 index 0000000..4d5ab30 Binary files /dev/null and b/src/images/vision-1.jpg differ diff --git a/src/images/vision-2.jpg b/src/images/vision-2.jpg new file mode 100644 index 0000000..e651737 Binary files /dev/null and b/src/images/vision-2.jpg differ diff --git a/src/images/vision-3.jpg b/src/images/vision-3.jpg new file mode 100644 index 0000000..9530388 Binary files /dev/null and b/src/images/vision-3.jpg differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..04aa2a4 --- /dev/null +++ b/src/index.html @@ -0,0 +1,450 @@ + + + + + + BODA LAB - Creative Development Company + + + + + + + + +
+
+ + + +
+ + +
+ +
+ + +
+ +
+

Creative Development Company

+

THE BODA LAB

+
+ +
+ + +
+
+
+

ABOUT US

+

+ The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한
+ 다양한 기술적 노하우로 완성된 경험을 제공합니다.
+ 우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에
+ 강한 영향력을 전달합니다. +

+
+
+ 스케치하는 손 +

Creative Development Company BODA.Lab

+
+
+
+ + +
+
+

HISTORY

+
+
+ 2024 +
+
    +
  • 12.01신한은행 슈퍼소울 운영 계약
    • +
  • 09.01한화금융통합 서비스 구축 계약
    • +
  • 05.30신한은행 슈퍼소울 구축 계약
    • +
  • 05.01롯데 렌터카 오토리스 구축 계약
    • +
+
+
+ 2023 +
+
    +
  • 12.01신한은행 슈퍼소울 운영 계약
    • +
  • 11.01한화금융 라이프 플러스 아카데미 구축 계약
    • +
  • 10.01대교 차세대 구축 계약
    • +
  • 09.01한화금융통합 서비스 구축 계약
    • +
  • 05.30신한은행 슈퍼소울 구축 계약
    • +
  • 05.01롯데 렌터카 오토리스 구축 계약
    • +
+
+
+ 2022 +
+
    +
  • 11.01한화금융 서비스앱 플러스 리뉴얼 2차 계약
    • +
  • 09.01한화금융 서비스앱 플러스 리뉴얼 1차 계약
    • +
  • 08.01밀레 쇼핑몰 리뉴얼 구축 계약
    • +
  • 07.01오뚜기 쇼핑몰 리뉴얼 구축 계약
    • +
  • 05.01캐나다구스 코리아 쇼핑몰 구축 계약
    • +
+
+
+ 2021 +
+
    +
  • 11.22롯데 렌터카 차세대 구축 계약
    • +
  • 11.01LSN MALL 구축 계약
    • +
  • 7.29(주)보다랩 설립
    • +
  • 5.15현대홈쇼핑 리뉴얼 구축 계약
    • +
  • 01.11KONA I 헬스케어 구축 계약
    • +
  • 01.11유아이팩토리 설립
    • +
+
+
+
+
+
+ + + +
+
+
+ + +
+
+

BODA Lab Co., Ltd.

+

+ accurately identifies customer needs to
+ achieve the best completeness and satisfaction.
+ We are working on a project with talented
+ people with high technology. +

+ +
+
+ + +
+
+
+
+ Perspective +

클라이언트의 고유한 가치를 발견하고
차별화된 디지털 경험을 설계합니다.

+
+
+ Uniqueness +
+
+
+
+ Expertise +
+
+ Expertise +

10년 이상의 기술 노하우를 기반으로
최적의 솔루션을 제공합니다.

+
+
+
+
+ Satisfaction +

고객의 만족을 최우선 가치로 삼아
완성도 높은 결과물을 만듭니다.

+
+
+ Satisfaction +
+
+
+
+ + +
+
+

PROJECT

+
+
+
신한유니버설앱 구축
+
+

신한유니버설앱 구축

2023.12
+

신한은행

+
vuescsstypescriptnuxt.js
+
+
+
+
SK그룹 공식앱 내부 모바일
+
+

SK그룹 공식앱 내부 모바일

2023.12
+

SK그룹

+
vuehtml5css3
+
+
+
+
PNS네트웍스 디지털 플랫폼 구축
+
+

PNS네트웍스 디지털 플랫폼 구축

2023.04
+

PNS 네트웍스

+
reactscsstypescript
+
+
+
+
롯데렌터카 차세대
+
+

롯데렌터카 차세대

2022.05
+

롯데

+
vuecss3
+
+
+
+
오뚜기 쇼핑몰 구축
+
+

오뚜기 쇼핑몰 구축

2022.07
+

오뚜기

+
vuehtml5css3typescript
+
+
+
+
캐나다구스 구축
+
+

캐나다구스 구축

2022.05
+

캐나다구스 코리아

+
html5css3typescript
+
+
+
+
한옥홈페이지 서버 이관
+
+

한옥홈페이지 서버 이관

2022.11
+

더한옥

+
vuehtml5css3typescriptaws
+
+
+
+
그린카 차세대
+
+

그린카 차세대

2022.11
+

그린카

+
html5css3typescriptaosios
+
+
+
+
+
+

프로스펙스 구축

2021.01
+

(주)LS네트웍스

+
reactscsstypescript
+
+
+
+
+
+

중소기업창업

2021.11
+

중소벤처기업부

+
html5css3typescript
+
+
+
+
+
+

한화 GAsk 구축 프로젝트

2021.11
+

한화

+
html5css3typescriptjava
+
+
+
+
+
+

(주)국민은행_KB국민은행
리브 Reboot One 구축, 프론트개발

2021.10
+

국민은행

+
vuehtml5css3typescript
+
+
+
+
+
+

코나아이 PC

2021.01
+

코나아이

+
html5css3
+
+
+
+
+ + VIEW MORE +
+
+
+ + +
+
+

EXPERTISE

+

The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.

+
    +
  • + 01 +

    UX Consulting

    +

    UX 컨설팅

    +
    • +
  • + 02 +

    Plarform Building

    +

    플랫폼 구축

    +
    • +
  • + 03 +

    Mobile App & Web

    +

    앱 & 웹 개발

    +
    • +
  • + 04 +

    Service Management

    +

    서비스 운영

    +
    • +
+
+
+ + +
+
+
+

Welcome!
BODA LAB

+
+

Head Office

+
+
+
Address
+
서울특별시 금천구 가산디지털2로 169-16,
907호 (가산하우스디퍼스타)
+
+
+
e-mail
+
bodalab@bodalab.com
+
+
+
tel
+
010-1234-5678
+
+
+
fax
+
010-1234-5678
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+ +
+ +
+
+ +
+
+
+
+ + +
+ + +
+
+ + +
+ +
+ + + diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..0954629 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,66 @@ +import $ from 'jquery' + +$(function () { + + const $gnb = $('#gnb'); + const $hamburger = $('.gnb__hamburger'); + const $mobileNav = $('.gnb__mobile-nav'); + const $sections = $('section[id]'); + const $navLinks = $('.gnb__nav li'); + + // GNB 스크롤 배경 + $(window).on('scroll.gnb', { passive: true }, function () { + $gnb.toggleClass('is-scrolled', $(this).scrollTop() > 40); + updateActiveNav(); + }); + + // 햄버거 메뉴 + $hamburger.on('click', function () { + const isOpen = $hamburger.toggleClass('is-open').hasClass('is-open'); + $hamburger.attr('aria-expanded', isOpen); + $mobileNav.toggleClass('is-open', isOpen); + }); + + // 모바일 메뉴 링크 클릭 시 닫기 + $('.gnb__mobile-nav a').on('click', function () { + $hamburger.removeClass('is-open').attr('aria-expanded', false); + $mobileNav.removeClass('is-open'); + }); + + // 현재 섹션에 따라 GNB 활성화 + function updateActiveNav() { + let current = ''; + const scrollY = $(window).scrollTop() + $(window).height() / 3; + + $sections.each(function () { + if ($(this).offset().top <= scrollY) { + current = $(this).attr('id'); + } + }); + + $navLinks.each(function () { + const href = $(this).find('a').attr('href').replace('#', ''); + $(this).toggleClass('is-active', href === current); + }); + } + + // Contact 아코디언 + $('.contact-accordion__header').on('click', function () { + const $item = $(this).closest('.contact-accordion__item'); + const $body = $('#' + $(this).attr('aria-controls')); + const isOpen = $item.hasClass('is-open'); + + $item.toggleClass('is-open', !isOpen); + $(this).attr('aria-expanded', !isOpen); + + if (isOpen) { + $body.attr('hidden', ''); + } else { + $body.removeAttr('hidden'); + } + }); + + // 초기 실행 + updateActiveNav(); + +}); diff --git a/src/pdf/Mobile_main.pdf b/src/pdf/Mobile_main.pdf new file mode 100644 index 0000000..c03b726 Binary files /dev/null and b/src/pdf/Mobile_main.pdf differ diff --git a/src/pdf/Mobile_navigation drawer.pdf b/src/pdf/Mobile_navigation drawer.pdf new file mode 100644 index 0000000..f100121 Binary files /dev/null and b/src/pdf/Mobile_navigation drawer.pdf differ diff --git a/src/pdf/PC_main.pdf b/src/pdf/PC_main.pdf new file mode 100644 index 0000000..0c89a06 Binary files /dev/null and b/src/pdf/PC_main.pdf differ diff --git a/src/pdf/mo-pages/page-1.png b/src/pdf/mo-pages/page-1.png new file mode 100644 index 0000000..ee0518e Binary files /dev/null and b/src/pdf/mo-pages/page-1.png differ diff --git a/src/pdf/pc-pages/card-p1-left.png b/src/pdf/pc-pages/card-p1-left.png new file mode 100644 index 0000000..fa3bf47 Binary files /dev/null and b/src/pdf/pc-pages/card-p1-left.png differ diff --git a/src/pdf/pc-pages/card-p1-right.png b/src/pdf/pc-pages/card-p1-right.png new file mode 100644 index 0000000..d606c49 Binary files /dev/null and b/src/pdf/pc-pages/card-p1-right.png differ diff --git a/src/pdf/pc-pages/card-p2-left.png b/src/pdf/pc-pages/card-p2-left.png new file mode 100644 index 0000000..768d36b Binary files /dev/null and b/src/pdf/pc-pages/card-p2-left.png differ diff --git a/src/pdf/pc-pages/card-p2-right.png b/src/pdf/pc-pages/card-p2-right.png new file mode 100644 index 0000000..3db8045 Binary files /dev/null and b/src/pdf/pc-pages/card-p2-right.png differ diff --git a/src/pdf/pc-pages/card-p3-left.png b/src/pdf/pc-pages/card-p3-left.png new file mode 100644 index 0000000..c73564c Binary files /dev/null and b/src/pdf/pc-pages/card-p3-left.png differ diff --git a/src/pdf/pc-pages/card-p3-right.png b/src/pdf/pc-pages/card-p3-right.png new file mode 100644 index 0000000..c73b658 Binary files /dev/null and b/src/pdf/pc-pages/card-p3-right.png differ diff --git a/src/pdf/pc-pages/card-p4-left.png b/src/pdf/pc-pages/card-p4-left.png new file mode 100644 index 0000000..25eb504 Binary files /dev/null and b/src/pdf/pc-pages/card-p4-left.png differ diff --git a/src/pdf/pc-pages/card-p4-right.png b/src/pdf/pc-pages/card-p4-right.png new file mode 100644 index 0000000..b1abe44 Binary files /dev/null and b/src/pdf/pc-pages/card-p4-right.png differ diff --git a/src/pdf/pc-pages/card-p5-left.png b/src/pdf/pc-pages/card-p5-left.png new file mode 100644 index 0000000..70cee15 Binary files /dev/null and b/src/pdf/pc-pages/card-p5-left.png differ diff --git a/src/pdf/pc-pages/card-p5-right.png b/src/pdf/pc-pages/card-p5-right.png new file mode 100644 index 0000000..11a14fd Binary files /dev/null and b/src/pdf/pc-pages/card-p5-right.png differ diff --git a/src/pdf/pc-pages/card-p6-left.png b/src/pdf/pc-pages/card-p6-left.png new file mode 100644 index 0000000..4aa2081 Binary files /dev/null and b/src/pdf/pc-pages/card-p6-left.png differ diff --git a/src/pdf/pc-pages/card-p6-right.png b/src/pdf/pc-pages/card-p6-right.png new file mode 100644 index 0000000..075f520 Binary files /dev/null and b/src/pdf/pc-pages/card-p6-right.png differ diff --git a/src/pdf/pc-pages/hires-1.png b/src/pdf/pc-pages/hires-1.png new file mode 100644 index 0000000..289889a Binary files /dev/null and b/src/pdf/pc-pages/hires-1.png differ diff --git a/src/pdf/pc-pages/page-1.png b/src/pdf/pc-pages/page-1.png new file mode 100644 index 0000000..3602d4b Binary files /dev/null and b/src/pdf/pc-pages/page-1.png differ diff --git a/src/pdf/pc-pages/sec-about.png b/src/pdf/pc-pages/sec-about.png new file mode 100644 index 0000000..4c889fa Binary files /dev/null and b/src/pdf/pc-pages/sec-about.png differ diff --git a/src/pdf/pc-pages/sec-boda-intro.png b/src/pdf/pc-pages/sec-boda-intro.png new file mode 100644 index 0000000..1111644 Binary files /dev/null and b/src/pdf/pc-pages/sec-boda-intro.png differ diff --git a/src/pdf/pc-pages/sec-contact.png b/src/pdf/pc-pages/sec-contact.png new file mode 100644 index 0000000..7e1b624 Binary files /dev/null and b/src/pdf/pc-pages/sec-contact.png differ diff --git a/src/pdf/pc-pages/sec-expertise.png b/src/pdf/pc-pages/sec-expertise.png new file mode 100644 index 0000000..8281ee7 Binary files /dev/null and b/src/pdf/pc-pages/sec-expertise.png differ diff --git a/src/pdf/pc-pages/sec-history.png b/src/pdf/pc-pages/sec-history.png new file mode 100644 index 0000000..98d72f8 Binary files /dev/null and b/src/pdf/pc-pages/sec-history.png differ diff --git a/src/pdf/pc-pages/sec-intro.png b/src/pdf/pc-pages/sec-intro.png new file mode 100644 index 0000000..49c14e0 Binary files /dev/null and b/src/pdf/pc-pages/sec-intro.png differ diff --git a/src/pdf/pc-pages/sec-project.png b/src/pdf/pc-pages/sec-project.png new file mode 100644 index 0000000..6e1525e Binary files /dev/null and b/src/pdf/pc-pages/sec-project.png differ diff --git a/src/pdf/pc-pages/sec-vision.png b/src/pdf/pc-pages/sec-vision.png new file mode 100644 index 0000000..6f1a175 Binary files /dev/null and b/src/pdf/pc-pages/sec-vision.png differ diff --git a/src/pdf/pc-pages/sec2-about-text.png b/src/pdf/pc-pages/sec2-about-text.png new file mode 100644 index 0000000..6513117 Binary files /dev/null and b/src/pdf/pc-pages/sec2-about-text.png differ diff --git a/src/pdf/pc-pages/sec2-contact-top.png b/src/pdf/pc-pages/sec2-contact-top.png new file mode 100644 index 0000000..d81ab77 Binary files /dev/null and b/src/pdf/pc-pages/sec2-contact-top.png differ diff --git a/src/pdf/pc-pages/sec2-footer.png b/src/pdf/pc-pages/sec2-footer.png new file mode 100644 index 0000000..8ac5f44 Binary files /dev/null and b/src/pdf/pc-pages/sec2-footer.png differ diff --git a/src/pdf/pc-pages/sec2-project-bottom.png b/src/pdf/pc-pages/sec2-project-bottom.png new file mode 100644 index 0000000..51a98fb Binary files /dev/null and b/src/pdf/pc-pages/sec2-project-bottom.png differ diff --git a/src/pdf/pc-pages/sec2-project-top.png b/src/pdf/pc-pages/sec2-project-top.png new file mode 100644 index 0000000..2a7fccc Binary files /dev/null and b/src/pdf/pc-pages/sec2-project-top.png differ diff --git a/src/pdf/pc-pages/sec2-vision-text.png b/src/pdf/pc-pages/sec2-vision-text.png new file mode 100644 index 0000000..b9bcc76 Binary files /dev/null and b/src/pdf/pc-pages/sec2-vision-text.png differ diff --git a/src/pdf/pc-pages/zoom-proj-1.png b/src/pdf/pc-pages/zoom-proj-1.png new file mode 100644 index 0000000..da8f249 Binary files /dev/null and b/src/pdf/pc-pages/zoom-proj-1.png differ diff --git a/src/pdf/pc-pages/zoom-proj-2.png b/src/pdf/pc-pages/zoom-proj-2.png new file mode 100644 index 0000000..a7200ee Binary files /dev/null and b/src/pdf/pc-pages/zoom-proj-2.png differ diff --git a/src/pdf/pc-pages/zoom-proj-3.png b/src/pdf/pc-pages/zoom-proj-3.png new file mode 100644 index 0000000..feeb1e2 Binary files /dev/null and b/src/pdf/pc-pages/zoom-proj-3.png differ diff --git a/src/pdf/pc-pages/zoom-proj-4.png b/src/pdf/pc-pages/zoom-proj-4.png new file mode 100644 index 0000000..f702607 Binary files /dev/null and b/src/pdf/pc-pages/zoom-proj-4.png differ diff --git a/src/pdf/pc-pages/zoom-proj-5.png b/src/pdf/pc-pages/zoom-proj-5.png new file mode 100644 index 0000000..d7a9b46 Binary files /dev/null and b/src/pdf/pc-pages/zoom-proj-5.png differ diff --git a/src/pdf/pc-pages/zoom-vision-detail.png b/src/pdf/pc-pages/zoom-vision-detail.png new file mode 100644 index 0000000..a5e63a8 Binary files /dev/null and b/src/pdf/pc-pages/zoom-vision-detail.png differ diff --git a/src/scss/base/_font.scss b/src/scss/base/_font.scss new file mode 100644 index 0000000..6496053 --- /dev/null +++ b/src/scss/base/_font.scss @@ -0,0 +1,2 @@ +@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css'); +@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap'); diff --git a/src/scss/base/_mixin.scss b/src/scss/base/_mixin.scss new file mode 100644 index 0000000..c2edc09 --- /dev/null +++ b/src/scss/base/_mixin.scss @@ -0,0 +1,7 @@ +@use 'variable' as *; + +@mixin mo { + @media (max-width: #{$bp-mo}) { + @content; + } +} diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss new file mode 100644 index 0000000..8558ada --- /dev/null +++ b/src/scss/base/_reset.scss @@ -0,0 +1,90 @@ +@use 'variable' as *; +@use 'mixin' as *; + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: $font-sans; + background-color: $color-bg; + color: $color-white; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; +} + +img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +ul, ol { list-style: none; } + +a { + color: inherit; + text-decoration: none; +} + +address { font-style: normal; } + +// Common +.section { + position: relative; + width: 100%; +} + +.section-title { + font-family: $font-sans; + font-size: clamp(28px, 3vw, 40px); + font-weight: 600; + letter-spacing: 0.02em; + color: $color-white; + line-height: 1; + + &--dark { + color: $color-dark; + } +} + +.scroll-down { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.3s; + + &:hover { opacity: 0.6; } + + svg { + width: 100%; + height: 100%; + } + + &--sm { + position: relative; + bottom: auto; + left: auto; + transform: none; + margin-top: 40px; + } + + @include mo { + width: 52px; + height: 52px; + bottom: 24px; + } +} diff --git a/src/scss/base/_variable.scss b/src/scss/base/_variable.scss new file mode 100644 index 0000000..4d2cca9 --- /dev/null +++ b/src/scss/base/_variable.scss @@ -0,0 +1,16 @@ +$color-bg: #0d0d0d; +$color-bg-light: #e5e5e5; +$color-cyan: #00f0ff; +$color-purple: #8f00ff; +$color-blue: #7796ff; +$color-white: #ffffff; +$color-dark: #0d0d0d; +$color-gray: #999; + +$font-sans: 'SUIT Variable', 'SUIT', sans-serif; +$font-serif: 'DM Serif Display', serif; + +$gnb-height: 80px; +$gnb-height-mo: 60px; + +$bp-mo: 768px; diff --git a/src/scss/index.scss b/src/scss/index.scss new file mode 100644 index 0000000..f030099 --- /dev/null +++ b/src/scss/index.scss @@ -0,0 +1,9 @@ +// Base +@use 'base/font'; +@use 'base/reset'; + +// Pages +@use 'page/home'; +@use 'page/about'; +@use 'page/projects'; +@use 'page/contact'; diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss new file mode 100644 index 0000000..d991ee1 --- /dev/null +++ b/src/scss/page/_about.scss @@ -0,0 +1,361 @@ +@use '../base/variable' as *; +@use '../base/mixin' as *; + +// About +.section--about { + height: 100vh; + background: $color-bg; + display: flex; + align-items: stretch; + + @include mo { + height: auto; + min-height: 100vh; + flex-direction: column; + } +} + +.about__inner { + display: flex; + width: 100%; + height: 100%; + + @include mo { + flex-direction: column; + } +} + +.about__text { + display: flex; + flex-direction: column; + justify-content: center; + width: 45%; + padding: $gnb-height 48px 60px; + gap: 80px; + + @include mo { + width: 100%; + padding: calc(#{$gnb-height-mo} + 40px) 24px 40px; + gap: 40px; + } +} + +.about__desc { + font-size: clamp(13px, 1.1vw, 16px); + font-weight: 300; + line-height: 1.8; + color: $color-white; + opacity: 0.9; + + @include mo { + br { display: none; } + } +} + +.about__image { + position: relative; + width: 55%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + + @include mo { + width: 100%; + height: 56vw; + min-height: 260px; + } +} + +.about__caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 20px 24px; + font-size: clamp(18px, 2.5vw, 36px); + font-weight: 400; + color: $color-white; + background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + @include mo { + font-size: 16px; + padding: 16px; + } +} + +// History +.section--history { + background: $color-bg; +} + +.history__top { + background: $color-bg-light; + padding: 80px 48px 60px; + + @include mo { + padding: 60px 24px 40px; + } + + .section-title--dark { + margin-bottom: 48px; + + @include mo { + margin-bottom: 32px; + } + } +} + +.history__timeline { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0 24px; + + @include mo { + grid-template-columns: 1fr 1fr; + gap: 40px 20px; + } +} + +.history__year-group { + display: flex; + flex-direction: column; +} + +.history__year { + font-size: clamp(24px, 2.5vw, 32px); + font-weight: 100; + color: $color-dark; + margin-bottom: 16px; + line-height: 1; +} + +.history__divider { + width: 0.5px; + background: $color-dark; + align-self: flex-start; + height: 0; + margin-bottom: 16px; + opacity: 0.4; +} + +.history__list { + display: flex; + flex-direction: column; + gap: 16px; + + li { + display: flex; + flex-direction: column; + gap: 4px; + + strong { + font-size: 14px; + font-weight: 700; + color: $color-dark; + line-height: 1.6; + } + + span { + font-size: clamp(12px, 1vw, 14px); + font-weight: 300; + color: $color-dark; + line-height: 1.6; + } + } +} + +.history__bottom { + background: $color-bg; + padding: 0 48px 80px; + overflow: hidden; + + @include mo { + padding: 0 24px 60px; + } +} + +.history__images { + position: relative; + height: 400px; + margin-top: -80px; + + @include mo { + height: 260px; + margin-top: -40px; + } +} + +.history__img { + position: absolute; + object-fit: cover; + + &--1 { + width: 260px; + height: 170px; + left: 0; + bottom: 0; + + @include mo { + width: 120px; + height: 80px; + } + } + + &--2 { + width: 370px; + height: 400px; + left: 50%; + transform: translateX(-50%); + top: 0; + + @include mo { + width: 180px; + height: 200px; + left: 50%; + } + } + + &--3 { + width: 300px; + height: 190px; + right: 0; + bottom: 40px; + + @include mo { + width: 130px; + height: 90px; + bottom: 20px; + } + } +} + +// Boda Intro +.section--boda-intro { + height: 100vh; + background: $color-bg; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + @include mo { + min-height: 100vh; + height: auto; + padding: 80px 24px; + } +} + +.boda-intro__content { + display: flex; + flex-direction: column; + align-items: center; +} + +.boda-intro__title { + font-size: clamp(20px, 2vw, 28px); + font-weight: 600; + letter-spacing: 0.02em; + margin-bottom: 32px; +} + +.boda-intro__desc { + font-size: clamp(14px, 1.3vw, 18px); + font-weight: 300; + line-height: 1.8; + color: rgba($color-white, 0.8); + text-align: center; + + @include mo { + br { display: none; } + } +} + +// Vision +.section--vision { + background: $color-bg; +} + +.vision__inner { + display: flex; + flex-direction: column; +} + +.vision__item { + display: flex; + align-items: stretch; + height: 33.333vh; + min-height: 280px; + + &--reverse { + flex-direction: row-reverse; + } + + @include mo { + flex-direction: column !important; + height: auto; + min-height: unset; + } +} + +.vision__text { + display: flex; + flex-direction: column; + justify-content: center; + width: 50%; + padding: 40px 80px; + gap: 20px; + + p { + font-size: clamp(13px, 1vw, 15px); + font-weight: 300; + line-height: 1.8; + color: rgba($color-white, 0.75); + + @include mo { + br { display: none; } + } + } + + @include mo { + width: 100%; + padding: 32px 24px; + } +} + +.vision__keyword { + font-family: $font-serif; + font-style: italic; + font-size: clamp(32px, 4vw, 56px); + color: $color-white; + line-height: 1; +} + +.vision__image { + width: 50%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s ease; + } + + &:hover img { + transform: scale(1.04); + } + + @include mo { + width: 100%; + height: 56vw; + min-height: 220px; + } +} diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss new file mode 100644 index 0000000..5117e95 --- /dev/null +++ b/src/scss/page/_contact.scss @@ -0,0 +1,471 @@ +@use '../base/variable' as *; +@use '../base/mixin' as *; + +// Expertise +.section--expertise { + background: $color-bg; + padding: 100px 48px; + border-top: 1px solid rgba($color-white, 0.08); + + @include mo { + padding: 60px 24px; + } +} + +.expertise__inner { + max-width: 1200px; + margin: 0 auto; +} + +.expertise__desc { + margin-top: 20px; + margin-bottom: 64px; + font-size: 15px; + font-weight: 300; + color: rgba($color-white, 0.6); + + @include mo { + margin-bottom: 40px; + font-size: 14px; + } +} + +.expertise__list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + border-top: 1px solid rgba($color-white, 0.12); + + @include mo { + grid-template-columns: 1fr 1fr; + } +} + +.expertise__item { + padding: 40px 32px 40px 0; + border-right: 1px solid rgba($color-white, 0.12); + + &:last-child { + border-right: none; + + @include mo { + border-right: 1px solid rgba($color-white, 0.12); + } + } + + @include mo { + padding: 28px 20px 28px 0; + + &:nth-child(2), + &:nth-child(4) { + border-right: none; + } + + &:nth-child(3), + &:nth-child(4) { + border-top: 1px solid rgba($color-white, 0.12); + } + } +} + +.expertise__num { + display: block; + font-size: 12px; + font-weight: 400; + color: $color-cyan; + letter-spacing: 0.1em; + margin-bottom: 20px; +} + +.expertise__name { + font-size: clamp(16px, 1.4vw, 20px); + font-weight: 400; + color: $color-white; + margin-bottom: 16px; + line-height: 1.3; +} + +.expertise__text { + font-size: 13px; + font-weight: 300; + line-height: 1.7; + color: rgba($color-white, 0.55); +} + +// Contact +.section--contact { + background: $color-bg; + display: flex; + flex-direction: column; + border-top: 1px solid rgba($color-white, 0.08); +} + +.contact__inner { + display: flex; + align-items: stretch; + flex: 1; + min-height: 60vh; + + @include mo { + flex-direction: column; + min-height: unset; + } +} + +.contact__left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; + width: 50%; + padding: 80px 80px 80px 48px; + + @include mo { + width: 100%; + padding: 60px 24px 40px; + gap: 32px; + } +} + +.contact__greeting { + font-family: $font-serif; + font-style: italic; + font-size: clamp(36px, 5vw, 72px); + font-weight: 400; + line-height: 1.1; + color: $color-white; + + span { + display: block; + font-size: clamp(16px, 1.5vw, 22px); + font-family: $font-sans; + font-style: normal; + font-weight: 900; + letter-spacing: 0.15em; + text-transform: uppercase; + margin-top: 8px; + color: $color-cyan; + } +} + +.contact__label { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba($color-white, 0.5); + margin-bottom: 16px; +} + +.contact__info-list { + display: flex; + flex-direction: column; + gap: 16px; +} + +.contact__info-item { + display: flex; + flex-direction: column; + gap: 4px; + + dt { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.08em; + color: $color-cyan; + } + + dd { + font-size: 14px; + font-weight: 300; + line-height: 1.7; + color: rgba($color-white, 0.85); + + a { + color: inherit; + transition: opacity 0.2s; + &:hover { opacity: 0.7; } + } + } +} + +.contact__right { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 48px 80px 0; + gap: 24px; + + @include mo { + width: 100%; + padding: 0 24px 60px; + } +} + +.contact__map { + width: 100%; + aspect-ratio: 4 / 3; + background: #1a1a1a url('../../images/map.svg') center / cover no-repeat; + border: 1px solid rgba($color-white, 0.1); + overflow: hidden; +} + + +// Contact accordion — 프로젝트문의 / 채용 +.contact-accordion { + border-top: 1px solid rgba($color-white, 0.08); +} + +.contact-accordion__item { + border-bottom: 1px solid rgba($color-white, 0.08); +} + +.contact-accordion__header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 28px 48px; + background: none; + border: none; + cursor: pointer; + color: $color-white; + font-size: clamp(16px, 1.4vw, 20px); + font-weight: 400; + font-family: $font-sans; + text-align: left; + transition: opacity 0.2s; + + &:hover { opacity: 0.7; } + + @include mo { + padding: 22px 24px; + } +} + +.contact-accordion__icon { + width: 24px; + height: 24px; + flex-shrink: 0; + transition: transform 0.3s ease; +} + +.contact-accordion__item.is-open .contact-accordion__icon { + transform: rotate(180deg); +} + +.contact-accordion__body { + overflow: hidden; + max-height: 0; + transition: max-height 0.4s ease; + + &:not([hidden]) { + max-height: 800px; + } + + &[hidden] { + display: block !important; + max-height: 0; + } +} + +// 문의 폼 +.contact-form { + padding: 8px 48px 48px; + display: flex; + flex-direction: column; + gap: 12px; + + @include mo { + padding: 8px 24px 40px; + } +} + +.contact-form__row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + + @include mo { + grid-template-columns: 1fr; + } +} + +.contact-form__input, +.contact-form__textarea { + width: 100%; + background: rgba($color-white, 0.04); + border: 1px solid rgba($color-white, 0.1); + color: $color-white; + font-family: $font-sans; + font-size: 14px; + font-weight: 300; + padding: 14px 16px; + outline: none; + transition: border-color 0.2s; + + &::placeholder { color: rgba($color-white, 0.35); } + &:focus { border-color: rgba($color-white, 0.3); } +} + +.contact-form__textarea { + resize: none; + height: 180px; +} + +.contact-form__agree { + margin-top: 4px; +} + +.contact-form__checkbox { + display: inline-flex; + align-items: center; + gap: 10px; + cursor: pointer; + font-size: 13px; + font-weight: 300; + color: rgba($color-white, 0.6); + + input[type="checkbox"] { display: none; } + + &-box { + width: 18px; + height: 18px; + border: 1px solid rgba($color-white, 0.3); + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, border-color 0.2s; + } + + input:checked + &-box { + background: $color-cyan; + border-color: $color-cyan; + + &::after { + content: ''; + display: block; + width: 10px; + height: 6px; + border-left: 1.5px solid $color-dark; + border-bottom: 1.5px solid $color-dark; + transform: rotate(-45deg) translateY(-2px); + } + } +} + +.contact-form__submit { + display: flex; + justify-content: center; + margin-top: 8px; +} + +.btn-send { + padding: 12px 48px; + background: $color-cyan; + border: none; + border-radius: 100px; + color: $color-dark; + font-family: $font-sans; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.1em; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { opacity: 0.8; } +} + +// 채용 태그 +.career-tags { + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 8px 48px 48px; + + @include mo { + padding: 8px 24px 40px; + } +} + +.career-tag { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + border: 1px solid rgba($color-white, 0.25); + border-radius: 100px; + font-size: 14px; + font-weight: 300; + color: $color-white; + transition: border-color 0.2s, color 0.2s; + + svg { + width: 14px; + height: 14px; + flex-shrink: 0; + } + + &:hover { + border-color: $color-cyan; + color: $color-cyan; + } +} + +// Footer +.footer { + border-top: 1px solid rgba($color-white, 0.08); + padding: 32px 48px; + + @include mo { + padding: 24px 20px; + } +} + +.footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + flex-wrap: wrap; + + @include mo { + flex-direction: column; + align-items: flex-start; + gap: 20px; + } +} + +.footer__brand { + font-size: clamp(18px, 2vw, 28px); + font-weight: 700; + letter-spacing: 0.08em; + color: rgba($color-white, 0.4); + line-height: 1.2; + text-transform: uppercase; +} + +.footer__contact { + font-size: 13px; + font-weight: 300; + color: rgba($color-white, 0.5); + + a { + color: rgba($color-white, 0.5); + transition: color 0.2s; + &:hover { color: $color-white; } + } + + @include mo { + font-size: 12px; + } +} + +.footer__copy { + font-size: 12px; + font-weight: 300; + color: rgba($color-white, 0.3); + letter-spacing: 0.03em; +} diff --git a/src/scss/page/_home.scss b/src/scss/page/_home.scss new file mode 100644 index 0000000..a61dc71 --- /dev/null +++ b/src/scss/page/_home.scss @@ -0,0 +1,231 @@ +@use '../base/variable' as *; +@use '../base/mixin' as *; + +// GNB +.gnb { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: $gnb-height; + z-index: 100; + transition: background 0.4s; + + &.is-scrolled { + background: rgba($color-bg, 0.92); + backdrop-filter: blur(12px); + } + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + padding: 0 48px; + + @include mo { + padding: 0 20px; + height: $gnb-height-mo; + } + } + + &__logo { + display: flex; + align-items: center; + + svg { + width: 90px; + height: auto; + } + } + + &__nav { + ul { + display: flex; + align-items: center; + gap: 0; + } + + li a { + display: block; + padding: 24px 32px; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.05em; + color: $color-white; + transition: color 0.2s; + + &:hover { color: $color-cyan; } + } + + li.is-active a { + color: $color-cyan; + } + + @include mo { + display: none; + } + } + + &__hamburger { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; + padding: 0; + + span { + display: block; + width: 100%; + height: 1px; + background: $color-white; + transition: transform 0.3s, opacity 0.3s; + } + + &.is-open { + span:nth-child(1) { transform: translateY(6px) rotate(45deg); } + span:nth-child(2) { opacity: 0; } + span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } + } + + @include mo { + display: flex; + } + } + + &__mobile-nav { + display: none; + position: absolute; + top: $gnb-height-mo; + left: 0; + width: 100%; + background: rgba($color-bg, 0.97); + backdrop-filter: blur(16px); + padding: 16px 0 24px; + transform: translateY(-100%); + opacity: 0; + transition: transform 0.35s ease, opacity 0.35s ease; + pointer-events: none; + + ul { + display: flex; + flex-direction: column; + } + + li a { + display: block; + padding: 14px 24px; + font-size: 18px; + font-weight: 400; + letter-spacing: 0.05em; + color: $color-white; + } + + &.is-open { + transform: translateY(0); + opacity: 1; + pointer-events: auto; + } + + @include mo { + display: block; + } + } +} + +// Intro +.section--intro { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: $color-bg; +} + +.intro__blobs { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; +} + +.blob { + position: absolute; + border-radius: 50%; + filter: blur(120px); + opacity: 0.55; + + &--cyan { + width: 56vw; + height: 56vw; + background: $color-cyan; + top: -10%; + right: -10%; + + @include mo { + width: 90vw; + height: 90vw; + right: -20%; + top: -5%; + } + } + + &--purple { + width: 32vw; + height: 32vw; + background: $color-purple; + top: 15%; + left: 5%; + + @include mo { + width: 60vw; + height: 60vw; + left: -15%; + top: 20%; + } + } + + &--blue { + width: 24vw; + height: 24vw; + background: $color-blue; + bottom: 10%; + left: -5%; + + @include mo { + width: 50vw; + height: 50vw; + left: -10%; + bottom: 5%; + } + } +} + +.intro__content { + position: relative; + text-align: center; + z-index: 1; +} + +.intro__sub { + font-size: clamp(16px, 2.5vw, 36px); + font-weight: 100; + letter-spacing: 0.02em; + color: $color-white; + margin-bottom: clamp(16px, 2vw, 32px); + line-height: 1.2; +} + +.intro__title { + font-size: clamp(14px, 1.5vw, 20px); + font-weight: 900; + letter-spacing: 0.2em; + text-transform: uppercase; + color: $color-white; +} diff --git a/src/scss/page/_projects.scss b/src/scss/page/_projects.scss new file mode 100644 index 0000000..31b63ef --- /dev/null +++ b/src/scss/page/_projects.scss @@ -0,0 +1,146 @@ +@use '../base/variable' as *; +@use '../base/mixin' as *; + +.section--project { + background: $color-bg; + padding: 100px 48px; + + @include mo { + padding: 60px 20px; + } +} + +.project__inner { + max-width: 1200px; + margin: 0 auto; +} + +.project__heading { + margin-bottom: 60px; + + @include mo { + margin-bottom: 36px; + } +} + +.project__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 40px; + + @include mo { + grid-template-columns: 1fr; + gap: 32px; + } +} + +.project__card { + display: flex; + flex-direction: column; + gap: 16px; + cursor: pointer; + + &:hover .project__thumb img { + transform: scale(1.04); + } +} + +.project__thumb { + width: 100%; + aspect-ratio: 16 / 10; + overflow: hidden; + background: #1a1a1a; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; + } +} + +.project__thumb--empty { + background: #1a1a1a; +} + +.project__info { + display: flex; + flex-direction: column; + gap: 8px; +} + +.project__meta { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 8px; +} + +.project__name { + font-size: clamp(14px, 1.1vw, 16px); + font-weight: 500; + color: $color-white; + line-height: 1.4; +} + +.project__date { + font-size: 12px; + font-weight: 300; + color: $color-gray; + white-space: nowrap; + padding-top: 2px; +} + +.project__company { + font-size: 13px; + font-weight: 300; + color: rgba($color-white, 0.5); +} + +.project__stack { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 4px; +} + +.project__tag { + display: inline-block; + padding: 3px 10px; + border: 1px solid rgba($color-white, 0.2); + font-size: 11px; + font-weight: 300; + color: rgba($color-white, 0.55); + letter-spacing: 0.03em; +} + +.project__more { + display: flex; + justify-content: center; + margin-top: 64px; + + @include mo { + margin-top: 48px; + } +} + +.btn-more { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 14px 40px; + border: 1px solid rgba($color-white, 0.4); + border-radius: 100px; + font-size: 14px; + font-weight: 400; + letter-spacing: 0.1em; + color: $color-white; + transition: background 0.3s, border-color 0.3s, color 0.3s; + + &:hover { + background: $color-white; + color: $color-dark; + border-color: $color-white; + } +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..32100fb --- /dev/null +++ b/vite.config.js @@ -0,0 +1,36 @@ +import { defineConfig } from 'vite' +import viteImagemin from 'vite-plugin-imagemin' + +export default defineConfig({ + root: 'src', + build: { + outDir: '../dist', + emptyOutDir: true, + assetsDir: 'assets', + }, + server: { + port: 3000, + open: true, + }, + css: { + preprocessorOptions: { + scss: { + api: 'modern-compiler', + }, + }, + }, + plugins: [ + viteImagemin({ + gifsicle: { optimizationLevel: 3 }, + optipng: { optimizationLevel: 5 }, + mozjpeg: { quality: 80 }, + pngquant: { quality: [0.7, 0.9], speed: 4 }, + svgo: { + plugins: [ + { name: 'removeViewBox', active: false }, + { name: 'removeEmptyAttrs', active: true }, + ], + }, + }), + ], +})