Skip to content

QUICK_START.md

Latest commit

 

History

History
197 lines (138 loc) · 4.13 KB

QUICK_START.md

File metadata and controls

197 lines (138 loc) · 4.13 KB

🎯 Quick Start Guide

Get Your Portfolio Live in 10 Minutes!

Step 1: Update Your Information (5 minutes)

Open index.html and search for these TODO comments, then replace with your info:

Personal Info

<!-- Search for: "Your Name" -->
<span class="logo-text">YourName</span> → Your actual name
<span class="hero-name">Your Name</span> → Your full name
<h3>Your Name | Full Stack Developer...</h3>
→ Your title

<!-- Search for: "TODO: Add your real bio" -->
Replace the placeholder bio with your actual story

Social Links

<!-- Update all href attributes: -->
href="https://github.com/sujitKrS04" → Your GitHub
href="https://linkedin.com/in/yourprofile" → Your LinkedIn
href="https://twitter.com/yourhandle" → Your Twitter
href="mailto:your.email@example.com" → Your email

Contact Info

<p>your.email@example.com</p>
→ Your real email
<p>+1 (555) 123-4567</p>
→ Your phone
<p>Your City, Country</p>
→ Your location

Step 2: Add Your 4 Projects (3 minutes)

For each project card, update:

  1. Project Name
<h3 class="project-title">Your Project Name 1</h3>
  1. Description
<p class="project-description">Your actual project description here</p>
  1. Technologies
<span class="tag">React</span>
<span class="tag">Node.js</span>
<!-- Add/remove tags as needed -->
  1. Links
<a href="https://your-project-1.com" target="_blank">
  <a href="https://github.com/sujitKrS04/project-1" target="_blank"></a
></a>

Step 3: Update Skills (1 minute)

In the Skills section, adjust the percentages to match your actual skill levels:

<div class="skill-progress" data-progress="95"></div>
<!-- Change 95 to your actual proficiency (0-100) -->

Step 4: Test Locally (30 seconds)

Open index.html in your browser or:

# Right-click index.html → Open with → Browser
# OR use Live Server in VS Code

Step 5: Deploy to Netlify (30 seconds)

Option A: Drag & Drop

  1. Go to https://app.netlify.com/drop
  2. Drag your entire Portfolio folder
  3. Done! 🎉

Option B: GitHub

  1. Push to GitHub (if not already done)
  2. Go to Netlify → "Add new site" → "Import from Git"
  3. Select your repo
  4. Click "Deploy"

📸 Optional: Add Images

Profile Photo

  1. Add profile.jpg to images/ folder
  2. In HTML, replace:
<span class="profile-emoji">👨‍💻</span>
<!-- With: -->
<img src="images/profile.jpg" alt="Your Name" />

Project Screenshots

  1. Add project-1.jpg, project-2.jpg, etc. to images/
  2. Replace:
<span class="project-icon">🚀</span>
<!-- With: -->
<img src="images/project-1.jpg" alt="Project 1" />

🎨 Quick Color Change

Want different colors? Edit css/style.css:

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

Try these popular gradients:

  • Purple/Pink: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
  • Blue/Teal: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
  • Orange/Red: linear-gradient(135deg, #fa709a 0%, #fee140 100%)
  • Green/Blue: linear-gradient(135deg, #0ba360 0%, #3cba92 100%)

✅ Final Checklist

Before deploying, make sure you've:

  • Updated your name everywhere
  • Added all 4 real projects
  • Updated social media links
  • Changed contact information
  • Adjusted skills and percentages
  • Added your bio
  • Tested on mobile (Chrome DevTools)
  • Checked all links work
  • Added project images (optional)
  • Added profile photo (optional)

🚀 You're Ready to Launch!

Your portfolio is now ready to impress recruiters and clients!

Share it on:

  • LinkedIn profile
  • Resume/CV
  • GitHub profile README
  • Twitter/X
  • Email signature

Pro Tips:

  • Add Google Analytics to track visitors
  • Update projects regularly
  • Add a blog section (optional)
  • Get feedback from friends/mentors
  • Share it in developer communities

Need Help? Open an issue on GitHub or check the full README.md

Good luck with your portfolio! 🌟