The new visual identity of my website and blog: Futurist Minimalism + Agentic AI

If you have been following my work for a while, you probably noticed the site changed a lot.

This was not just a visual refresh. It was a language shift.

I wanted the website and blog to communicate my current stage more clearly: AI Product Engineer, agent-driven products, and a blend of pragmatic engineering with product thinking.

The direction became:

Futurist Minimalism + Agentic AI

The problem I wanted to solve

The previous version worked well in structure and content, but still felt too generic from a design identity perspective.

In practice:

• solid functional baseline;
• weak signature language;
• low sense of a "living system";
• weak contrast between institutional pages and editorial reading.

I did not want to ship a generic SaaS-style look.

I also did not want aesthetics that would hurt readability, performance, or maintainability.

The visual direction in one sentence

Dark theatre + technical density + editorial soul.

This sentence guided almost every decision:

• dark theatre: a rich deep canvas with atmospheric halos;
• technical density: system signals (mono uppercase labels, status pills, telemetry);
• editorial soul: long-form reading with publication-grade rhythm.

Palette: fewer colors, higher intention

The base uses a dark spectrum with electric accents.

• #05060a as the primary canvas;
• electric cyan (#22d3ee) as the action color;
• soft magenta (#d946ef) as contrast;
• low-opacity borders to preserve sophistication.

The most useful rule: one accent word per headline.
If everything glows, nothing glows.

Typography: two voices in one system

Another key decision was role-based typography:

• Geist for interface body text;
• Manrope for headings;
• JetBrains Mono for system metadata and technical labels;
• Fraunces + Source Serif 4 for long-form article reading.

This creates two complementary voices:

1. the futurist/technical product voice;
2. the editorial/reflective content voice.

The primitives that define the new aesthetic

The redesign introduced reusable visual primitives that form a shared vocabulary. The home hero has evolved since the first iteration: instead of a single liquid orb as the centerpiece, the right column is now a portrait morph—three transparent renders that crossfade in a ping‑pong cycle (human → hybrid → agent). Each transition replays a soft top‑down “materialize” wipe, a neon seam, and a mono HUD chip (MODE · human / MODE · hybrid / MODE · agent). The hybrid frame is the emotional center of the story: still a person, already augmented.

The three source frames (same lighting, increasing augmentation):

MODE · human	MODE · hybrid	MODE · agent

Around that focal point and across the page:

1. Particle Field (Canvas2D) for data‑flow and network feel;
2. Black hole accent (desktop), anchored near the headline as a small cosmic gravity well;
3. Rocket launch pass (desktop), a periodic vertical accent through the viewport;
4. Glow Card with cursor‑following spotlight;
5. Cursor Aurora as a subtle global halo.

An orbiting conic ring still lives behind the portrait stack—lighter than the old standalone orb, but the same cyan/magenta language.

More than effects, these primitives are vocabulary. Any new section that composes them already speaks the same design language.

Blog: intentional contrast between interface and reading

For the blog, I aimed for balance:

• asymmetric index grid with depth-based cards;
• comfortable article reading width;
• editorial typography with more breathing room;
• drop-cap on the first paragraph;
• subtle mono metadata to keep consistency with the broader system.

The contrast is intentional: navigation feels like a living interface; writing feels like a publication.

Engineering behind the visual layer

The redesign was implemented to stay technically predictable:

• no heavy 3D dependency;
• smooth and controlled motion;
• prefers-reduced-motion support;
• componentized structure for iterative evolution.

Most of the identity comes from CSS, SVG, and Canvas2D while preserving fast loading.

What improved in practice

After the redesign, the most visible gains were:

• stronger brand perception;
• visual narrative aligned with AI + engineering;
• clearer separation between institutional layer and reading experience;
• better consistency across pages (/about, /projects, /contact, /community, /cv);
• reusable design foundation for future iterations.

What is next

I still plan to evolve:

• Open Graph images aligned with the new system (and the portrait modes);
• finer mobile micro-interactions;
• continuous typography and editorial rhythm tuning.

But the core shift is already done:

the site stopped being just a publishing container and became an identity product.

---

If you are redesigning your own digital presence, my practical suggestion is:

start less from visual trends and more from a positioning question:

"Before anyone reads my text, what kind of professional should this website feel like?"