Skip to content

Commit 78ec743

Browse files
AlexDevFlowAlexDevFlow
authored
Added support for languages and style improvement
1 parent 02e6ca4 commit 78ec743

File tree

16 files changed

+833
-139
lines changed

16 files changed

+833
-139
lines changed

‎blog/index.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="Blog by Alessandro Trysh – updates, thoughts, and inspiration.">
67
<title>Blog - Coming Soon</title>
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
910
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;600;700&display=swap" rel="stylesheet">
1011
<link rel="stylesheet" href="style.css">
1112
</head>
1213
<body>
13-
<h1>Blog</h1>
14-
<p class="typing-text"></p>
15-
<a href="/" class="back-button">Go Back Home</a>
14+
<a class="skip-link" href="#main-content">Skip to main content</a>
15+
<div class="language-switch">
16+
<button id="blogLangToggle" type="button" aria-label="Toggle language" aria-pressed="false">IT</button>
17+
</div>
18+
<main id="main-content">
19+
<h1 data-i18n="blog.title">Blog</h1>
20+
<p class="typing-text" data-i18n="blog.message" role="status" aria-live="polite"></p>
21+
<a href="/" class="back-button" data-i18n="blog.back">Go Back Home</a>
22+
</main>
1623
<script src="script.js"></script>
1724
</body>
1825
</html>

‎blog/script.js‎

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,69 @@
1-
document.addEventListener('DOMContentLoaded', function() {
2-
const text = "Nothing to see here yet, the inspiration is still flowing...";
3-
const typingElement = document.querySelector('.typing-text');
4-
let i = 0;
5-
6-
function typeWriter() {
7-
if (i < text.length) {
8-
typingElement.textContent += text.charAt(i);
9-
i++;
10-
setTimeout(typeWriter, 70);
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const translations = {
3+
en: {
4+
"blog.title": "Blog",
5+
"blog.message": "Nothing to see here yet, the inspiration is still flowing...",
6+
"blog.back": "Go Back Home",
7+
},
8+
it: {
9+
"blog.title": "Blog",
10+
"blog.message": "Niente da vedere qui per ora, l'ispirazione sta ancora scorrendo...",
11+
"blog.back": "Torna alla Home",
12+
},
13+
};
14+
15+
const storageKey = "alexdevflow-lang";
16+
const typingElement = document.querySelector(".typing-text");
17+
const langToggle = document.getElementById("blogLangToggle");
18+
let typingTimeout = null;
19+
20+
function typeWriter(text, index = 0) {
21+
if (index < text.length) {
22+
typingElement.textContent += text.charAt(index);
23+
typingTimeout = setTimeout(() => typeWriter(text, index + 1), 70);
24+
}
25+
}
26+
27+
function startTyping(lang) {
28+
if (typingTimeout) {
29+
clearTimeout(typingTimeout);
1130
}
31+
typingElement.textContent = "";
32+
const text = translations[lang]["blog.message"];
33+
typeWriter(text, 0);
1234
}
1335

14-
typeWriter();
36+
function applyTranslations(lang) {
37+
if (!translations[lang]) return;
38+
document.documentElement.lang = lang;
39+
document.querySelectorAll("[data-i18n]").forEach((el) => {
40+
const key = el.dataset.i18n;
41+
const value = translations[lang][key];
42+
if (!value) return;
43+
if (el === typingElement) {
44+
startTyping(lang);
45+
} else {
46+
el.textContent = value;
47+
}
48+
});
49+
langToggle.textContent = lang === "it" ? "🇮🇹 Italiano" : "🇬🇧 English";
50+
langToggle.setAttribute("aria-pressed", lang === "it" ? "true" : "false");
51+
}
52+
53+
function initLanguage() {
54+
const saved = localStorage.getItem(storageKey);
55+
const browserLang = (navigator.language || "en").slice(0, 2);
56+
const startingLang = saved || (browserLang === "it" ? "it" : "en");
57+
applyTranslations(startingLang);
58+
}
59+
60+
langToggle.addEventListener("click", () => {
61+
const current = document.documentElement.lang === "it" ? "it" : "en";
62+
const next = current === "en" ? "it" : "en";
63+
localStorage.setItem(storageKey, next);
64+
applyTranslations(next);
65+
});
66+
67+
68+
initLanguage();
1569
});

‎blog/style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,60 @@ h1 {
6363
.back-button:hover {
6464
background-color: #2980b9;
6565
transform: translateY(-3px);
66+
}
67+
68+
.skip-link {
69+
position: absolute;
70+
left: -999px;
71+
top: auto;
72+
width: 1px;
73+
height: 1px;
74+
overflow: hidden;
75+
clip: rect(1px, 1px, 1px, 1px);
76+
white-space: nowrap;
77+
}
78+
79+
.skip-link:focus {
80+
position: fixed;
81+
left: 20px;
82+
top: 20px;
83+
width: auto;
84+
height: auto;
85+
clip: auto;
86+
padding: 10px 16px;
87+
background: var(--button-bg);
88+
color: #fff;
89+
border-radius: 6px;
90+
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
91+
z-index: 100;
92+
}
93+
94+
.language-switch {
95+
position: fixed;
96+
top: 20px;
97+
right: 20px;
98+
z-index: 20;
99+
}
100+
101+
.language-switch button {
102+
background: linear-gradient(135deg, var(--button-bg), var(--accent-color));
103+
color: white;
104+
border: none;
105+
border-radius: 999px;
106+
padding: 10px 16px;
107+
font-weight: 700;
108+
letter-spacing: 0.5px;
109+
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
110+
cursor: pointer;
111+
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
112+
}
113+
114+
.language-switch button:hover {
115+
transform: translateY(-2px);
116+
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
117+
}
118+
119+
.language-switch button:active {
120+
transform: translateY(0);
121+
opacity: 0.9;
66122
}

‎index.html‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="Portfolio, blog, and lab by Alessandro Trysh – computer science student and developer.">
67
<title>Alessandro Trysh</title>
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -11,22 +12,26 @@
1112

1213
</head>
1314
<body>
15+
<a class="skip-link" href="#main-content">Skip to main content</a>
16+
<div class="language-switch">
17+
<button id="langToggle" type="button" aria-label="Toggle language" aria-pressed="false">IT</button>
18+
</div>
1419
<header class="main-header">
1520
<h1>Alessandro Trysh</h1>
16-
<p>Computer Science Student & Developer</p>
21+
<p data-i18n="home.subtitle">Computer Science Student & Developer</p>
1722
</header>
18-
<main class="card-container">
23+
<main class="card-container" id="main-content">
1924
<a href="/portfolio/" class="card">
20-
<span class="emoji-icon">💼</span>
21-
<h2>Portfolio</h2>
25+
<span class="emoji-icon" aria-hidden="true">💼</span>
26+
<h2 data-i18n="home.cardPortfolio">Portfolio</h2>
2227
</a>
2328
<a href="/blog/" class="card">
24-
<span class="emoji-icon">✍️</span>
25-
<h2>Blog</h2>
29+
<span class="emoji-icon" aria-hidden="true">✍️</span>
30+
<h2 data-i18n="home.cardBlog">Blog</h2>
2631
</a>
2732
<a href="/lab/" class="card">
28-
<span class="emoji-icon">🧪</span>
29-
<h2>Lab</h2>
33+
<span class="emoji-icon" aria-hidden="true">🧪</span>
34+
<h2 data-i18n="home.cardLab">Lab</h2>
3035
</a>
3136
</main>
3237
<script src="script.js"></script>

0 commit comments

Comments
 (0)