Skip to content

Commit 542fd91

Browse files
AlexDevFlowAlexDevFlow
authored
Style alignment quick fixes
1 parent 78ec743 commit 542fd91

File tree

5 files changed

+62
-34
lines changed

5 files changed

+62
-34
lines changed

‎blog/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<main id="main-content">
1919
<h1 data-i18n="blog.title">Blog</h1>
2020
<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>
21+
<a href="../" class="back-button" data-i18n="blog.back">Go Back Home</a>
2222
</main>
2323
<script src="script.js"></script>
2424
</body>

‎blog/style.css‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,20 @@ body {
1313
font-family: var(--body-font);
1414
background-color: var(--primary-bg);
1515
color: var(--text-color);
16+
min-height: 100vh;
17+
margin: 0;
18+
text-align: center;
19+
}
20+
21+
main {
1622
display: flex;
1723
flex-direction: column;
18-
justify-content: center;
1924
align-items: center;
25+
justify-content: center;
26+
gap: 1.5rem;
2027
min-height: 100vh;
21-
margin: 0;
22-
text-align: center;
28+
padding: 2rem 1.5rem 3rem;
29+
box-sizing: border-box;
2330
}
2431

2532
h1 {
@@ -35,8 +42,12 @@ h1 {
3542
color: var(--text-color);
3643
min-height: 2.5em;
3744
margin-bottom: 30px;
38-
white-space: pre-wrap;
45+
white-space: normal;
3946
overflow: hidden;
47+
display: inline-block;
48+
max-width: 40ch;
49+
margin-left: auto;
50+
margin-right: auto;
4051
animation:
4152
typing 3.5s steps(40, end);
4253
}

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ <h1>Alessandro Trysh</h1>
2121
<p data-i18n="home.subtitle">Computer Science Student & Developer</p>
2222
</header>
2323
<main class="card-container" id="main-content">
24-
<a href="/portfolio/" class="card">
24+
<a href="./portfolio/" class="card">
2525
<span class="emoji-icon" aria-hidden="true">💼</span>
2626
<h2 data-i18n="home.cardPortfolio">Portfolio</h2>
2727
</a>
28-
<a href="/blog/" class="card">
28+
<a href="./blog/" class="card">
2929
<span class="emoji-icon" aria-hidden="true">✍️</span>
3030
<h2 data-i18n="home.cardBlog">Blog</h2>
3131
</a>
32-
<a href="/lab/" class="card">
32+
<a href="./lab/" class="card">
3333
<span class="emoji-icon" aria-hidden="true">🧪</span>
3434
<h2 data-i18n="home.cardLab">Lab</h2>
3535
</a>

‎lab/index.html‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,38 @@
2323
body {
2424
margin: 0;
2525
padding: 0;
26-
display: flex;
27-
flex-direction: column;
28-
justify-content: center;
29-
align-items: center;
30-
height: 100vh;
26+
display: block;
27+
min-height: 100vh;
3128
background-color: var(--primary-bg);
3229
overflow: hidden;
3330
font-family: var(--body-font);
3431
}
3532

33+
main {
34+
position: relative;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
justify-content: center;
39+
gap: 3rem;
40+
min-height: 100vh;
41+
width: 100%;
42+
padding: 2.5rem 1.5rem 3rem;
43+
box-sizing: border-box;
44+
text-align: center;
45+
}
46+
3647
canvas {
3748
position: absolute;
38-
margin: 0 auto;
49+
top: 0;
50+
left: 0;
51+
margin: 0;
3952
z-index: -1;
4053
}
4154

4255
.back-button {
4356
display: inline-block;
44-
margin-top: 200px;
57+
margin-top: 2.5rem;
4558
padding: 12px 25px;
4659
background-color: var(--button-bg);
4760
color: white;
@@ -132,7 +145,7 @@
132145
</div>
133146
<main id="main-content">
134147
<canvas id="canvas"></canvas>
135-
<a href="/" class="back-button" data-i18n="lab.back">Go Back Home</a>
148+
<a href="../" class="back-button" data-i18n="lab.back">Go Back Home</a>
136149
</main>
137150

138151
<script>
@@ -226,6 +239,16 @@
226239
}
227240
}
228241

242+
function getTextY() {
243+
return canvas.height * 0.4; // push greeting up to leave room for the button
244+
}
245+
246+
function drawGreeting(text) {
247+
ctx.clearRect(0, 0, canvas.width, canvas.height);
248+
ctx.fillStyle = '#d2b48c';
249+
ctx.fillText(text, canvas.width / 2, getTextY());
250+
}
251+
229252
function init() {
230253
particles.length = 0;
231254

@@ -238,10 +261,7 @@
238261
ctx.textAlign = 'center';
239262
ctx.textBaseline = 'middle';
240263

241-
ctx.clearRect(0, 0, canvas.width, canvas.height);
242-
ctx.fillStyle = '#d2b48c';
243-
ctx.fillText(greetings[currentGreetingIndex], canvas.width / 2, canvas.height / 2);
244-
264+
drawGreeting(greetings[currentGreetingIndex]);
245265
const textCoordinates = ctx.getImageData(0, 0, canvas.width, canvas.height);
246266

247267
for (let i = 0; i < particleCount; i++) {
@@ -359,10 +379,7 @@
359379

360380
setInterval(() => {
361381
currentGreetingIndex = (currentGreetingIndex + 1) % greetings.length;
362-
ctx.clearRect(0, 0, canvas.width, canvas.height);
363-
ctx.fillStyle = '#d2b48c';
364-
ctx.fillText(greetings[currentGreetingIndex], canvas.width / 2, canvas.height / 2);
365-
382+
drawGreeting(greetings[currentGreetingIndex]);
366383
const textCoordinates = ctx.getImageData(0, 0, canvas.width, canvas.height);
367384

368385
for (let i = 0; i < particles.length; i++) {

‎portfolio/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
1515
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
1616

17-
<link rel="stylesheet" href="/portfolio/style/style.css">
17+
<link rel="stylesheet" href="./style/style.css">
1818
</head>
1919

2020
<body>
@@ -23,7 +23,7 @@
2323
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2424
<div class="flex items-center justify-between h-16">
2525
<div class="flex items-center">
26-
<a href="../../index.html" class="text-black font-bold text-xl">Alessandro Trysh</a>
26+
<a href="../index.html" class="text-black font-bold text-xl">Alessandro Trysh</a>
2727
</div>
2828
<div class="hidden md:block desktop-menu">
2929
<div class="ml-10 flex items-center space-x-4">
@@ -78,7 +78,7 @@ <h1 class="hero-text font-bold mb-4"><br>Alex</h1>
7878
</a>
7979
</div>
8080
<div class="md:w-1/2 flex justify-center">
81-
<img src="/portfolio/images/headersecond.svg" alt="Developer illustration"
81+
<img src="./images/headersecond.svg" alt="Developer illustration"
8282
class="w-full sm:max-w-xs md:max-w-sm lg:max-w-md" />
8383
</div>
8484
</div>
@@ -90,7 +90,7 @@ <h1 class="hero-text font-bold mb-4"><br>Alex</h1>
9090
<h2 class="section-title text-center" data-i18n="about.title">About Me</h2>
9191
<div class="flex flex-col md:flex-row items-center justify-between">
9292
<div class="md:w-1/2 mb-8 md:mb-0">
93-
<img src="/portfolio/images/headerpfp.svg" alt="image" class="mx-auto w-62 md:w-82 lg:w-80" />
93+
<img src="./images/headerpfp.svg" alt="image" class="mx-auto w-62 md:w-82 lg:w-80" />
9494
</div>
9595
<div class="md:w-1/2">
9696
<p class="text-lg mb-4" data-i18n="about.p1">
@@ -175,7 +175,7 @@ <h2 class="section-title text-center" data-i18n="projects.title">Projects</h2>
175175
<div class="bento-grid">
176176
<div class="bento-card span-2">
177177
<div class="bento-top">
178-
<dotlottie-player src="/portfolio/telegram_logo.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
178+
<dotlottie-player src="./telegram_logo.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
179179
<div>
180180
<h3 class="bento-title" data-i18n="projects.p1.title">Telegram bot and website for school circulars</h3>
181181
<p class="bento-desc" data-i18n="projects.p1.desc">Developed a Python bot with BS4 and Telegram API to extract circulars from the school website and send them to students. Also developed a website with Flask to show circulars and substitutions, with browser notifications.</p>
@@ -195,7 +195,7 @@ <h3 class="bento-title" data-i18n="projects.p1.title">Telegram bot and website f
195195

196196
<div class="bento-card">
197197
<div class="bento-top">
198-
<dotlottie-player src="/portfolio/contest_platform.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
198+
<dotlottie-player src="./contest_platform.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
199199
<div>
200200
<h3 class="bento-title" data-i18n="projects.p2.title">MVP of a contest app</h3>
201201
<p class="bento-desc" data-i18n="projects.p2.desc">Created a prototype in Flask inspired by contest.com to create and manage competitions, validated with early interest.</p>
@@ -213,7 +213,7 @@ <h3 class="bento-title" data-i18n="projects.p2.title">MVP of a contest app</h3>
213213

214214
<div class="bento-card">
215215
<div class="bento-top">
216-
<dotlottie-player src="/portfolio/file_conversion.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
216+
<dotlottie-player src="./file_conversion.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
217217
<div>
218218
<h3 class="bento-title" data-i18n="projects.p3.title">Nautilus extension for file conversion</h3>
219219
<p class="bento-desc" data-i18n="projects.p3.desc">Bash + FFMPEG script that adds a conversion action to Nautilus for quick media transforms on Linux.</p>
@@ -231,7 +231,7 @@ <h3 class="bento-title" data-i18n="projects.p3.title">Nautilus extension for fil
231231

232232
<div class="bento-card span-2">
233233
<div class="bento-top">
234-
<dotlottie-player src="/portfolio/quiz_platform.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
234+
<dotlottie-player src="./quiz_platform.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
235235
<div>
236236
<h3 class="bento-title" data-i18n="projects.p4.title">Quiz Platform (LLM-powered)</h3>
237237
<p class="bento-desc" data-i18n="projects.p4.desc">FastAPI webapp that generates and grades quizzes with LLMs, supports custom reference files, style mimic, and configurable question types and counts.</p>
@@ -250,7 +250,7 @@ <h3 class="bento-title" data-i18n="projects.p4.title">Quiz Platform (LLM-powered
250250

251251
<div class="bento-card span-wide">
252252
<div class="bento-top">
253-
<dotlottie-player src="/portfolio/zerosec.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
253+
<dotlottie-player src="./zerosec.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true" class="bento-lottie"></dotlottie-player>
254254
<div>
255255
<h3 class="bento-title" data-i18n="projects.p5.title">ZeroSec Spectre</h3>
256256
<p class="bento-desc" data-i18n="projects.p5.desc">LLM-powered cybersecurity framework for rapid, context-aware offense/defense: file-map context, intel pipeline, and task engine with safeguards, RBAC, and human-in-the-loop controls.</p>
@@ -297,7 +297,7 @@ <h2 class="section-title mb-8" data-i18n="contact.title">Contact me</h2>
297297
<p class="text-sm" data-i18n="footer.credit">Thanks to <a href="https://notioly.com/">notioly</a> for the icons!</p>
298298
</div>
299299
</footer>
300-
<script src="/portfolio/script/script.js"></script>
300+
<script src="./script/script.js"></script>
301301
</body>
302302

303303
</html>

0 commit comments

Comments
 (0)