VADIAN Website Development Project

Portfolio project

Sam Villa

View completed work

VADIAN: Landing page for Agentic Company

Role

Direction, Product direction, UX/UI and Development

Technologies used

Astro

React

Tailwind CSS

GSAP

Framer Motion

Client: VADIAN (in-house website)

Highlights

Brought services, portfolio and research into one website.

Built the layered AI animation and project carousel.

Created a clear path from project exploration to inquiry.

Give a broad AI offering a clear front door

VADIAN works across AI consulting, custom development and automation. Its portfolio also includes products with different audiences and technical requirements. The website needs to help a visitor understand that work and decide where their own business problem fits.

I handled direction, product direction, UX/UI and development for the website. The deliverable brings the company's service offering, selected work and research into a single public experience.

The opening message sets the context: AI for everyday business. From there, the page gives visitors ways to explore the offering or book a conversation. The site has to carry enough detail for evaluation while keeping that first step easy to find.

Organize the offer around the work a client needs

The service section separates consulting from custom AI development and automation. Each category explains the type of work involved. A visitor can identify whether they need a plan, a system built around their operations or an integration with existing tools.

That structure gives the website a useful hierarchy. The first layer introduces the business. The next explains how VADIAN works with clients. Selected projects give visitors something concrete to inspect.

I treated those layers as part of one journey. The page should help a prospective client connect a service description with an example and then reach the contact area with a clearer problem to discuss.

Use the portfolio to explain the range

The selected-work area brings different products into a shared presentation. A collections platform, an agent product and a reporting tool each have their own visual identity and purpose. The website gives them consistent framing and links to explore further.

The carousel makes that range available within the page. Project imagery carries much of the explanation, while short descriptions establish what each product does. Visitors can follow a project without reading a long technical account first.

A separate labs section introduces research such as SØck3t. Giving that work its own area distinguishes the company's experimental direction from the services a client is evaluating today.

Let the visual system carry the company identity

The website uses a light background with deep indigo, blue and teal accents. A layered AI animation gives the hero a recognizable visual moment. The same palette carries into the larger research and contact sections.

The build uses Astro with React, Tailwind CSS, GSAP and Framer Motion. That combination supports the content structure and interactive parts of the site, including animation and the portfolio presentation.

My role was to connect those implementation choices with the page experience. Motion has a place in the identity, while the service descriptions and project links remain the information visitors need to evaluate the company.

End with a practical first conversation

The contact area invites visitors to bring a business problem and includes a form alongside a booking action. It also explains the next steps through discovery, a requirement audit and a roadmap proposal.

The delivered website gives VADIAN a shared home for its services and product work. It connects the company's direction with a public interface that visitors can use to explore projects and begin an inquiry.

This case presents the completed website and my contribution across direction, design and development. The result is a concrete digital experience with a clear path from introduction to contact.