#001 Web Design

By Ryan Shoyab

Neobrutalist UI/UX Code Generator Prompt

Act as a Senior Frontend Engineer. Build a high-converting single-page landing page featuring a bold Neobrutalist design language. DESIGN SPECS...

View Full Prompt

#002 Automation

By Ryan Shoyab

Self-Healing Multi-System Webhook Handler

Act as a Lead Backend Developer. Build a Node.js Express webhook listener endpoint that acts as a fail-safe router syncing incoming lead payloads...

View Full Prompt

#003 AI Systems

By Ryan Shoyab

Multimodal Semantic Extraction System

Act as a Senior AI Architect. Build a Python workflow using Gemini 1.5 Pro to extract semantic key-value details from unstructured documents. IN...

View Full Prompt

#004 Web Design

By Ryan Shoyab

Neobrutalist Clone Generator Prompt (With Placeholders)

LETS MAKE A SAME EXACT DESIGN WEBSITE SAME FONT SAME COLOR BUT FOR ME. You are building a personal portfolio website for {YOUR_NAME} – a {YOUR_AG...

DOWNLOAD REFERENCE IMAGE

LETS MAKE A SAME EXACT DESIGN WEBSITE SAME FONT SAME COLOR BUT FOR ME. You are building a personal portfolio website for {YOUR_NAME} – a {YOUR_AGE}-year-old {YOUR_ROLE} from {YOUR_CITY}.

STRICT REFERENCE: Follow the uploaded screenshot reference image EXACTLY for layout structure, spacing hierarchy, Neobrutalist design grids, and typography styling.

### 🎨 DESIGN SYSTEM & STYLING SPECIFICATIONS
1. COLOR PALETTE:
   - Background (Dark Mode sections): #0A0A0A (solid near-black)
   - Background (Light Mode sections): #F5F4F0 (clean, warm cream)
   - Accent Yellow: #FFE500 (solid bright warning yellow)
   - Accent Pink: #FFC2E2 (bubblegum pastel pink)
   - Accent Purple: #8B5CF6 (neon purple)
   - Text Colors: #0A0A0A (dark typography elements) and #FFFFFF / #CCCCCC (light typography elements)
   - Borders: Thick solid black '3px solid #0A0A0A' on all cards, header navbars, inputs, and button elements.
2. NEOBRUTALIST CARDS & COMPONENT DESIGN:
   - Background: #FFFFFF inside light sections, rgba(255,255,255,0.05) with backdrop-filter: blur(10px) (glassmorphism) inside dark sections.
   - Shadow Schema: Flat hard drop-shadow offset 'box-shadow: 8px 8px 0px #0A0A0A'.
   - Hover Action: Transform cards by translating (-6px, -6px) and increasing drop-shadow offset to '14px 14px 0px #0A0A0A' via transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease.
3. TYPOGRAPHY & FONT ASSIGNMENTS:
   - Primary Display Titles: Google Fonts 'Anton' or 'Bebas Neue' (uppercase, massive weight displays)
   - Accent Subheads & Badges: 'Unbounded' or 'Fredoka' (bold geometric/blocky styles)
   - Body Paragraphs & Form Fields: 'Space Grotesk' (modern monospace-feeling sans-serif)

### ✨ INTERACTIVE ANIMATIONS & JS SCRIPTS
1. SITE-WIDE NOISE OVERLAY:
   - Render a fixed .noise-overlay div with a repeating inline SVG noise pattern to produce a premium grainy grit/texture across all sections.
2. CUSTOM TIGER CURSOR SYSTEM:
   - Render a custom SVG tiger head inside `#custom-tiger-cursor` div.
   - Render a paw print '🐾' inside `#custom-tiger-follower` div.
   - Implement vanilla JS lag/easing: tiger head coordinates map to mouse movement instantly, while paw print lags behind using linear interpolation calculations (x += (targetX - x) * 0.15).
3. PAGE LOADER:
   - An overlay screen fading out after 2 seconds, displaying a letter-building scramble animation of the display name text.
4. TEXT SCRAMBLE / GLITCH ANIMATION:
   - A custom JS function cycling randomly through characters ('@#$&%?!*') and resolving letters one-by-one to create a reveal effect on hover or loading for headings.
5. MAGNETIC HOVER BUTTONS:
   - Add magnetic hover calculation script to '.magnetic-btn' elements. If mouse cursor distance to button centroid < 60px, shift button offset slightly towards mouse position.
6. PARALLAX CARD TILT:
   - Apply mouse-parallax 3D rotation transforms to project cards on hover using JavaScript ('transform: perspective(1000px) rotateX(...) rotateY(...)').
7. STAT COUNTERS INCREMENTER:
   - Automatically increment numeric metrics (Projects, Clients) using a JS counter script triggered via Intersection Observer when scrolled into view.
8. INFINITE SCROLLING TICKERS:
   - Infinite horizontal marquee tickers running with CSS keyframe animation. Text should read: '{YOUR_ROLE_TAGS} • {YOUR_CITY} • AVAILABLE FOR WORK •' separated by rotating neobrutalist stars.

### 🧩 LAYOUT & SECTIONS (In Exact Order)
1. NAVBAR: Logo text '{YOUR_NAME}' left, navigation links right: About, Services, Portfolio, Contact.
2. HERO SECTION:
   - Left Panel: Warning pill tag 'Currently Available for Work', giant Display Name '{YOUR_NAME}', sub-roles marquee list, CTA buttons ('Let's Work Together', 'View My Work').
   - Right Panel: Hero image matching layout profile inside a thick Neobrutalist frame with offset shadow.
3. MARQUEE STRIP: Infinite scrolling text strip using Neobrutalist layout separators.
4. INTRODUCTION: Large bold header + short intro text + stats counter grid (e.g. Projects Built, Happy Clients, Coffee Drunk).
5. ABOUT ME: Section detailing story and backgrounds in split-pane grid.
6. SERVICES & PRICING: Neobrutalist cards listing detailed packages:
   - Service 1: {SERVICE_1_TITLE} – Starting from {SERVICE_1_PRICE}
   - Service 2: {SERVICE_2_TITLE} – Starting from {SERVICE_2_PRICE}
   - Service 3: {SERVICE_3_TITLE} – Starting from {SERVICE_3_PRICE}
   - Service 4: {SERVICE_4_TITLE} – Starting from {SERVICE_4_PRICE}
7. PORTFOLIO / PROJECTS: Neobrutalist cards with image previews, tags, titles, descriptions, and custom mouse-hover tilt scripts.
8. WORK PROCESS: A numbered horizontal process timeline showing steps: 01 Discovery, 02 Design, 03 Build, 04 Deploy.
9. TESTIMONIALS: User reviews carousel styled in yellow/pink Neobrutalist aesthetic.
10. CONTACT: Form 'LET'S BUILD TOGETHER' with email input, message textarea, and Neobrutalist submit button, alongside a WhatsApp floating chat widget.

TECH RULES: Pure HTML, CSS (inlined in <style>), and JavaScript (inlined at bottom in <script>). Single, fully self-contained HTML page output. Strict mobile-responsiveness. Keep layouts clean, semantic, and commented.

INSTRUCTIONS FOR USER:
1. Replace all curly bracket parameters {YOUR_NAME, YOUR_ROLE, etc.} in this prompt with your information.
2. Download the high-res screenshot attached to this post.
3. Attach the screenshot and paste the prompt into your AI coding tool to build your custom portfolio clone!

View Full Prompt

#005 AI Systems

By Ryan Shoyab

Autonomous RAG Knowledge Graph Pipeline Builder

Act as a Graph Database & Semantic AI Specialist. Write a Python script using LangChain and Neo4j to ingest raw markdown directories and construc...

View Full Prompt

#006 Web Design

By Ryan Shoyab

Vibrant Neobrutalist Digital Agency Template

Build a premium, high-impact landing page design tailored for a modern Creative Agency. Use a loud, vibrant Neobrutalist design system. STYLING...

View Full Prompt

#007 Automation

By Ryan Shoyab

Serverless Telemetry Sync Postgres to Redis Router

Write a Node.js AWS Lambda serverless function triggered by a PostgreSQL database logical replication stream (via Supabase Webhooks or pg_recvlog...

View Full Prompt

#008 AI Systems

By Ryan Shoyab

Agentic Coding Assistant Instruction Prompt System

Act as a Prompt Engineer. Build a master System Instruction prompt for an autonomous AI coding assistant. GUIDING CONSTRAINTS: - Establish a sen...

View Full Prompt

#009 Web Design

By Ryan Shoyab

SaaS Glassmorphism Dashboard Interface CSS Schema

Build a responsive, modern admin dashboard styled with high-end glassmorphism and semi-transparent panels. CSS REQUIREMENTS: - Background: Dynam...

View Full Prompt

#010 Automation

By Ryan Shoyab

N8N Lead Processing & Routing Workflow Configuration

Act as an Automation Architect. Design a detailed JSON workflow template schema for n8n that automates lead processing. NODE CONNECTIONS: 1. Web...

View Full Prompt

#011 AI Systems

By Ryan Shoyab

Semantic Embeddings Search Engine Vector Sync

Act as a Machine Learning Developer. Write a Python script utilizing Pinecone vector database and OpenAI embeddings to construct a semantic searc...

View Full Prompt

#012 Web Design

By Ryan Shoyab

High-Converting Minimalist Realtor Portfolio UI

Build a responsive, high-converting portfolio website for a Luxury Real Estate Broker. THEME SPECS: - Palette: Soft Off-White (#FBFBFC), Muted C...

View Full Prompt

#013 Automation

By Ryan Shoyab

Database Failover Notification & Status Telemetry

Build a Python daemon script monitoring database pool connections. If network connectivity drops or query latency exceeds 1200ms, trigger alert u...

View Full Prompt

#014 AI Systems

By Ryan Shoyab

Fine-Tuning Dataset Synthesizer & Validator

Write a Python automation system that reads documentation files and synthesizes dataset pairs (instruction, input, response) tailored for fine-tu...

View Full Prompt

#015 Web Design

By Ryan Shoyab

Retro Cyberpunk Portfolio Layout CSS Schema

Design a single-file retro-futuristic Cyberpunk web layout. Use a solid black background, neon green (#39FF14) and neon pink (#FF007F) borders, m...

View Full Prompt

#016 Automation

By Ryan Shoyab

Stripe Billing Ingestion & Webhook Sync Engine

Build a Node.js server endpoint handling Stripe checkout.session.completed webhooks. Verify Stripe signatures, parse user details, sync pricing m...

View Full Prompt

#017 AI Systems

By Ryan Shoyab

Function-Calling LLM Tool Router Code Generator

Act as a Software Architect. Write a Python application that uses LLM function-calling capabilities to route natural language requests to corresp...

View Full Prompt

#018 Web Design

By Ryan Shoyab

Sleek Monospaced Developer Portfolio Prompt

Build a minimal monospaced portfolio theme for software engineers. Color base: #0D1117 (dark charcoal) and #58A6FF (light blue accent). Use monos...

View Full Prompt

#019 Automation

By Ryan Shoyab

GitHub Actions Automated CI/CD Deploy Monitor

Write a GitHub Action YAML workflow file configured to run on pushes to the production branch. Build dependencies, run test suites, deploy produc...

View Full Prompt

#020 AI Systems

By Ryan Shoyab

Semantic Guardrails & PII Masking Router Agent

Act as an AI Security Specialist. Build a Python routing middleware that parses user inputs to LLM applications. Use regular expressions and sema...

View Full Prompt

RESOURCE HUB

Neobrutalist UI/UX Code Generator Prompt

Self-Healing Multi-System Webhook Handler

Multimodal Semantic Extraction System

Neobrutalist Clone Generator Prompt (With Placeholders)

Autonomous RAG Knowledge Graph Pipeline Builder

Vibrant Neobrutalist Digital Agency Template

Serverless Telemetry Sync Postgres to Redis Router

Agentic Coding Assistant Instruction Prompt System

SaaS Glassmorphism Dashboard Interface CSS Schema

N8N Lead Processing & Routing Workflow Configuration

Semantic Embeddings Search Engine Vector Sync

High-Converting Minimalist Realtor Portfolio UI

Database Failover Notification & Status Telemetry

Fine-Tuning Dataset Synthesizer & Validator

Retro Cyberpunk Portfolio Layout CSS Schema

Stripe Billing Ingestion & Webhook Sync Engine

Function-Calling LLM Tool Router Code Generator

Sleek Monospaced Developer Portfolio Prompt

GitHub Actions Automated CI/CD Deploy Monitor

Semantic Guardrails & PII Masking Router Agent

LET'S BUILD
TOGETHER

EMAIL ME

LOCATION

Sending Message...

Message Sent!

RESOURCE HUB

Neobrutalist UI/UX Code Generator Prompt

Self-Healing Multi-System Webhook Handler

Multimodal Semantic Extraction System

Neobrutalist Clone Generator Prompt (With Placeholders)

Autonomous RAG Knowledge Graph Pipeline Builder

Vibrant Neobrutalist Digital Agency Template

Serverless Telemetry Sync Postgres to Redis Router

Agentic Coding Assistant Instruction Prompt System

SaaS Glassmorphism Dashboard Interface CSS Schema

N8N Lead Processing & Routing Workflow Configuration

Semantic Embeddings Search Engine Vector Sync

High-Converting Minimalist Realtor Portfolio UI

Database Failover Notification & Status Telemetry

Fine-Tuning Dataset Synthesizer & Validator

Retro Cyberpunk Portfolio Layout CSS Schema

Stripe Billing Ingestion & Webhook Sync Engine

Function-Calling LLM Tool Router Code Generator

Sleek Monospaced Developer Portfolio Prompt

GitHub Actions Automated CI/CD Deploy Monitor

Semantic Guardrails & PII Masking Router Agent

LET'S BUILDTOGETHER

EMAIL ME

LOCATION

Sending Message...

Message Sent!

LET'S BUILD
TOGETHER