FőoldalKarrier PortálProfil

Felhasználói profil

A Karrier Portál felhasználói profil komponensei lehetővé teszik a jelöltek számára, hogy személyes adataikat, szakmai tapasztalataikat és preferenciáikat kezeljék.

Profil áttekintő

A profil áttekintő komponens a felhasználó fő adatait jeleníti meg, valamint gyors hozzáférést biztosít a különböző profil szekciókhoz.

Nagy Péter

Frontend fejlesztő

nagy.peter@example.com

+36 20 123 4567

Győr, Magyarország

Komponens leírása

A profil áttekintő egy egységes, jól strukturált nézetben biztosítja a felhasználó alapadatainak megjelenítését és kezelését.

Háttérsáv:

Vizuális keret a profil megjelenéséhez

Profilkép:

Kerek forma, fehér kerettel kiemelve

Alap adatok:

Név, pozíció és kapcsolatfelvételi adatok

Szerkesztés:

Gyorsgomb a profil szerkesztéséhez

Aloldalak:

Tabs navigáció a profil különböző részeinek eléréséhez

Kód példa

<div class="bg-white rounded-[4px] border border-[#E0E0E0] overflow-hidden">
  <div class="h-24 bg-[#FDE8EC] relative">
    <div class="absolute -bottom-10 left-8">
      <div class="w-20 h-20 rounded-full bg-white border-4 border-white overflow-hidden">
        <img src="/path/to/image.jpg" alt="Profil kép" class="w-full h-full object-cover" />
      </div>
    </div>
  </div>
  <div class="pt-12 pb-6 px-8">
    <div class="flex justify-between items-start">
      <div>
        <h3 class="text-[24px] font-medium mb-1">Felhasználó neve</h3>
        <p class="text-[#666666]">Pozíció</p>
      </div>
      <button class="bg-white border border-[#E0E0E0] text-[#333333] px-3 py-1 rounded">
        Szerkesztés
      </button>
    </div>
    
    <!-- További tartalom... -->
  </div>
</div>

Készségek megjelenítése

A készségek megjelenítő komponensek segítenek a felhasználóknak hatékonyan bemutatni szakmai képességeiket.

Szakterületek

Frontend fejlesztésHaladó

UX designKözépszint

Backend fejlesztésAlapszint

Technológiák és eszközök

JavaScriptTypeScriptVue.jsReactTailwind CSSFigmaGit

Nyelvtudás

Magyar

Angol

Német

Komponens leírása

A készségek megjelenítésére különböző formátumok használhatók a bemutatkozó profil hatékony kialakításához.

Haladásjelzők:

Horizontális sávok mutatják a tudásszintet

Címkék:

Technológiai készségek címkék formájában

Pontskála:

Nyelvtudás értékelése pontrendszerrel

Használat:

A készségek megkülönböztető kiemelése az állás illeszkedés növeléséhez

Címkék kód példa

<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-[#FDE8EC] text-[#1D824C] rounded-full text-sm">Címke</span>
  <span class="px-3 py-1 bg-[#FDE8EC] text-[#1D824C] rounded-full text-sm">Másik címke</span>
  <!-- További címkék... -->
</div>

Haladásjelző kód példa

<div>
  <div class="flex justify-between items-center mb-1">
    <span class="text-[#333333] font-medium">Készség neve</span>
    <span class="text-sm text-[#666666]">Szint</span>
  </div>
  <div class="h-2 bg-[#E0E0E0] rounded-full">
    <div class="h-2 bg-[#f50537] rounded-full" style="width: 85%"></div>
  </div>
</div>

Tapasztalati idővonal

A tapasztalati idővonal komponens kronológiai sorrendben mutatja be a felhasználó szakmai életútját.

Szakmai tapasztalat

2021 - Jelenleg

Frontend fejlesztő

TechSolutions Kft.

Győr, Magyarország

Vállalati webalkalmazások fejlesztése modern frontend technológiákkal. Felhasználói élmény optimalizálása és reszponzív designok implementálása.

2018 - 2021

Web fejlesztő

Digital Média Kft.

Budapest, Magyarország

Ügyféloldalak és e-kereskedelmi platformok fejlesztése, meglévő weboldalak karbantartása és frissítése.

2016 - 2018

Gyakornok

WebStúdió

Debrecen, Magyarország

Frontend fejlesztési alapok elsajátítása, kisebb projektek kivitelezése senior fejlesztők mentorálásával.

Komponens leírása

A tapasztalati idővonal világos, időrendi sorrendben jeleníti meg a szakmai tapasztalatokat, kiemelve a releváns információkat.

Idősor:

Függőleges vonal mentén rendezett kronológiai tapasztalat

Időszak:

Kezdő és záró dátum vagy "Jelenleg" jelzés

Tartalom:

Pozíció, vállalat neve, helyszín és feladatok leírása

Jelzőpontok:

Vizuális megkülönböztetés az aktív és korábbi pozíciók között

Kód példa

<div class="relative border-l-2 border-[#E0E0E0] pl-6 ml-2">
  <div class="relative">
    <div class="absolute -left-8 top-1 w-4 h-4 rounded-full bg-[#f50537]"></div>
    <div class="mb-1">
      <span class="text-sm text-[#666666]">Időszak</span>
    </div>
    <h4 class="text-[18px] font-medium mb-1">Pozíció</h4>
    <p class="text-[#333333] mb-1">Cég neve</p>
    <p class="text-sm text-[#666666] mb-2">Helyszín</p>
    <p class="text-sm text-[#666666]">Feladatok leírása</p>
  </div>
  
  <!-- További elemek... -->
</div>

Tervezési irányelvek

Az információkat időrendi sorrendben mutassuk, a legfrissebbtől haladva a régebbiek felé
Csak a legfontosabb adatokat jelenítsük meg, kerüljük a túlzott részletezést
Szerkesztési lehetőséget biztosítsunk minden tapasztalati elemhez