diff --git a/Answers to technical questions.md b/Answers to technical questions.md
new file mode 100644
index 0000000..b2d1e02
--- /dev/null
+++ b/Answers to technical questions.md
@@ -0,0 +1,42 @@
+# Technical Interview Responses
+
+## Coding Test Duration & Improvements
+
+**Time Spent:** Approximately 4 hours
+
+**Completed Features:**
+- PHP and MySQL backend with full CRUD functionality
+- Responsive frontend using Bootstrap, jQuery, and custom CSS
+- Tab/accordion navigation system
+- Synced carousel slider
+- Image preview functionality
+
+**Potential Improvements with More Time:**
+- Enhanced input validation and security measures (prepared statements for SQL injection prevention)
+- Comprehensive unit testing suite
+- Improved accessibility features
+- Image upload functionality with automatic resizing and caching
+- JavaScript code refactoring for better modularity and maintainability
+
+## Performance Issue Troubleshooting
+
+**Approach to Tracking Production Performance Issues:**
+1. **Server Resource Analysis:** Monitor CPU, memory, and disk usage
+2. **Log Examination:** Review error logs and identify slow operations
+3. **Database Optimization:** Analyze query performance and inefficiencies
+4. **Frontend Diagnostics:** Use browser developer tools to identify loading issues, network latency, and JavaScript bottlenecks
+5. **Code Profiling:** Implement additional logging to pinpoint slow operations
+
+**Real-World Experience:** Successfully optimized database queries and implemented caching strategies that significantly improved page load times in previous projects.
+
+## Personal Profile (JSON Format)
+
+```json
+{
+ "name": "Meghna Pujari",
+ "role": "Full Stack Developer",
+ "skills": ["PHP", "JavaScript", "Bootstrap", "MySQL", "jQuery"],
+ "experience": "Building CRUD apps with responsive UIs and optimized backends",
+ "strengths": ["Clean code", "Performance tuning", "UI/UX", "Debugging"],
+ "workStyle": "Practical, detail-oriented, and user-focused"
+}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..c608bd2
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,392 @@
+:root {
+ --primary-blue: #003153;
+ --accent-blue: #007bff;
+ --light-blue: #1e88e5;
+ --text-light: #ffffff;
+ --text-muted: #b0bec5;
+ --card-bg: rgba(255, 255, 255, 0.1);
+ --border-light: rgba(255, 255, 255, 0.2);
+}
+
+body {
+ background-color: var(--primary-blue) !important;
+ color: var(--text-light);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+}
+
+/* Header Section */
+.header-section {
+ background: linear-gradient(135deg, var(--primary-blue) 0%, #002744 100%);
+ padding: 3rem 0;
+ border-bottom: 1px solid var(--border-light);
+}
+
+.header-section h2 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: var(--text-light);
+}
+
+.header-section p {
+ font-size: 1.2rem;
+ color: var(--text-muted);
+ max-width: 600px;
+ margin: 0 auto;
+}
+.diagram-section {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.diagram-section h4 {
+ color: var(--accent-blue);
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.infrastructure-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--text-light);
+ margin-bottom: 1rem;
+}
+
+.learn-more-btn {
+ background: linear-gradient(45deg, var(--accent-blue), var(--light-blue));
+ color: white;
+ padding: 12px 30px;
+ border: none;
+ border-radius: 25px;
+ font-weight: 600;
+ text-decoration: none;
+ display: inline-block;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+}
+
+.learn-more-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
+ color: white;
+}
+
+/* Stock Images Section */
+.stock-section {
+ margin-top: 3rem;
+ text-align: center;
+}
+
+.stock-section h5 {
+ color: var(--text-muted);
+ font-size: 1rem;
+ margin-bottom: 1.5rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.stock-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.stock-item {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+ border: 1px solid var(--border-light);
+ transition: all 0.3s ease;
+}
+
+.stock-item:hover {
+ background: rgba(255, 255, 255, 0.1);
+ transform: translateY(-3px);
+}
+
+.stock-item img {
+ width: 100%;
+ height: 80px;
+ object-fit: cover;
+ border-radius: 5px;
+ margin-bottom: 0.5rem;
+}
+
+.stock-item small {
+ color: var(--text-muted);
+ font-size: 0.8rem;
+}
+
+/* Tabs Styling */
+#sectionTabs .list-group-item {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-light);
+ color: var(--text-light);
+ padding: 1.2rem 1.5rem;
+ margin-bottom: 0.5rem;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+#sectionTabs .list-group-item:hover {
+ background: rgba(31, 72, 238, 0.944);
+ border-color: var(--accent-blue);
+}
+
+#sectionTabs .list-group-item.active {
+ background: rgba(255, 255, 255, 0.651);
+ border-color: whitesmoke;
+ color: rgb(252, 251, 251);
+ box-shadow: 0 4px 10px rgba(91, 89, 89, 0.961); /* soft grey shadow */
+ transform: scale(1.02);
+}
+
+
+/* Carousel Styling */
+.carousel-item {
+ position: relative;
+ padding: 3rem 2rem;
+ background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
+ border-radius: 15px;
+ border: 1px solid var(--border-light);
+ backdrop-filter: blur(8px);
+ min-height: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ color: var(--text-light);
+ transition: background 0.6s ease, transform 0.3s ease;
+}
+
+.carousel-item.active {
+ transform: scale(1.02);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.carousel-item h4 {
+ color: var(--text-light);
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+}
+
+.carousel-item h6 {
+ color: var(--text-muted);
+ font-size: 1.1rem;
+ margin-bottom: 1rem;
+}
+
+.carousel-item p {
+ color: var(--text-light);
+ font-size: 1rem;
+ line-height: 1.7;
+ margin-bottom: 1.5rem;
+}
+
+.carousel-item button {
+ background: linear-gradient(45deg, var(--accent-blue), var(--light-blue));
+ border: none;
+ border-radius: 25px;
+ color: #fff;
+ padding: 10px 24px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+.carousel-item button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
+}
+
+
+/* Image Preview */
+#imagePreview {
+ width: 100%;
+ height: 400px;
+ background-size: cover;
+ object-fit: cover;
+ border-radius: 15px;
+ border: 2px solid var(--border-light);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+ transition: all 0.3s ease;
+}
+
+#imagePreview:hover {
+ transform: scale(1.02);
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+}
+
+/* Accordion Styling */
+.accordion-item {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-light);
+ border-radius: 10px !important;
+ margin-bottom: 0.5rem;
+}
+
+.accordion-button {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: var(--text-light) !important;
+ border: none;
+ border-radius: 10px !important;
+ padding: 1.2rem 1.5rem;
+ font-weight: 500;
+}
+
+.accordion-button:not(.collapsed) {
+ background: linear-gradient(45deg, var(--accent-blue), var(--light-blue)) !important;
+ color: white !important;
+ box-shadow: none;
+}
+
+.accordion-button::after {
+ filter: invert(1);
+}
+
+.accordion-body {
+ background: rgba(24, 139, 211, 0.99);
+ color: var(--text-light);
+ border-radius: 0 0 10px 10px;
+}
+
+/* Mobile Styles */
+@media (max-width: 768px) {
+ .header-section h2 {
+ font-size: 2rem;
+ }
+
+ .header-section p {
+ font-size: 1rem;
+ }
+
+ .learning-items {
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .carousel-item {
+ padding: 2rem 1rem;
+ min-height: 300px;
+ background-size: cover;
+ background-position: center;
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+ }
+
+ .carousel-item h4 {
+ font-size: 1.5rem;
+ }
+
+ .carousel-item p {
+ font-size: 1rem;
+ }
+
+ #imagePreview {
+ display: none;
+ }
+
+ .stock-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* Animation Classes */
+.fade-in {
+ animation: fadeIn 0.6s ease-in;
+}
+
+.slide-in {
+ animation: slideIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideIn {
+ from { transform: translateY(30px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--accent-blue);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--light-blue);
+}
+
+/*icon+style*/
+.title-img {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem; /* space between icon and text */
+ font-size: 1.25rem;
+ margin: 0;
+}
+.title-img img {
+ width: 20px;
+ height: 20px;
+ object-fit: contain;
+ display: inline-block;
+}
+/* Hide plus by default */
+.icon-plus {
+ display: none;
+}
+
+/* When active tab, show plus, hide minus */
+.list-group-item.active .icon-minus {
+ display: none;
+}
+.list-group-item.active .icon-plus {
+ display: inline-block;
+}
+.accordion-title {
+ padding: 12px 16px;
+ background-color: #f8f9fa;
+ border: 1px solid #dee2e6;
+ border-radius: 6px;
+ font-weight: 500;
+ transition: background-color 0.2s ease;
+}
+.accordion-title:hover {
+ background-color: #e9ecef;
+}
+
+.icon-plus, .icon-minus {
+ width: 18px;
+ height: 18px;
+ vertical-align: middle;
+}
+
+/* Default state: show plus, hide minus */
+.icon-minus {
+ display: none;
+}
+
+/* When expanded */
+.accordion-title[aria-expanded="true"] .icon-plus {
+ display: none;
+}
+.accordion-title[aria-expanded="true"] .icon-minus {
+ display: inline-block;
+}
diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 0000000..b9c4daf
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,151 @@
+$(document).ready(function() {
+ loadSections();
+
+ function loadSections() {
+ $.post('crud.php', { action: 'fetch' }, function(data) {
+ let sections = JSON.parse(data);
+ let tabHTML = '';
+ let sliderHTML = '';
+ let accordionHTML = '';
+ let firstImage = '';
+ let firstTitle = '';
+ let firstSubtitle = '';
+
+ sections.forEach((sec, index) => {
+ let activeClass = index === 0 ? 'active' : '';
+ let expandedClass = index === 0 ? 'show' : '';
+
+ // Tabs for desktop
+ tabHTML += `
+
+ 
+ ${sec.TitleName}
+ `;
+
+ // Slider content
+ sliderHTML += `
+
+
+
${sec.TitleName}
+ ${sec.SubtitleName ? `
${sec.SubtitleName}
` : ''}
+
${sec.Description || ''}
+
+
+
+
+
+
+
+
+
+ ${sec.SubtitleName ? `
${sec.SubtitleName}
` : ''}
+
${sec.Description || ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Preview]()
+
+
+
+
+
+ 
+