Personalized Digital Avatar Generator
Build a web app called "Alter" — a personalized digital avatar creation tool.
Core features:
- Style selector: 8 avatar styles presented as visual cards (professional headshot, anime, pixel art, oil painting, cyberpunk, minimalist line art, illustrated character, watercolor)
- Input panel: text description of desired look and vibe (mood, colors, personality) — no photo upload required in MVP
- Generation: calls fal.ai FLUX API with a structured prompt built from the style selection and description — generates 4 variants per request
- Customization: background color picker overlay, optional username/tagline text added via Canvas API
- Download: PNG at 400px, 800px, and 1500px square
- History: last 12 generated packs saved in localStorage — click any to view and re-download
UI: bright, expressive, fun. Large visual cards for style selection. Results shown in a 2x2 grid. Mobile-responsive.
Stack: React, fal.ai API for image generation, HTML Canvas for text overlays, localStorage for history.
seo-fundamentals
---
name: seo-fundamentals
description: SEO fundamentals, E-E-A-T, Core Web Vitals, and 2025 Google algorithm updates
version: 1.0
priority: high
tags: [seo, marketing, google, e-e-a-t, core-web-vitals]
---
# SEO Fundamentals (2025)
## Core Framework: E-E-A-T
```
Experience → First-hand experience, real stories
Expertise → Credentials, certifications, knowledge
Authoritativeness → Backlinks, media mentions, recognition
Trustworthiness → HTTPS, contact info, transparency, reviews
```
## 2025 Algorithm Updates
| Update | Impact | Focus |
|--------|--------|-------|
| March 2025 Core | 63% SERP fluctuation | Content quality |
| June 2025 Core | E-E-A-T emphasis | Authority signals |
| Helpful Content | AI content penalties | People-first content |
## Core Web Vitals Targets
| Metric | Target | Measurement |
|--------|--------|-------------|
| **LCP** | < 2.5s | Largest Contentful Paint |
| **INP** | < 200ms | Interaction to Next Paint |
| **CLS** | < 0.1 | Cumulative Layout Shift |
## Technical SEO Checklist
```
Site Structure:
☐ XML sitemap submitted
☐ robots.txt configured
☐ Canonical tags correct
☐ Hreflang tags (multilingual)
☐ 301 redirects proper
☐ No 404 errors
Performance:
☐ Images optimized (WebP)
☐ Lazy loading
☐ Minification (CSS/JS/HTML)
☐ GZIP/Brotli compression
☐ Browser caching
☐ CDN active
Mobile:
☐ Responsive design
☐ Mobile-friendly test passed
☐ Touch targets 48x48px min
☐ Font size 16px min
☐ Viewport meta correct
Structured Data:
☐ Article schema
☐ Organization schema
☐ Person/Author schema
☐ FAQPage schema
☐ Breadcrumb schema
☐ Review/Rating schema
```
## AI Content Guidelines
```
❌ Don't:
- Publish purely AI-generated content
- Skip fact-checking
- Create duplicate content
- Keyword stuffing
✅ Do:
- AI draft + human edit
- Add original insights
- Expert review
- E-E-A-T principles
- Plagiarism check
```
## Content Format for SEO Success
```
Title: Question-based or keyword-rich
├── Meta description (150-160 chars)
├── H1: Main keyword
├── H2: Related topics
│ ├── H3: Subtopics
│ └── Bullet points/lists
├── FAQ section (with FAQPage schema)
├── Internal links to related content
└── External links to authoritative sources
Elements:
☐ Author bio with credentials
☐ "Last updated" date
☐ Original statistics/data
☐ Citations and references
☐ Summary/TL;DR box
☐ Visual content (images, charts)
☐ Social share buttons
```
## Quick Reference
```javascript
// Essential meta tags
<meta name="description" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://example.com/page">
// Open Graph for social
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
// Schema markup example
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "...",
"author": { "@type": "Person", "name": "..." },
"datePublished": "2025-12-30",
"dateModified": "2025-12-30"
}
</script>
```
## SEO Tools (2025)
| Tool | Purpose |
|------|---------|
| Google Search Console | Performance, indexing |
| PageSpeed Insights | Core Web Vitals |
| Lighthouse | Technical audit |
| Semrush/Ahrefs | Keywords, backlinks |
| Surfer SEO | Content optimization |
---
**Last Updated:** 2025-12-30
Neon Silence
{
"task": "style_transfer_portrait_poster",
"input": {
"reference_image": "${reference_image_url_or_path}",
"use_reference_as": "content_and_pose",
"preserve": [
"yüz ifadesi ve bakış yönü",
"saç/siluet ve kıyafet formu",
"kadraj (üst gövde portre)",
"ışık yönü ve gölge dağılımı"
]
},
"prompt": {
"language": "tr",
"style_goal": "Referans görseldeki kişiyi/konuyu, aynı kompozisyonu koruyarak yüksek kontrastlı neon-ink poster illüstrasyonu stiline dönüştür.",
"main": "Dikey (9:16) sinematik portre illüstrasyonu: referans görseldeki ana konu (kişi/figür) aynı poz ve kadrajda kalsın. Stil: koyu lacivert/siyah mürekkep dokuları ve kalın konturlar; yüz ve kıyafet üzerinde oyma/gravür benzeri ince çizgisel gölgelendirme (etched shading), cel-shading ile birleşen poster estetiği. Arka plan: düz, çok doygun sıcak neon pembe/kırmızı zemin; etrafında sıvı mürekkep/duman girdapları, akışkan alevimsi kıvrımlar ve parçacık sıçramaları. Vurgu rengi olarak neon pembe/kırmızı lekeler: yüzde çizik/iz gibi küçük vurgular, giyside ve duman dokusunda serpiştirilmiş parlak damlacıklar. Yüksek kontrast, sert kenarlar, dramatik karanlık tonlar, minimal ama güçlü renk paleti (koyu soğuk tonlar + neon sıcak arka plan). Hafif baskı grain’i ve poster dokusu; ultra net, yüksek çözünürlüklü kapak/poster görünümü.",
"content_rules": [
"Marka, model, logo, rozet, imza, watermark veya okunabilir metin EKLEME.",
"Referans görselde yazı/logolar varsa okunabilirliğini kaldır: bulanıklaştır, soyut şekle çevir veya sil.",
"Yeni kişi/obje ekleme; sadece referanstaki içeriği stilize et.",
"Yüz anatomi oranlarını bozma; doğal ama stilize kalsın."
]
},
"negative_prompt": [
"photorealistic",
"lowres",
"blurry",
"muddy shading",
"extra people",
"extra limbs",
"deformed face",
"uncanny",
"new text",
"brand names",
"logos",
"watermark",
"signature",
"busy background details",
"washed out neon",
"color banding",
"jpeg artifacts"
],
"generation": {
"mode": "image_to_image",
"strength": 0.6,
"style_transfer_weight": 0.85,
"composition_lock": 0.8,
"detail_level": "high",
"resolution": {
"width": 1080,
"height": 1920
},
"guidance": {
"cfg_scale": 7.0
},
"sampler": "auto",
"seed": "auto"
},
"postprocess": {
"sharpen": "medium_low",
"grain": "subtle",
"contrast": "high",
"saturation": "high"
}
}
Minimalist Graphic Illustration of a Stylized Dachshund
{
"colors": {
"color_temperature": "neutral",
"contrast_level": "medium",
"dominant_palette": [
"muted blue",
"light gray"
]
},
"composition": {
"camera_angle": "straight-on",
"depth_of_field": "shallow",
"focus": "The stylized dachshund dog",
"framing": "The subject is centrally composed, with its elongated body forming a complex, interwoven pattern that fills the frame."
},
"description_short": "A minimalist graphic illustration of an extremely long, blue dachshund whose body is twisted and woven into an intricate, abstract knot against a light gray background.",
"environment": {
"location_type": "studio",
"setting_details": "A plain, solid light gray background.",
"time_of_day": "unknown",
"weather": "none"
},
"lighting": {
"intensity": "moderate",
"source_direction": "ambient",
"type": "soft"
},
"mood": {
"atmosphere": "Playful and clever graphic design",
"emotional_tone": "calm"
},
"narrative_elements": {
"environmental_storytelling": "The image is a visual pun on the dachshund's long body, exaggerating it to an absurd degree to create a decorative, knot-like pattern, blending animal form with abstract design.",
"implied_action": "The dog is presented as a static, decorative element, not in motion."
},
"objects": [
"Dachshund dog"
],
"people": {
"count": "0"
},
"prompt": "A minimalist graphic illustration of a stylized blue dachshund. The dog's body is impossibly long, intricately woven over and under itself to form a complex, Celtic knot-like pattern. The design is clean and modern, with subtle texturing on the blue form and soft shadows creating a slight 3D illusion. The entire figure is set against a solid, light warm-gray background. The overall aesthetic is playful, clever, and artistic.",
"style": {
"art_style": "graphic illustration",
"influences": [
"minimalism",
"flat design",
"celtic knotwork",
"vector art"
],
"medium": "digital art"
},
"technical_tags": [
"minimalist",
"graphic design",
"illustration",
"vector art",
"dachshund",
"dog",
"flat design",
"knot",
"abstract",
"stylized"
],
"use_case": "Graphic design inspiration, poster art, stock illustration, or training data for stylized animal illustrations."
}