ATS-Friendly-Resume — HTML 作品集模板

SHA-256: 38a3ed5228839cdc5ac728647f4cf354777b46313db449647c9d559f906f2e56

2026-10-13T16:26:10.946Z

# Two-Column HTML Resume Template

A clean, print-ready, two-column resume template built with plain HTML and CSS —
no build tools, no frameworks, no dependencies beyond two CDN links (Google
Fonts and Font Awesome icons).

Designed to look like a modern, recruiter-friendly resume: a header banner with
photo and contact icons, a wider left column for Summary / Experience /
Education / Projects, and a sidebar for Skills / Certifications / Languages /
Awards.

## 🌐 Live Demo

[Live Demo](https://asvanth16.github.io/ATS-Friendly-Resume/)

## Preview

![Resume Preview](preview.png)

Open `index.html` in any browser to see it rendered. Use your browser's
**Print → Save as PDF** (A4, no margins, background graphics enabled) to export
a polished one-page PDF.

## Files

```
.
├── index.html   → the resume content (edit this with your own info)
├── style.css    → all styling, with CSS variables at the top for quick theming
└── README.md    → this file
```

## Getting Started

1. Clone or download this repo.
2. Open `index.html` in a text editor and replace the placeholder content
   (name, contact info, summary, experience, education, projects, skills,
   certifications, languages, awards) with your own.
3. Replace `photo-placeholder.jpg` with your own photo (same filename, or
   update the `src` in the `<img class="profile-photo">` tag). To go
   photo-less, just delete that `<img>` element and the header will resize
   automatically.
4. Open `index.html` in a browser to preview, then print to PDF when ready.

## Customizing the Look

All colors, fonts are controlled by CSS custom properties at the top of
`style.css`:

```css
:root {
  --color-primary: #0d47a1;        /* Name, section headers, borders */
  --color-primary-light: #3b82f6;  /* Icons, links */
  --color-accent: #29b6f6;         /* Skill category labels, language dots */
  --color-title: #42a5f5;          /* Job title under name */
  ...
  --font-family: 'Inter', sans-serif;
}
```

Change these values to re-theme the entire resume without touching any other
CSS. For example, to switch to a green theme:

```css
--color-primary: #1b5e20;
--color-primary-light: #2e7d32;
--color-accent: #43a047;
--color-title: #388e3c;
```

To use a different font, swap the Google Fonts `<link>` in `index.html` and
update `--font-family` in `style.css` to match.

## Sections Included

- Header (name, title, photo, contact icons: email, GitHub, LinkedIn, phone, location)
- Summary
- Experience (with bullet points)
- Education (with GPA/percentage badge)
- Projects (with source-code links and bullet points)
- Skills (grouped by category, pill-style tags)
- Certifications
- Training / Courses
- Languages (with dot-based proficiency rating)
- Awards

Feel free to add, remove, or reorder sections — each one is a self-contained
block, so deleting a `<div class="section-header">...</div>` plus its content
block removes it cleanly.

## Notes

- Built for A4 print sizing (`@page { size: A4; }` in `style.css`). For US
  Letter, change this to `size: letter;`.
- Icons use [Font Awesome](https://fontawesome.com/) via CDN — no install needed.
- Font is [Inter](https://fonts.google.com/specimen/Inter) via Google Fonts CDN.
- This is a static template — no JavaScript, no build step, works by just
  opening the HTML file.

## License

MIT — free to use, modify, and share.