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

Finnish transaltions

Browse Source
This commit is contained in:
Veikko Lintujärvi
2026-08-16 21:07:36 +03:00
parent d2cd0e37d4
commit 00c08f6544
15 changed files with 377 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Projects.jsx
View File

@@ -1,29 +1,8 @@
import { useAtomValue } from 'jotai';
import { languageState } from '../state/atoms';
import { getTranslations } from '../translations';
import styles from '../styles/components/Projects.module.scss';
const PROJECTS = [
{
name: 'Klapi - Unified content management panel',
desc: 'Web interface to view and manage data held by Livonsaaren Tietokonepaja. Easy to customize serving various customer solutions.',
tags: ['.NET', 'React', 'SQLite'],
href: 'https://klapi.tietokonepaja.fi/',
sourceHref: 'https://github.com',
},
{
name: 'Hattara - Shared online office',
desc: 'Why to code your own when there is working open source solution to host on your own server? Hattara is a self-hosted cloud office solution for small teams and individuals.',
tags: ['Apache2', 'Ubuntu Server', 'NextCloud'],
href: 'https://hattara.tietokonepaja.fi/',
sourceHref: 'https://github.com',
},
{
name: 'Runosaari festival website - Pro bono project',
desc: "Supporting local culture initiatives have always been close to my heart. I'm proudly helping Runosaari festival with their website and online presence already for the sixth year!",
tags: ['React', 'Vite', 'Apache2', 'Ubuntu Server'],
href: 'https://www.runosaari.fi/',
sourceHref: 'https://github.com',
},
];
const getTagColor = (tag) => {
const colorMap = {
'.NET': 'tagDotnet',
@@ -38,25 +17,28 @@ const getTagColor = (tag) => {
};
export default function Projects() {
const language = useAtomValue(languageState);
const t = getTranslations(language);
return (
<section id="projects" className={styles.projects}>
<div className={styles.inner}>
<div className={styles.header}>
<span className={styles.sectionNum}>02.</span>
<h2 className={styles.sectionTitle}>Projects</h2>
<span className={styles.sectionNum}>{t.projects.sectionNum}</span>
<h2 className={styles.sectionTitle}>{t.projects.sectionTitle}</h2>
<div className={styles.line} />
</div>
<div className={styles.grid}>
{PROJECTS.map((p) => (
{t.projects.projects.map((p) => (
<article key={p.name} className={styles.card}>
<div className={styles.cardTop}>
<span className={styles.folderIcon}>⬡</span>
<span className={styles.folderIcon}>{t.projects.folderIcon}</span>
<div className={styles.cardLinks}>
<a href={p.href} className={styles.externalLink} aria-label={`Open ${p.name}`}>
<a href={p.href} className={styles.externalLink} aria-label={`${t.projects.externalLinkAria} ${p.name}`}>
↗
</a>
<a href={p.sourceHref} className={styles.sourceLink} aria-label={`View source code for ${p.name}`}>
<a href={p.sourceHref} className={styles.sourceLink} aria-label={`${t.projects.sourceLinkAria} ${p.name}`}>
📦
</a>
</div>
@@ -64,9 +46,9 @@ export default function Projects() {
<h3 className={styles.cardName}>{p.name}</h3>
<p className={styles.cardDesc}>{p.desc}</p>
<ul className={styles.tags}>
{p.tags.map((t) => (
<li key={t} className={styles.tagItem}>
<span className={`${styles.tagPill} ${styles[getTagColor(t)]}`}>{t}</span>
{p.tags.map((tag) => (
<li key={tag} className={styles.tagItem}>
<span className={`${styles.tagPill} ${styles[getTagColor(tag)]}`}>{tag}</span>
</li>
))}
</ul>
@@ -74,9 +56,9 @@ export default function Projects() {
))}
</div>
<div className={styles.giteaLink}>
<p className={styles.giteaText}>Check out here the rest of my code</p>
<p className={styles.giteaText}>{t.projects.giteaText}</p>
<a href="https://gitea.tietokonepaja.fi/" className={styles.giteaBtn} target="_blank" rel="noreferrer">
View on Gitea
{t.projects.giteaBtn}
</a>
</div>
</div>