-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfooter-integration-guide.html
More file actions
148 lines (137 loc) · 6.47 KB
/
footer-integration-guide.html
File metadata and controls
148 lines (137 loc) · 6.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Integration Guide - Think Pixel</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
}
code {
background: rgba(0, 0, 0, 0.3);
padding: 0.2rem 0.5rem;
border-radius: 5px;
font-family: 'Courier New', monospace;
}
pre {
background: rgba(0, 0, 0, 0.3);
padding: 1rem;
border-radius: 10px;
overflow-x: auto;
}
h1, h2 {
color: #fff;
}
.step {
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
margin: 1rem 0;
border-radius: 10px;
border-left: 4px solid #667eea;
}
</style>
</head>
<body>
<div class="container">
<h1>🔗 Footer Integration Guide</h1>
<p>This guide shows how to add the branded footer with social links to any portfolio page.</p>
<div class="step">
<h2>📋 Step 1: Copy the Footer HTML</h2>
<p>Copy the content from <code>shared-footer.html</code> and paste it before the closing <code></body></code> tag in your portfolio page.</p>
</div>
<div class="step">
<h2>🎨 Step 2: Add SEO Meta Tags</h2>
<p>For each portfolio page, add these SEO meta tags in the <code><head></code> section:</p>
<pre><code><!-- SEO Meta Tags -->
<title>Portfolio #X - [Description] | Hardik Saxena | Think Pixel</title>
<meta name="description" content="[Portfolio description] by Hardik Saxena...">
<meta name="keywords" content="Hardik Saxena, Think Pixel, Portfolio Design...">
<meta name="author" content="Hardik Saxena">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://hardik.thinkpixel.org/[folder-number]/" />
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://hardik.thinkpixel.org/[folder-number]/">
<meta property="og:title" content="Portfolio #X - [Description] | Hardik Saxena">
<meta property="og:description" content="[Portfolio description]...">
<meta property="og:image" content="https://hardik.thinkpixel.org/assets/portfolio-[x]-preview.jpg">
<meta property="og:site_name" content="Think Pixel">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@hardiks57184721">
<meta name="twitter:title" content="Portfolio #X - [Description] | Hardik Saxena">
<meta name="twitter:description" content="[Portfolio description]...">
<meta name="twitter:image" content="https://hardik.thinkpixel.org/assets/portfolio-[x]-preview.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png"></code></pre>
</div>
<div class="step">
<h2>🔄 Step 3: Update Navigation Links</h2>
<p>Make sure navigation links point back to the main site:</p>
<pre><code><a href="../index.html#home">Home</a>
<a href="../index.html#projects">Projects</a>
<a href="../index.html#about">About</a>
<a href="../index.html#contact">Contact</a></code></pre>
</div>
<div class="step">
<h2>📱 Step 4: Add Accessibility Features</h2>
<p>Include proper ARIA labels and semantic HTML:</p>
<pre><code><nav role="navigation" aria-label="Portfolio navigation">
<main role="main">
<img src="..." alt="Descriptive alt text">
<a href="..." aria-label="Descriptive link purpose"></code></pre>
</div>
<div class="step">
<h2>✅ Step 5: Test Integration</h2>
<ul>
<li>✅ Check all social links work correctly</li>
<li>✅ Verify meta tags are properly formatted</li>
<li>✅ Test responsive design on mobile</li>
<li>✅ Validate HTML and accessibility</li>
<li>✅ Test social media previews</li>
</ul>
</div>
<div class="step">
<h2>🎯 Portfolio-Specific Customizations</h2>
<p>For each portfolio (1-7), customize these elements:</p>
<ul>
<li><strong>Title:</strong> Portfolio #1, Portfolio #2, etc.</li>
<li><strong>Description:</strong> Unique description for each design</li>
<li><strong>Keywords:</strong> Add specific technologies used</li>
<li><strong>Images:</strong> Create preview images for each portfolio</li>
<li><strong>Canonical URL:</strong> Update folder number in URL</li>
</ul>
</div>
<h2>🚀 All Social Links Included:</h2>
<ul>
<li>🌐 <strong>Portfolio:</strong> https://hardik.thinkpixel.org/</li>
<li>💼 <strong>LinkedIn:</strong> https://www.linkedin.com/in/hardik-saxena-77b354271</li>
<li>🐙 <strong>GitHub:</strong> https://github.com/Vamp415</li>
<li>💬 <strong>Discord:</strong> https://discord.gg/NKj5jRrTjP</li>
<li>🕊️ <strong>X (Twitter):</strong> https://x.com/hardiks57184721?s=21</li>
<li>📷 <strong>Instagram:</strong> https://www.instagram.com/og.vamp</li>
<li>☕ <strong>Buy Me a Coffee:</strong> https://buymeacoffee.com/vamp415</li>
<li>🔗 <strong>Topmate:</strong> https://topmate.io/hardik_saxena_001</li>
</ul>
<p style="text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2);">
<strong>Made by Hardik Saxena @ Think Pixel</strong><br>
<em>Where Creativity Meets Security</em> 🚀
</p>
</div>
</body>
</html>