Satu lagi reka bentuk semula laman web.

Dalam fikiran saya, saya menulis siaran ini baru semalam.

OK. Jadi...saya mungkin telah membina semula tapak web saya sepenuhnya...sekali lagi

sid ・ 23 Dis '21

#webdev #showdev #html #css

Namun, hampir empat tahun telah berlalu, dan dengan melihat semula, saya dengan yakin boleh mengatakan bahawa percubaan awal saya pada reka bentuk web adalah, katakan kurang cemerlang. Saya tapak web lama kelihatan seperti mereka direka oleh seorang kanak-kanak berumur 13 tahun kerana, ya, mereka adalah—dan ya, kanak-kanak berumur 13 tahun itu ialah saya ?.

Sejak itu:

• Saya telah menamatkan tiga tahun sekolah lagi. Saya boleh dikatakan seorang pelajar profesional sekarang.
• Saya telah menghabiskan berjam-jam mempelajari asas-asas utama reka bentuk UI yang baik. Saya telah membaca lebih banyak artikel reka bentuk daripada yang saya mahu akui.
• Saya telah belajar cara menulis kod yang lebih baik. Ia tidak lagi ranap… pada kebanyakan masa.
• Saya telah membaca buku Refactoring UI oleh Adam Wathan, yang mengubah sepenuhnya cara saya berfikir tentang mereka bentuk UI.

Tetapi sepanjang masa itu, saya entah bagaimana mengabaikan satu butiran kecil—ya, anda dapat menekanya—mengemas kini tapak web saya. Sekarang, pada usia 16 tahun, ulasan ini:

Edvard Busck-Nielsen • 6 Mac '21

Saya sangat menyukai UI tapak web. Juga pilihan warna yang menarik! Tetapi, pada pendapat saya apabila ia datang ke laman web peribadi anda harus meletakkan kemahiran dan pengalaman anda dalam fokus. Sekurang-kurangnya jika matlamat anda adalah menjual diri anda kepada perekrut. Saya minta maaf tetapi kebanyakan perekrut tidak akan mengambil berat tentang catatan blog. Mereka mengambil berat tentang perkara yang boleh anda lakukan dan berapa lama anda telah melakukannya. Portfolio projek juga penting. Catatan blog memang menunjukkan sedikit keperibadian dan minat anda dengan pasti tetapi seorang perekrut mungkin tidak mempunyai masa untuk membacanya. Anda mungkin permohonan terakhir yang mereka lalui pada petang Jumaat, perkara terakhir yang anda mahu lakukan ialah membuang masa mereka.

Tetapi selain daripada kerja yang hebat itu! Dan sudah tentu, ini hanyalah pendapat saya.

benar-benar mula mencecah rumah.

Saya telah menghabiskan begitu banyak masa bekerja pada pelbagai projek tetapi tidak mempunyai tempat untuk memaparkannya, dan oleh itu tiada platform untuk menarik minat bakal perekrut. Selain itu, jika anda melihat UI kebanyakan projek saya, ia masih agak biasa-biasa saja. Saya memerlukan sesuatu untuk wow mereka—jadi beberapa hari yang lalu, saya memutuskan untuk melakukan segala-galanya dan mereka bentuk semula serta membina semula tapak web peribadi saya (atau portfolio, jika anda mahu).

Teknologi

Semua tapak web peribadi saya yang terdahulu telah dibina dengan HTML, CSS dan JavaScript lama biasa. Ia ringkas dan berfungsi, tetapi ia seperti cuba membuat hidangan gourmet dengan microwave. Selain itu, saya benar-benar ingin menunjukkan kemahiran React saya (sejujurnya, itu adalah sebab sebenar).

Jadi, saya memilih Next.js. kenapa? Nah, ia kelihatan seperti pilihan yang baik pada masa itu (dan ternyata betul), ditambah pula saya sudah mempunyai banyak pengalaman dengannya.

Untuk CSS, saya menggunakan Tailwind CSS (maksud saya, jika anda tidak menggunakannya pada tahun 2024, adakah anda sebenarnya? ?).

Reka Bentuk

Selepas menghabiskan terlalu banyak masa melihat tapak web lama saya, saya memutuskan mod cahaya tidak memotongnya. Saya mahukan perubahan drastik, sesuatu yang akan memberi impak yang nyata. Dan apakah cara yang lebih baik untuk melakukannya selain dengan membalikkan suis dan menggunakan mod gelap sepenuhnya? Ia seperti tapak web anda memulakan arka penjahat ?.

Untuk fon, saya memilih Inter. Selepas banyak percubaan yang gagal dengan fon lain, terutamanya pada peranti Windows yang tapak saya kelihatan seperti ini:

...berbanding dengan ini pada macOS, saya memutuskan untuk berhenti menggunakan fon sistem lalai yang disediakan oleh Tailwind CSS.

Jelas sekali, fon pada Mac adalah lebih baik. Tetapi dengan fon lalai San Francisco yang eksklusif untuk Apple, saya memerlukan alternatif. Masukkan Inter—salah satu fon paling menakjubkan yang pernah saya lihat dan pengganti sempurna untuk San Francisco.

Nampak? Kelihatan betapa cantiknya fon itu?

Untuk warna utama, saya menggunakan warna ungu. Tiada sebab sebenar, hanya memutuskan untuk mencampurkan perkara daripada nila yang saya gunakan sebelum ini.

Susun Atur

Saya mulakan dengan bahagian hero. Mudah, ringkas dan...oh tunggu... adakah saya menyebut ada kesan mesin taip?.

Selepas itu saya cepat-cepat berfikir tentang bahagian seterusnya.

Mengulas semula ulasan Edvard:

Edvard Busck-Nielsen • 6 Mac '21

Saya sangat menyukai UI tapak web. Juga pilihan warna yang menarik! Tetapi, pada pendapat saya apabila ia datang ke laman web peribadi anda harus meletakkan kemahiran dan pengalaman anda dalam fokus. Sekurang-kurangnya jika matlamat anda adalah menjual diri anda kepada perekrut. Saya minta maaf tetapi kebanyakan perekrut tidak akan mengambil berat tentang catatan blog. Mereka mengambil berat tentang perkara yang boleh anda lakukan dan berapa lama anda telah melakukannya. Portfolio projek juga penting. Catatan blog memang menunjukkan sedikit keperibadian dan minat anda dengan pasti tetapi seorang perekrut mungkin tidak mempunyai masa untuk membacanya. Anda mungkin permohonan terakhir yang mereka lalui pada petang Jumaat, perkara terakhir yang anda mahu lakukan ialah membuang masa mereka.

Tetapi selain daripada kerja yang hebat itu! Dan sudah tentu, ini hanyalah pendapat saya.

Tetapi, pada pendapat saya, apabila bercakap tentang laman web peribadi, anda harus fokus pada kemahiran dan pengalaman anda, terutamanya jika matlamat anda adalah untuk menarik perhatian perekrut.

Saya memutuskan untuk membuang sepenuhnya bahagian blog. Walaupun anda mungkin menikmati 1000-an perkataan saya pada rangka kerja dan alatan yang berbeza, perekrut mungkin tidak akan melakukannya. Selain itu, dengan beban kursus saya yang semakin meningkat apabila saya memasuki dua tahun akhir persekolahan saya, saya hanya tidak mempunyai masa untuk mengekalkan blog.

Saya juga mengalihkan bahagian kemahiran saya ke bahagian atas, depan dan tengah untuk dilihat oleh semua perekrut ?. Oh, dan mengapa tidak menambah beberapa kesan hebat? Untuk kesan yang ditunjukkan di bawah, saya menggunakan framer-motion, yang mereka gambarkan sebagai "Perpustakaan gerakan sedia pengeluaran untuk React." Saya tidak boleh bersetuju lagi.

Nampak? Lihatlah betapa kerennya animasi itu.

Seterusnya, saya menangani bahagian projek. Saya mempamerkan 4 projek teratas saya di halaman utama dan memasukkan pautan ke yang lain. Untuk bahagian ini, saya menghasilkan idea hebat—modal yang akan melantun naik dari bahagian bawah halaman apabila projek diklik, memberikan butiran lanjut. Dan sudah tentu, framer-motion ialah alat untuk kerja itu.

Selepas sejam, saya mendapat ini:

Saya fikir ia sempurna sehingga rakan saya menimbang:

• Terlalu melenting, kurangkan nadanya.
• Saya sukakannya, tetapi anda harus benar-benar mengurangkan lantunan.
• Kelenturan kelihatan menggelegar.

Pada mulanya, saya enggan mengubahnya. Tetapi selepas berjam-jam mengagak, saya menyedari bahawa mungkin, mungkin, lantunan itu agak berlebihan. Jadi, saya mendailnya.

Versi akhir. Nampak cantik kan?

Akhir sekali, saya menambah bahagian hubungan dengan pautan ke LinkedIn dan e-mel saya, dan sudah tentu, pautan ke profil GitHub saya untuk dilihat oleh semua perekrut.

Saya juga membina halaman projek, seperti yang dinyatakan sebelum ini. Ia sangat serupa dengan bahagian projek di halaman utama, menggunakan kaedah yang sama untuk mempamerkan semua projek yang saya bangunkan selama ini (Nota: bahagian ini masih dalam proses, jadi jangan terkejut jika ia sedikit jarang).

Jadi inilah saya, akhirnya mengemas kini laman web saya dengan semua pengetahuan yang diperolehi dengan susah payah ini. Harap-harap yang ini tidak kelihatan seperti direka oleh seorang remaja berusia 16 tahun. Oh tunggu… ?

---

Anda boleh pergi menyemak tapak web saya di sini dan kod di sini. Jika anda menyukai siaran ini, sila berikan repo itu bintang dan pertimbangkan untuk mengikuti.

sidcraftscode / portfolio

Laman web portfolio peribadi saya, dibina dengan Next.js

Ini ialah projek Next.js yang dilengkapi dengan aplikasi create-next.

Bermula

Pertama, jalankan pelayan pembangunan:

npm run dev
<span class="pl-c"># or</span>
yarn dev
<span class="pl-c"># or</span>
pnpm dev
<span class="pl-c"># or</span>
bun dev

Buka http://localhost:3000 dengan penyemak imbas anda untuk melihat hasilnya.

Anda boleh mula mengedit halaman dengan mengubah suai halaman/index.js. Halaman ini dikemas kini secara automatik semasa anda mengedit fail.

Laluan API boleh diakses di http://localhost:3000/api/hello. Titik akhir ini boleh diedit dalam pages/api/hello.js.

Direktori halaman/api dipetakan ke /api/*. Fail dalam direktori ini dianggap sebagai laluan API dan bukannya halaman React.

Projek ini menggunakan seterusnya/fon untuk mengoptimumkan dan memuatkan Inter secara automatik, Fon Google tersuai.

Ketahui Lebih Lanjut

Untuk mengetahui lebih lanjut tentang Next.js, lihat sumber berikut:

• Dokumentasi Next.js - ketahui tentang ciri dan API Next.js.
• Belajar Next.js - tutorial Next.js interaktif.

Anda boleh menyemak repositori Next.js GitHub - maklum balas anda…

Lihat di GitHub

Berikut ialah beberapa tangkapan skrin


:

Atas ialah kandungan terperinci Satu lagi reka bentuk semula laman web.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!