Project Snapshot
Role: Strategy, Design, Development & Content
Client: Personal Brand – Magnus Attefall
Audience: Recruiters, hiring managers, and marketing professionals
Scope: Portfolio website, SEO, content strategy, and AI-powered features
The Challenge
The goal was to create a portfolio WordPress theme and website that not only showcases experience but also actively supports job search, positioning, and inbound opportunities.
The challenge was to combine content, SEO, and structure into a cohesive platform that clearly communicates value while remaining scalable and easy to evolve.
My Approach
I designed and built the website as a structured content platform, not just a static portfolio.
The focus was on combining clear messaging, SEO optimisation, and content structure to support discoverability and engagement. The site is built on WordPress and continuously developed with new features, including AI-powered functionality and structured content workflows.
What I Delivered
- WordPress-based portfolio and content theme
- SEO-optimised structure and content strategy
- AI-powered chat and search functionality
- Structured portfolio and blog architecture
- Continuous development and optimisation
Business Impact
- Clear and professional positioning for a job search
- Increased visibility through SEO and structured content
- Scalable platform for ongoing content and portfolio updates
- Demonstrates hands-on capability across strategy, tech, and content
Custom WordPress theme development for a MarTech portfolio
The goal was to build a personal portfolio that combines a strong visual identity with a scalable platform to showcase my MarTech projects, content, and digital strategy work.
The site needed to function both as a professional portfolio and an international showcase, highlighting experience in marketing technology, analytics, content strategy and digital platforms.
The project started with WordPress and the Twenty Twenty-Five (TT5) block theme as a foundation.
What was built
Theme & architecture
I created a custom theme called attefall-2026, based on the Twenty Twenty-Five block theme, and exported it using the Create Block Theme plugin.
Key elements include:
- Global typography and colour management via theme.json
- Layout settings: 1200px wide / 900px content width
- Custom CSS is centralised in
attefall.css - Cache busting implemented via filemtime() in functions.php
The header was converted from header.html to header.php and loaded via the wp_body_open hook.
Features include:
- Circular expanding overlay menu
- Neon yellow brand colour (#F5E230)
- JetBrains Mono wordmark
- Plus / close toggle animation
- Sticky header behaviour
- Expanding search field
- Polylang language switcher
Typography & design
The visual concept follows a “Bold & Brave” design philosophy with strong contrasts and distinctive typography.
Typography stack (self-hosted WOFF2):
- Neue Haas Grotesk Display Pro for headings
- DM Sans variable font for body text
- JetBrains Mono for technical elements and branding
Accent colours and typography create a recognisable visual identity across the site.
Portfolio system
A flexible portfolio structure was implemented using:
- Custom Post Type: portfolio
- Custom taxonomy: portfolio_categories
[ portfolio_grid ]shortcode with CSS masonry layout- JavaScript-based category filtering
This allows projects to be presented dynamically across portfolio sections.
UX details
Several micro-interactions and usability improvements were implemented:
- Back-to-top button with SVG scroll progress indicator
- Footer detection for automatic contrast adjustments
- Custom list markers
.check-list(green ✓).cross-list(red ✕)
- Contact Form 7 forms styled with monospace labels and a neon yellow submit button
Multilingual & SEO
The website supports Swedish and English using Polylang.
SEO functionality includes:
- Yoast SEO configuration
- Primary category support
- Breadcrumb navigation
- Optimised structure for portfolio pages and articles
AI-powered search for attefall.se – custom WordPress RAG chatbot
To make the portfolio easier to explore, I learned and developed a custom AI-powered chatbot as a WordPress plugin. The chatbot allows you, as a visitor, to ask questions about projects, articles and MarTech topics and receive context-aware answers grounded in the site’s own content.
The solution is based on Retrieval-Augmented Generation (RAG), combining semantic search with generative AI.
Key capabilities
Semantic content search
- All site content is indexed using OpenAI embeddings
- Stored in a Supabase pgvector vector database
- Semantic similarity search retrieves relevant content chunks
AI-generated answers grounded in site content
- Responses generated using Google Gemini
- Strict anti-hallucination rules prevent fabricated URLs or facts
- Answers are always grounded in indexed site content
Bilingual AI assistant
- Automatic language detection (Swedish / English)
- Prioritises matching-language content chunks
- Responds in the user’s language
- Integrated with Polylang
Transparent sources
- Collapsible source section
- Shows which pages informed the answer
- Improves trust and explainability
Optimised for WordPress
- Implemented as a self-contained WordPress plugin
- Admin settings page
- One-click reindexing
- Configurable similarity threshold
- A batch indexing system designed for shared hosting
Tools & Technology
- Tools: Local by Flywheel · Cursor (agent mode) · Supabase (PostgreSQL + pgvector) · OpenAI embeddings · Google Gemini · WordPress REST API · CotEditor · Cyberduck · Create Block Theme
- Technology stack: WordPress · PHP · Vanilla JavaScript · CSS Custom Properties · theme.json · ACF · Polylang · Yoast SEO · Contact Form 7 · self-hosted WOFF2 fonts