feat: Add SCSS structure with variables, mixins, and component styles

- Created _variables.scss for color, spacing, typography, and breakpoints.
- Added _mixins.scss for reusable styles including responsive breakpoints, transitions, and box shadows.
- Implemented styles for various components: header, hero, about, contact, education, projects, and skills.
- Established a main.scss file to import component styles and an index.scss for global styles.

src/App.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import  { useState, useEffect } from 'react';
 import Header from './components/Header';
 import Hero from './components/Hero';
 import About from './components/About';
@@ -7,7 +6,7 @@ import Skills from './components/Skills';
 import Projects from './components/Projects';
 import Education from './components/Education';
 import Contact from './components/Contact';
-import './App.css';
+import './styles/main.scss';
 
 function App() {
   const [darkMode, setDarkMode] = useState(false);