Sushant Sonbarse Portfolio Website Development by Sushant SonbarseSushant Sonbarse Portfolio Website Development by Sushant Sonbarse

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