Skip to content

Commit c666349

Browse files
warnyulwarnyul
authored
refactor: Streamline layout, styling, and accessibility for 404 and index pages (#71)
* refactor: Streamline layout, styling, and accessibility for 404 and index pages - **404 SCSS**: - Extracted common styles into `_base.scss` for reset and general styling. - Simplified font and color definitions by inheriting variables from `_variables.scss`. - Adjusted margins and font sizes for better spacing and readability. - **Index SCSS**: - Centralized layout and color management in `base.scss`. - Updated class names and added flexbox improvements for responsiveness. - Reorganized button and social link styles with improved hover effects. - **404.ejs**: - Improved semantic HTML structure by grouping header content. - Repositioned the image for better visual alignment. - **Index.ejs**: - Simplified main layout, grouping profile and social links under `nav` tags. - Improved SEO with additional meta tags for keywords and structured content. - Updated footer for consistent layout with responsive behavior. - **_variables.scss**: - Reduced font sizes for large, medium, and small text elements to maintain consistency. * x * x
1 parent a24a615 commit c666349

File tree

6 files changed

+101
-99
lines changed

6 files changed

+101
-99
lines changed

‎src/scss/404.scss‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
@use "poppins";
22
@use "variables" as *;
3+
@use "base";
34

45
// Reset
56
body,
67
html {
7-
margin: 0;
8-
padding: 0;
9-
font-family: $font-family;
10-
background-color: $background-color;
11-
color: $text-color;
12-
height: 100%;
138
display: flex;
149
justify-content: center;
1510
align-items: center;
@@ -25,7 +20,6 @@ html {
2520
header h1 {
2621
font-size: $font-size-large;
2722
margin-bottom: $gap;
28-
color: $text-color;
2923
}
3024

3125
header p {
@@ -41,8 +35,8 @@ html {
4135
}
4236

4337
.clazz-action p {
44-
font-size: $font-size-small;
45-
margin-bottom: calc($gap / 2); // Smaller gap for less important text
38+
font-size: $font-size-medium;
39+
margin-bottom: $gap;
4640
}
4741

4842
.clazz-home-link {

‎src/scss/_base.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use "variables" as *;
2+
3+
// Reset
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
// General styles
11+
html, body {
12+
font-family: $font-family;
13+
height: 100%;
14+
margin: 0;
15+
color: $text-color;
16+
background: $background-color;
17+
}

‎src/scss/_variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $border-radius: 4px;
99
$gap: 16px;
1010
$button-padding: 24px;
1111

12-
$font-size-large: 48px; // Large font size for main heading
13-
$font-size-medium: 24px; // Medium font size for subheading
14-
$font-size-small: 16px; // Small font size for additional text
12+
$font-size-large: 24px; // Large font size for main heading
13+
$font-size-medium: 16px; // Medium font size for subheading
14+
$font-size-small: 12px; // Small font size for additional text
1515
$font-size-link: 16px; // Font size for link text

‎src/scss/index.scss‎

Lines changed: 41 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,25 @@
11
@use "poppins";
22
@use "variables" as *;
3+
@use "base";
34

4-
// Reset
5-
* {
6-
margin: 0;
7-
padding: 0;
8-
box-sizing: border-box;
9-
}
10-
11-
// General styles
12-
html, body {
13-
font-family: $font-family;
14-
height: 100%;
15-
margin: 0;
16-
background: $background-color;
17-
}
18-
19-
.clazz-container {
5+
body {
206
width: 100%;
217
min-height:100%;
228
display: flex;
239
flex-direction: column;
2410
align-items: center;
2511
padding: $gap;
26-
position: relative;
27-
}
2812

29-
.clazz-content {
30-
flex: 1 0 auto;
31-
width: 100%;
32-
max-width: 640px;
13+
> * {
14+
width: 100%;
15+
min-width: 300px;
16+
max-width: 640px;
17+
}
3318
}
3419

3520
// Header
3621
header {
37-
display: flex;
38-
flex-direction: column;
39-
align-items: center;
22+
text-align: center;
4023
margin: $gap 0px calc($gap * 2);
4124
}
4225

@@ -48,31 +31,41 @@ header {
4831
}
4932

5033
h1 {
51-
color: $text-color;
5234
margin: $gap 0px calc($gap * 0.75);
53-
font-size: $font-size-medium;
54-
line-height: 1;
35+
font-size: $font-size-large;
5536
font-weight: 700;
56-
text-align: center;
37+
> span {
38+
font-size: $font-size-medium;
39+
margin-bottom: $gap;
40+
}
41+
}
42+
43+
main {
44+
display: flex;
45+
flex-direction: column;
46+
gap: $gap
47+
}
48+
49+
.clazz-profile-links {
50+
display: flex;
51+
flex-direction: column;
52+
gap: $gap;
5753
}
5854

5955
// Button Styles
60-
.clazz-button-container
61-
{
62-
margin-bottom: $gap;
63-
a {
64-
background-color: $primary-color;
65-
border-radius: $border-radius;
66-
color: $link-color;
67-
padding: $button-padding;
68-
width: 100%;
69-
display: flex;
70-
align-items: center;
71-
justify-content: center;
72-
text-decoration: none;
73-
font-size: $font-size-small;
74-
line-height: 24px;
75-
transition: background-color 0.3s ease;
56+
.clazz-button {
57+
display: block;
58+
text-align: center;
59+
background-color: $primary-color;
60+
color: $link-color;
61+
padding: $button-padding;
62+
border-radius: $border-radius;
63+
text-decoration: none;
64+
font-size: $font-size-link;
65+
transition: background-color 0.3s;
66+
67+
&:hover {
68+
background-color: $hover-color;
7669
}
7770
}
7871

@@ -85,10 +78,8 @@ h1 {
8578
// Social Links
8679
.clazz-social-links {
8780
display: flex;
88-
align-items: center;
8981
justify-content: center;
9082
flex-wrap: wrap;
91-
width: 100%;
9283
margin-bottom: $gap;
9384
gap: calc($gap / 2);
9485
}
@@ -110,13 +101,13 @@ h1 {
110101

111102
// Footer
112103
footer {
104+
flex-direction: column;
113105
display: flex;
106+
flex: 1 0 auto;
114107
align-items: center;
115-
justify-content: center;
108+
justify-content: flex-end;
116109
margin-top: $gap;
117-
width: 100%;
118110
font-size: $font-size-small;
119-
text-decoration: none;
120111
text-align: center;
121112
}
122113

‎src/views/404.ejs‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
<div class="clazz-error-container">
1414
<header>
1515
<h1>Page not found</h1>
16+
<picture>
17+
<!-- Source of the image: https://www.cleanpng.com/png-http-404-error-user-interface-design-google-chrome-2045552/ -->
18+
<source type="image/webp" srcset="../assets/images/confused-robot.png?as=webp">
19+
<img
20+
src="../assets/images/confused-robot.png"
21+
alt="Confused robot looking for the page"
22+
width="300"
23+
height="270" />
24+
</picture>
1625
<p>Oops! Looks like you’ve hit a dead end.</p>
1726
</header>
18-
<picture>
19-
<!-- Source of the image: https://www.cleanpng.com/png-http-404-error-user-interface-design-google-chrome-2045552/ -->
20-
<source type="image/webp" srcset="../assets/images/confused-robot.png?as=webp">
21-
<img
22-
src="../assets/images/confused-robot.png"
23-
alt="Confused robot looking for the page"
24-
width="300"
25-
height="270" />
26-
</picture>
2727
<div class="clazz-action">
2828
<p>Don't worry, even robots get lost sometimes.</p>
2929
<a href="/" aria-label="Visit the Home Page" class="clazz-home-link">Take Me Home</a>

‎src/views/index.ejs‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<title>Balázs Varga</title>
6+
<title>Balázs Varga - Professional Profile</title>
77
<meta name="description" content="Discover the professional profile of Balázs Varga. View links to LinkedIn, GitHub, Bluesky, and blog content. Connect now!">
8+
<meta name="keywords" content="Balázs Varga, CTO, Engineering Leader, Software Development, Mobile Development, LinkedIn, GitHub, Blog">
89
<meta name="author" content="Balázs Varga">
910
<meta name="twitter:card" content="summary_large_image" />
1011
<meta property="og:url" content="<%- baseUrl %>" />
@@ -35,38 +36,37 @@
3536
</script>
3637
</head>
3738
<body>
38-
<div class="clazz-container">
39-
<div class="clazz-content">
40-
<header>
41-
<picture>
42-
<source type="image/webp" srcset="../assets/images/profile100w100h.png?as=webp" />
43-
<img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" loading="eager" width="100" height="100" />
44-
</picture>
45-
<h1 class="clazz-text-center">Balázs Varga</h1>
46-
</header>
47-
39+
<header>
40+
<picture>
41+
<source type="image/webp" srcset="../assets/images/profile100w100h.png?as=webp" />
42+
<img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" loading="eager" width="100" height="100" />
43+
</picture>
44+
<h1>Balázs Varga<br/><span>CTO & Engineering Lead</span></h1>
45+
<!-- <h2>CTO & Engineering Lead</h2> -->
46+
</header>
47+
<main>
48+
<nav class="clazz-profile-links" aria-label="Profile links">
4849
<% links.forEach(function(link) { %>
49-
<div class="clazz-button-container">
50-
<a href="<%- link.url %>" aria-label="Visit <%= link.name %>" target="_blank" rel="noopener noreferrer ugc"><%= link.name %></a>
51-
</div>
50+
<a class="clazz-button" href="<%- link.url %>" aria-label="Visit <%= link.name %>" target="_blank" rel="noopener noreferrer ugc"><%= link.name %></a>
5251
<% }); %>
53-
<div class="clazz-social-links">
54-
<% socialLinks.forEach(function(link) { %>
55-
<div class="clazz-social-link-container">
56-
<a href="<%- link.url %>" aria-label="Visit <%= link.name %>" target="_blank" rel="noopener noreferrer ugc">
57-
<%- include(`../assets/images/fa6-brands-${link.icon}.svg`) %>
58-
</a>
59-
</div>
60-
<% }); %>
52+
</nav>
53+
<nav class="clazz-social-links" aria-label="Social links">
54+
<% socialLinks.forEach(function(link) { %>
6155
<div class="clazz-social-link-container">
62-
<a class="clazz-copy-link" href="#" aria-label="Copy link" rel="noopener">
63-
<%- include(`../assets/images/fa6-solid-arrow-up-right-from-square.svg`) %>
56+
<a href="<%- link.url %>" aria-label="Visit <%= link.name %>" target="_blank" rel="noopener noreferrer ugc">
57+
<%- include(`../assets/images/fa6-brands-${link.icon}.svg`) %>
6458
</a>
6559
</div>
60+
<% }); %>
61+
<div class="clazz-social-link-container">
62+
<a class="clazz-copy-link" href="#" aria-label="Copy link" rel="noopener">
63+
<%- include(`../assets/images/fa6-solid-arrow-up-right-from-square.svg`) %>
64+
</a>
6665
</div>
67-
<footer>
68-
</footer>
69-
</div>
70-
</div>
66+
</nav>
67+
</main>
68+
<footer>
69+
<p>© <%= (new Date()).getFullYear() %> Balázs Varga. All rights reserved.</p>
70+
</footer>
7171
</body>
7272
</html>

0 commit comments

Comments
 (0)