Skip to content

Commit c6a9aaf

Browse files
NotAwarNotAwar
committed
Add professional OG image with logo and update favicon configuration
1 parent 7f3c3ce commit c6a9aaf

File tree

5 files changed

+172
-19
lines changed

5 files changed

+172
-19
lines changed

‎_includes/head.html‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,38 @@
33
<meta http-equiv="X-UA-Compatible" content="IE=edge">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55

6-
<title>{% if page.title %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
7-
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
6+
<title>{% if page.title and page.title != 'Home' %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }} - Cloud Engineer & Tech Enthusiast{% endif %}</title>
7+
<meta name="description" content="{% if page.description %}{{ page.description | escape }}{% elsif page.title == 'Home' or page.url == '/' %}Cloud engineer passionate about Kubernetes, Azure, and building innovative tech solutions. Sharing discoveries and speaking at conferences worldwide.{% else %}{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endif %}">
8+
<meta name="author" content="{{ site.author }}">
9+
<meta name="keywords" content="Cloud Engineering, Kubernetes, Azure, DevOps, Technology, Software Engineering, Conference Speaker">
810

9-
<!-- Open Graph tags -->
10-
<meta property="og:title" content="{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
11-
<meta property="og:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
11+
<!-- Open Graph / Facebook -->
12+
<meta property="og:type" content="website">
13+
<meta property="og:site_name" content="{{ site.title }}">
14+
<meta property="og:title" content="{% if page.title and page.title != 'Home' %}{{ page.title | escape }}{% else %}{{ site.title | escape }} - Cloud Engineer & Tech Enthusiast{% endif %}">
15+
<meta property="og:description" content="{% if page.description %}{{ page.description | escape }}{% elsif page.title == 'Home' or page.url == '/' %}Cloud engineer passionate about Kubernetes, Azure, and building innovative tech solutions. Sharing discoveries and speaking at conferences worldwide.{% else %}{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endif %}">
1216
<meta property="og:url" content="{{ page.url | replace:'index.html','' | absolute_url }}">
13-
{% if page.image %}
14-
<meta property="og:image" content="{{ site.url }}{{ page.image }}">
17+
<meta property="og:image" content="{% if page.image %}{{ site.url }}{{ page.image }}{% else %}{{ site.url }}/assets/images/og-image.png{% endif %}">
18+
<meta property="og:image:width" content="1200">
19+
<meta property="og:image:height" content="630">
20+
<meta property="og:locale" content="en_US">
21+
22+
<!-- Twitter -->
23+
<meta name="twitter:card" content="summary_large_image">
24+
<meta name="twitter:title" content="{% if page.title and page.title != 'Home' %}{{ page.title | escape }}{% else %}{{ site.title | escape }} - Cloud Engineer & Tech Enthusiast{% endif %}">
25+
<meta name="twitter:description" content="{% if page.description %}{{ page.description | escape }}{% elsif page.title == 'Home' or page.url == '/' %}Cloud engineer passionate about Kubernetes, Azure, and building innovative tech solutions. Sharing discoveries and speaking at conferences worldwide.{% else %}{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endif %}">
26+
<meta name="twitter:image" content="{% if page.image %}{{ site.url }}{{ page.image }}{% else %}{{ site.url }}/assets/images/og-image.png{% endif %}">
27+
{% if site.twitter_username %}
28+
<meta name="twitter:creator" content="@{{ site.twitter_username }}">
1529
{% endif %}
1630

31+
<!-- LinkedIn specific -->
32+
<meta property="og:profile:first_name" content="Awar">
33+
<meta property="og:profile:last_name" content="Abdulkarim">
34+
1735
<!-- Color scheme -->
1836
<meta name="color-scheme" content="dark">
19-
<meta name="theme-color" content="#121212">
37+
<meta name="theme-color" content="#0D0D0D">
2038

2139
<!-- Accessibility -->
2240

@@ -27,9 +45,9 @@
2745
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
2846

2947
<!-- Favicon -->
30-
<link rel="icon" type="image/svg+xml" href="{{ '/assets/images/favicon.svg' | relative_url }}">
31-
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/favicon.png' | relative_url }}">
32-
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/favicon.png' | relative_url }}">
48+
<link rel="icon" type="image/png" sizes="192x192" href="{{ '/assets/images/logo.png' | relative_url }}">
49+
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/logo.png' | relative_url }}">
50+
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/logo.png' | relative_url }}">
3351
<link rel="manifest" href="{{ '/site.webmanifest' | relative_url }}">
3452

3553
<!-- RSS Feed -->

‎assets/images/og-image-template.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<style>
6+
* { margin: 0; padding: 0; box-sizing: border-box; }
7+
body {
8+
width: 1200px;
9+
height: 630px;
10+
background: linear-gradient(145deg, #0D0D0D 0%, #1A1A1A 50%, #0D0D0D 100%);
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
font-family: 'Inter', -apple-system, sans-serif;
15+
position: relative;
16+
overflow: hidden;
17+
}
18+
body::before {
19+
content: '';
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
right: 0;
24+
bottom: 0;
25+
background-image:
26+
radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
27+
radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
28+
pointer-events: none;
29+
}
30+
.container {
31+
display: flex;
32+
align-items: center;
33+
gap: 60px;
34+
z-index: 1;
35+
padding: 80px;
36+
}
37+
.logo {
38+
width: 280px;
39+
height: 280px;
40+
flex-shrink: 0;
41+
}
42+
.content {
43+
flex: 1;
44+
}
45+
h1 {
46+
font-size: 96px;
47+
font-weight: 800;
48+
background: linear-gradient(135deg, #FFD700, #DAA520);
49+
-webkit-background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
background-clip: text;
52+
margin-bottom: 20px;
53+
line-height: 1.1;
54+
}
55+
.subtitle {
56+
font-size: 42px;
57+
color: #FFFFFF;
58+
font-weight: 600;
59+
margin-bottom: 15px;
60+
}
61+
.description {
62+
font-size: 28px;
63+
color: #E0E0E0;
64+
line-height: 1.5;
65+
margin-bottom: 30px;
66+
}
67+
.footer {
68+
font-size: 32px;
69+
color: #FFD700;
70+
font-weight: 600;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<div class="container">
76+
<img src="logo.png" alt="Logo" class="logo">
77+
<div class="content">
78+
<h1>Awar Abdulkarim</h1>
79+
<div class="subtitle">Cloud Engineer & Tech Enthusiast</div>
80+
<div class="description">Building innovative solutions with Kubernetes & Azure</div>
81+
<div class="footer">awar.no</div>
82+
</div>
83+
</div>
84+
</body>
85+
</html>

‎assets/images/og-image.png‎

336 KB
Loading

‎generate-og-image.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Generate OG Image
2+
3+
To create the social sharing image (og-image.png), follow these steps:
4+
5+
## Option 1: Using Browser Screenshot (Recommended)
6+
7+
1. Open `assets/images/og-image-template.html` in Chrome/Edge
8+
2. Press F12 to open DevTools
9+
3. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
10+
4. Type "screenshot" and select "Capture full size screenshot"
11+
5. Save the image as `og-image.png` in the `assets/images/` folder
12+
13+
## Option 2: Using Online Tool
14+
15+
1. Visit https://www.screely.com/ or https://screenshot.rocks/
16+
2. Upload the `og-image-template.html` file
17+
3. Set dimensions to 1200x630
18+
4. Download as `og-image.png`
19+
5. Save to `assets/images/` folder
20+
21+
## Option 3: Using Command Line (macOS/Linux)
22+
23+
If you have Chrome installed:
24+
25+
```bash
26+
cd /Users/awar/NotAwar.github.io/assets/images
27+
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
28+
--headless \
29+
--screenshot=og-image.png \
30+
--window-size=1200,630 \
31+
og-image-template.html
32+
```
33+
34+
After generating the image, commit and push:
35+
36+
```bash
37+
git add assets/images/og-image.png
38+
git commit -m "Add social sharing OG image with logo"
39+
git push
40+
```
41+
42+
The image will be used when sharing links on:
43+
- Facebook
44+
- Twitter/X
45+
- LinkedIn
46+
- Slack
47+
- Discord
48+
- And other social platforms

‎site.webmanifest‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
{
2-
"name": "Awar Abdulkarim",
2+
"name": "Awar Abdulkarim - Cloud Engineer",
33
"short_name": "Awar",
44
"description": "Cloud Platform Engineer specializing in Azure, Kubernetes, and DevOps automation",
55
"icons": [
66
{
7-
"src": "/assets/images/favicon.png",
8-
"sizes": "192x192",
9-
"type": "image/png"
7+
"src": "/assets/images/logo.png",
8+
"sizes": "512x512",
9+
"type": "image/png",
10+
"purpose": "any maskable"
1011
},
1112
{
12-
"src": "/assets/images/favicon.svg",
13-
"sizes": "any",
14-
"type": "image/svg+xml"
13+
"src": "/assets/images/logo.png",
14+
"sizes": "192x192",
15+
"type": "image/png"
1516
}
1617
],
1718
"theme_color": "#0D0D0D",
1819
"background_color": "#0D0D0D",
1920
"display": "standalone",
20-
"start_url": "/"
21+
"start_url": "/",
22+
"scope": "/"
2123
}

0 commit comments

Comments
 (0)