mnisyif/mnisyif_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v0.9.1 Edit content in about me section, and add support for icons

Browse source
This commit is contained in:
Murtadha 2024-07-17 17:46:44 -04:00
parent bd3a8fbbc2
commit 9fb861c629
3 changed files with 35 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/aboutMe/AboutMe.jsx
View file

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import styles from "./AboutMe.module.css"; import styles from "./AboutMe.module.css";
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
const AboutMe = () => { const AboutMe = () => {
const scrollToContact = () => { const scrollToContact = () => {
@ -15,31 +16,32 @@ const AboutMe = () => {
<h2 className={styles.title}>About Me</h2> <h2 className={styles.title}>About Me</h2>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<img src="/path-to-your-image.jpg" alt="Your Name" className={styles.image} /> <img src="/pp/abtme.JPG" alt="Murtadha Nisyif" className={styles.image} />
<div className={styles.socialLinks}> <div className={styles.socialLinks}>
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<i className="fab fa-github"></i> <FaGithub />
</a> </a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer"> <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<i className="fab fa-linkedin"></i> <FaLinkedin />
</a> </a>
<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer"> <a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<i className="fab fa-twitter"></i> <FaTwitter />
</a> </a>
</div> </div>
</div> </div>
<div className={styles.textContent}> <div className={styles.textContent}>
<h3 className={styles.greeting}> <h3 className={styles.greeting}>
Hey there! I'm <span className={styles.name}>Your Name</span> Hey there! I'm <span className={styles.name}>Murtadha Nisyif</span>
</h3> </h3>
<p className={styles.bio}> <p className={styles.bio}>
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, I'm passionate about computers, technology, and sports. I love creating solutions that ease people's daily routines. My journey in the world of tech began at a young age,
experimenting with new recipes in the kitchen, or diving into a good sci-fi novel. and ever since, I've been captivated by the endless possibilities it offers. Whether it's building innovative solutions, developing software, or diving deep into the latest
tech trends, I find immense joy in it all.
</p> </p>
<div className={styles.interests}> <div className={styles.interests}>
<span className={styles.interestTag}>AI Enthusiast</span> <span className={styles.interestTag}>Tech Enthusiast</span>
<span className={styles.interestTag}>Open Source Contributor</span> <span className={styles.interestTag}>Problem Solver</span>
<span className={styles.interestTag}>Tech Blogger</span> <span className={styles.interestTag}>Sports Lover</span>
</div> </div>
</div> </div>
</div> </div>

41
src/components/aboutMe/AboutMe.module.css
View file

@ -27,6 +27,7 @@
.imageContainer { .imageContainer {
flex: 1; flex: 1;
position: relative; position: relative;
text-align: center;
} }
.image { .image {
@ -42,15 +43,24 @@
margin-top: 20px; margin-top: 20px;
} }
.socialLinks a { .socialLink {
font-size: 1.5rem; display: flex;
color: #fff; align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ff6600;
color: #0e0e0e;
margin: 0 10px; margin: 0 10px;
transition: color 0.3s ease; transition: all 0.3s ease;
font-size: 1.2rem;
} }
.socialLinks a:hover { .socialLink:hover {
background-color: #fff;
color: #ff6600; color: #ff6600;
transform: translateY(-3px);
} }
.textContent { .textContent {
@ -92,6 +102,10 @@
.bottomSection { .bottomSection {
text-align: center; text-align: center;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
} }
.resumeLink, .resumeLink,
@ -118,19 +132,6 @@
color: #000; color: #000;
} }
.contactLink {
background-color: transparent;
cursor: pointer;
}
.bottomSection {
text-align: center;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.content { .content {
flex-direction: column; flex-direction: column;
@ -141,10 +142,6 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.socialLinks {
justify-content: center;
}
.bottomSection { .bottomSection {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

2
version.txt
View file

@ -1 +1 @@
0.9.0 0.9.1