diff --git a/src/App.jsx b/src/App.jsx index 6dd0299..6fcf693 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,11 +3,10 @@ import React from "react"; import Header from "./components/header/Header"; import Footer from "./components/footer/Footer"; import Hero from "./components/hero/Hero"; -// import Education from "./components/education/Education"; -// import Experience from "./components/experience/Experience"; import InfoSection from "./components/info/InfoSection"; import Separator from "./components/separater/Separater"; import Projects from "./components/projects/Projects"; +import AboutMe from "./components/aboutMe/AboutMe"; import styles from "./App.module.css"; @@ -167,6 +166,9 @@ function App() {
+
+ +
diff --git a/src/components/aboutMe/AboutMe.jsx b/src/components/aboutMe/AboutMe.jsx new file mode 100644 index 0000000..9b6db7b --- /dev/null +++ b/src/components/aboutMe/AboutMe.jsx @@ -0,0 +1,49 @@ +import React from "react"; +import styles from "./AboutMe.module.css"; + +const AboutMe = () => { + return ( +
+
+

About Me

+
+
+ Your Name +
+ + + + + + + + + +
+
+
+

+ Hey there! I'm Your Name +

+

+ I'm a passionate software engineer with a love for creating elegant solutions to complex problems. When I'm not coding, you can find me exploring new hiking trails, + experimenting with new recipes in the kitchen, or diving into a good sci-fi novel. +

+
+ AI Enthusiast + Open Source Contributor + Tech Blogger +
+
+
+
+ + Download Resume (PDF) + +
+
+
+ ); +}; + +export default AboutMe; diff --git a/src/components/aboutMe/AboutMe.module.css b/src/components/aboutMe/AboutMe.module.css new file mode 100644 index 0000000..82d1548 --- /dev/null +++ b/src/components/aboutMe/AboutMe.module.css @@ -0,0 +1,125 @@ +.aboutMe { + padding: 80px 0; + background-color: #0e0e0e; /* Dark background to match your theme */ + color: #fff; +} + +.container { + max-width: var(--content-width); + margin: 0 auto; + padding: 0 20px; +} + +.title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 40px; + color: #fff; +} + +.content { + display: flex; + align-items: center; + gap: 40px; + margin-bottom: 40px; +} + +.imageContainer { + flex: 1; + position: relative; +} + +.image { + width: 100%; + max-width: 300px; + border-radius: 50%; + box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); +} + +.socialLinks { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.socialLinks a { + font-size: 1.5rem; + color: #fff; + margin: 0 10px; + transition: color 0.3s ease; +} + +.socialLinks a:hover { + color: #ff6600; +} + +.textContent { + flex: 2; +} + +.greeting { + font-size: 1.8rem; + margin-bottom: 20px; + color: #fff; +} + +.name { + color: #ff6600; + font-weight: bold; +} + +.bio { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 20px; + color: #ccc; +} + +.interests { + margin-bottom: 20px; +} + +.interestTag { + display: inline-block; + background-color: #ff6600; + color: #0e0e0e; + padding: 5px 10px; + border-radius: 20px; + font-size: 0.9rem; + margin-right: 10px; + margin-bottom: 10px; +} + +.bottomSection { + text-align: center; +} + +.resumeLink { + color: #fff; + text-decoration: none; + padding: 10px 20px; + border: 1px solid #ff6600; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; + display: inline-block; +} + +.resumeLink:hover { + background-color: #ff6600; + color: #000; +} + +@media (max-width: 768px) { + .content { + flex-direction: column; + text-align: center; + } + + .imageContainer { + margin-bottom: 30px; + } + + .socialLinks { + justify-content: center; + } +} diff --git a/version.txt b/version.txt index bcaffe1..8adc70f 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -0.7.0 \ No newline at end of file +0.8.0 \ No newline at end of file