Every portfolio starts with a story. In this case study we walk through each phase of the ReeniClone project – from the initial mood board to the final live site. The goal is to give fellow designers and developers a roadmap for building a high‑impact, dark‑theme WordPress portfolio.
Phase 1 – Research & Goal Setting
Key objectives identified:
- Showcase design and development work in a visually striking way.
- Maintain brand consistency with the original Reeni site (dark background, pink accent).
- Ensure fast load times and mobile‑first responsiveness.
Competitor analysis highlighted the need for a filterable portfolio and a testimonial carousel – features that set premium portfolios apart.
Phase 2 – Wireframing & UI Kit Creation
Using Figma, we drafted low‑fidelity wireframes for the following sections:
- Fixed header with navigation.
- Two‑column hero featuring a brief intro and CTA.
- Full‑width “About Me” and “Experience” sections.
- Skills grid with progress bars.
- Filterable portfolio grid.
- Testimonial carousel.
- Contact form and footer.
The UI kit defined:
- Colors: #060606 (background), #141414 (card), #FF014F (accent).
- Typography: Rajdhani (headings), Rubik (body).
- Elements: 8‑12 px rounded corners, 4‑px pink borders on hover, subtle drop‑shadows.
Phase 3 – Building in Elementor
Key Elementor techniques used:
- Global Colors & Fonts: Set once so every widget inherits the brand palette.
- Template System: Created a Single Post template for project pages and an Archive template for the portfolio.
- Custom CSS: Applied to achieve the pink pill‑shaped buttons and gradient overlays.
- Motion Effects: Added entrance animations to hero text and scroll‑based fade‑ins for sections.
Phase 4 – Content Integration
Content was imported via custom post types (Projects, Testimonials). Each project includes:
- Featured image (optimized WebP).
- Project metadata (client, date, tools).
- Rich text description with bullet points.
Testimonials use Elementor’s Slides widget, configured for autoplay with a 5‑second delay.
Phase 5 – Performance Tuning
After the visual build, we ran performance audits:
- Enabled Elementor’s Experiments → Optimized DOM Output.
- Implemented WP Rocket caching and image lazy‑load.
- Served fonts from Google Fonts with
font-display: swap. - Minified CSS/JS via Autoptimize.
Result: Google PageSpeed Score 96 on mobile, 99 on desktop.
Phase 6 – Launch & Promotion
The site was deployed to a managed WordPress host (Kinsta) with SSL and CDN enabled. After launch, we:
- Submitted the sitemap to Google Search Console.
- Shared the portfolio on LinkedIn, Dribbble, and Behance with a teaser blog post (this very series).
- Set up an automated email newsletter via MailPoet to announce the new site.
Key Takeaways
- Start with a solid UI kit – it saves countless hours during the build.
- Leverage Elementor’s global settings to maintain consistency across dark‑theme sites.
- Performance shouldn’t be an afterthought; incorporate optimization early.
- Use WordPress custom post types for reusable content like projects and testimonials.
Conclusion
The ReeniClone case study demonstrates that a striking, high‑performance portfolio can be built entirely with Elementor and WordPress, without writing a single line of code. Follow the steps outlined here to replicate the process for your own personal brand.