Skip to content

Commit 554162c

Browse files
AR10DevAR10Dev
authored
feat: add portfolio and services pages with structured data and SEO enhancements
- Implemented dynamic portfolio item pages with breadcrumb navigation and related projects section. - Created a portfolio index page to showcase all projects with sorting and structured data. - Developed service detail pages with benefits, offerings, and technology sections. - Added a services index page to list all services with icons and descriptions. - Enhanced SEO with structured data for portfolio and services.
1 parent 590afc4 commit 554162c

19 files changed

Lines changed: 2136 additions & 225 deletions

‎public/llms.txt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Avaab Razzaq - AI Growth Engineer
2+
3+
> AI-powered workflows, full-stack products, and growth systems for businesses.
4+
5+
This website belongs to Avaab Razzaq, an AI Growth Engineer based in Miami, Florida, serving clients across the United States.
6+
7+
## Services Offered
8+
9+
### AI & Automation
10+
Custom AI solutions including ChatGPT-style interfaces, workflow automation, LLM integrations, and document processing systems. Technologies: OpenAI API, Anthropic Claude, LangChain, TypeScript, Python.
11+
12+
### Full-Stack Web Development
13+
High-performance web applications built with modern frameworks. Technologies: Astro, React, SolidJS, TypeScript, Node.js, PostgreSQL, TailwindCSS.
14+
15+
### SEO & Growth Marketing
16+
Technical SEO audits, programmatic SEO, conversion rate optimization, and analytics. Tools: Google Search Console, GA4, Ahrefs, Screaming Frog.
17+
18+
## Contact Information
19+
20+
- Location: Miami, Florida, USA
21+
- Email: itsavaab@gmail.com
22+
- Booking: https://cal.com/avaabrazzaq
23+
- LinkedIn: https://linkedin.com/in/ar10dev
24+
- GitHub: https://github.com/AR10Dev
25+
26+
## Service Areas
27+
28+
Primary: Miami, Florida
29+
Extended: All United States (remote work)
30+
31+
## Page Structure
32+
33+
- / - Homepage with overview
34+
- /services/ - All services overview
35+
- /services/ai-automation/ - AI & Automation service details
36+
- /services/web-development/ - Web Development service details
37+
- /services/seo-growth/ - SEO & Growth service details
38+
- /about/ - About Avaab Razzaq, credentials, expertise
39+
- /portfolio/ - Portfolio and case studies
40+
- /blog/ - Articles and insights
41+
- /contact/ - Contact form and information

‎src/components/Breadcrumb.astro‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
export interface BreadcrumbItem {
3+
label: string;
4+
href?: string;
5+
}
6+
7+
export interface Props {
8+
items: BreadcrumbItem[];
9+
class?: string;
10+
}
11+
12+
const { items, class: className = "" } = Astro.props as Props;
13+
14+
const siteUrl = "https://ar10dev.github.io";
15+
16+
// Generate schema.org BreadcrumbList
17+
const breadcrumbSchema = {
18+
"@context": "https://schema.org",
19+
"@type": "BreadcrumbList",
20+
itemListElement: items.map((item, index) => ({
21+
"@type": "ListItem",
22+
position: index + 1,
23+
name: item.label,
24+
...(item.href && { item: new URL(item.href, siteUrl).toString() }),
25+
})),
26+
};
27+
---
28+
29+
<nav aria-label="Breadcrumb" class={`text-sm ${className}`}>
30+
<ol class="flex flex-wrap items-center gap-1.5 text-[var(--text-muted)]" itemscope itemtype="https://schema.org/BreadcrumbList">
31+
{items.map((item, index) => (
32+
<li class="flex items-center gap-1.5" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
33+
{item.href ? (
34+
<a
35+
href={item.href}
36+
class="hover:text-[var(--accent-strong)] transition-colors"
37+
itemprop="item"
38+
>
39+
<span itemprop="name">{item.label}</span>
40+
</a>
41+
) : (
42+
<span class="text-[var(--text-strong)] font-medium" itemprop="name">{item.label}</span>
43+
)}
44+
<meta itemprop="position" content={String(index + 1)} />
45+
{index < items.length - 1 && (
46+
<span class="text-[var(--border-strong)]" aria-hidden="true">/</span>
47+
)}
48+
</li>
49+
))}
50+
</ol>
51+
</nav>
52+
53+
<script is:inline type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />

‎src/components/FooterNav.astro‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
import SocialLinks from "@components/SocialLinks.astro";
3+
4+
const currentYear = new Date().getFullYear();
5+
6+
const socialLinks = [
7+
{
8+
kind: "linkedin" as const,
9+
href: "https://www.linkedin.com/in/ar10dev",
10+
label: "LinkedIn",
11+
},
12+
{
13+
kind: "github" as const,
14+
href: "https://github.com/AR10Dev",
15+
label: "GitHub",
16+
},
17+
];
18+
19+
const footerLinks = {
20+
services: [
21+
{ label: "AI & Automation", href: "/services/ai-automation/" },
22+
{ label: "Web Development", href: "/services/web-development/" },
23+
{ label: "SEO & Growth", href: "/services/seo-growth/" },
24+
],
25+
company: [
26+
{ label: "About", href: "/about/" },
27+
{ label: "Portfolio", href: "/portfolio/" },
28+
{ label: "Blog", href: "/blog/" },
29+
{ label: "Contact", href: "/contact/" },
30+
],
31+
};
32+
33+
const contactInfo = {
34+
email: "itsavaab@gmail.com",
35+
location: "Miami, Florida",
36+
timezone: "ET (UTC-5/UTC-4)",
37+
};
38+
---
39+
40+
<footer class="border-t border-[var(--border-strong)] bg-[var(--surface-elevated)]">
41+
<div class="mx-auto max-w-screen-xl px-6 py-12">
42+
<div class="grid gap-10 md:grid-cols-2 lg:grid-cols-4">
43+
{/* Brand Column */}
44+
<div class="lg:col-span-1">
45+
<a href="/" class="text-xl font-bold text-[var(--text-strong)]">
46+
Avaab Razzaq
47+
</a>
48+
<p class="mt-3 text-sm text-[var(--text-muted)] leading-relaxed">
49+
AI Growth Engineer helping businesses build scalable web apps, automate workflows, and drive growth through technical SEO.
50+
</p>
51+
<SocialLinks links={socialLinks} variant="icon" className="mt-5 gap-3" />
52+
</div>
53+
54+
{/* Services Column */}
55+
<div>
56+
<h3 class="text-sm font-bold uppercase tracking-wider text-[var(--text-strong)]">
57+
Services
58+
</h3>
59+
<ul class="mt-4 space-y-3">
60+
{footerLinks.services.map((link) => (
61+
<li>
62+
<a
63+
href={link.href}
64+
class="text-sm text-[var(--text-muted)] hover:text-[var(--accent-strong)] transition-colors"
65+
>
66+
{link.label}
67+
</a>
68+
</li>
69+
))}
70+
</ul>
71+
</div>
72+
73+
{/* Company Column */}
74+
<div>
75+
<h3 class="text-sm font-bold uppercase tracking-wider text-[var(--text-strong)]">
76+
Company
77+
</h3>
78+
<ul class="mt-4 space-y-3">
79+
{footerLinks.company.map((link) => (
80+
<li>
81+
<a
82+
href={link.href}
83+
class="text-sm text-[var(--text-muted)] hover:text-[var(--accent-strong)] transition-colors"
84+
>
85+
{link.label}
86+
</a>
87+
</li>
88+
))}
89+
</ul>
90+
</div>
91+
92+
{/* Contact Column */}
93+
<div>
94+
<h3 class="text-sm font-bold uppercase tracking-wider text-[var(--text-strong)]">
95+
Contact
96+
</h3>
97+
<ul class="mt-4 space-y-3 text-sm text-[var(--text-muted)]">
98+
<li class="flex items-start gap-2">
99+
<svg class="mt-0.5 h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
100+
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
101+
<circle cx="12" cy="10" r="3"/>
102+
</svg>
103+
<span>{contactInfo.location}</span>
104+
</li>
105+
<li class="flex items-start gap-2">
106+
<svg class="mt-0.5 h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
107+
<circle cx="12" cy="12" r="10"/>
108+
<polyline points="12 6 12 12 16 14"/>
109+
</svg>
110+
<span>{contactInfo.timezone}</span>
111+
</li>
112+
<li class="flex items-start gap-2">
113+
<svg class="mt-0.5 h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
114+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
115+
<polyline points="22,6 12,13 2,6"/>
116+
</svg>
117+
<a href={`mailto:${contactInfo.email}`} class="hover:text-[var(--accent-strong)] transition-colors">
118+
{contactInfo.email}
119+
</a>
120+
</li>
121+
</ul>
122+
<a
123+
href="/contact/"
124+
class="mt-5 inline-flex items-center gap-2 rounded-lg bg-[linear-gradient(120deg,#db7a38,#b05422)] px-4 py-2 text-sm font-bold text-white shadow-md hover:shadow-lg transition-shadow"
125+
>
126+
Get in Touch
127+
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
128+
<line x1="5" y1="12" x2="19" y2="12"/>
129+
<polyline points="12 5 19 12 12 19"/>
130+
</svg>
131+
</a>
132+
</div>
133+
</div>
134+
135+
{/* Bottom Bar */}
136+
<div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-[var(--border-strong)] pt-8 md:flex-row">
137+
<p class="text-sm text-[var(--text-muted)]">
138+
© {currentYear} <span class="font-semibold text-[var(--text-strong)]">Avaab Razzaq</span>. All rights reserved.
139+
</p>
140+
<p class="text-sm text-[var(--text-muted)]">
141+
Serving clients in Miami, Florida and across the United States.
142+
</p>
143+
</div>
144+
</div>
145+
</footer>

‎src/components/HeaderNav.astro‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import logo from "@assets/logo.png";
4+
import { ICON_BUTTON_CLASSES } from "@lib/constants";
5+
import Navigation from "@solid-components/Navigation";
6+
import type { NavLink } from "@solid-components/Navigation";
7+
8+
export interface Props {
9+
background?: string;
10+
currentPath?: string;
11+
}
12+
13+
const { background = "", currentPath = Astro.url.pathname } = Astro.props as Props;
14+
15+
const navLinks: NavLink[] = [
16+
{ label: "Home", href: "/" },
17+
{ label: "Services", href: "/services/" },
18+
{ label: "Portfolio", href: "/portfolio/" },
19+
{ label: "About", href: "/about/" },
20+
{ label: "Blog", href: "/blog/" },
21+
{ label: "Contact", href: "/contact/" },
22+
];
23+
24+
const headerBackground = background || "bg-[var(--surface-elevated)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--surface-elevated)]/75 border-b border-[var(--border-strong)]";
25+
---
26+
27+
<header class={`fixed inset-x-0 top-0 z-50 w-full transition-all duration-300 ${headerBackground}`}>
28+
<div class="mx-auto flex max-w-screen-lg items-center gap-3 px-4 py-3 xl:max-w-screen-xl">
29+
<a href="/" class="flex-none" aria-label="Avaab Razzaq - Home">
30+
<Image
31+
src={logo}
32+
alt="Avaab Razzaq - AI Growth Engineer"
33+
width={56}
34+
height={56}
35+
loading="eager"
36+
decoding="async"
37+
format="webp"
38+
class="h-14 w-14"
39+
/>
40+
</a>
41+
42+
<div class="ml-auto flex items-center gap-3">
43+
<Navigation links={navLinks} currentPath={currentPath} client:load />
44+
45+
<button
46+
id="theme-toggle"
47+
type="button"
48+
class={`${ICON_BUTTON_CLASSES.base} ${ICON_BUTTON_CLASSES.elevated}`}
49+
aria-pressed="false"
50+
aria-label="Toggle color theme"
51+
title="Switch theme"
52+
>
53+
<span class="sr-only">Toggle color theme</span>
54+
<svg
55+
data-theme-icon="moon"
56+
viewBox="0 0 24 24"
57+
width="18"
58+
height="18"
59+
aria-hidden="true"
60+
fill="currentColor"
61+
>
62+
<path d="M21 14.41A8.98 8.98 0 0 1 9.59 3 9 9 0 1 0 21 14.41Z" />
63+
</svg>
64+
<svg
65+
data-theme-icon="sun"
66+
class="hidden"
67+
viewBox="0 0 24 24"
68+
width="18"
69+
height="18"
70+
aria-hidden="true"
71+
fill="currentColor"
72+
>
73+
<path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm0-16a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 19a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm10-9a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1ZM5 12a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm13.07 7.07a1 1 0 0 1-1.41 0l-.71-.7a1 1 0 1 1 1.41-1.42l.71.71a1 1 0 0 1 0 1.41ZM8.05 8.05a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 1 1 1.41-1.41l.71.7a1 1 0 0 1 0 1.42Zm10.02-2.12a1 1 0 0 1 0 1.41l-.71.71a1 1 0 1 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 0ZM8.05 15.95a1 1 0 0 1 0 1.41l-.71.7a1 1 0 1 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 0Z" />
74+
</svg>
75+
</button>
76+
</div>
77+
</div>
78+
</header>

0 commit comments

Comments
 (0)