feat: update favicon and background images, refactor styles, and enhance skill card data
This commit is contained in:
@@ -13,6 +13,8 @@
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>SecCodeSmith - Code Forged in Digital Fire</title>
|
||||
<link rel="favicon" href="public/favicon.ico" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="SecCodeSmith - Master craftsman of code specializing in embedded systems, machine learning, and web development. Forging digital solutions with security and precision.">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@@ -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;
|
||||
@@ -128,7 +133,7 @@ body::before {
|
||||
|
||||
/* 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 +148,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;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { NavLink, useLocation } from 'react-router-dom'
|
||||
import logo from '../assets/images/favicon.png'
|
||||
|
||||
export const Header = () => {
|
||||
const location = useLocation()
|
||||
@@ -15,17 +16,7 @@ export const Header = () => {
|
||||
<div className="container">
|
||||
<NavLink className="navbar-brand" to="/">
|
||||
<div className="logo-icon">
|
||||
<i className="fas fa-hammer"></i>
|
||||
<i
|
||||
className="fas fa-dragon"
|
||||
style={{
|
||||
fontSize: '1.2rem',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: '-12px',
|
||||
color: 'var(--accent-dragon)'
|
||||
}}
|
||||
></i>
|
||||
<img src={logo} alt="Logo" className='logo-image' height="100%" />
|
||||
</div>
|
||||
<div className="logo-text">SecCodeSmith</div>
|
||||
</NavLink>
|
||||
|
||||
@@ -7,7 +7,8 @@ export const skillCardData: SkillCardProps[] = [
|
||||
skills: [
|
||||
{ name: "C/C++", icon: "devicon-cplusplus-plain" },
|
||||
{ name: "Python", icon: "devicon-python-plain" },
|
||||
{ name: ".NET", icon: "devicon-dotnetcore-plain" }
|
||||
{ name: ".NET", icon: "devicon-dotnetcore-plain" },
|
||||
{ name: "C#", icon: "devicon-csharp-plain" },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -24,7 +25,7 @@ export const skillCardData: SkillCardProps[] = [
|
||||
categoryTitle: "Data & ML",
|
||||
skills: [
|
||||
{ name: "Pandas", icon: "devicon-pandas-plain" },
|
||||
{ name: "Scikit-learn", icon: "devicon-sklearn-plain" },
|
||||
{ name: "Scikit-learn", icon: "devicon-scikitlearn-plain" },
|
||||
{ name: "Scikit-image", icon: "fas fa-image" },
|
||||
{ name: "PyTorch", icon: "devicon-pytorch-plain" },
|
||||
{ name: "OpenCV", icon: "devicon-opencv-plain" }
|
||||
@@ -48,11 +49,12 @@ export const skillCardData: SkillCardProps[] = [
|
||||
skills: [
|
||||
{ name: "Docker", icon: "devicon-docker-plain" },
|
||||
{ name: "Docker-compose", icon: "fas fa-layer-group" },
|
||||
{ name: ">Linux CLI", icon: "devicon-bash-plain" },
|
||||
{ name: "Linux CLI", icon: "devicon-bash-plain" },
|
||||
{ name: "Git", icon: "devicon-git-plain" },
|
||||
{ name: "CI/CD", icon: "fas fa-cogs" },
|
||||
{ name: "Cmake", icon: "devicon-cmake-plain" },
|
||||
{ name: "Linux", icon: "devicon-linux-plain" },
|
||||
{ name: "Jenkins", icon: "devicon-jenkins-plain" },
|
||||
]
|
||||
}
|
||||
];
|
||||
+5
-4
@@ -14,7 +14,7 @@
|
||||
body {
|
||||
background-color: var(--primary-dark);
|
||||
color: var(--text-light);
|
||||
background-image: url('../images/background.png');
|
||||
background-image: url('assets/images/background.png');
|
||||
background-repeat: round;
|
||||
background-size: 300px 300px;
|
||||
background-position: 0 0;
|
||||
@@ -84,11 +84,12 @@ body::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-image{
|
||||
height: 2rem;
|
||||
}
|
||||
/* Logo styling */
|
||||
.logo-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--accent-fire);
|
||||
text-shadow: var(--glow-effect);
|
||||
height: 2rem;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import '@styles/index.scss'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
|
||||
@@ -1,247 +0,0 @@
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 76px;
|
||||
/* Account for navbar height */
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('/api/placeholder/1200/800') center/cover no-repeat;
|
||||
opacity: 0.15;
|
||||
filter: brightness(0.5) contrast(1.2);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.title-main {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-main::before {
|
||||
content: "< ";
|
||||
color: var(--accent-fire);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.title-main::after {
|
||||
content: " />";
|
||||
color: var(--accent-fire);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.6rem;
|
||||
color: var(--text-ash);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Binary Background */
|
||||
.binary-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.07;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.binary-line {
|
||||
position: absolute;
|
||||
font-family: 'Fira Code', monospace;
|
||||
color: var(--accent-fire);
|
||||
font-size: 1rem;
|
||||
animation: fall linear infinite;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
|
||||
background-color: var(--accent-fire);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: 6rem 0;
|
||||
background-color: var(--secondary-dark);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: var(--accent-fire);
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: var(--glow-effect);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
border-color: rgba(255, 100, 0, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
color: var(--accent-fire);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
color: var(--accent-fire);
|
||||
font-size: 1.5rem;
|
||||
min-width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.skill-icon i {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
color: var(--text-ash);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Blinking cursor effect */
|
||||
.blinking-cursor {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
background-color: var(--accent-fire);
|
||||
margin-left: 5px;
|
||||
animation: blink 1s step-end infinite;
|
||||
box-shadow: var(--glow-effect);
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Particles effect */
|
||||
.particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: var(--accent-fire);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: rise linear forwards;
|
||||
}
|
||||
@@ -9,7 +9,6 @@ export const Home = () => {
|
||||
const skills = skillCardData;
|
||||
|
||||
useEffect(() => {
|
||||
// Create binary background
|
||||
const createBinaryBg = () => {
|
||||
const binaryBg = document.getElementById('binary-bg');
|
||||
if (!binaryBg) return;
|
||||
@@ -17,7 +16,6 @@ export const Home = () => {
|
||||
const chars = '01';
|
||||
const linesCount = 20;
|
||||
|
||||
// Clear existing lines
|
||||
binaryBg.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < linesCount; i++) {
|
||||
@@ -36,7 +34,6 @@ export const Home = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Create particles effect (ember/spark effect)
|
||||
const createParticles = () => {
|
||||
const particlesContainer = document.getElementById('particles');
|
||||
if (!particlesContainer) return;
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@data/*": ["src/data/*"],
|
||||
"@styles/*": ["src/styles/*"],
|
||||
"@tests/*": ["src/tests/*"],
|
||||
"@images/*": ["src/assets/images/*"],
|
||||
},
|
||||
"moduleResolution": "node",
|
||||
"types": ["node"]
|
||||
|
||||
+8
-7
@@ -7,13 +7,14 @@ export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "/src"),
|
||||
'@assets': path.resolve(__dirname, 'src/assets'),
|
||||
'@components': path.resolve(__dirname, 'src/components'),
|
||||
'@pages': path.resolve(__dirname, 'src/pages'),
|
||||
'@data': path.resolve(__dirname, 'src/data'),
|
||||
'@styles': path.resolve(__dirname, 'src/assets/styles'),
|
||||
'@public': path.resolve(__dirname, 'src/public'),
|
||||
'@tests': path.resolve(__dirname, 'src/tests'),
|
||||
'@assets': path.resolve(__dirname, '/src/assets'),
|
||||
'@components': path.resolve(__dirname, '/src/components'),
|
||||
'@pages': path.resolve(__dirname, '/src/pages'),
|
||||
'@data': path.resolve(__dirname, '/src/data'),
|
||||
'@styles': path.resolve(__dirname, '/src/assets/styles'),
|
||||
'@public': path.resolve(__dirname, '/src/public'),
|
||||
'@tests': path.resolve(__dirname, '/src/tests'),
|
||||
'@images': path.resolve(__dirname, '/src/assets/images'),
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user