Improved texts and profile pic added
This commit is contained in:
BIN
public/me.png
Normal file
BIN
public/me.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
@@ -1,6 +1,6 @@
|
|||||||
import styles from '../styles/components/About.module.scss';
|
import styles from '../styles/components/About.module.scss';
|
||||||
|
|
||||||
const STACK = ['Technology 1', 'Technology 2', 'Technology 3', 'Technology 4', 'Technology 5', 'Technology 6'];
|
const STACK = ['Azure', '.NET', 'C#', 'JavaScript', 'React', 'Node.js', 'SQL'];
|
||||||
|
|
||||||
export default function About() {
|
export default function About() {
|
||||||
return (
|
return (
|
||||||
@@ -15,13 +15,14 @@ export default function About() {
|
|||||||
<div className={styles.body}>
|
<div className={styles.body}>
|
||||||
<div className={styles.text}>
|
<div className={styles.text}>
|
||||||
<p>
|
<p>
|
||||||
A paragraph about yourself and your background. What kind of work
|
I'm a curious software engineer with a passion for building scalable and efficient
|
||||||
do you do and what drives you? Keep it personal and authentic.
|
applications. With deep knowledge in cloud, backend, and frontend development, I enjoy
|
||||||
|
working on projects that challenge me to learn new technologies and improve my skills.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
A second paragraph with more details — hobbies, interests, or
|
I tend to build always something that is useful to others, and I find joy in creating tools
|
||||||
anything else that gives visitors a sense of who you are beyond
|
and applications that solve real-world problems. I believe that technology has the power to
|
||||||
your job title.
|
make a positive impact on people's lives, and I strive to contribute to that impact through my work.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Here are some technologies I've been working with recently:
|
Here are some technologies I've been working with recently:
|
||||||
@@ -38,21 +39,25 @@ export default function About() {
|
|||||||
|
|
||||||
<div className={styles.card}>
|
<div className={styles.card}>
|
||||||
<div className={styles.avatar}>
|
<div className={styles.avatar}>
|
||||||
<span className={styles.avatarInner}>YN</span>
|
<img src="/me.png" alt="Profile" className={styles.avatarImg} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.meta}>
|
<div className={styles.meta}>
|
||||||
<p className={styles.metaLine}>
|
<p className={styles.metaLine}>
|
||||||
<span className={styles.metaKey}>location</span>
|
<span className={styles.metaKey}>location</span>
|
||||||
<span>City, Country</span>
|
<span className={styles.metaValue}>Turku Archipelago, Finland</span>
|
||||||
</p>
|
</p>
|
||||||
<p className={styles.metaLine}>
|
<p className={styles.metaLine}>
|
||||||
<span className={styles.metaKey}>status</span>
|
<span className={styles.metaKey}>favorite book</span>
|
||||||
<span className={styles.green}>Available</span>
|
<span className={styles.metaValue}>The Lord of the Rings</span>
|
||||||
</p>
|
|
||||||
<p className={styles.metaLine}>
|
|
||||||
<span className={styles.metaKey}>focus</span>
|
|
||||||
<span>Your focus area</span>
|
|
||||||
</p>
|
</p>
|
||||||
|
<div className={styles.metaLine}>
|
||||||
|
<span className={styles.metaKey}>favorite songs</span>
|
||||||
|
<div className={styles.metaLinks}>
|
||||||
|
<a href="https://www.youtube.com/watch?v=EqDcigWxZuU" target="_blank" rel="noreferrer">Rücksturz – Agitation Free</a>
|
||||||
|
<a href="https://www.youtube.com/watch?v=2i2oJJwgLTk" target="_blank" rel="noreferrer">Year of Love – Jenny Hval</a>
|
||||||
|
<a href="https://www.youtube.com/watch?v=C5lVJkp5TT4" target="_blank" rel="noreferrer">Пачка сигарет – КИНО</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,12 +12,13 @@ export default function Contact() {
|
|||||||
|
|
||||||
<div className={styles.body}>
|
<div className={styles.body}>
|
||||||
<p className={styles.lede}>
|
<p className={styles.lede}>
|
||||||
A short message inviting visitors to reach out. Let them know
|
I'm currently employed, but my inbox is always open. Whether you have a question or
|
||||||
you're open to new opportunities, collaborations, or just a chat.
|
just want to say hi, I'll try my best to get back to you!
|
||||||
</p>
|
</p>
|
||||||
|
<p>I also have a small company if you are interested in collaboration or services.</p>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="mailto:your@email.com"
|
href="mailto:veikko@lintujarvi.fi"
|
||||||
className={styles.emailBtn}
|
className={styles.emailBtn}
|
||||||
>
|
>
|
||||||
Say hello ↗
|
Say hello ↗
|
||||||
@@ -25,9 +26,9 @@ export default function Contact() {
|
|||||||
|
|
||||||
<ul className={styles.socials}>
|
<ul className={styles.socials}>
|
||||||
{[
|
{[
|
||||||
{ label: 'GitHub', href: '#' },
|
{ label: 'Gitea', href: 'https://gitea.tietokonepaja.fi/' },
|
||||||
{ label: 'LinkedIn', href: '#' },
|
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/veikko-lintuj%C3%A4rvi-5888a6175/' },
|
||||||
{ label: 'Platform', href: '#' },
|
{ label: 'Company', href: 'https://www.tietokonepaja.fi/' },
|
||||||
].map(({ label, href }) => (
|
].map(({ label, href }) => (
|
||||||
<li key={label}>
|
<li key={label}>
|
||||||
<a href={href} target="_blank" rel="noreferrer">
|
<a href={href} target="_blank" rel="noreferrer">
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ export default function Footer() {
|
|||||||
<footer className={styles.footer}>
|
<footer className={styles.footer}>
|
||||||
<p>
|
<p>
|
||||||
Designed & built by{' '}
|
Designed & built by{' '}
|
||||||
<a href="#home">Your Name</a>{' '}
|
<a href="#home">Veikko Lintujärvi</a>{' '}
|
||||||
<span className={styles.separator}>·</span>{' '}
|
<span className={styles.separator}>·</span>{' '}
|
||||||
<span className={styles.stack}>React + Vite</span>
|
<span className={styles.stack}>React + Vite</span>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -8,15 +8,15 @@ export default function Hero() {
|
|||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<p className={styles.greeting}>Hey, I'm</p>
|
<p className={styles.greeting}>Hey, I'm</p>
|
||||||
<h1 className={styles.name}>
|
<h1 className={styles.name}>
|
||||||
Your Name<span className={styles.dot}>.</span>
|
Veikko Lintujärvi<span className={styles.dot}>.</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className={styles.tagline}>
|
<p className={styles.tagline}>
|
||||||
Your tagline goes here —{' '}
|
Making world a better place —{' '}
|
||||||
<span className={styles.highlight}>make it memorable.</span>
|
<span className={styles.highlight}>one line at a time.</span>
|
||||||
</p>
|
</p>
|
||||||
<p className={styles.sub}>
|
<p className={styles.sub}>
|
||||||
A short bio or description about yourself. What do you do, what do
|
I'm a curious software engineer from Turku Archipelago, Finland. Right now
|
||||||
you care about, and what makes you interesting?
|
I'm excited about cloud, Linux and AI.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className={styles.cta}>
|
<div className={styles.cta}>
|
||||||
|
|||||||
@@ -87,18 +87,15 @@
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(135deg, $color-primary 0%, $color-primary-mid 100%);
|
overflow: hidden;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 0 30px rgb(var(--color-primary-mid) / 0.3);
|
box-shadow: 0 0 30px rgb(var(--color-primary-mid) / 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatarInner {
|
.avatarImg {
|
||||||
font-size: $text-xl;
|
width: 100%;
|
||||||
font-weight: 700;
|
height: 100%;
|
||||||
color: #fff;
|
object-fit: cover;
|
||||||
letter-spacing: 0.05em;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
@@ -110,7 +107,7 @@
|
|||||||
|
|
||||||
.metaLine {
|
.metaLine {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: flex-start;
|
||||||
font-size: $text-sm;
|
font-size: $text-sm;
|
||||||
color: $color-text-muted;
|
color: $color-text-muted;
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid $color-border;
|
||||||
@@ -125,8 +122,27 @@
|
|||||||
font-family: $font-mono;
|
font-family: $font-mono;
|
||||||
color: $color-text-dim;
|
color: $color-text-dim;
|
||||||
font-size: $text-xs;
|
font-size: $text-xs;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green {
|
.metaValue {
|
||||||
color: #4ade80;
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaLinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: $space-2;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $color-accent;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: $text-xs;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user