Halaman "Tentang Saya" adalah salah satu halaman yang paling sering diremehkan orang waktu bikin website. Banyak yang isinya cuma satu paragraf kering: "Saya adalah seorang profesional di bidang X dengan pengalaman Y tahun." Selesai. Lanjut.

Padahal halaman ini adalah salah satu yang paling sering dikunjungi, terutama oleh orang yang pertama kali datang ke website kamu. Ini halaman yang menentukan apakah mereka akan percaya sama kamu atau tidak. Sayang sekali kalau diisi asal-asalan.

Saya mau berbagi cara membuat halaman "Tentang Saya" yang lebih hidup — menggunakan HTML dan CSS murni, tanpa framework, tanpa plugin, tanpa library tambahan yang bikin berat.

Struktur Dasar yang Perlu Ada

Sebelum nulis satu baris kode pun, tentukan dulu apa yang mau kamu sampaikan. Halaman "Tentang Saya" yang baik biasanya punya struktur seperti ini:

• Foto atau visual identitas
• Kalimat pembuka yang personal, bukan formal
• Cerita singkat perjalanan — bukan CV, tapi narasi
• Apa yang bisa kamu bantu atau tawarkan
• Cara menghubungi

Sederhana. Tapi banyak yang melewatkan poin kedua dan ketiga — malah langsung daftar skill dan pengalaman seperti nulis CV lamaran kerja.

Kode HTML Dasarnya

Ini contoh struktur HTML yang bisa jadi titik awal:

<section class="about-wrapper">
<div class="about-photo">

<img src="foto-saya.jpg" alt="Foto saya">

</div>

<div class="about-content">

<h1>Halo, saya [nama]</h1>

<p class="tagline">Otodidak dari Cilacap yang suka bikin website.</p>

<p>Cerita panjang kamu di sini...</p>

</div>

</section>

CSS yang Bikin Tampilannya Hidup

Bagian ini yang sering bikin orang menyerah dan lari ke template. Padahal dengan CSS dasar, hasilnya sudah bisa sangat layak:

.about-wrapper {
display: flex;

gap: 2rem;

align-items: flex-start;

max-width: 800px;

margin: 3rem auto;

padding: 0 1rem;

}


.about-photo img {

width: 180px;

height: 180px;

border-radius: 50%;

object-fit: cover;

border: 4px solid #e2e8f0;

}


.about-content h1 {

font-size: 1.8rem;

margin-bottom: 0.25rem;

}


.tagline {

color: #64748b;

font-style: italic;

margin-bottom: 1rem;

}


@media (max-width: 600px) {

.about-wrapper {

flex-direction: column;

align-items: center;

text-align: center;

}

}

Dengan kode di atas, kamu sudah punya layout dua kolom yang otomatis jadi satu kolom di layar kecil. Fotonya bulat, ada jarak yang proporsional, dan sudah responsive tanpa butuh Bootstrap atau framework apapun.

Yang Lebih Penting dari Kodenya

Saya mau jujur — kode di atas hanya alat. Yang jauh lebih menentukan adalah apa yang kamu tulis di dalamnya.

Hindari kalimat klise seperti "saya adalah pribadi yang kreatif dan inovatif". Semua orang nulis itu. Tidak ada yang percaya. Ganti dengan cerita nyata: dari mana kamu, apa yang pertama kali bikin kamu tertarik sama bidang ini, momen apa yang bikin kamu yakin ini jalan yang mau kamu tekuni.

Cerita nyata selalu lebih kuat dari deskripsi. Pembaca bisa merasakan bedanya.

Detail Kecil yang Sering Dilupakan

Beberapa hal kecil yang bisa bikin halaman "Tentang Saya" terasa lebih profesional:

Pastikan foto yang kamu pakai resolusinya bagus tapi ukuran filenya sudah dikompres. Foto 5MB untuk gambar 180x180 pixel itu mubazir dan bikin halaman lambat.

Tambahkan meta description yang sesuai — ini yang muncul di Google waktu orang mencari nama kamu.

Jangan lupa accessibility: gambar harus punya atribut alt, warna teks harus punya kontras yang cukup dengan background, dan ukuran font jangan terlalu kecil.

Saya sendiri pernah membuat halaman tentang saya yang jelek sekali di awal — fotonya buram, tulisannya kaku, layoutnya miring di mobile. Butuh beberapa iterasi sebelum jadi sesuatu yang saya sendiri tidak malu untuk ditunjukkan ke orang.

Kalau kamu sedang mengerjakan halaman ini juga, atau punya pertanyaan soal CSS tertentu yang belum ketemu jawabannya, tanya saja di komentar. Kita debug bareng.