Have something to show
Portfolio Site Template: 3 Files, Live in 10 Minutes
Priya reads resumes on her phone between meetings. Aarav's header had a link: aarav-sharma.github.io . She tapped it. Name, one line, three projects with live links, an email button. Forty seconds later she was inside his best project. That is the whole job of this site.
5 min readFree, no email neededUpdated 11 September 2026
What is inside
Priya reads resumes on her phone between meetings. Aarav's header had a link: aarav-sharma.github.io. She tapped it. Name, one line, three projects with live links, an email button. Forty seconds later she was inside his best project. That is the whole job of this site.
index.htmlThe content. Your name, pitch, about, three projects, skills, contact. This is the only file you must edit.style.cssThe look. Dark by default, light theme built in. Change one colour line and the whole site follows.script.jsThirty lines. Theme toggle that remembers the choice, footer year, fade-in on scroll. Delete it and the site still works.README.mdFive lines: how to edit and deploy. Keep it in the repo. Recruiters read READMEs.The 60-second start
- 1Unzip. Double-click index.html. It opens in your browser and works with no internet.
- 2Open the folder in VS Code (File, Open Folder). Edit index.html, save, refresh the browser.
- 3Put your resume PDF in the same folder, named resume.pdf. The "Resume" button already points to it.
index.html, section by section
Each section starts with a comment like <!-- ===== HERO ===== -->. Ctrl+F to jump to it. Replace Aarav's words, keep the tags.
<title>, meta, .brandYour name and role in the title and description (Google and WhatsApp previews show them). Your initials in .brand: "AS." becomes "RK."HERO · .statusWhat you want and from when: "Open to SDE roles · from July 2027". Remove it if you are not looking yet.HERO · h1, .pitchName, then one sentence: what you build, for whom, plus one human detail. Under 25 words. No "passionate".HERO · .hero-linksGitHub, LinkedIn, LeetCode, email. Change the href on each. Delete any you do not have.ABOUT · .about-text, .factsThree short paragraphs: how you started, what you shipped (with numbers), how you work. Then the facts card: college, degree with year and CGPA (if 7.0+), city, internship, email. Delete a row you cannot fill; never write "N/A".PROJECTS · .card × 3Name, two-line description with one number, three to five tags, a GitHub link and a Live link. Same three projects as the resume, same names, same order.SKILLS · .chipsOnly what you can be interviewed on. Six to fourteen chips across the four groups. "Docker (basics)" is honest and fine.CONTACT · .btn.bigYour email, in both the href (mailto:) and the button text. Same email as the resume.style.css and script.js
The look lives in the first 15 lines of style.css. Those are CSS variables: change one value, and every button, link and glow on the page updates.
- Pick one accent. Teal, amber (#f59e0b), violet (#a78bfa), rose (#fb7185) all work on the dark background. Not pure red, not neon green.Check the light-theme accent too: it needs to be darker so white text on buttons stays readable.
- Font: Inter loads from Google Fonts. To change it, edit the <link> in index.html and the font-family line in style.css.
- Phone layout is automatic. The rules at the bottom of style.css (max-width: 640px) stack the cards and buttons. Do not delete them.
script.js
Three jobs, thirty lines: the theme toggle (saves the choice in the browser), the footer year, and the fade-in when you scroll. To remove the toggle, delete the <button class="toggle"> in index.html; the rest keeps working. If you delete script.js entirely, the site still works, just without those three things.
Put it online, free
GitHub Pages hosts a static site for free, with HTTPS, forever. Ten minutes, no credit card.
Go to github.com/new. Repository name: your-username.github.io, exactly. For Aarav that is aarav-sharma.github.io. Public. Tick "Add a README file". Create.
On the repo page click Add file, Upload files. Drag in index.html, style.css, script.js and resume.pdf. Scroll down, click Commit changes.
Wait one to two minutes. Open https://your-username.github.io on your phone. It is live.
Not live? Click Settings, then Pages in the left menu. Under "Build and deployment", Source must be "Deploy from a branch", Branch "main", folder "/ (root)". Save.
To update later: edit the file on GitHub (pencil icon) or upload again. Every commit redeploys within a minute.
Vercel works too. Sign in at vercel.com with GitHub, click Add New, Project, pick the repo, Deploy. You get your-name.vercel.app. Same files, no settings.
Your own domain, later
username.github.io is fine for placements. A domain like aaravsharma.dev costs ₹700 to ₹1,200 a year and looks like a professional. Do it after the site is live, not before.
Buy the domain: Namecheap, GoDaddy or Hostinger. .dev, .in or .me. Your name, no numbers.
In the registrar's DNS page add a CNAME record: host www, value your-username.github.io.
Add four A records for host @ pointing to 185.199.108.153, 185.199.109.153, 185.199.110.153 and 185.199.111.153.
On GitHub: repo Settings, Pages, Custom domain: type www.aaravsharma.dev, Save. Wait up to an hour, then tick Enforce HTTPS.
What to link from the resume
- Header: the portfolio URL next to LinkedIn and GitHub. Written out, and clickable in the PDF.
- Each project's title line: the same Live and Code links the site uses. One place to update, no mismatch.
- LinkedIn: put the URL in Contact info (Website) and add it as a Featured link. It is the first thing Priya taps.
Want this on your phone?
Everything above, as a PDF built to read on a phone the morning of the interview. It costs nothing — we ask for an email so we can send it, and that is all.