Git Notes
Build a developer portfolio website while demonstrating Git best practices. Use proper commits, branching, and deployment to showcase both coding and Git skills.
Your GitHub profile is your developer resume. When hiring managers look at candidates, they do not just look at what you built — they look at how you built it. A portfolio repository with messy commits like "fix", "update", "stuff" tells them you are sloppy. A repository with clean conventional commits, professional branching, and automated deployment tells them you understand professional workflows.
This project builds a portfolio website while simultaneously demonstrating mastery of Git, GitHub, and modern deployment practices. The repository itself is part of your portfolio — it proves you know how to use these tools professionally.
Project Goals
- Build a professional, deployable portfolio website
- Demonstrate clean, meaningful Git history
- Show branching workflow mastery through feature branches
- Set up automated deployment via GitHub Actions
- Use GitHub features professionally (README, Issues, Projects)
Repository Setup
Start with intention — even the initial commit matters:
# Create the project
mkdir developer-portfolio
cd developer-portfolio
git init
# Professional initial commit
git commit --allow-empty -m "chore: initialize repository"
# Set up the project structure
npx create-next-app . --typescript --tailwind
# Or your preferred stack: Astro, Hugo, Gatsby, etc.
git add .
git commit -m "chore: scaffold Next.js project with TypeScript and Tailwind"
# Create development branch
git checkout -b develop
# Push to GitHub
git remote add origin git@github.com:yourname/developer-portfolio.git
git push -u origin main
git push -u origin developDemonstrating Clean Commit History
Every commit in your portfolio tells a story to potential employers. Make each one count:
# Each commit is atomic and descriptive
git commit -m "feat: add responsive navigation with mobile hamburger menu"
git commit -m "feat: add hero section with animated introduction text"
git commit -m "feat: add project cards with hover animations and live links"
git commit -m "style: implement dark mode toggle with CSS custom properties"
git commit -m "feat: add contact form with client-side validation"
git commit -m "a11y: add ARIA labels and keyboard navigation support"
git commit -m "perf: optimize images with next/image and lazy loading"
git commit -m "test: add component tests for navigation and project cards"
git commit -m "docs: add comprehensive README with setup instructions"
git commit -m "ci: add GitHub Actions workflow for automated deployment"Notice the variety of commit types — this shows an employer you think about performance, accessibility, testing, and documentation, not just features.
Feature Branch Workflow
Develop each section of your portfolio in its own branch:
# Plan your branches (each represents a portfolio section)
feature/hero-section
feature/project-gallery
feature/skills-section
feature/experience-timeline
feature/contact-form
feature/blog-section
feature/dark-mode
hotfix/mobile-responsive-fixesWorking example:
# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/project-gallery
# Develop with multiple focused commits
git commit -m "feat: add project card component with thumbnail"
git commit -m "feat: add project data structure and sample entries"
git commit -m "style: add card hover effects and transition animations"
git commit -m "feat: add filter buttons for project categories"
git commit -m "test: add snapshot tests for project gallery"
# Push and create PR
git push -u origin feature/project-gallery
# Create PR: develop ← feature/project-gallery
# Self-review, then mergeProfessional README
Your README is the first thing visitors see. Make it exceptional:
Automated Deployment with GitHub Actions
Using GitHub Features Professionally
Issues: Create issues for each planned feature, even on a personal project. This shows organizational thinking.
Projects Board: Set up a Kanban board (Todo → In Progress → Done) to track your portfolio development.
Tags: Use semantic versioning for meaningful milestones:
git tag -a v1.0.0 -m "Initial portfolio launch"
git tag -a v1.1.0 -m "Add blog section"
git tag -a v1.2.0 -m "Add project filtering and search"
git push --tagsWhat Employers Look For in Your Repository
When hiring managers review your GitHub portfolio, they evaluate:
- Commit history quality — Are messages clear and meaningful?
- Branching practice — Do you use feature branches and PRs?
- Code organization — Is the project structure logical?
- Documentation — Can someone else set up and understand the project?
- Testing — Do you write tests?
- CI/CD — Is deployment automated?
- Activity — Is the repository maintained and updated?
Common Mistakes
Mistake 1: A single massive "initial commit" with everything. Build up your history incrementally to show the development process.
Mistake 2: Leaving the default create-react-app README. A custom README shows you care about communication.
Mistake 3: Not deploying. A live URL transforms your portfolio from "code I wrote" to "a product I shipped."
Mistake 4: Abandoning the repository after creation. Regular updates (monthly minimum) show ongoing engagement and learning.
Interview Questions
Q1: How does your Git history demonstrate good practices?
I use conventional commits with clear types and descriptions, feature branches for each portfolio section, squash-merge for clean history, tagged releases for milestones, and a PR workflow even for solo development to maintain discipline.
Q2: What Git features did you use in this project?
Feature branches, conventional commits, semantic version tags, GitHub Actions for CI/CD, branch protection on main, automated deployment on merge, and a project board for task management.
Q3: How do you keep your portfolio repository professional?
Clean commit messages, well-organized code with clear directory structure, comprehensive README with badges, deployed and maintained regularly, responsive to any issues filed, and regular dependency updates.
Q4: What would you show an interviewer in your Git history?
The branching strategy showing logical feature development, commit message quality demonstrating professional habits, PR descriptions showing communication skills, the CI/CD pipeline demonstrating DevOps awareness, and consistent activity over time.
Q5: How often should you update your portfolio repository?
At minimum monthly — add new projects, update existing ones, keep dependencies current, and improve content. Regular activity shows ongoing growth and engagement with the developer community.
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for Portfolio Project with Git - Showcase Your Skills.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this Git & GitHub topic.
Search Terms
git-github, git & github, git, github, projects, portfolio, project, with
Related Git & GitHub Topics