Skip to content

Commit 182f857

Browse files
warnyulwarnyul
authored
feat: Replace favicon.png with SVG and improve dynamic metadata handling (#73)
- **SVG Favicon**: - Replaced `favicon.png` with `favicon.svg` for better scalability and modern standards. - **Dynamic Metadata**: - Updated `index.ejs` to use dynamic variables (`name`, `title`, `description`) for better reusability. - Enhanced metadata structure, including `og` tags and schema.org data, to improve SEO. - **Favicons Webpack Plugin Update**: - Updated `webpack.config.js` to use `favicon.svg` for generating favicons. - Centralized dynamic variables (`userName`, `pageTitle`, `pageDescription`) for consistency. - **General Enhancements**: - Simplified `profile picture alt` attribute to use dynamic `name`. - Updated footer copyright to reflect dynamic `name`. - **Improved Branding**: - Streamlined app and developer details across metadata and manifest.
1 parent 3fc563d commit 182f857

File tree

4 files changed

+35
-19
lines changed

4 files changed

+35
-19
lines changed

‎src/favicon.png‎

-4.11 KB
Binary file not shown.

‎src/favicon.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/views/index.ejs‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
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 - Professional Profile</title>
7-
<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">
9-
<meta name="author" content="Balázs Varga">
6+
<title><%= title %></title>
7+
<meta name="description" content="<%= description %> Connect now!">
8+
<meta name="keywords" content="<%= name %>, CTO, Engineering Leader, Software Development, Mobile Development, LinkedIn, GitHub, Blog">
9+
<meta name="author" content="<%= name %>">
1010
<meta name="twitter:card" content="summary_large_image" />
1111
<meta property="og:url" content="<%- baseUrl %>" />
1212
<meta property="og:type" content="website" />
13-
<meta property="og:title" content="Balázs Varga" />
14-
<meta property="og:description" content="Discover the professional profile of Balázs Varga. View links to LinkedIn, GitHub, Bluesky, and blog content. Connect now!" />
13+
<meta property="og:title" content="<%= name %>" />
14+
<meta property="og:description" content="<%= description %> Connect now!" />
1515
<meta property="og:image" content="<%- baseUrl + '/' + profilePictureUrlPath %>" />
16-
<meta property="og:image:alt" content="Profile picture of Balázs Varga, CTO @ Apter" />
16+
<meta property="og:image:alt" content="Profile picture of <%= name %>, CTO @ Apter" />
1717
<meta property="og:image:width" content="1366" />
1818
<meta property="og:image:height" content="1269" />
1919
<link rel="preload" href="../assets/fonts/Poppins-Bold-latin.woff2" as="font" type="font/woff2" crossorigin />
@@ -23,26 +23,25 @@
2323
{
2424
"@context": "https://schema.org",
2525
"@type": "Person",
26-
"name": "Balázs Varga",
26+
"name": "<%= name %>",
2727
"url": "<%- baseUrl %>",
2828
"sameAs": [
2929
"https://www.linkedin.com/in/-balazs-varga-/",
3030
"https://github.com/warnyul",
3131
"https://bsky.app/profile/balzsvarga.bsky.social"
3232
],
3333
"image": "<%- `${baseUrl}/${profilePictureUrlPath}` %>",
34-
"description": "Discover the professional profile of Balázs Varga. Links to LinkedIn, GitHub, Bluesky, and blog. Connect now!"
34+
"description": "<%= description %> Connect now!"
3535
}
3636
</script>
3737
</head>
3838
<body>
3939
<header>
4040
<picture>
4141
<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" />
42+
<img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of <%= name %>, CTO @ Apter" loading="eager" width="100" height="100" />
4343
</picture>
44-
<h1>Balázs Varga<br/><span>CTO & Engineering Lead</span></h1>
45-
<!-- <h2>CTO & Engineering Lead</h2> -->
44+
<h1><%= name %><br/><span>CTO & Engineering Lead</span></h1>
4645
</header>
4746
<main>
4847
<nav class="clazz-profile-links" aria-label="Profile links">
@@ -66,7 +65,7 @@
6665
</nav>
6766
</main>
6867
<footer>
69-
<p>© <%= (new Date()).getFullYear() %> Balázs Varga. All rights reserved.</p>
68+
<p>© <%= (new Date()).getFullYear() %> <%= name %>. All rights reserved.</p>
7069
</footer>
7170
</body>
7271
</html>

‎webpack.config.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ const path = require('path');
2222
const context = path.join(__dirname, 'src');
2323
const outputDir = path.join(__dirname, 'dist');
2424
const baseUrl = 'https://bvarga.dev';
25+
const userName = 'Balázs Varga';
26+
const pageTitle = `${userName} - Professional Profile`;
27+
const pageDescription = `Discover the professional profile of ${userName}. View links to LinkedIn, GitHub, Bluesky, and blog content.`;
2528

2629
const links = function() {
2730
const links = fs.readFileSync(`${context}/data/links.json`);
@@ -109,6 +112,9 @@ module.exports = {
109112
templateEjsLoaderOption: {
110113
data: {
111114
baseUrl: baseUrl,
115+
title: pageTitle,
116+
name: userName,
117+
description: `${pageDescription}`,
112118
profilePictureUrlPath: function() {
113119
const pngPath = path.resolve(__dirname, 'src/assets/images/profile.png');
114120
const pngContent = fs.readFileSync(pngPath);
@@ -182,14 +188,14 @@ module.exports = {
182188
}
183189
}),
184190
new FaviconsWebpackPlugin({
185-
logo: './src/favicon.png',
191+
logo: './src/favicon.svg',
186192
mode: 'webapp',
187-
outputPath: ".",
193+
prefix: '',
188194
favicons: {
189-
appName: 'Balázs Varga - Professional Profile',
190-
appDescription: "Balázs Varga",
191-
developerName: "Balázs Varga",
192-
developerURL: "https://bvarga.dev",
195+
appName: pageTitle,
196+
appDescription: pageDescription,
197+
developerName: userName,
198+
developerURL: baseUrl,
193199
background: "#fff",
194200
theme_color: "#fff",
195201
}

0 commit comments

Comments
 (0)