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

v0.11.7 Create new directory for reusable components, and created new component, ResumeDownloader

Browse source
This commit is contained in:
Murtadha 2024-07-27 20:32:45 -04:00
parent bc0d704602
commit 9832701e61
5 changed files with 57 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/info/InfoSection.jsx
View file

@ -1,60 +0,0 @@
import React from "react";
import styles from "./InfoSection.module.css";
function InfoSection({ title, data, isEducation }) {
const sortedData = [...data].sort((a, b) => b.id - a.id);
return (
<section className={styles.infoSection}>
<h2 className={styles.sectionTitle}>{title}</h2>
{sortedData.map((item) => (
<div key={item.id} className={styles.entry}>
<div className={styles.headerSection}>
<div className={styles.logoContainer}>
<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
</div>
<div className={styles.titleSection}>
<h3 className={styles.title}>{item.title}</h3>
<p className={styles.organizationInfo}>
{item.organization} | {item.location} | {item.duration}
</p>
</div>
</div>
<div className={styles.content}>
<p className={styles.description}>{item.description}</p>
<div className={styles.additionalInfo}>
{isEducation && item.achievements && item.achievements.length > 0 && (
<div className={styles.skillSection}>
<h4>Achievements:</h4>
<ul>
{item.achievements.map((achievement, i) => (
<li key={i}>{achievement}</li>
))}
</ul>
</div>
)}
<div className={styles.skillSection}>
<h4>{item.skillsTitle || "Skills Gained"}:</h4>
<ul>
{item.skills.map((skill, i) => (
<li key={i}>{skill}</li>
))}
</ul>
</div>
<div className={styles.skillSection}>
<h4>{item.techStackTitle || "Tech Stack"}:</h4>
<ul>
{item.techStack.map((tech, i) => (
<li key={i}>{tech}</li>
))}
</ul>
</div>
</div>
</div>
</div>
))}
</section>
);
}
export default InfoSection;

128
src/components/info/InfoSection.module.css
View file

@ -1,128 +0,0 @@
.infoSection {
width: var(--content-width);
margin: 0 auto;
padding: 50px 0;
background-color: #ffffff;
}
.sectionTitle {
text-align: left;
font-size: 2.5rem;
margin-bottom: 30px;
color: #333;
}
.entry {
position: relative;
margin-bottom: 40px;
padding-left: 20px;
border-left: 2px solid var(--accent-color);
}
.headerSection {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.logoContainer {
flex: 0 0 auto;
margin-right: 20px;
height: 60px; /* Adjust this value to match your desired logo height */
width: 60px; /* Adjust this value to maintain aspect ratio */
}
.logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.titleSection {
flex: 1;
}
.title {
font-size: 1.4rem;
font-weight: bold;
color: var(--accent-color);
margin-bottom: 5px;
}
.organizationInfo {
font-size: 1.1rem;
color: #333;
}
.content {
margin-left: 80px; /* This should match the logoContainer width + its right margin */
}
.description {
font-size: 1rem;
line-height: 1.6;
color: #333;
margin-bottom: 15px;
}
.additionalInfo {
display: flex;
flex-wrap: wrap;
gap: 2%;
}
.skillSection {
flex: 1 1 30%;
min-width: 200px;
margin-bottom: 15px;
}
.skillSection h4 {
font-size: 1rem;
color: #333;
margin-bottom: 5px;
}
.skillSection ul {
padding-left: 0;
margin: 0;
list-style-type: none;
}
.skillSection li {
font-size: 0.9rem;
display: inline-block;
background-color: #f0f0f0;
padding: 2px 8px;
border-radius: 12px;
margin-right: 5px;
margin-bottom: 5px;
}
@media (max-width: 768px) {
.infoSection {
padding: 30px 5%;
}
.headerSection {
flex-direction: row;
align-items: flex-start;
}
.logoContainer {
margin-right: 15px;
}
.content {
margin-left: 0;
}
.additionalInfo {
flex-direction: column;
gap: 15px;
}
.skillSection {
flex: 1 1 100%;
}
}