Skip to content

README.md

Latest commit

 

History

History
161 lines (112 loc) · 3.83 KB

README.md

File metadata and controls

161 lines (112 loc) · 3.83 KB

Shivani Waikar - Technical Writer Portfolio

A modern, developer-style portfolio website showcasing technical writing expertise, built with vanilla HTML, CSS, and JavaScript.

🚀 Features

  • Dark Developer Theme with animated gradient background
  • Fully Responsive - works on all devices
  • Smooth Animations - scroll effects, hover states, particle background
  • ATS-Friendly Design - clean, accessible structure
  • Fast Loading - no frameworks, minimal dependencies

📁 Project Structure

portfolio-site/
├── index.html          # Main HTML file
├── style.css           # Styling and animations
├── script.js           # Interactive features
└── README.md           # This file

🌐 Deploying to GitHub Pages

Step 1: Create GitHub Repository

  1. Go to https://github.com/new
  2. Repository name: shivanisathe25.github.io (IMPORTANT: use this exact format with your username)
  3. Set to Public
  4. Click "Create repository"

Step 2: Upload Files

Option A: Using Git (Recommended)

# Navigate to your portfolio folder
cd /home/ssathe/portfolio-site

# Initialize git
git init

# Add all files
git add .

# Commit
git commit -m "Initial commit: Portfolio website"

# Add remote (replace with your repo URL)
git remote add origin https://github.com/shivanisathe25/shivanisathe25.github.io.git

# Push to GitHub
git branch -M main
git push -u origin main

Option B: Using GitHub Web Interface

  1. Go to your repository
  2. Click "Add file" → "Upload files"
  3. Drag and drop: index.html, style.css, script.js
  4. Commit changes

Step 3: Enable GitHub Pages

  1. Go to repository Settings
  2. Scroll to "Pages" (left sidebar)
  3. Under "Source", select main branch
  4. Click "Save"
  5. Wait 2-3 minutes
  6. Your site will be live at: https://shivanisathe25.github.io

✏️ Customization

Update Content

Personal Info:

  • Edit index.html lines 35-40 (hero section)
  • Update email/LinkedIn/GitHub links (lines 235-250)

Portfolio Samples:

  • Add real work samples by editing portfolio cards (lines 170-220)
  • Replace placeholder links with actual documentation

About Section:

  • Modify bio text (lines 70-80)

Change Colors

Edit style.css variables (lines 8-15):

:root {
    --bg-primary: #0a0e27;        /* Main background */
    --accent-primary: #00d9ff;    /* Accent color */
    --accent-secondary: #7c3aed;  /* Secondary accent */
}

Add Resume Download

  1. Add your resume PDF to the repository
  2. Update the "Download Resume" button: 
    <a href="resume.pdf" download class="btn btn-secondary">Download Resume</a>

🔧 Local Development

Open index.html in a browser to preview locally:

# Simple Python server (if you have Python)
python3 -m http.server 8000

# Then open: http://localhost:8000

Or just double-click index.html to open in browser.

📱 Responsive Breakpoints

  • Desktop: 1200px+
  • Tablet: 768px - 1199px
  • Mobile: < 768px

🎨 Design Features

  • Animated gradient background with particles
  • Glitch effect on hero title
  • Smooth scroll navigation
  • Intersection Observer for fade-in animations
  • Hover effects on all interactive elements

🐛 Troubleshooting

Site not showing up?

  • Check GitHub Pages is enabled (Settings → Pages)
  • Ensure repository name is username.github.io
  • Wait 5-10 minutes for deployment

Broken links?

  • Make sure all file names match exactly
  • Check that files are in the same directory

Want custom domain?

  • Buy domain (e.g., shivaniwaikar.com)
  • Add CNAME file with your domain
  • Update DNS settings (A records to GitHub IPs)

📄 License

Free to use and modify for personal portfolios.

📧 Contact

Questions? Reach out at shivaniwaikar25@gmail.com

Built with ❤️ using HTML, CSS, and vanilla JavaScript