diff --git a/index.html b/index.html index 113d835..2750a29 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,8 @@ SecCodeSmith - Code Forged in Digital Fire + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/background.png b/src/assets/images/background.png similarity index 100% rename from images/background.png rename to src/assets/images/background.png diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png new file mode 100644 index 0000000..e8e4ede Binary files /dev/null and b/src/assets/images/favicon.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/styles/Home.module.scss b/src/assets/styles/Home.module.scss index b4a626d..1bcdaca 100644 --- a/src/assets/styles/Home.module.scss +++ b/src/assets/styles/Home.module.scss @@ -76,6 +76,16 @@ opacity: 0.7; } +@keyframes fall { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(100vh); + } +} + /* Button Styling */ .btnPrimary { background: linear-gradient(45deg, $accent-dragon, $accent-fire); @@ -154,4 +164,24 @@ border-radius: 50%; opacity: 0; animation: rise linear forwards; +} + +@keyframes rise { + 0% { + transform: translateY(0) translateX(0); + opacity: 0; + } + + 10% { + opacity: 0.5; + } + + 90% { + opacity: 0.5; + } + + 100% { + transform: translateY(-100px) translateX(var(--x)); + opacity: 0; + } } \ No newline at end of file diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6a2e1f6..593092d 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,6 +1,8 @@ +@use './variables' as *; + body { - background-color: var(--primary-dark); - color: var(--text-light); + background-color: $primary-dark; + color: $text-light; background-image: url('../images/background.png'); background-repeat: round; background-size: 300px 300px; @@ -36,7 +38,7 @@ body::before { .navbar-toggler { border: 1px solid rgba(255, 100, 0, 0.5); - color: var(--accent-fire); + color: $accent-fire; } .navbar-toggler-icon { @@ -44,7 +46,7 @@ body::before { } .nav-link { - color: var(--text-light) !important; + color: $text-light !important; position: relative; padding: 0.5rem 1rem; transition: color 0.3s; @@ -52,7 +54,7 @@ body::before { .nav-link:hover, .nav-link.active { - color: var(--accent-fire) !important; + color: $accent-fire !important; } .nav-link::after { @@ -62,7 +64,7 @@ body::before { height: 2px; bottom: 0; left: 0; - background: linear-gradient(to right, var(--accent-fire), transparent); + background: linear-gradient(to right, $accent-fire, transparent); transition: width 0.3s ease; } @@ -72,10 +74,13 @@ body::before { } /* Logo styling */ +.logo-image{ + height: 2rem; +} + .logo-icon { font-size: 2rem; - color: var(--accent-fire); - text-shadow: var(--glow-effect); + color: $accent-fire; position: relative; display: inline-flex; align-items: center; @@ -85,7 +90,7 @@ body::before { .logo-text { font-weight: 700; font-size: 1.5rem; - background: linear-gradient(to right, var(--accent-fire), var(--text-light)); + background: linear-gradient(to right, $accent-fire, $text-light); -webkit-background-clip: text; background-clip: text; color: transparent; @@ -93,42 +98,9 @@ body::before { } - -@keyframes fall { - 0% { - transform: translateY(-100%); - } - - 100% { - transform: translateY(100vh); - } -} - - - -@keyframes rise { - 0% { - transform: translateY(0) translateX(0); - opacity: 0; - } - - 10% { - opacity: 0.5; - } - - 90% { - opacity: 0.5; - } - - 100% { - transform: translateY(-100px) translateX(var(--x)); - opacity: 0; - } -} - /* Footer */ .footer { - background-color: var(--primary-dark); + background-color: $primary-dark; padding: 3rem 0; border-top: 1px solid rgba(255, 100, 0, 0.2); margin-top: 5rem; @@ -143,17 +115,17 @@ body::before { .social-icon { font-size: 1.5rem; - color: var(--text-ash); + color: $text-ash; transition: all 0.3s ease; } .social-icon:hover { - color: var(--accent-fire); + color: $accent-fire; transform: translateY(-5px); } .copyright { - color: var(--text-ash); + color: $text-ash; font-size: 0.9rem; margin-top: 1rem; text-align: center; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 8773282..4208ccc 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,16 +1,22 @@ +import {socialLinkData} from '../data/socialLinkData' +export interface socialLink { + icon: string; + url: string; +} + export const Footer = () => { + const socialLinks: socialLink[] = socialLinkData; + const currentYear = new Date().getFullYear() - return (