veikko/kotisivu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring file locations

Browse Source
This commit is contained in:
Veikko Lintujärvi
2026-05-13 21:27:51 +03:00
parent e02eee4d30
commit d62889f7b7
15 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/styles/components/About.module.scss Normal file
View File

@@ -0,0 +1,132 @@
@use '../variables' as *;
.about {
padding: $space-24 $space-6;
}
.inner {
max-width: $max-width;
margin: 0 auto;
}
// ── Section header ─────────────────────────────────────────────
.header {
display: flex;
align-items: center;
gap: $space-4;
margin-bottom: $space-12;
}
.sectionNum {
font-family: $font-mono;
color: $color-accent;
font-size: $text-base;
}
.sectionTitle {
font-size: $text-2xl;
font-weight: 700;
white-space: nowrap;
}
.line {
flex: 1;
height: 1px;
background: $color-border;
}
// ── Body layout ────────────────────────────────────────────────
.body {
display: grid;
grid-template-columns: 1fr 280px;
gap: $space-16;
align-items: start;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
// ── Text ───────────────────────────────────────────────────────
.text {
p {
color: $color-text-muted;
line-height: 1.8;
margin-bottom: $space-4;
}
}
.stack {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: $space-2 $space-6;
margin-top: $space-4;
font-family: $font-mono;
font-size: $text-sm;
}
.arrow {
color: $color-accent;
margin-right: $space-2;
}
// ── Card ───────────────────────────────────────────────────────
.card {
background: $color-bg-card;
border: 1px solid $color-border;
border-radius: $radius-lg;
padding: $space-6;
display: flex;
flex-direction: column;
align-items: center;
gap: $space-6;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, $color-primary 0%, $color-primary-mid 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgb(var(--color-primary-mid) / 0.3);
}
.avatarInner {
font-size: $text-xl;
font-weight: 700;
color: #fff;
letter-spacing: 0.05em;
}
.meta {
width: 100%;
display: flex;
flex-direction: column;
gap: $space-3;
}
.metaLine {
display: flex;
justify-content: space-between;
font-size: $text-sm;
color: $color-text-muted;
border-bottom: 1px solid $color-border;
padding-bottom: $space-2;
&:last-child {
border-bottom: none;
}
}
.metaKey {
font-family: $font-mono;
color: $color-text-dim;
font-size: $text-xs;
}
.green {
color: #4ade80;
}

90
src/styles/components/Contact.module.scss Normal file
View File

@@ -0,0 +1,90 @@
@use '../variables' as *;
.contact {
padding: $space-24 $space-6 $space-16;
text-align: center;
}
.inner {
max-width: $max-width;
margin: 0 auto;
}
// ── Section header ─────────────────────────────────────────────
.header {
display: flex;
align-items: center;
gap: $space-4;
margin-bottom: $space-12;
}
.sectionNum {
font-family: $font-mono;
color: $color-accent;
font-size: $text-base;
}
.sectionTitle {
font-size: $text-2xl;
font-weight: 700;
white-space: nowrap;
}
.line {
flex: 1;
height: 1px;
background: $color-border;
}
// ── Body ───────────────────────────────────────────────────────
.body {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: $space-8;
}
.lede {
font-size: $text-lg;
color: $color-text-muted;
line-height: 1.8;
}
.emailBtn {
display: inline-flex;
align-items: center;
padding: $space-4 $space-12;
border: 1px solid $color-accent;
border-radius: $radius-md;
font-size: $text-base;
font-weight: 600;
color: $color-accent;
transition: all $transition-base;
letter-spacing: 0.02em;
&:hover {
background: rgb(var(--color-accent) / 0.08);
color: $color-accent;
box-shadow: 0 0 20px rgb(var(--color-accent) / 0.15);
transform: translateY(-2px);
}
}
.socials {
list-style: none;
display: flex;
gap: $space-8;
a {
font-size: $text-sm;
color: $color-text-muted;
font-family: $font-mono;
transition: color $transition-fast;
&:hover {
color: $color-text;
}
}
}

27
src/styles/components/Footer.module.scss Normal file
View File

@@ -0,0 +1,27 @@
@use '../variables' as *;
.footer {
border-top: 1px solid $color-border;
padding: $space-8 $space-6;
text-align: center;
font-family: $font-mono;
font-size: $text-xs;
color: $color-text-dim;
a {
color: $color-accent;
&:hover {
color: $color-primary-glow;
}
}
}
.separator {
margin: 0 $space-2;
opacity: 0.4;
}
.stack {
color: $color-text-dim;
}

165
src/styles/components/Hero.module.scss Normal file
View File

@@ -0,0 +1,165 @@
@use '../variables' as *;
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
padding: $space-24 $space-6 $space-16;
}
// ── Background grid ────────────────────────────────────────────
.grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgb(var(--color-primary) / 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgb(var(--color-primary) / 0.08) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
pointer-events: none;
}
// ── Glow blob ──────────────────────────────────────────────────
.hero::before {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 500px;
background: radial-gradient(ellipse, rgb(var(--color-primary-mid) / 0.18) 0%, transparent 70%);
pointer-events: none;
}
// ── Content ────────────────────────────────────────────────────
.content {
position: relative;
max-width: $max-width;
margin: 0 auto;
width: 100%;
}
.greeting {
font-size: $text-lg;
color: $color-accent;
font-family: $font-mono;
margin-bottom: $space-2;
letter-spacing: 0.02em;
}
.name {
font-size: clamp(#{$text-4xl}, 10vw, #{$text-5xl});
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: $space-4;
}
.dot {
color: $color-accent-warm;
}
.tagline {
font-size: clamp(#{$text-xl}, 3vw, #{$text-2xl});
color: $color-text-muted;
margin-bottom: $space-4;
max-width: 600px;
}
.highlight {
color: $color-text;
font-style: italic;
}
.sub {
font-size: $text-base;
color: $color-text-dim;
max-width: 520px;
line-height: 1.8;
margin-bottom: $space-12;
}
// ── CTA buttons ────────────────────────────────────────────────
.cta {
display: flex;
gap: $space-4;
flex-wrap: wrap;
}
%btn-base {
display: inline-flex;
align-items: center;
padding: $space-3 $space-8;
border-radius: $radius-md;
font-size: $text-sm;
font-weight: 600;
letter-spacing: 0.02em;
transition: all $transition-base;
cursor: pointer;
}
.btnPrimary {
@extend %btn-base;
background: $color-primary-mid;
color: #fff;
border: 1px solid transparent;
&:hover {
background: $color-primary-glow;
color: #fff;
box-shadow: 0 0 24px rgb(var(--color-primary-glow) / 0.4);
transform: translateY(-2px);
}
}
.btnGhost {
@extend %btn-base;
background: transparent;
color: $color-text-muted;
border: 1px solid $color-border;
&:hover {
color: $color-text;
border-color: $color-accent;
transform: translateY(-2px);
}
}
// ── "Open to work" badge ───────────────────────────────────────
.badge {
position: absolute;
bottom: $space-8;
right: $space-6;
background: rgb(var(--color-bg-card) / 0.9);
border: 1px solid rgba(34, 197, 94, 0.35);
border-radius: 100px;
padding: $space-2 $space-4;
font-size: $text-xs;
font-family: $font-mono;
letter-spacing: 0.06em;
color: #4ade80;
display: flex;
align-items: center;
gap: $space-2;
&::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
animation: pulse 2s ease infinite;
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (max-width: 640px) {
.badge { display: none; }
}

150
src/styles/components/Navbar.module.scss Normal file
View File

@@ -0,0 +1,150 @@
@use '../variables' as *;
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
background: rgb(var(--color-bg) / 0.85);
backdrop-filter: blur(14px);
border-bottom: 1px solid $color-border;
transition: background $transition-base;
}
.nav {
max-width: $max-width;
margin: 0 auto;
padding: $space-4 $space-6;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-family: $font-mono;
font-size: $text-xl;
font-weight: 700;
color: $color-text;
letter-spacing: -0.02em;
background: none;
border: none;
cursor: pointer;
padding: 0;
&:hover {
color: $color-text;
}
}
.logoBracket {
color: $color-accent;
}
.links {
list-style: none;
display: flex;
gap: $space-8;
button {
font-family: inherit;
font-size: $text-sm;
font-weight: 500;
color: $color-text-muted;
letter-spacing: 0.04em;
text-transform: uppercase;
position: relative;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color $transition-fast;
&::after {
content: '';
position: absolute;
inset: auto 0 -4px 0;
height: 2px;
background: $color-accent;
transform: scaleX(0);
transition: transform $transition-base;
transform-origin: left;
}
&:hover {
color: $color-text;
&::after {
transform: scaleX(1);
}
}
&.active {
color: $color-text;
&::after {
transform: scaleX(1);
}
}
}
}
// ── Burger ─────────────────────────────────────────────────────
.navActions {
display: flex;
align-items: center;
gap: $space-1;
}
.burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: $space-2;
span {
display: block;
width: 24px;
height: 2px;
background: $color-text;
border-radius: 2px;
transition: transform $transition-base, opacity $transition-base;
}
&.burgerOpen {
span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
span:nth-child(2) { opacity: 0; }
span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
}
// ── Mobile ─────────────────────────────────────────────────────
@media (max-width: 640px) {
.burger {
display: flex;
}
.links {
position: fixed;
inset: 65px 0 auto 0;
flex-direction: column;
background: $color-bg-elevated;
border-bottom: 1px solid $color-border;
padding: $space-6;
gap: $space-4;
transform: translateY(-110%);
transition: transform $transition-base;
z-index: 99;
button {
width: 100%;
text-align: left;
}
transition: transform $transition-base;
&.open {
transform: translateY(0);
}
}
}

133
src/styles/components/Projects.module.scss Normal file
View File

@@ -0,0 +1,133 @@
@use '../variables' as *;
.projects {
padding: $space-24 $space-6;
background: $color-bg-elevated;
}
.inner {
max-width: $max-width;
margin: 0 auto;
}
// ── Section header ─────────────────────────────────────────────
.header {
display: flex;
align-items: center;
gap: $space-4;
margin-bottom: $space-12;
}
.sectionNum {
font-family: $font-mono;
color: $color-accent;
font-size: $text-base;
}
.sectionTitle {
font-size: $text-2xl;
font-weight: 700;
white-space: nowrap;
}
.line {
flex: 1;
height: 1px;
background: $color-border;
}
// ── Grid ───────────────────────────────────────────────────────
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: $space-6;
}
// ── Card ───────────────────────────────────────────────────────
.card {
position: relative;
background: $color-bg-card;
border: 1px solid $color-border;
border-radius: $radius-md;
padding: $space-6;
display: flex;
flex-direction: column;
gap: $space-3;
transition: transform $transition-base, border-color $transition-base, box-shadow $transition-base;
&:hover {
transform: translateY(-4px);
border-color: rgb(var(--color-primary-glow) / 0.4);
box-shadow: 0 8px 32px rgb(var(--color-primary) / 0.2);
}
&.featured {
border-color: rgb(var(--color-accent) / 0.25);
}
}
.featuredBadge {
position: absolute;
top: $space-4;
right: $space-4;
font-size: $text-xs;
font-family: $font-mono;
color: $color-accent-warm;
background: rgb(var(--color-accent-warm) / 0.1);
border: 1px solid rgb(var(--color-accent-warm) / 0.25);
border-radius: 100px;
padding: 2px $space-3;
}
.cardTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $space-2;
}
.folderIcon {
font-size: $text-2xl;
color: $color-accent;
line-height: 1;
}
.externalLink {
font-size: $text-xl;
color: $color-text-muted;
transition: color $transition-fast, transform $transition-fast;
&:hover {
color: $color-accent;
transform: translate(2px, -2px);
}
}
.cardName {
font-size: $text-lg;
font-weight: 600;
}
.cardDesc {
font-size: $text-sm;
color: $color-text-muted;
line-height: 1.7;
flex: 1;
}
.tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: $space-2;
margin-top: $space-2;
li {
font-family: $font-mono;
font-size: $text-xs;
color: $color-text-dim;
background: rgb(var(--color-primary) / 0.15);
border-radius: $radius-sm;
padding: 2px $space-3;
}
}

19
src/styles/components/ThemeToggle.module.scss Normal file
View File

@@ -0,0 +1,19 @@
@use '../variables' as *;
.toggle {
background: none;
border: none;
cursor: pointer;
color: $color-text-muted;
padding: $space-2;
display: flex;
align-items: center;
justify-content: center;
border-radius: $radius-sm;
transition: color $transition-fast, background-color $transition-fast;
&:hover {
color: $color-text;
background-color: $color-bg-elevated;
}
}