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 styles from "./AboutMe.module.css";
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
const AboutMe = () => {
const scrollToContact = () => {
@ -15,31 +16,32 @@ const AboutMe = () => {
<h2 className={styles.title}>About Me</h2>
<div className={styles.content}>
<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}>
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
<i className="fab fa-github"></i>
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<FaGithub />
</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">
<i className="fab fa-linkedin"></i>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<FaLinkedin />
</a>
<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer">
<i className="fab fa-twitter"></i>
<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<FaTwitter />
</a>
</div>
</div>
<div className={styles.textContent}>
<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>
<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,
experimenting with new recipes in the kitchen, or diving into a good sci-fi novel.
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,
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>
<div className={styles.interests}>
<span className={styles.interestTag}>AI Enthusiast</span>
<span className={styles.interestTag}>Open Source Contributor</span>
<span className={styles.interestTag}>Tech Blogger</span>
<span className={styles.interestTag}>Tech Enthusiast</span>
<span className={styles.interestTag}>Problem Solver</span>
<span className={styles.interestTag}>Sports Lover</span>
</div>
</div>
</div>

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

@ -27,6 +27,7 @@
.imageContainer {
flex: 1;
position: relative;
text-align: center;
}
.image {
@ -42,15 +43,24 @@
margin-top: 20px;
}
.socialLinks a {
font-size: 1.5rem;
color: #fff;
.socialLink {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ff6600;
color: #0e0e0e;
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;
transform: translateY(-3px);
}
.textContent {
@ -92,6 +102,10 @@
.bottomSection {
text-align: center;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.resumeLink,
@ -118,19 +132,6 @@
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) {
.content {
flex-direction: column;
@ -141,10 +142,6 @@
margin-bottom: 30px;
}
.socialLinks {
justify-content: center;
}
.bottomSection {
flex-direction: column;
align-items: center;