├── src ├── styles │ └── Footer.css ├── .DS_Store ├── assets │ ├── weather.png │ └── react.svg ├── Screenshot 2025-01-20 at 9.28.59 PM.png ├── Screenshot 2025-01-20 at 9.38.33 PM (2).png ├── main.jsx ├── components │ ├── splineBackground.jsx │ ├── Footer.jsx │ ├── ProjectCard.jsx │ ├── Navbar.jsx │ └── Contact.jsx ├── index.css ├── App.jsx └── App.css ├── .DS_Store ├── README.md ├── vite.config.js ├── index.html ├── package.json ├── eslint.config.js ├── public └── vite.svg └── .gitignore /src/styles/Footer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anubhav579/My-Portfolio/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anubhav579/My-Portfolio/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Link to the deployed portfolio
2 | https://my-portfolio-cyan-kappa-69.vercel.app/ 3 | -------------------------------------------------------------------------------- /src/assets/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anubhav579/My-Portfolio/HEAD/src/assets/weather.png -------------------------------------------------------------------------------- /src/Screenshot 2025-01-20 at 9.28.59 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anubhav579/My-Portfolio/HEAD/src/Screenshot 2025-01-20 at 9.28.59 PM.png -------------------------------------------------------------------------------- /src/Screenshot 2025-01-20 at 9.38.33 PM (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anubhav579/My-Portfolio/HEAD/src/Screenshot 2025-01-20 at 9.38.33 PM (2).png -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/splineBackground.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import { Spline } from '@splinetool/runtime'; // Use named import 3 | 4 | const SplineBackground = () => { 5 | const canvasRef = useRef(null); 6 | 7 | useEffect(() => { 8 | const canvas = canvasRef.current; 9 | 10 | if (canvas) { 11 | const spline = new Spline(); 12 | spline.load('https://prod.spline.design/mjHizgbJh2C4Lpju/scene.splinecode'); 13 | spline.setCanvas(canvas); 14 | } 15 | }, []); 16 | 17 | return ( 18 | 22 | ); 23 | }; 24 | 25 | export default SplineBackground; 26 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../styles/Footer.css"; 3 | 4 | const Footer = () => { 5 | return ( 6 | 32 | ); 33 | }; 34 | 35 | export default Footer; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "profile", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emailjs/browser": "^4.4.1", 14 | "@splinetool/react-spline": "^4.0.0", 15 | "@splinetool/runtime": "^1.9.54", 16 | "bootstrap": "^5.3.3", 17 | "react": "^18.3.1", 18 | "react-dom": "^18.3.1", 19 | "react-multi-carousel": "^2.8.5", 20 | "react-slick": "^0.30.3", 21 | "slick-carousel": "^1.8.1" 22 | }, 23 | "devDependencies": { 24 | "@eslint/js": "^9.17.0", 25 | "@types/react": "^18.3.18", 26 | "@types/react-dom": "^18.3.5", 27 | "@vitejs/plugin-react": "^4.3.4", 28 | "eslint": "^9.17.0", 29 | "eslint-plugin-react": "^7.37.2", 30 | "eslint-plugin-react-hooks": "^5.0.0", 31 | "eslint-plugin-react-refresh": "^0.4.16", 32 | "globals": "^15.14.0", 33 | "vite": "^6.0.5" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | 55 | button:focus, 56 | button:focus-visible { 57 | outline: 4px auto -webkit-focus-ring-color; 58 | } 59 | 60 | @media (prefers-color-scheme: light) { 61 | :root { 62 | color: #213547; 63 | background-color: #ffffff; 64 | } 65 | 66 | a:hover { 67 | color: #747bff; 68 | } 69 | 70 | button { 71 | background-color: #f9f9f9; 72 | } 73 | } 74 | 75 | .model-credit { 76 | font-size: 13px; 77 | color: #4A4A4A; 78 | margin-top: 10px; 79 | } 80 | 81 | .sketchfab-embed-wrapper iframe { 82 | width: 100%; 83 | height: 500px; 84 | border: none; 85 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./components/Navbar"; 3 | import Footer from "./components/Footer"; 4 | import "./App.css"; 5 | 6 | import ProjectCard from "./components/ProjectCard"; 7 | import Contact from "./components/Contact"; 8 | 9 | const App = () => { 10 | return ( 11 |
12 | 13 | 14 |
15 | 16 | {/* Personal Summary Section */} 17 |
18 |
19 |

Anubhav Regmi

20 |
21 |

22 |

23 | A dedicated and passionate Computer Science student with knowledge in data structures and algorithms. 24 | Known for excellent communication skills and problem-solving abilities. Eager to learn new programming 25 | languages and technologies. Skilled in developing applications, debugging code, and creating projects. 26 | Bringing analytical thinking and versatility to contribute to innovative software solutions. 27 |

28 |

29 |
30 | 31 | {/* Education Section */} 32 |
33 |

Education

34 |

35 | Bachelor’s in Computer Science 36 |
37 | University of Louisiana at Monroe | Monroe, LA 38 |
39 | 2021 - 2025 40 |

41 | 42 |
43 | 44 | {/* Projects Section */} 45 |
46 | 47 | 48 |
49 |

50 | Projects 51 |

52 | 53 |

54 | Here are some of the projects I have worked on: 55 |

56 | 57 |
58 | {/* Project Carousel Section */} 59 | 60 |
61 |
62 |
63 | 64 |
65 |
67 | ); 68 | }; 69 | 70 | export default App; 71 | -------------------------------------------------------------------------------- /src/components/ProjectCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Carousel from 'react-multi-carousel'; 3 | import 'react-multi-carousel/lib/styles.css'; 4 | 5 | // Define the responsive breakpoints for the carousel 6 | const responsive = { 7 | superLargeDesktop: { 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 3, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | // Define inline styles 26 | const carouselItemStyles = { 27 | padding: '20px', 28 | border: '1px solid #ddd', 29 | borderRadius: '10px', 30 | backgroundColor: '#f9f9f9', 31 | textAlign: 'center', 32 | margin: '10px', 33 | boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', 34 | }; 35 | 36 | const titleStyles = { 37 | fontSize: '1.5rem', 38 | fontWeight: 'bold', 39 | marginBottom: '10px', 40 | color: '#333', 41 | }; 42 | 43 | const descriptionStyles = { 44 | fontSize: '1rem', 45 | color: '#555', 46 | }; 47 | 48 | const ProjectCard = () => { 49 | const projects = [ 50 | { 51 | title: 'Yelp Campground', 52 | description: 53 | 'Created a campground platform for leaving reviews about different places by signing up through email.', 54 | }, 55 | { 56 | title: 'Weather App', 57 | description: 58 | 'Developed a weather app displaying weather reports for cities worldwide using JavaScript, HTML, CSS, and APIs.', 59 | }, 60 | { 61 | title: 'Movie App', 62 | description: 63 | 'Built a movie app in React providing information on movies, including genres and ratings.', 64 | }, 65 | { 66 | title: 'Database', 67 | description: 68 | 'Built a database surfer using java which helps user to track the users according to the faculty ', 69 | }, 70 | ]; 71 | 72 | return ( 73 |
74 | 75 | {projects.map((project, index) => ( 76 |
77 |

{project.title}

78 |

{project.description}

79 |
80 | ))} 81 | 82 |
83 | ); 84 | }; 85 | 86 | export default ProjectCard; 87 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import "bootstrap/dist/js/bootstrap.bundle.min.js"; 4 | 5 | const Navbar = () => { 6 | useEffect(() => { 7 | const handleNavLinkClick = (event) => { 8 | const targetId = event.target.getAttribute("href"); 9 | if (targetId && targetId.startsWith("#")) { 10 | event.preventDefault(); 11 | const targetElement = document.querySelector(targetId); 12 | if (targetElement) { 13 | const navbarHeight = document.querySelector(".navbar").offsetHeight; 14 | const offsetTop = targetElement.offsetTop - navbarHeight; // Adjust position 15 | 16 | // Smooth scrolling 17 | window.scrollTo({ 18 | top: offsetTop, 19 | behavior: "smooth", 20 | }); 21 | 22 | // Close navbar after clicking a link (only in mobile mode) 23 | const navbarToggler = document.querySelector(".navbar-toggler"); 24 | const navbarCollapse = document.querySelector(".navbar-collapse"); 25 | if (navbarToggler && navbarCollapse.classList.contains("show")) { 26 | navbarToggler.click(); // Simulates clicking the toggle button to close it 27 | } 28 | } 29 | } 30 | }; 31 | 32 | // Attach event listeners to all navbar links 33 | document.querySelectorAll(".nav-link").forEach((link) => { 34 | link.addEventListener("click", handleNavLinkClick); 35 | }); 36 | 37 | return () => { 38 | // Cleanup event listeners 39 | document.querySelectorAll(".nav-link").forEach((link) => { 40 | link.removeEventListener("click", handleNavLinkClick); 41 | }); 42 | }; 43 | }, []); 44 | 45 | return ( 46 | 83 | ); 84 | }; 85 | 86 | export default Navbar; -------------------------------------------------------------------------------- /src/components/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import emailjs from '@emailjs/browser'; 3 | 4 | const ContactMe = () => { 5 | const [formData, setFormData] = useState({ 6 | name: '', 7 | email: '', 8 | message: '', 9 | }); 10 | 11 | const [isSubmitted, setIsSubmitted] = useState(false); 12 | const [isError, setIsError] = useState(false); 13 | const [isSending, setIsSending] = useState(false); 14 | 15 | const handleChange = (e) => { 16 | const { name, value } = e.target; 17 | setFormData((prevData) => ({ 18 | ...prevData, 19 | [name]: value, 20 | })); 21 | }; 22 | 23 | const handleSubmit = (e) => { 24 | e.preventDefault(); 25 | if (!formData.name || !formData.email || !formData.message) { 26 | setIsError(true); 27 | return; 28 | } 29 | 30 | setIsError(false); 31 | setIsSending(true); 32 | 33 | emailjs 34 | .send( 35 | 'service_sypbbwn', // Replace with your EmailJS service ID 36 | 'template_mf735io', // Replace with your EmailJS template ID 37 | { 38 | user_name: formData.name, 39 | user_email: formData.email, 40 | message: formData.message, 41 | }, 42 | 'BSgkI6G7luphX9qhG' // Replace with your EmailJS public key 43 | ) 44 | .then( 45 | () => { 46 | setIsSubmitted(true); 47 | setIsSending(false); 48 | setFormData({ 49 | name: '', 50 | email: '', 51 | message: '', 52 | }); 53 | }, 54 | (error) => { 55 | console.error('Failed to send message:', error.text); 56 | setIsSending(false); 57 | setIsError(true); 58 | } 59 | ); 60 | }; 61 | 62 | return ( 63 |
64 |
65 |

Contact Me

66 | {isSubmitted &&

Your message has been sent successfully!

} 67 | {isError &&

Failed to send message. Please try again.

} 68 |
69 | 77 | 85 | 93 | 96 |
97 |
98 |
99 | ); 100 | }; 101 | 102 | export default ContactMe; 103 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | /* Set the background color of the webpage */ 2 | body { 3 | background-color: #151013; 4 | margin: 0; 5 | font-family: Arial, sans-serif; 6 | /* Set a clean font for the webpage */ 7 | } 8 | 9 | 10 | html, 11 | body { 12 | height: 100%; 13 | 14 | display: flex; 15 | flex-direction: column; 16 | width: 100vw; 17 | scroll-behavior: smooth; 18 | } 19 | 20 | /* App container */ 21 | .app-container { 22 | font-family: 'Fira Code', monospace; 23 | 24 | overflow: visible; 25 | width: 100vw; 26 | height: 100vh; 27 | position: relative; 28 | } 29 | 30 | 31 | /* Main Content */ 32 | .main-content { 33 | position: relative; 34 | overflow-y: auto; 35 | background-color: #151013; 36 | text-align: center; 37 | color: white; 38 | padding: 20px; 39 | z-index: 1; 40 | flex-grow: 1; 41 | /* Allow content to fill available space */ 42 | } 43 | 44 | /* Navbar */ 45 | .navbar { 46 | position: fixed; 47 | top: 0; 48 | left: 0; 49 | width: 100%; 50 | z-index: 1000; 51 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 52 | } 53 | 54 | body { 55 | padding-top: 56px; 56 | /* Adjust to account for fixed navbar height */ 57 | } 58 | 59 | .navbar-brand { 60 | font-size: 1.5rem; 61 | font-weight: bold; 62 | color: #c5bebe; 63 | margin-left: 1rem; 64 | transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; 65 | } 66 | 67 | .navbar-brand:hover { 68 | transform: translateY(-5px) scale(1.1); 69 | box-shadow: 0 4px 8px rgba(26, 23, 23, 0.2); 70 | color: #a9ebf4; 71 | } 72 | 73 | .nav-link { 74 | font-size: 1rem; 75 | color: #f07720; 76 | margin-left: 1rem; 77 | transition: color 0.3s ease; 78 | } 79 | 80 | .nav-link:hover { 81 | transform: translateY(-0.1px) scale(1.1); 82 | color: #a8de3b; 83 | } 84 | 85 | /* Active Link */ 86 | 87 | 88 | /* Navbar Toggler */ 89 | .navbar-toggler { 90 | border: none; 91 | background-color: #333333; 92 | } 93 | 94 | .navbar-toggler-icon { 95 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 96 | } 97 | 98 | .personal-summary { 99 | display: flex; 100 | flex-direction: column; 101 | align-items: center; 102 | justify-content: center; 103 | padding: 50px 20px; 104 | text-align: center; 105 | } 106 | 107 | /* Name Box */ 108 | .Anubhav { 109 | background: linear-gradient(135deg, rgba(44, 110, 138, 0.8), rgba(11, 47, 46, 0.7)); /* Gradient Background */ 110 | padding: 25px 50px; 111 | border: #d2462e 5px solid; 112 | border-radius: 15px; 113 | backdrop-filter: blur(10px); 114 | box-shadow: 0 8px 20px rgba(245, 9, 9, 0.4); 115 | text-align: center; 116 | transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 117 | } 118 | 119 | .Anubhav:hover { 120 | transform: scale(1.05); 121 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 122 | } 123 | 124 | .Anubhav h1 { 125 | font-size: 3.2rem; 126 | color: #fff; 127 | font-weight: bold; 128 | text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); 129 | } 130 | 131 | .description { 132 | background: linear-gradient(135deg, rgba(44, 110, 138, 0.8), rgba(11, 47, 46, 0.7)); /* Smooth Gradient */ 133 | padding: 30px 40px; /* Balanced padding */ 134 | border: 5px solid #1b22a2; /* Blue border */ 135 | border-radius: 15px; 136 | box-shadow: 0 8px 20px rgba(65, 71, 186, 0.4); 137 | backdrop-filter: blur(10px); /* Subtle blur for glassmorphism */ 138 | text-align: center; 139 | width: 90%; 140 | max-width: 100%; 141 | font-size: 1.2rem; 142 | line-height: 1.8; 143 | color: #ffffff; 144 | margin-top: 40px; 145 | transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 146 | font-family: 'Poppins', sans-serif; /* Modern font */ 147 | } 148 | 149 | /* Hover Effect */ 150 | .description:hover { 151 | transform: scale(1.02); 152 | box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); 153 | } 154 | 155 | /* Heading Inside Description */ 156 | .description h3 { 157 | font-size: 1.5rem; 158 | font-weight: bold; 159 | color: #faf9f5; /* Gold Highlight */ 160 | margin-bottom: 15px; 161 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); 162 | } 163 | 164 | /* Text Inside Description */ 165 | .description p { 166 | font-size: 1.1rem; 167 | color: #f1f1f1; 168 | margin-top: 10px; 169 | text-align: center; 170 | font-weight: 300; 171 | } 172 | 173 | 174 | .section.education { 175 | background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); 176 | padding: 30px; 177 | border: 5px solid #56c118; 178 | border-radius: 15px; 179 | box-shadow: 0 8px 20px rgba(114, 235, 44, 0.4); 180 | text-align: center; 181 | width: 80%; 182 | max-width: 600px; 183 | margin: -30px auto 20px auto; /* Moves it up */ 184 | transition: transform 0.3s ease-in-out; 185 | } 186 | 187 | .section.education:hover { 188 | transform: translateY(-5px); 189 | } 190 | 191 | .section.education h2 { 192 | font-size: 2rem; 193 | color: #f39c12; 194 | font-weight: bold; 195 | } 196 | .section.education p { 197 | font-size: 1rem; 198 | color: #f2e6e6; 199 | line-height: 1.6; 200 | } 201 | 202 | .projects { 203 | display: flex; 204 | flex-direction: column; 205 | align-items: center; 206 | justify-content: center; 207 | text-align: center; 208 | padding: 10px 10px; 209 | margin: 10px auto; 210 | width: 85%; 211 | max-width: 1000px; 212 | border-radius: 15px; 213 | background: rgba(150, 128, 46, 0.1); /* Light transparency for contrast */ 214 | backdrop-filter: blur(10px); 215 | box-shadow: 0 8px 20px rgba(245, 153, 24, 0.4); 216 | transition: transform 0.3s ease-in-out; 217 | 218 | 219 | } 220 | 221 | .projects:hover { 222 | transform: translateY(-5px); 223 | } 224 | 225 | /* Heading */ 226 | .projects h2 { 227 | font-size: 2.5rem; 228 | font-weight: bold; 229 | color: #e35f27; /* Golden color */ 230 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); 231 | margin-bottom: 15px; 232 | } 233 | 234 | /* Project description */ 235 | .projects p { 236 | font-size: 1.2rem; 237 | color: #f9f5f5; 238 | max-width: 800px; 239 | line-height: 1.6; 240 | } 241 | 242 | .box { 243 | border: #020305 5px solid; 244 | padding: 10px 50px; 245 | box-shadow: 0 8px 20px rgba(80, 47, 27, 0.4); 246 | transition: transform 0.3s ease-in-out; 247 | margin-top: 50px; 248 | } 249 | 250 | .project-card { 251 | padding: 20px; 252 | background-color: #cab932; 253 | border-radius: 8px; 254 | box-shadow: 0 8px 20px rgba(199, 84, 13, 0.4); 255 | margin-top: 30px; 256 | color: white; 257 | } 258 | 259 | .carousel-item { 260 | margin: 10px; 261 | text-align: center; 262 | } 263 | 264 | .carousel-item h3 { 265 | color: #f39c12; /* Orange for titles */ 266 | margin-bottom: 10px; 267 | } 268 | 269 | .carousel-item p { 270 | color: #ddd; /* Light gray for description text */ 271 | } 272 | 273 | 274 | /* Custom styling for the form container */ 275 | .contact-form { 276 | text-align: center; 277 | background: linear-gradient(to right, #141a2a, #020305); /* Blue gradient background */ 278 | color: rgb(105, 216, 105); 279 | border-radius: 10px; 280 | padding: 20px; 281 | box-shadow: 0 8px 20px rgba(245, 9, 9, 0.4); 282 | } 283 | 284 | /* Custom input styling */ 285 | .contact-form input, 286 | .contact-form textarea { 287 | width: 100%; 288 | padding: 15px; 289 | margin: 10px 0; 290 | border: 1px solid #ccc; 291 | border-radius: 5px; 292 | transition: all 0.3s ease-in-out; 293 | } 294 | 295 | /* Hover and focus effects for inputs */ 296 | .contact-form input:focus, 297 | .contact-form textarea:focus { 298 | border-color: #2563eb; 299 | outline: none; 300 | box-shadow: 0 0 5px rgba(37, 99, 235, 0.5); 301 | } 302 | 303 | /* Submit button styling */ 304 | .contact-form button { 305 | background: #d2462e; 306 | color: white; 307 | font-weight: bold; 308 | padding: 15px 20px; 309 | border: none; 310 | border-radius: 5px; 311 | cursor: pointer; 312 | transition: all 0.3s ease-in-out; 313 | } 314 | 315 | .contact-form button:hover { 316 | background: #0f1423; 317 | } 318 | 319 | /* Responsive styling */ 320 | @media (max-width: 768px) { 321 | .contact-form { 322 | padding: 15px; 323 | } 324 | 325 | .contact-form button { 326 | width: 100%; 327 | } 328 | } 329 | 330 | 331 | /* Allow for page scroll */ 332 | .main-content { 333 | flex-grow: 1; 334 | overflow-y: auto; 335 | /* Enable vertical scrolling */ 336 | padding-top: 20px; 337 | padding-bottom: 80px; 338 | /* Ensure there's space for the fixed footer */ 339 | } 340 | 341 | /* Footer Styling */ 342 | .footer { 343 | position: relative; 344 | bottom: 0; 345 | left: 0; 346 | width: 100%; 347 | z-index: 100; 348 | /* Ensure it appears above other content */ 349 | text-align: center; 350 | padding: 1rem; 351 | background-color: #2c3e50; 352 | color: white; 353 | box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); 354 | height: 70px; 355 | /* Define the height of your footer */ 356 | display: flex; 357 | align-items: center; 358 | justify-content: center; 359 | /* Ensure content inside the footer is centered */ 360 | } 361 | 362 | .footer-link { 363 | color: #f15111; 364 | text-decoration: none; 365 | transition: color 0.3s ease, transform 0.3s ease; 366 | } 367 | 368 | .footer-link:hover { 369 | color: #30be6b; 370 | transform: translateY(-2px); 371 | } 372 | 373 | footer p { 374 | margin: 0; 375 | font-size: 14px; 376 | width: 100%; 377 | /* Ensure the footer text stretches across */ 378 | } --------------------------------------------------------------------------------