-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
design: main page 퍼블리싱
- Loading branch information
Showing
10 changed files
with
2,849 additions
and
115 deletions.
There are no files selected for viewing
50 changes: 50 additions & 0 deletions
50
gitlio/app/editor/_components/mainPageComponent/NavAnimation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| 'use client'; | ||
| import React from 'react'; | ||
|
|
||
| export default function BrandTextSlider() { | ||
| const text = 'Make Your Own Portfolio with GITLIO! Team 5-4. 2024 ◡̈'; | ||
| const repeatCount = 10; // Number of times to repeat the text | ||
| const texts = Array.from({ length: repeatCount }, () => text); | ||
| const totalTexts = texts.length; | ||
| const duplicateTexts = [...texts, ...texts]; // Duplicate the text array for continuous effect | ||
|
|
||
| return ( | ||
| <div | ||
| className="swiper-container" | ||
| style={{ overflow: 'hidden', width: '100%' }} | ||
| > | ||
| <div className="continuous-slider"> | ||
| {duplicateTexts.map((text, index) => ( | ||
| <div key={index} className="slide"> | ||
| <span>{text}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <style jsx>{` | ||
| .continuous-slider { | ||
| display: flex; | ||
| white-space: nowrap; | ||
| animation: slide 30s linear infinite; | ||
| } | ||
| .slide { | ||
| flex: 0 0 auto; | ||
| width: 100%; // Ensure each text spans the full width of the container | ||
| text-align: center; // Center text within each slide | ||
| } | ||
| @keyframes slide { | ||
| from { | ||
| transform: translateX(0); | ||
| } | ||
| to { | ||
| transform: translateX( | ||
| -${100 * totalTexts}% | ||
| ); // Move the entire text set | ||
| } | ||
| } | ||
| `}</style> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| 'use client'; | ||
| import React from 'react'; | ||
|
|
||
| export default function BrandTextSlider() { | ||
| const text = 'Make Your Own Portfolio with GITLIO! Team 5-4. 2024 ◡̈'; | ||
| const repeatCount = 20; // Number of times to repeat the text for increased frequency | ||
| const texts = Array.from({ length: repeatCount }, () => text); | ||
| const totalTexts = texts.length; | ||
| const duplicateTexts = [...texts, ...texts]; // Duplicate the text array for continuous effect | ||
|
|
||
| return ( | ||
| <div | ||
| className="swiper-container" | ||
| style={{ overflow: 'hidden', width: '100%' }} | ||
| > | ||
| <div className="continuous-slider"> | ||
| {duplicateTexts.map((text, index) => ( | ||
| <div key={index} className="slide"> | ||
| <span>{text}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <style jsx>{` | ||
| .continuous-slider { | ||
| display: flex; | ||
| white-space: nowrap; | ||
| animation: slide 200s linear infinite; | ||
| } | ||
| .slide { | ||
| flex: 0 0 auto; | ||
| width: 28%; // Decrease width to allow more text to appear per view | ||
| text-align: center; // Center text within each slide | ||
| } | ||
| @keyframes slide { | ||
| from { | ||
| transform: translateX(0); | ||
| } | ||
| to { | ||
| transform: translateX( | ||
| -${50 * totalTexts}% | ||
| ); // Adjust translateX to account for more items | ||
| } | ||
| } | ||
| `}</style> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,14 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = {}; | ||
| const nextConfig = { | ||
| reactStrictMode: true, | ||
| webpack: (config) => { | ||
| config.module.rules.push({ | ||
| test: /\.svg$/, | ||
| use: ['@svgr/webpack'], | ||
| }); | ||
|
|
||
| return config; | ||
| }, | ||
| }; | ||
|
|
||
| export default nextConfig; |
Oops, something went wrong.