diff --git a/build.js b/build.js index d644b5c..c0b8ae9 100644 --- a/build.js +++ b/build.js @@ -55,20 +55,6 @@ function copyImages(srcDir, destDir) { } } -function compileHeaderTemplate(data) { - const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs'); - const headerTemplateSource = readFile(headerTemplatePath); - const headerTemplate = handlebars.compile(headerTemplateSource); - return headerTemplate(data); -} - -function compileFooterTemplate(data) { - const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs'); - const footerTemplateSource = readFile(footerTemplatePath); - const footerTemplate = handlebars.compile(footerTemplateSource); - return footerTemplate(data); -} - function compileTemplate(templatePath, data) { const templateSource = readFile(templatePath); const template = handlebars.compile(templateSource); @@ -77,12 +63,14 @@ function compileTemplate(templatePath, data) { // Main build function function build() { + const distPath = path.join(__dirname, 'dist'); const baseHtmlPath = path.join(__dirname, 'public', 'index.html'); const dataPath = path.join(__dirname, 'src', 'data.json'); const cssPath = path.join(__dirname, 'public', 'styles', 'main.css'); const imagesSrcPath = path.join(__dirname, 'public', 'images'); - const distPath = path.join(__dirname, 'dist'); const imagesDestPath = path.join(distPath, 'images'); + const faviconSrcPath = path.join(__dirname, 'public', 'favicons'); + const faviconDestPath = path.join(distPath); const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs'); const linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs'); const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs'); @@ -127,6 +115,7 @@ function build() { writeFile(path.join(distPath, 'index.html'), finalHtml); copyImages(imagesSrcPath, imagesDestPath); + copyImages(faviconSrcPath, faviconDestPath) } // Run the build process diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..4ccfd0c Binary files /dev/null and b/public/favicons/android-chrome-192x192.png differ diff --git a/public/favicons/android-chrome-512x512.png b/public/favicons/android-chrome-512x512.png new file mode 100644 index 0000000..2a7064a Binary files /dev/null and b/public/favicons/android-chrome-512x512.png differ diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png new file mode 100644 index 0000000..9c7aa9f Binary files /dev/null and b/public/favicons/apple-touch-icon.png differ diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png new file mode 100644 index 0000000..216392a Binary files /dev/null and b/public/favicons/favicon-16x16.png differ diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png new file mode 100644 index 0000000..a72fbc9 Binary files /dev/null and b/public/favicons/favicon-32x32.png differ diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico new file mode 100644 index 0000000..14b386a Binary files /dev/null and b/public/favicons/favicon.ico differ diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/public/favicons/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/public/images/github.svg b/public/images/github.svg new file mode 100644 index 0000000..23e1701 --- /dev/null +++ b/public/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/globe.svg b/public/images/globe.svg new file mode 100644 index 0000000..2d665dc --- /dev/null +++ b/public/images/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/instagram.svg b/public/images/instagram.svg new file mode 100644 index 0000000..b826efe --- /dev/null +++ b/public/images/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/linkedin.svg b/public/images/linkedin.svg new file mode 100644 index 0000000..68e8795 --- /dev/null +++ b/public/images/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/mail.svg b/public/images/mail.svg new file mode 100644 index 0000000..25eba89 --- /dev/null +++ b/public/images/mail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/mastodon.svg b/public/images/mastodon.svg new file mode 100644 index 0000000..74f5edf --- /dev/null +++ b/public/images/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/telegram.svg b/public/images/telegram.svg new file mode 100644 index 0000000..be726a5 --- /dev/null +++ b/public/images/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index f9dcb5a..cabdbc2 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,6 @@ LinkMeUp - diff --git a/public/styles/main.css b/public/styles/main.css index 613f8d8..3f358fe 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -1,32 +1,85 @@ -body { - font-family: Arial, sans-serif; +* { margin: 0; padding: 0; - background-color: #f4f4f4; - color: #333; + box-sizing: border-box; } -header, footer { +html { + font-size: 16px; + background-color: #cdcdcd; +} + +body { + margin: 2rem; +} + +header { text-align: center; - padding: 1em; - background-color: #333; - color: white; + padding: 1rem; +} + +footer { + text-align: center; + position: absolute; + bottom: 0; + width: 100%; + padding: 1rem; } main { - padding: 2em; + margin: 1.7rem auto; + max-width: 1000px; + text-align: center; + align-items: center; + align-content: center; } -#social-links { +main hr { + margin: 2.7rem auto; + max-width: 50%; + color: #4e464644; +} + +.link-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1em; - padding: 2em 0; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + /* Maximum 3 columns */ + gap: 1rem; } -#social-links div { - background: white; - padding: 1em; +.link { + border: 1px solid #ddd; + padding: 1rem; + text-align: center; border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: transform 0.2s, box-shadow 0.2s; } + +.link:hover { + transform: scale(1.05); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.link img { + max-width: 100%; + height: auto; +} + +.link .link-icon { + width: 24px; + height: 24px; + margin-right: 8px; +} + +.link a { + display: flex; + align-items: center; + text-decoration: none; + color: #000; + width: 100%; + height: 100%; +} + +.link h2 { + font-size: 24px; +} \ No newline at end of file diff --git a/src/data.json b/src/data.json index 4be13d2..c976dbf 100644 --- a/src/data.json +++ b/src/data.json @@ -1,24 +1,59 @@ { + "header": { + "title": "WieErWill", + "subtitle": "Programmed for Adventure, Coded for Curiosity" + }, + "footer": { + "copyright": "WieErWill" + }, "socialLinks": [ { - "name": "Twitter", - "url": "https://twitter.com/username" + "name": "WieErWill.de", + "url": "https://www.wieerwill.de/", + "icon": "globe.svg", + "backgroundColor": "#1DA1F2" }, { - "name": "Facebook", - "url": "https://facebook.com/username" - }, - { - "name": "LinkedIn", - "url": "https://linkedin.com/in/username" + "name": "GitHub", + "url": "https://github.com/wieerwill", + "icon": "github.svg", + "backgroundColor": "#4CAF50" }, { "name": "Instagram", - "url": "https://instagram.com/username" + "url": "https://instagram.com/wieerwill", + "icon": "instagram.svg", + "backgroundColor": "#FF6B6B" }, { - "name": "YouTube", - "url": "https://youtube.com/user/username" + "name": "LinkedIn", + "url": "https://linkedin.com/in/wieerwill", + "icon": "linkedin.svg", + "backgroundColor": "#39CCCC" + }, + { + "name": "[Matrix]", + "url": "@wieerwill:matrix.org", + "icon": null, + "backgroundColor": "#01FF70" + }, + { + "name": "Mastodon", + "url": "https://chaos.social/@wieerwill", + "icon": "mastodon.svg", + "backgroundColor": "#2ECC71" + }, + { + "name": "Telegram", + "url": "https://t.me/wieerwill", + "icon": "telegram.svg", + "backgroundColor": "#267ed7" + }, + { + "name": "Mail", + "url": "mailto:robert@wieerwill.de", + "icon": "mail.svg", + "backgroundColor": "#FF4500" } ] } diff --git a/src/templates/header-template.hbs b/src/templates/header-template.hbs index fabbbc7..26682f6 100644 --- a/src/templates/header-template.hbs +++ b/src/templates/header-template.hbs @@ -1,6 +1,6 @@

{{header.title}}

{{#if header.subtitle}} -

{{header.subtitle}}

+

{{header.subtitle}}

{{/if}}
diff --git a/src/templates/social-links-template.hbs b/src/templates/social-links-template.hbs index a506a01..a591c09 100644 --- a/src/templates/social-links-template.hbs +++ b/src/templates/social-links-template.hbs @@ -1,6 +1,6 @@
{{#each socialLinks}} -
+
{{#if icon}} {{name}} icon