NATIONAL UNIVERSITY OF MODERN LANGUAGES

Web Engineering II
Submitted to
Ma’am Huma Nadeem
Submitted by
Muhammad Zeeshan Hassan
SECTION “A”(MOR)
1. Create a CV using react:
App.js:
import './App.css';
import Card from './components/Card';

function App() {
return (
<div className="app">
<Card/>
</div>
);
}

export default App;

Card.js:
import React from "react";
import Accordian from "./Accordian";
import "./Styles.css";

export default function Card() {

return (
<div className="card">
<img src="./img/My-Pic.jpg" />
<table style={{width:"80%", textAlign: 'left', marginLeft: 20}}>
<tr>
<td><b>Name:</b></td>
<td>Muhammad Zeeshan Hassan</td>
</tr>

<tr>
<td><b>Date of Birth:</b></td>
<td>03/02/1999</td>
</tr>

<tr>
<td><b>Gender:</b></td>
<td>Male</td>
</tr>
 </table>
<div className="card-body">
<Accordian/>
</div>
</div>
);
}

Accordian.js:
import React from "react";
import Progress from "./Progress";

export default function Accordian(props) {

return (
<div>
<div className="accordion" id="accordionExample">
<div className="accordion-item">
<h2 className="accordion-header" id="headingOne">
<button
className="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Contact
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<table style={{width: "100%", textAlign: 'left'}}>
<tr>
<td><b>Phone Number</b></td>
<td>+92 3476000631</td>
</tr>
 <tr>
<td><b>Email</b></td>
<td>hassanzeeshan421@gmail.com</td>
</tr>

<tr>
<td><b>Address</b></td>
<td>Kharian, Punjab, Pakistan</td>
</tr>
</table>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingTwo">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Education
</button>
</h2>
<div
id="collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<table style={{width: "100%"}}>
<tr>
<th>Degree</th>
<th>Institute</th>
<th>CGPA/Grade</th>
</tr>

<tr>
<td>BS Software Engineering</td>
<td>National University of Modern Languages</td>
<td>3.0</td>
</tr>
 <tr>
<td>Higher Secondary School Certificate</td>
<td>Army Public School, Kharian Cantt</td>
<td>A</td>
</tr>

<tr>
<td>Secondary School Certificate</td>
<td>Army Public School, Kharian Cantt</td>
<td>A</td>
</tr>
</table>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Skills
</button>
</h2>
<div
id="collapseThree"
className="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"

>
<div>
<table className="skill" style={{width: "97%", textAlign: 'left',
margin: 10}}>
<tr>
<td>React</td>
<td><Progress level="80%"/></td>
<td>React Native</td>
<td><Progress level="85%"/></td>
</tr>
 <tr>
<td>C#</td>
<td><Progress level="85%"/></td>
<td>Python</td>
<td><Progress level="70%"/></td>
</tr>

<tr>
<td>MongoDB</td>
<td><Progress level="75%"/></td>
<td>Node JS</td>
<td><Progress level="60%"/></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
);
}

Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

reportWebVitals();
Output: