Sushant Sonbarse Portfolio Website Development

Sushant

Sushant Sonbarse

Sushant Sonbarse - DevOps Engineer Portfolio

A modern, professional portfolio website built with Astro, Tailwind CSS, and Alpine.js.

πŸš€ Features

Modern Tech Stack: Astro + Tailwind CSS + Alpine.js
Fully Static: No backend dependencies
Dark/Light Mode: Toggle with persistent preference
Responsive Design: Mobile-first approach
Smooth Animations: Scroll-triggered animations
SEO Optimized: Meta tags and semantic HTML
Fast Loading: Optimized images and minimal JavaScript
Accessible: ARIA labels and semantic markup

πŸ› οΈ Tech Stack

Framework: Astro v4.16+ - Static Site Generator
Styling: Tailwind CSS v3.4+ - Utility-first CSS
Interactivity: Alpine.js v3.14+ - Minimal JavaScript framework
Fonts: Inter - Modern sans-serif
Icons: Official SVG icons for tools + Emoji

πŸ“¦ Installation

Clone the repository
git clone https://github.com/sonbarse17/sushant-portfolio.git
cd sushant-portfolio
Install dependencies
npm install
Start development server
npm run dev
Build for production
npm run build
Preview production build
npm run preview

πŸš€ Deployment

GitHub Pages

Update astro.config.mjs with your repository name
Push to GitHub
Enable GitHub Pages in repository settings
Set source to "GitHub Actions"

Netlify

Connect your GitHub repository
Build command: npm run build
Publish directory: dist

Vercel

Import your GitHub repository
Framework preset: Astro
Deploy

πŸ“ Project Structure

/
β”œβ”€β”€ public/
β”‚ β”œβ”€β”€ images/
β”‚ β”œβ”€β”€ icons/
β”‚ β”‚ β”œβ”€β”€ aws.svg
β”‚ β”‚ β”œβ”€β”€ docker.svg
β”‚ β”‚ β”œβ”€β”€ kubernetes.svg
β”‚ β”‚ └── ... (other tool icons)
β”‚ └── sushant_sonbarse_resume.pdf
β”œβ”€β”€ src/
β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”œβ”€β”€ About.astro
β”‚ β”‚ β”œβ”€β”€ Contact.astro
β”‚ β”‚ β”œβ”€β”€ Hero.astro
β”‚ β”‚ β”œβ”€β”€ Projects.astro
β”‚ β”‚ └── Skills.astro
β”‚ β”œβ”€β”€ layouts/
β”‚ β”‚ └── Layout.astro
β”‚ └── pages/
β”‚ └── index.astro
β”œβ”€β”€ astro.config.mjs
β”œβ”€β”€ tailwind.config.mjs
└── package.json

🎨 Customization

Colors

Update colors in tailwind.config.mjs:
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
}
}

Content

Personal Info: Update in respective component files
Skills: Modify src/components/Skills.astro
Projects: Update src/components/Projects.astro
Resume: Replace public/sushant_sonbarse_resume.pdf
Tool Icons: Official SVG icons in public/icons/ directory

Dark Mode

Dark mode is implemented using:
Tailwind's dark: classes
Alpine.js for toggle functionality
localStorage for persistence

πŸ“± Responsive Design

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

⚑ Performance

Lighthouse Score: 95+ on all metrics
Image Optimization: Responsive images with proper loading
CSS: Purged and minified with Tailwind
JavaScript: Minimal Alpine.js for interactivity

πŸ”§ Configuration

SEO

Update meta tags in src/layouts/Layout.astro:
<title>{title}</title>
<meta name="description" content={description} />
<meta name="keywords" content="DevOps, AWS, Kubernetes..." />

Analytics (Optional)

Add Google Analytics to src/layouts/Layout.astro:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

πŸ“„ License

This project is open source and available under the MIT License.

🀝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

πŸ“ž Contact

Sushant Sonbarse
GitHub: sonbarse17
⭐ Star this repository if you found it helpful!
Like this project

Posted Jul 13, 2025

Developed a modern portfolio website using Astro, Tailwind CSS, and Alpine.js.

Likes

0

Views

1

Timeline

Jul 1, 2025 - Jul 5, 2025