VibeCoderzVibeCoderz
Telegram
All Prompts
About/Profile Card with Stats and CTA preview
cardaboutprofiletailwindresponsivectastatsportfolio

About/Profile Card with Stats and CTA

Адаптивная карточка профиля с фото, текстом, статистикой и кнопкой CTA. Идеально для портфолио, лендингов.

Prompt

<div class="overflow-hidden border-white/10 border rounded-3xl max-w-lg">
            <div class="relative aspect-[4/3]">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e636d5f8-9fec-44fe-b4dd-4ccb5a90c3da_1600w.jpg" alt="Workspace" class="absolute inset-0 w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-tr from-black/30 via-transparent to-transparent"></div>
            </div>
            <div class="pt-5 pr-5 pb-5 pl-5">
              <h3 class="text-xl font-semibold tracking-tight">About</h3>
              <p class="mt-2 text-sm leading-relaxed text-white/70">
                I build AI products end‑to‑end: data ingestion, retrieval, prompt/tooling, evals, and production UI. Pragmatic about latency, cost, and safety — with strong attention to developer experience.
              </p>
              <div class="mt-4 grid grid-cols-3 gap-4">
                <div>
                  <div class="text-2xl tracking-tight">8+</div>
                  <p class="text-[11px] text-white/60 mt-0.5">Years</p>
                </div>
                <div>
                  <div class="text-2xl tracking-tight">120+</div>
                  <p class="text-[11px] text-white/60 mt-0.5">Projects</p>
                </div>
                <div class="">
                  <div class="text-2xl tracking-tight">50+</div>
                  <p class="text-[11px] text-white/60 mt-0.5">Clients</p>
                </div>
              </div>
              <div class="mt-5 p-4 bg-black/30 rounded-xl border border-white/10">
                <h4 class="text-sm font-medium tracking-tight text-white mb-2">Currently learning</h4>
                <p class="text-sm text-white/70">Structured outputs, memory architectures, and low‑latency tool use with vLLM + GPU batching.</p>
              </div>
              <a href="#contact" class="mt-5 inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="handshake" class="lucide lucide-handshake w-4 h-4"><path d="m11 17 2 2a1 1 0 1 0 3-3" class=""></path><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4" class=""></path><path d="m21 3 1 11h-2" class=""></path><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" class=""></path><path d="M3 4h8" class=""></path></svg>
                <span class="">Let’s collaborate</span>
              </a>
            </div>
          </div>
All Prompts