Vasilis
Portfolio
Hej, I'm Vasilis!
Frontend development with over a decade of experience across design, development and delivery. I build user-focused applications and digital products. My design background lets me lead the visual layer when needed.
What I do
Development
I develop production-ready frontends using React and Next.js, with an emphasis on component architecture and performance. I also maintain strong WordPress expertise for relevant use cases.
React Next.js TypeScript Tailwind CSS Git Wordpress PHP Javascript
UI/UX
I approach UI/UX with a practical mindset, focusing on user flows, friction reduction, and intuitive interaction design. I’ve delivered projects from early wireframes to fully shipped interfaces.
User Flows Wireframing Prototyping Usability Interaction Design
Design
I use Figma to design structured, user-focused interfaces. My design background allows me to lead the visual layer when needed and communicate intent clearly across teams.
Figma Design Systems Responsive Design Adobe Photoshop Adobe Illustrator
Delivery
I've worked across agencies, startups, and direct client relationships. I'm used to adapting to different team structures, managing scope, and delivering independently without hand-holding.
Performance SEO Accessibility End-to-end Client Work Cross-functional
Work examples
Petroulakis Construction & Renovation
Gleem SaaS
Lykos AI
Skigaarden
Chania Cultural Center
Wayfare App
E-City Scooter
Bali Villas
Yolo Mythos
Nissan Qashqai Stories
Lykos AI
Client:
Lykos AI - HR Management Platform
Year:
2024
Skills:
Web Design Web Development Wordpress Visual Direction UI/UX Dashboard UI Redesign Figma
Project Overview:
Lykos AI was a next-generation HR and team-management platform. The client initially approached me with an urgent request: a refreshed WordPress website that could clearly communicate the platform’s capabilities to potential investors. The old site was outdated, lacked structure, and failed to reflect the scale and purpose of the product.
Over time, this collaboration grew into a broader partnership covering website redesigns, branding foundations, and product UI/UX. My role expanded from delivering a fast investor-ready site to redefining the visual identity of Lykos and shaping the look and feel of its core dashboard.
The Old Website
The original website was outdated, text-heavy, and difficult to navigate. Key product details were unclear, the hierarchy was inconsistent, and the layout offered little guidance for new users or investors. Overall, the site did not communicate the value or depth of Lykos AI platform.
The First Redesign
The primary goal was to quickly create a professional and clear website for upcoming investor meetings. I restructured the content, clarified the core messaging, and built a custom WordPress theme. The redesign focused on visibility, trust, and a clear explanation of the platform’s capabilities.
View Figma Design Outcome & Impact
The result was a fully refreshed website that communicated the platform’s capabilities with far greater clarity. Beyond the homepage, I applied the same refinements across key pages such as the company overview and product presentation, reorganizing the content based on the client’s specifications and goals.
This removed friction points, improved readability, and gave Lykos a stronger foundation for future communication and investor engagement.
Branding Foundations & Visual Direction
As Lykos evolved, it needed a stronger and more consistent identity. I developed a refined brand direction that brought clarity, personality, and structure to the platform. This included rebuilding the logo, enhancing the wolf mark, and turning it into a recognizable character for the brand. I introduced movement, expression, and tier-based variations (HUNT, STRIKE, DELIVER) to make the product more narrative-driven and approachable.
Alongside these elements, I refined the color palette, established typography rules, and designed supporting illustrations that emphasized the platform’s AI-driven nature. The result was a cohesive visual system that scaled seamlessly across the website, dashboard, and future materials.
The Second Website Redesign
With the new brand foundations in place, I redesigned the homepage to match Lykos’ updated identity and direction. Using the refined palette, typography, and logo system, I created a clearer visual hierarchy and introduced a more confident narrative.
This redesign strengthened the platform’s positioning and aligned the site with the company’s long-term vision.
View the Guidlines Design
The Old Dashboard
The original dashboard suffered from outdated visuals, inconsistent layouts, and limited usability. It lacked brand connection, clear hierarchy, and intuitive navigation. Many screens made essential tasks harder than necessary and didn’t showcase the platform’s capabilities effectively.
Designing a Better Experience
The dashboard redesign brought the new Lykos identity into the core product and transformed the overall user experience.
Round 1 - focus on concept and direction.
I designed the initial dashboard directly in UI, translating the client’s ideas, flows, and strategic direction into a clear product concept. This round explored structure, core screens, and interaction patterns that demonstrated how Lykos functioned as an AI-powered platform, establishing a solid foundation for further iteration.
Round 2 - focus on the HR experience and usability.
Building on the initial concept, I refined the UI and user flows with a strong emphasis on HR workflows. Key screens were redesigned to improve clarity, navigation, and simplicity, while complex processes such as ideal-profile generation and employee evaluations were streamlined to surface insights faster and reduce friction.
The UI was aligned with MUI components to support a scalable and developer-friendly foundation. By combining refined branding, custom tier graphics, and a more expressive wolf identity, the dashboard evolved into a modern, intuitive workspace that communicated Lykos AI’s value more clearly to both users and investors.
E-City Scooter
Client Type:
Electric Scrooter Retailer
Year:
2020
Status:
Skills:
Web Design Web Development Wordpress Responsive Design
Project Overview:
E-City Scooter, an electric scooter shop based in Crete, needed a dedicated online space to promote the arrival of their new line of electric Vespa-style scooters.
My objective was to create a modern, product-focused web presentation that would not only highlight the new scooters but also strengthen the store’s brand identity. The site needed to feel fresh, eco-conscious, and accessible to a broad audience.
A Greener Digital Presence
Using the client’s logo and color palette, I designed a clean and friendly interface that reflects the brand’s sustainable values. I kept the layout minimal and simple, giving the site a modern and eco-friendly feel. I developed a custom WordPress theme tailored to the shop’s needs, with a strong focus on showcasing products and enhancing usability.
Charging the Brand Forward
The final website delivers a smooth, intuitive experience across devices while staying visually aligned with E-City Scooter’s identity. It effectively promotes the new scooter line, boosts the store’s digital presence, and positions the brand as a stylish and eco-conscious choice for urban mobility.
Gleem SaaS
Type:
Personal Portfolio Project
Year:
2025
Skills:
React Next.js Framer Motion Tailwind / shadcn/ui UI/UX Vercel Supabase SEO Visual Direction
Project Overview:
Small local businesses (restaurants, cafes, bars, barbers, florists etc.) still rely on bloated WordPress installs and overpriced hosting plans when all they really need is a clean, fast, one-page presence on the internet. This project started as a personal exercise in solving that problem: build a production-quality one-page website with a simple CMS, deploy it for free on Vercel, and make it genuinely useful for a non-technical business owner.
The result is two connected projects. theGreek is the product, a fully functional one-page website and admin panel built for a Greek restaurant in Stockholm. Gleem is the company behind it, an original SaaS concept with a realistic business model and a full marketing landing page. Together they tell a complete product story, from identifying a market gap to building the product and the company that sells it.
theGreek: Building the Product First
Before building the company, I built the product it would sell. The concept was a Greek restaurant in Stockholm, a small local business wanting a polished, SEO-friendly, bilingual presence online without the overhead of a WordPress setup.
Starting from a wireframe, I built the full frontend using Next.js App Router, Tailwind CSS, and shadcn/ui. All photos, videos, and media across the site were AI-generated to make the example feel as realistic as possible. A key early decision was splitting the page into a server component that prerenders content for SEO and speed, and a client layer that handles all interactive behavior.
The bilingual setup uses a custom route-based system with no translation library, using language-specific database columns for flat copy and nested bilingual JSON objects for the menu catalogue.
The Admin Panel
The other half of theGreek is a lightweight CMS that lets the business owner manage everything from a simple interface without any technical knowledge. Data is stored in Supabase Postgres, making the whole project deployable at zero cost on Vercel and Supabase free plans.
Key features include:
- Website texts, contact info, appearance and SEO settings
- Photo, media and menu catalogue management with drag-and-drop reordering
- Multilingual content editing across EN/SV locales via custom shadcn/ui components
- Google OAuth with email whitelisting, inactivity timeout, and guest demo mode
Gleem: The Company Behind It
With the product built, the next step was creating the company that would sell it. The marketing site is structured to explain the value quickly, build trust, and convert, with a live link to theGreek as a working example throughout.
One of the more deliberate decisions was the visual identity. I explored multiple color directions before committing to a strict monochrome system, black and white only, which paired naturally with the OpenPeeps illustration set.
Rather than fighting the absence of color, I leaned into it with shadcn/ui variants, subtle glowing animations, and a shine effect on primary buttons. Three recurring illustrated characters run consistently across sections and serve as the team members.
Outcome & Takeaways
Building Gleem and theGreek as a connected ecosystem pushed me well beyond standard tutorial territory. Designing the server/client split from scratch made the performance and SEO implications of that decision concrete in a way that reading about it never could.
Experimenting with custom shadcn/ui components for the admin panel gave me a real feel for where the library's primitives end and where your own design decisions have to take over. Working with Supabase across auth, storage, and database in a real deployed product gave me confidence in the full infrastructure, not just isolated pieces.
The project ended up being as much about developing judgment as building features.
Petroulakis Construction & Renovation
Client Type:
Contruction Company
Year:
2026
Status:
Skills:
React Next.js Tailwind / shadcn/uiVisual Direction UI/UX SEO i18n Vercel Resend
Project Overview:
Petroulakis Renovation & Construction is a technical and construction company in Chania, Crete. An existing website was in place but had reached its limits, outdated design, no content strategy, and a WordPress setup that had become more overhead than it was worth.
The task was to rebuild it properly. A fast, bilingual site that ranks better locally, converts visitors into enquiries, and gives the business a platform it can grow with. Two audiences: Greek-speaking locals and the English-speaking expat market that makes up a significant share of renovation work on the island.
Research & Planning
Before touching any code I spent time understanding what was already there. Lighthouse scores were poor across performance and SEO, no schema markup, thin meta descriptions, service pages with no real depth and a basic contact form.
I connected Search Console and Analytics, ran a competitor analysis across Chania businesses and reference sites from other Greek cities, and mapped where the gaps and opportunities were. For content, I used the existing service texts as a starting point, they were already indexed and the client had curated them, so building on top preserved SEO equity while giving me room to expand. URL structure was kept intact for the same reason.
Once the content was mapped across all pages, I put together low fidelity wireframes for each section to work out the user flow, component structure, and content order before starting the build.
Building the New Website
With the content and wireframes ready, I generated the project boilerplate:
- Next.js App Router with static rendering across all routes
- Tailwind CSS with a custom theme via tweakcn
- shadcn/ui as the component base
- next-intl for bilingual routing
- Resend for contact form email delivery
I used shadcn blocks to get the page structures in place quickly, then refined the layout and applied a custom visual theme in collaboration with the client. The direction was modern and professional without losing the existing brand familiarity.
Results & Current Status
Performance and SEO were the primary objectives so I kept the design deliberately simple. Pages are server-rendered, client components are used only where interactivity requires it, images go through next/image and fonts are loaded locally. The contact form is a four-step flow that qualifies leads before submission, the client gets a structured summary rather than a simple message.
The build is live on a preview deployment and Lighthouse scores are already strong across performance, accessibility and SEO. Once it moves to the official domain the existing authority should push it further.
Yolo Mythos
Client:
Mythos Beer
Year:
2016
Status:
Skills:
Web Design Frontend Development Graphics Design Photoshop Bootstrap
Project Overview:
In collaboration with a marketing agency, I was assigned to design and develop the front end for a promotional microsite for the Mythos Beer YOLO campaign. The campaign invited users to submit party photos and vote on others for a chance to win beer packs, a boat cruise, and GoPros, while promoting the brand’s energetic and spontaneous vibe.
My mission was to design the user journey using the campaign’s visual assets and deliver a complete HTML theme, ready for development and deployment.
Designing the Summer Vibe
Based on the client’s input and campaign direction, I designed a fun and interactive user flow that guided participants smoothly from the homepage to the gallery, prize listings, and winners page. The experience was built to be engaging and easy to navigate, encouraging users to explore, submit their party photos, and vote on others.
Each screen was visually aligned with the campaign’s tone, using bold layouts and playful touches. To enhance the overall feel, I implemented subtle jQuery animations, adding movement to buttons, transitions, and gallery elements to make the experience feel lively.
Interactive and On Brand
I designed the entire interface in Photoshop, focusing on a bold, youthful style that matched the campaign's tone. The layout prioritized ease of use and clear navigation, mapping out a smooth user journey from entry to photo submission and voting.
The result was a production-ready Frontend theme, delivered to the development team for integration. The microsite encouraged high user engagement while staying aligned with campaign goals, brand visuals, and overall tone.
Bali Villas
Client Type:
Luxury Villa Rental
Year:
2020
Status:
Skills:
Web Design Web Development Wordpress Visual Direction
Project Overview:
Villa-Elli is a newly built luxury villa complex located in Bali, Heraklion, Crete. The client wanted a website to promote the villas and connect availability from Airbnb and Booking.com.
My goal was to create a minimal and user-friendly online presence that reflects the elegance of the villas and makes it easy for visitors to view details and make a booking.
Inspired by Sea & Simplicity
I began by designing a logo and visual identity inspired by the natural elements surrounding the villas: the deep blues of the Aegean Sea, the soft curves of the wind, and the essence of summer in Crete. The website followed the same tone on a custom WordPress theme tailored to highlight all the essential information about the villas and provide a straightforward booking request process.
Bringing It All Together
To support easy booking management, I used a third-party plugin to sync availability calendars from Airbnb and Booking.com directly into the site. This allowed visitors to view up-to-date availability without leaving the website. The layout was optimized for all devices, making browsing and booking simple and intuitive.
Skigaarden
Client:
Skigaarden AS
Year:
2019
Status:
Skills:
Web Design Frontend Development UI/UX Dashboard UI Bootstrap
Project Overview:
Skigaarden is a luxury ski resort located deep in the Norwegian mountains, offering high-end accommodation, fine dining, and real estate experiences. In collaboration with a Greek software company, I was tasked with designing and developing a modern, intuitive portal that would reflect the resort’s premium image while handling complex functionality for a diverse range of users.
The platform needed to support not just tourism, but also property listings, membership services, and dining logistics, all within a cohesive and elegant interface.
Designing for Mountain Luxury
The platform was built around a single, unified experience, allowing users to book their stay, reserve a table, or explore real estate opportunities within one elegant system.
Based on continuous feedback from the client and development team, I designed a minimal and intuitive interface that supported this three-pillar structure without overwhelming the user.
Key areas I worked on included:
- A homepage that guided users clearly toward booking or exploring.
- Accommodation listings with rich galleries and custom map views.
- Dining reservation pages with menu previews and time-slot selection.
- A checkout-style booking flow with a simple, modifiable UI for selecting and adjusting reservations.
- Real estate sections showcasing villas and ownership options.
- User dashboards covering bookings, payments, VIP status, and family accounts.
Visualizing the Mountains
Given the resort’s remote location, standard map data (e.g. Google Maps) didn’t convey the site’s beauty or scale. To solve this, I incorporated custom 3D views of the property alongside traditional maps.
These immersive visuals helped users truly understand where they’d be staying, nestled deep in snow-covered terrain far from the usual ski crowds.
Flexible, Guided Booking
The booking system followed a checkout-style wizard, allowing users to reserve accommodation and dining with ease. I designed a clean, step-by-step interface that let users modify their selections, from dates and guest details to table preferences or chalet type, all without overwhelming them. The goal was to keep the process smooth and flexible, giving users full control within a refined, luxury-focused environment.
Chania Cultural Center
Client:
Municipality of Chania, Crete
Year:
2018
Status:
Skills:
Web Design Frontend Development Visual Direction Bootstrap Photoshop
Project Overview:
Chania Culture is an initiative led by the Municipality of Chania in Crete, promoting cultural events, festivals, and exhibitions happening throughout the city. While many key events are hosted at the Arsenali Centre of Mediterranean Architecture, the platform needed to represent the entire cultural pulse of the city.
The municipality requested a modern, easy-to-use website and a new visual identity to help residents and visitors discover what’s happening across Chania’s cultural spaces. The goal was clarity, accessibility, and a design language that felt rooted in the city’s heritage while serving a forward-looking digital platform.
Design Language of the City
My task was to design a new logo, create the website layout, and build the front end. The visual identity was inspired by the iconic architecture of the Arsenali building, blending historical character with modern simplicity.
The website was designed in Photoshop and developed as a custom template, utilizing Bootstrap for structure and responsiveness. Its structure prioritized clarity, with a simple event system and a homepage layout that highlighted upcoming programs.
Structure in Simplicity
A responsive grid echoed the layout of the Arsenali itself, allowing users to easily explore exhibitions and happenings. The result was a calm, elegant platform that supported the municipality’s mission to connect people with Chania’s cultural life across the entire city.
Wayfare App
Client Type:
Travel Discounts Startup
Year:
2017
Status:
Skills:
Web Design Web Development Visual Direction Prototyping Wordpress Photoshop Product Strategy UI/UX
Project Overview:
Wayfare was a startup aiming to connect users with exclusive local discounts through a mobile app using NFC and barcode technology. The platform was initially planned to launch in Crete, targeting local shops and businesses.
The goal was to help new visitors and tourists discover hidden gems and benefit from discounts while exploring the island, all by simply tapping or scanning at participating locations. I joined in the early product stages to help shape the brand and communicate the app’s core idea to both potential customers and investors.
Shaping the Idea
My role went beyond design, I collaborated with the team to help define the core product concept and shape a strategy for reaching early users and partners. This included identifying key use cases, simplifying the messaging, and focusing the pitch for small businesses and potential investors.
I designed a logo identity and developed a WordPress microsite that acted as a clear, engaging introduction to the app. The site explained:
- How Wayfare works from both the user and business perspective.
- The value of NFC and barcode verification.
- Benefits for participating stores.
- A clear CTA for businesses to sign up for free and join the platform.
- The content and structure were optimized for both mobile and desktop, helping the startup communicate its value quickly and effectively.
Prototyping the Experience
To support pitching and demonstrations, I also designed an interactive prototype simulating the user journey, from discovering a discount to redeeming it at a physical Wayfare point. This helped visualize how the system worked and guided future development by clarifying user needs and flow.
View Prototype App ⇢ Nissan Qashqai Stories
Client:
Nissan
Year:
2016
Status:
Skills:
Web Design Web Development Wordpress Responsive Design
Project Overview:
In collaboration with a marketing agency, I was tasked with designing and developing a WordPress-based microsite for the launch of the new Nissan Qashqai. The campaign invited users to share their mountain road trip stories, photos, and experiences with their Qashqai, giving them the chance to win prizes while engaging with the brand.
My mission was to create a vibrant and user-friendly microsite that captured the spirit of adventure while supporting real-time user engagement. I designed and developed a custom WordPress theme, ensuring both Frontend appeal and smooth back-end functionality for content management and moderation.
Driven by Stories
The result was an interactive, campaign-driven microsite that supported high engagement and seamless participation. The platform gave real Nissan owners a space to connect and showcase their experiences while reinforcing the Qashqai’s adventurous brand identity.