A modern, responsive portfolio website showcasing my skills and experience as a React Developer. Built with vanilla HTML, CSS, and JavaScript, featuring a clean design, dark theme support, and optimal performance.
Website: ragini.site
I'm Ragini Mahobiya, a passionate React Developer with 1+ years of experience building scalable, component-based user interfaces using React, Next.js, and TypeScript. Based in Indore, MP, I specialize in converting UI/UX designs into clean, maintainable code while ensuring optimal performance and user experience.
- Modern & Clean Design - Professional layout with smooth animations
- Dark Theme Support - Toggle between light and dark modes with persistent preference
- Fully Responsive - Optimized for all screen sizes (mobile-first approach)
- Smooth Animations - CSS transitions and JavaScript-powered interactions
- Interactive Elements - Hover effects, scroll animations, and dynamic content
- Lighthouse Score 95+ - Optimized for performance, accessibility, and SEO
- Fast Loading - Optimized assets and efficient code structure
- SEO Optimized - Meta tags, structured data, and semantic HTML
- Progressive Web App - PWA support with manifest and service worker
- Cross-browser Compatible - Works seamlessly across all modern browsers
- Vanilla JavaScript - No frameworks, pure ES6+ JavaScript
- CSS Grid & Flexbox - Modern layout techniques
- CSS Variables - Dynamic theming system
- Intersection Observer - Scroll-based animations
- Local Storage - Theme preference persistence
- Form Validation - Client-side form validation with user feedback
- HTML5 - Semantic markup and accessibility
- CSS3 - Modern styling with Grid, Flexbox, and animations
- JavaScript (ES6+) - Interactive functionality and DOM manipulation
- CSS Variables - Dynamic theming
- Google Fonts - Inter font family
- Font Awesome - Icon library
- Responsive Design - Mobile-first approach
- Meta Tags - Open Graph and Twitter Card support
- Structured Data - JSON-LD for better SEO
- Sitemap & Robots.txt - Search engine optimization
- PWA Manifest - Progressive Web App support
my_portfolio/
├── index.html # Main HTML file
├── styles.css # CSS styles with theme support
├── script.js # JavaScript functionality
├── manifest.json # PWA manifest
├── robots.txt # Search engine directives
├── sitemap.xml # Site structure for SEO
└── README.md # Project documentation
- A modern web browser
- A local web server (optional, for development)
-
Clone the repository
git clone https://github.com/raginimahobiya/portfolio.git cd portfolio -
Open locally
- Simply open
index.htmlin your browser, or - Use a local server for better development experience:
# Using Python python -m http.server 8000 # Using Node.js (http-server) npx http-server # Using PHP php -S localhost:8000
- Simply open
-
Access the website
- Direct: Open
index.htmlin browser - Local server: Navigate to
http://localhost:8000
- Direct: Open
- Professional introduction with animated typing effect
- Call-to-action buttons
- Social media links
- Animated profile placeholder
- Personal introduction and background
- Contact information
- Professional summary
- Frontend Technologies: React, Next.js, TypeScript, JavaScript, HTML5
- Styling & Design: CSS3, SCSS/SASS, Responsive Design, Bootstrap, Tailwind CSS, Figma
- Development Tools: Git, Windsurf, Cursor, VS Code
- AI & Productivity Tools: ChatGPT, DeepSeek, V0 (Vercel)
- Software Development Engineer at Walkover Web Solutions (Aug 2024 – Present)
- Tech Intern at Supersourcing Technology (Mar 2024 – Aug 2024)
- Personal Expense Tracker - React 19, TypeScript, React Router
- Portfolio Website - React, SCSS, Vite
- Master of Science in Environmental Science - Indira Gandhi National Tribal University (2020-2022)
- Email: raginimahobiya07@gmail.com
- Phone: +91 9171358762
- Location: Indore, MP, India
- GitHub: github.com/raginimahobiya
- LinkedIn: linkedin.com/in/raginimahobiya
The website uses CSS variables for easy theme customization. Main colors can be modified in styles.css:
:root {
--primary-color: #3b82f6; /* Main brand color */
--primary-dark: #2563eb; /* Darker shade */
--secondary-color: #64748b; /* Secondary elements */
--accent-color: #f59e0b; /* Accent highlights */
}- Personal Information: Update contact details in HTML
- Experience: Modify timeline items in the experience section
- Projects: Add/update project cards with your work
- Skills: Update skill categories and items
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
- Lazy Loading - Images and content load as needed
- CSS Optimization - Efficient selectors and minimal reflows
- JavaScript Optimization - Event delegation and throttling
- Font Loading - Optimized Google Fonts loading
- Asset Compression - Minified and optimized files
- Content Security Policy - XSS protection
- HTTPS Ready - Secure connection support
- Input Validation - Form security measures
- Push code to GitHub repository
- Enable GitHub Pages in repository settings
- Select source branch (main/master)
- Connect GitHub repository
- Set build command: (none needed)
- Set publish directory:
/
- Import GitHub repository
- Deploy with default settings
The website is ready for analytics integration:
- Google Analytics
- Google Search Console
- Performance monitoring tools
While this is a personal portfolio, suggestions and feedback are welcome:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is open source and available under the MIT License.
- Email: raginimahobiya07@gmail.com
- LinkedIn: Ragini Mahobiya
- GitHub: @raginimahobiya
Built with ❤️ by Ragini Mahobiya
Last updated: November 2024