Heat Maps 구성 요소
Tailwind CSS를 사용하여 대화형 기능, 반응형 디자인 및 어두운 테마 지원을 갖춘 포트폴리오를 보여주는 미니멀리스트 히트 맵 구성 요소입니다.
HTML 코드
<div class="max-w-4xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Example Heat Map Item -->
<div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
</div>
<div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
</div>
<div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
</div>
<!-- Add more items as needed -->
</div>
</div>관련 구성 요소
Heat Maps 구성 요소
포트폴리오를 위한 반응형 히트 맵 구성 요소로, 눈의 피로를 줄이고 에너지를 생성하기 위해 어두운 배경과 생생한 고채도 색상으로 설계되었습니다. 활동을 시각화하기 위한 달력과 같은 그리드, 대화형 도구 설명(기능은 'JavaScript 없음' 규칙에 따라 구현되지 않고 시각적 자리 표시자가 있음) 및 색상 범례가 포함됩니다.
Heat Maps 구성 요소
차분한 색상의 미니멀하고 평평한 디자인의 히트 맵 구성 요소로 게임 웹사이트에 적합합니다. 활동 수준의 그리드 표시가 특징이며, 여러 장치에서 반응하고, 다크 모드를 지원합니다.