Alternative working account https://github.com/krirkGenerwiz0137
เว็บไซต์ resume/portfolio ส่วนตัว สร้างด้วย HTML, CSS และ JavaScript ล้วนๆ โฮสต์บน GitHub Pages
เว็บไซต์: https://<username>.github.io
สร้างโดยการ prompt Claude (claude.ai) โดยใช้แนวทางการเขียนโค้ดจาก Andrej Karpathy ที่เน้นความเรียบง่าย โค้ดน้อย และไม่มี abstraction ที่ไม่จำเป็น
ไม่มี build step, ไม่มี framework, ไม่มี npm — ใช้แค่ไฟล์ index.html ไฟล์เดียว
- HTML5 + CSS3 + Vanilla JavaScript ล้วนๆ
- ฟอนต์จาก Google Fonts CDN
- โฮสต์บน GitHub Pages (ฟรี, static)
- Responsive รองรับทั้ง desktop และมือถือ
- Animation เมื่อ scroll ลงมา
- Navigation bar แบบ fixed ด้านบน
- ตัวเลือก Print / Export:
- Print — เปิด print preview ของ browser (เลือก "Save as PDF" จากในนั้นได้เลย)
- Super Compact Print — บีบทุกอย่างให้อยู่ในหน้า A4 เดียว
- Download .html — บันทึกหน้าเว็บเป็นไฟล์สำรอง
- Copy link — copy URL ของเว็บไปยัง clipboard
ทุกอย่างอยู่ใน index.html ไฟล์เดียว หาและแทนที่ข้อมูล mockup ตามตารางนี้:
| ข้อมูล | ตำแหน่งใน index.html |
|---|---|
| ชื่อ | .hero-name และ <title> |
| ตำแหน่งงาน / bio | .hero-title, .about-text |
href="mailto:..." และ .print-contact |
|
| LinkedIn / GitHub URL | href="https://linkedin.com/..." เป็นต้น |
| รูปโปรไฟล์ | <img class="hero-avatar" src="..."> |
| ประสบการณ์ | #experience — block .exp-item |
| ทักษะ | #skills — รายการใน .skill-list |
| Projects | #projects — block .project-card |
| การศึกษา | #education — block .edu-item |
| ปีใน footer | <footer> |
- สร้าง repo ชื่อ
<username>.github.io - Upload
index.htmlไปไว้ที่ root ของ repo - ไปที่ Settings → Pages → Deploy from branch → main / root
- รอ 1-2 นาที เว็บจะขึ้นที่
https://<username>.github.io
- แนวทางการเขียนโค้ดตาม Karpathy principles: คิดก่อน code, เรียบง่ายก่อน, แก้เฉพาะส่วนที่เกี่ยวข้อง
- Skill ที่ใช้:
frontend-designจาก multica-ai skill set - ไม่ได้ใช้: mattpocock/skills และ thananon/9arm-skills
Personal resume/portfolio website built with pure HTML, CSS, and vanilla JavaScript. Hosted on GitHub Pages.
Live site: https://<username>.github.io
Created by prompting Claude (claude.ai) with coding guidelines derived from Andrej Karpathy's principles — emphasizing simplicity, minimal code, and no unnecessary abstractions.
No build step, no framework, no npm. Just one index.html file.
- Pure HTML5 + CSS3 + Vanilla JavaScript
- Fonts via Google Fonts CDN
- Hosted on GitHub Pages (free, static)
- Responsive layout (desktop + mobile)
- Scroll-triggered reveal animations
- Fixed navigation bar
- Print / Export options:
- Print — opens browser print preview (use "Save as PDF" from there)
- Super Compact Print — forces entire resume onto a single A4 page
- Download .html — saves a standalone copy of the page
- Copy link — copies the live URL to clipboard
Everything is in index.html. Find and replace the mockup placeholders:
| What | Where in the file |
|---|---|
| Name | .hero-name and <title> |
| Title / bio | .hero-title, .about-text |
href="mailto:..." and .print-contact |
|
| LinkedIn / GitHub URLs | href="https://linkedin.com/..." etc. |
| Profile photo | <img class="hero-avatar" src="..."> |
| Experience | #experience — .exp-item blocks |
| Skills | #skills — .skill-list items |
| Projects | #projects — .project-card blocks |
| Education | #education — .edu-item blocks |
| Footer year | <footer> |
- Create a repo named
<username>.github.io - Upload
index.htmlto the root - Go to Settings → Pages → Deploy from branch → main / root
- Site goes live at
https://<username>.github.iowithin a minute or two
- Coding style follows Karpathy principles: think before coding, simplicity first, surgical changes only
- Skills used:
frontend-designfrom the multica-ai skill set - Does not use: mattpocock/skills or thananon/9arm-skills