Sushant Sonbarse Portfolio Website Development

Sushant Sonbarse

Completed work

DevOps Engineer

Web Developer

AlpineJS

Astro

GitHub

Computer Software

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

Email: sushantsonbarse07@gmail.com

LinkedIn: sushant-sonbarse

GitHub: sonbarse17

⭐ Star this repository if you found it helpful!

Like this project

Completed work

Posted Jul 13, 2025

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

Likes

Views

Timeline

Jul 1, 2025 - Jul 5, 2025