Merge pull request #2 from Dev-KNU/develop

Develop

src/App.vue

@@ -5,9 +5,11 @@ import Information from '@/components/Information.vue'
 import Speaker from '@/components/Speaker.vue'
 import Motive from '@/components/Motive.vue'
 import Footer from '@/components/Footer.vue'
+import Background from '@/components/Background.vue'
 </script>
 
 <template>
+    <Background />
     <NavbarHeader />
     <div class='wrapper'>
         <MainTitle />
@@ -24,6 +26,6 @@ div.wrapper {
     padding: 130px 0 100px 0;
     flex-direction: column;
     align-items: center;
-    gap: 80px;
+    gap: 128px;
 }
 </style>

src/components/Background.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import Python from '@/assets/image/python_logo.png'
+import Figma from '@/assets/image/figma_logo.png'
+import Github from '@/assets/image/github_logo.png'
+import Npm from '@/assets/image/npm_logo.png'
+import Swift from '@/assets/image/swift_logo.png'
+import Android from '@/assets/image/android_logo.png'
+import Jabascript from '@/assets/image/javascript_logo.png'
+import InteliJ from '@/assets/image/inteliJ_logo.png'
+import Unity from '@/assets/image/unity_logo.png'
+
+import Discord from '@/assets/image/discord_logo.png'
+import Gpt from '@/assets/image/chatgpt_logo.png'
+import Terminal from '@/assets/image/terminal_logo.png'
+import Notepad from '@/assets/image/notepad_logo.png'
+import Xcode from '@/assets/image/xcode_logo.png'
+import Apple from '@/assets/image/apple_logo.png'
+
+import BackgroundIcon from '@/components/BackgroundIcon.vue'
+</script>
+
+<template>
+    <div class="backgrounds">
+        <div class='background-main'>
+            <BackgroundIcon :icon='Python' left='221.67px' top='20.85px'/>
+            <BackgroundIcon :icon='Figma' right='223.64px' top='6px'/>
+            <BackgroundIcon :icon='Github' left='-62.75px' top='135.25px'/>
+            <BackgroundIcon :icon='Npm' right='-62.16px' top='142.35px'/>
+            <BackgroundIcon :icon='Swift' left='-40px' top='496px'/>
+            <BackgroundIcon :icon='Android' right='-98px' top='397px'/>
+            <BackgroundIcon :icon='Jabascript' right='154.77px' top='599.44px'/>
+
+            <BackgroundIcon :icon='InteliJ' left='222.42px' top='332.42px'/>
+            <BackgroundIcon :icon='Unity' right='133.04px' top='278.62px'/>
+        </div>
+        <div class='other'>
+            <BackgroundIcon :icon='Discord' left='217px' top='868px'/>
+            <BackgroundIcon :icon='Gpt' left='35px' top='1201px'/>
+            <BackgroundIcon :icon='Terminal' right='-59.03px' top='1151px'/>
+            <BackgroundIcon :icon='Notepad' right='151.47px' top='1680.36px'/>
+            <BackgroundIcon :icon='Xcode' left='211px' top='2092px'/>
+            <BackgroundIcon :icon='Apple' right='203.16px' top='2200px'/>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.backgrounds {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+
+    position: absolute;
+
+    .background-main {
+        opacity: 0.5;
+    }
+
+    .logo {
+        display: inline-flex;
+        padding: 10px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+
+
+        filter: blur(6px);
+
+        position: absolute;
+    }
+}
+</style>

src/components/BackgroundIcon.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+defineProps<{
+    icon: string,
+    left: string | null,
+    right: string | null,
+    top: string | null
+
+}>()
+</script>
+
+<template>
+    <div class='logo'>
+        <img :src='icon' alt='icon' >
+    </div>
+</template>
+
+<style scoped lang='scss'>
+    .logo {
+        left: v-bind(left);
+        right: v-bind(right);
+        top: v-bind(top);
+    }
+</style>

src/components/MainLogo.vue

@@ -0,0 +1,47 @@
+<script setup lang='ts'>
+import LogoStrock from '@/assets/image/logo_strok.svg'
+</script>
+
+<template>
+    <div class='logo-container'>
+        <div class='effect pos'>
+            <img :src='LogoStrock' alt='logo-stroke'>
+        </div>
+        <div class='logo pos overlay'></div>
+        <div class='logo overlay multiply'></div>
+
+    </div>
+</template>
+
+<style scoped lang='scss'>
+.logo-container {
+    transform: rotate(2.347deg);
+}
+
+.pos {
+    position: absolute;
+}
+
+.multiply {
+    mix-blend-mode: multiply;
+}
+
+
+.effect {
+    width: 100%;
+    filter: drop-shadow(0.563px 0.563px 240px rgba(255, 255, 255, 0.32)) drop-shadow(18px 27px 128px rgba(136, 196, 240, 0.16)) drop-shadow(-24px -24px 128px rgba(255, 94, 94, 0.16));
+}
+
+.logo {
+    width: 345.68px;
+    height: 454.206px;
+
+    background: url('@/assets/image/effect.png'), url('@/assets/image/effect.png'),url("@/assets/image/logo2_hologram.png");
+    background-blend-mode: overlay;
+    mask: url("@/assets/image/logo2_hologram.png");
+    filter: drop-shadow(0.563px 0.563px 240px rgba(255, 255, 255, 0.32)) drop-shadow(18px 27px 128px rgba(136, 196, 240, 0.16)) drop-shadow(-24px -24px 128px rgba(255, 94, 94, 0.16));
+
+}
+
+
+</style>

src/components/MainTitle.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import MainLogo from '@/assets/image/logo2.svg'
+import MainLogo from '@/components/MainLogo.vue'
 </script>
 
 <template>
     <div class="main">
-        <img :src="MainLogo" alt="main logo" />
+        <MainLogo />
         <span class="main-title">강원도 유일의 개발 컨퍼런스, GWDC24가 곧 찾아옵니다.</span>
     </div>
 </template>
@@ -20,10 +20,6 @@ div.main {
     gap: 80px;
     max-width: 364px;
 
-    img {
-        width: 320px;
-    }
-
     span.main-title {
         color: $color-text-100;
         text-align: center;

src/components/Motive.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="motive">
         <h3>강원 지역의 학생과 개발자들은<br/>
-            오프라인 개발 컨퍼런스에 참석하기 위해<br/>
+            개발 컨퍼런스에 참석하기 위해<br/>
             항상 수도권으로 이동해야 했습니다.</h3>
-        <span>우리는 그러한 낮은 접근성을 해소하고 강원 지역 개발자의 네트워킹 기회를 마련하고자 GWDC24를 기획했습니다.</span>
+        <span>우리는 그러한 낮은 접근성을 해소하고 강원 지역 개발자의 네트워킹 기회를 마련하고자<br/>
+            GWDC24를 기획했습니다.</span>
         <span>GWDC24는 강원 지역 기반 개발 커뮤니티 Dev.KNU를 중심으로 이뤄지는 비영리 개발자 컨퍼런스로, 강원 지역 개발 커뮤니티의 확대와 네트워크 구축을 위해 진행하는 행사입니다.</span>
         <span>GWDC24를 통해 구축된 네트워크를 통해 강원 지역 개발자들은 다양한 지역과 배경을 가진 개발자들과의 교류를 통해 전문적인 성장을 이룰 수 있으며, 협업의 기회를 확대할 수 있을 것입니다.</span>
     </div>
@@ -22,7 +23,7 @@ div.motive {
     h3 {
         color: $color-text-100;
         font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
-        font-size: 18px;
+        font-size: 24px;
         font-style: normal;
         font-weight: 600;
         line-height: normal;
@@ -32,11 +33,11 @@ div.motive {
     span {
         color: $color-text-200;
         font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
-        font-size: 14px;
+        font-size: 18px;
         font-style: normal;
         font-weight: 500;
         line-height: 20px; /* 142.857% */
-        letter-spacing: -0.28px;
+        //letter-spacing: -0.28px;
     }
 }
 </style>

src/components/NavbarHeader.vue

@@ -22,9 +22,10 @@ $color-backgroun-navbar: rgba($color-white, .1);
     align-items: flex-start;
     gap: 10px;
 
-    z-index: 1;
+    z-index: 10;
     width: 100%;
 
+    backdrop-filter: blur(10px);
     background: $color-backgroun-navbar;
 }
 </style>

src/components/Speaker.vue

@@ -13,16 +13,16 @@ import speaker_blur_img from '@/assets/image/speaker_blur_img.svg'
 <template>
     <div class='speakers'>
         <div class='speakers-blur'>
-            <div class='speakers-blur-text'>
+            <div class='speakers-blur-container'>
                 <img :src='speaker_blur_img' alt='speaker blur'>
                 <span>GWDC24를 빛내 주실 연사진과 내용은 추후 공개 예정입니다.</span>
             </div>
         </div>
         <div class='speakers-container'>
-            <SpeakerMember :SpeakerName='"연사1"' :SpeakerInfo='"아직 공개되지 않았습니다"' :SpeakerSession='"궁금해서 여기까지 오셨다면 축하드립니다! 이스터에그를 발견하셨습니다"' :SpeakerImg='speaker_1'/>
-            <SpeakerMember :SpeakerName='"연사2"' :SpeakerInfo='"곧 공개될 예정이니 기다려주세요"' :SpeakerSession='"이곳 말고도 다른 곳에 이스터에그가 있으니, 잘 탐색해주세요 :)"' :SpeakerImg='speaker_2'/>
-            <SpeakerMember :SpeakerName='"연사3"' :SpeakerInfo='"3월 초, 기대해주세요"' :SpeakerSession='"이 웹페이지는 Vue + TS 기반으로 만들어졌습니다"' :SpeakerImg='speaker_3'/>
-            <SpeakerMember :SpeakerName='"연사4"' :SpeakerInfo='"현재 연사 섭외중입니다"' :SpeakerSession='"이 이스터에그는 오거나이저 이용현님의 아이디어로 제작되었습니다"' :SpeakerImg='speaker_4'/>
+            <SpeakerMember SpeakerName='연사1' SpeakerInfo='아직 공개되지 않았습니다' SpeakerSession='궁금해서 여기까지 오셨다면 축하드립니다! 이스터에그를 발견하셨습니다' :SpeakerImg='speaker_1'/>
+            <SpeakerMember SpeakerName='연사2' SpeakerInfo='곧 공개될 예정이니 기다려주세요' SpeakerSession='이곳 말고도 다른 곳에 이스터에그가 있으니, 잘 탐색해주세요 :)' :SpeakerImg='speaker_2'/>
+            <SpeakerMember SpeakerName='연사3' SpeakerInfo='3월 초, 기대해주세요' SpeakerSession='이 웹페이지는 Vue + TS 기반으로 만들어졌습니다' :SpeakerImg='speaker_3'/>
+            <SpeakerMember SpeakerName='연사4' SpeakerInfo='현재 연사 섭외중입니다' SpeakerSession='이 이스터에그는 오거나이저 이용현님의 아이디어로 제작되었습니다' :SpeakerImg='speaker_4'/>
         </div>
     </div>
 </template>
@@ -47,11 +47,9 @@ $color-backgroun-speaker: $color-primary-100;
     align-items: center;
 
     position: absolute;
-    z-index: 1;
-
     backdrop-filter: blur(5px);
 
-    .speakers-blur-text {
+    .speakers-blur-container {
         display: flex;
         flex-flow: column;
         align-items: center;
@@ -60,11 +58,13 @@ $color-backgroun-speaker: $color-primary-100;
 
         position: relative;
 
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        text-align: center;
+        span {
+            font-size: 24px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: normal;
+            text-align: center;
+        }
 
         img {
             display: flex;