// Step-by-step:
## 1. Find a Project
- github.com/topics/good-first-issue
- Look for projects you actually USE:
React, Vite, Zustand, Vitest,
testing-library, MDN Web Docs
- Filter: "good first issue" label
- Pick something achievable in 1-2hrs
## 2. Understand the Project
- Read README.md
- Read CONTRIBUTING.md
- Look at recent merged PRs
(understand the style)
- Set up the dev environment locally
- Run the test suite
## 3. Fork, Branch, Fix
git fork [repo]
git clone [your-fork]
git switch -c fix/issue-1234
# Make your changes
# Run tests
# Follow project's linting rules
git commit -m "Fix typo in docs (#1234)"
git push origin fix/issue-1234
## 4. Submit PR
- Reference the issue: "Fixes #1234"
- Describe what you changed and why
- Include screenshots if visual
- Be patient: review may take days
- Respond to feedback constructively
## 5. Celebrate
// Your code is now in a project
// used by thousands (or millions).
// You're an open source contributor.
// GitHub Profile:
- Pin PixelCraft as #1 project
- Write a profile README
(github.com/[you]/[you])
- Ensure contribution graph shows
consistent activity
- Add topics/tags to PixelCraft repo
// LinkedIn:
- Headline: "Full-Stack Developer |
React · TypeScript · Node.js"
- About: 3-4 sentences about what
you build and what excites you
- Experience: add PixelCraft project
with quantified accomplishments
- Skills: React, TypeScript, Node.js,
MongoDB, Docker, CI/CD, REST APIs
// Portfolio Site (if you have one):
- Hero: name + one-line identity
- Projects: PixelCraft with live demo
link, screenshots, case studies
- About: your story + what you're
looking for
- Contact: email, GitHub, LinkedIn
// Everything links to everything:
// GitHub → Portfolio → LinkedIn
// LinkedIn → GitHub → Portfolio
// Portfolio → Live Demo → Case Studies
// Resume structure:
## [Your Name]
Email | GitHub | Portfolio | LinkedIn
## SKILLS
TypeScript, React, Node.js, Express,
MongoDB, Redis, Docker, Git, CI/CD,
Vitest, Playwright, REST APIs
## PROJECTS
### PixelCraft — Web-Based Image Editor
github.com/you/pixelcraft | live demo
- Built production-grade image editor
with canvas-based editing, real-time
filters, and auto-enhance feature
- Improved gallery load time from 8.2s
to 1.1s through lazy loading, WebP
conversion, and code splitting
- Designed plugin architecture enabling
third-party filter extensions with
sandboxed API and permission system
- Achieved Lighthouse score of 94 and
WCAG 2.1 AA compliance with zero
accessibility violations
- Implemented CI/CD pipeline: 200+
automated tests, Docker deployment,
Sentry error tracking
## EDUCATION
Break && Build Academy
Full-Stack Development (128 sessions)
// Rules:
// - One page. Always one page.
// - Quantify: numbers prove impact
// - Action verbs: Built, Designed,
// Improved, Implemented, Achieved
// - Match job description language
// - No "responsible for" — show impact
// ROLES THAT MATCH YOUR SKILLS:
Full-Stack Developer
→ Your strongest fit
→ React + Node.js + MongoDB + DevOps
→ Most PixelCraft skills transfer
Frontend Engineer
→ If you loved the React/Canvas/UX work
→ Deeper: performance, accessibility,
design systems, animation
Backend Engineer
→ If you loved APIs/databases/DevOps
→ Deeper: distributed systems, queues,
scaling, observability
DevOps / Platform
→ If you loved Docker/CI/CD/monitoring
→ Deeper: Kubernetes, Terraform, SRE
// NEGOTIATION BASICS:
1. Research the range first
→ levels.fyi, glassdoor, blind
→ Know the 25th/50th/75th percentile
2. Never give the first number
→ "What's the range for this role?"
→ "I'm flexible — what's budgeted?"
3. Negotiate total compensation
→ Base + bonus + equity + benefits
→ Remote flexibility has real value
4. Get it in writing
→ Verbal offers aren't offers
→ "I'm excited! Can you send
the written offer?"
5. It's okay to ask for time
→ "Can I have until Friday
to consider?"
// Questions to ask in interviews:
## Engineering Culture
"How do you do code reviews?"
"What does your CI/CD pipeline
look like?"
"How do you handle incidents?"
"What's your testing philosophy?"
## Team & Growth
"How big is the team I'd join?"
"Who would I learn from?"
"What does the promotion process
look like?"
"What's the on-call rotation?"
## Product & Impact
"What are the team's goals this
quarter?"
"How do engineers influence product
decisions?"
"What's the tech debt situation?"
## Red Flags to Watch For:
❌ "We don't really do code reviews"
❌ "We deploy manually"
❌ "There aren't many tests"
❌ "You'll figure it out"
(no onboarding)
❌ Interviewer can't explain what
the team is building
## Green Flags:
✅ Structured onboarding
✅ Regular 1:1s with manager
✅ Engineers choose their tools
✅ Blameless postmortems
✅ Interviewer is genuinely excited
about their work
Open source is how modern software is built.
React, Node.js, TypeScript, MongoDB, Redis, Docker, Vite, Zustand — every tool in PixelCraft's stack is open source. Contributing back isn't charity; it's participating in the ecosystem that makes your work possible.