Your portfolio project

What recruiters look at

A recruiter or developer opens your portfolio for a minute or two, often on a phone. They check: does the link work, does it look clean and readable, are there 2 or 3 projects that solve a real problem, is the code on GitHub with a clear README, and do the commits look like real work. They do not read every line of your code.

Plan the portfolio site

• Header: your name and role ("Front-end developer"), with a nav to the sections.
• About: two or three honest lines and where you are based.
• Projects: a card for each one with a screenshot, title, the problem it solves in one line, the tech used, and Live and Code links.
• Skills: only what you can explain in an interview.
• Contact: email, GitHub, LinkedIn and a link to your resume PDF.

<article class="project">
  <img src="images/expense.webp" alt="Expense tracker showing spending by category" width="640" height="400">
  <h3>Hostel expense tracker</h3>
  <p>Tracks mess, travel and book costs in rupees. Data stays on the phone with localStorage.</p>
  <p>HTML, CSS, JavaScript</p>
  <a href="https://your-name.github.io/expense-tracker/">Live site</a>
  <a href="https://github.com/your-name/expense-tracker">Code</a>
</article>

Pick 2 or 3 real projects

Many public APIs need a key. If a key must stay secret, it cannot sit in front-end code (you learned why with VITE_ variables). Prefer APIs that need no key or give a key meant for browser use, and read their terms.

A README that sells the project

# Hostel Expense Tracker

Track daily spending in rupees and see where the money goes each month.

Live: https://your-name.github.io/expense-tracker/

![Screenshot of the monthly summary](docs/screenshot.png)

## Features
- Add, edit and delete expenses; data is saved in localStorage
- Monthly total and spending by category

## Tech used
HTML, CSS, JavaScript, Vite

## How to run
npm install
npm run dev

## What I learned
Using reduce for totals, and testing with a keyboard only.

Clean Git history and good scores

Make small commits with clear messages, like "Add monthly total to expense list", not "final final 2". Keep node_modules, dist and .env out of Git. Use branches and pull requests even when you work alone; you get preview deploys for free. Then run Lighthouse in mobile mode: Accessibility, Best Practices and SEO can usually reach high scores with careful work, and Performance should be good too. Test with the keyboard only and on a real 360 px wide phone, because mobile-first is how most Indian users browse.

GitHub profile and LinkedIn

• GitHub: a clear photo, a short bio, your best 3 repos pinned, and a profile README (a repo with the same name as your username).
• Every pinned repo has a description, a live link in the About box and a README.
• LinkedIn: a headline like "Front-end developer | HTML, CSS, JavaScript, React", your portfolio in the Featured section, and a short post about each project with a screenshot or short screen recording.
• Use the same name, photo and links everywhere, so people know it is you.