-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (113 loc) · 7.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Personal Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css" />
<link rel="about" href="/about.html" />
<link rel="contact" href="/contact.html" />
<link rel="about" href="/projects.html" />
</head>
<body>
<header class="c-site-header">
<h1 class="c-site-header__title">Fathi Kahin</h1>
<p class="c-site-header__subtitle">(Software Developer)</p>
</header>
<nav aria-label="Main Site Links" class="c-site-nav">
<a href="index.html" class="c-site-nav__link">Home</a>
<a href="/about.html" class="c-site-nav__link">About</a>
<a href="/projects.html" class="c-site-nav__link">My projects</a>
<a href="/contact.html" class="c-site-nav__link">Contact</a>
</nav>
<main>
<section class="hero">
<div class="slideshow-wrapper">
<div class="slideshow-container">
<div class="slide fade" onclick="toggleSlideshow()">
<div class="hero-content">
<h1>About me</h1>
<a href="/about.html" class="btn">Learn more</a>
</div>
</div>
<div class="slide fade" onclick="toggleSlideshow()">
<div class="hero-content">
<h1>My projects</h1>
<a href="/projects.html" class="btn">Learn More</a>
</div>
</div>
<div class="slide fade" onclick="toggleSlideshow()">
<div class="hero-content">
<h1>Contact me</h1>
<a href="/contact.html" class="btn">Learn more</a>
</div>
</div>
</div>
</section>
<section>
<img src="m pic.png" alt="Fathi Kahin" class="c-section__image" />
<h2 class="c-section__title">About Me</h2>
<p class="c-section__text">
I am a former biomedical scientist who transitioned into the role of a compassionate refugee case worker at a charity committed to supporting refugees and asylum seekers in their integration into society. My daily responsibilities include assisting clients in finding suitable educational facilities and housing, providing independent information and guidance, and facilitating access to welfare support and financial benefits.
My multifaceted role is particularly focused on helping those who are unfamiliar with the system navigate the challenges they face. Beyond my work, I hold a profound passion for technology and its potential to transform lives. In my quest to broaden my skills and make a more significant impact, I discovered Code Your Future while researching services for our clients. The alignment of its values with mine was striking, and I recognised it as a perfect avenue for me to assist refugees in rebuilding their lives through coding.
I am eager to learn programming and apply my evolving skills to create positive change. Having solidified my understanding of HTML, CSS, Javascript, React and express, I consider it a milestone in my ongoing Fullstack development journey. Committed to continuous learning, I plan to leverage my unique experiences as a refugee case worker to excel in the dynamic and impactful tech sector. <br /><br />
</p>
</section>
<section class="c-section">
<div class="c-card" id="card1">
<h2 class="c-section__title">My Projects (Website Links)</h2>
<ul>
<li><i class="fas fa-link"></i> <a href="https://cyf-react-hotel-project.netlify.app/" target="_blank">React Hotel Project</a></li>
<li><i class="fas fa-link"></i> <a href="https://cyf-fhkahin-tv.netlify.app/" target="_blank">TV project</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-469--cyf-bfr.netlify.app/" target="_blank">Bikes for Refugees</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-108--cyf-module-html-css.netlify.app/wireframe/" target="_blank">Wireframe to Web Code</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-643--cyf-module-project-html-css.netlify.app/level-2/store" target="_blank">Store Page</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-130--cyf-module-html-css.netlify.app/cakes-co/" target="_blank">Cakes Co</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-643--cyf-module-project-html-css.netlify.app/" target="_blank">Karma Project</a></li>
<li><i class="fas fa-link"></i> <a href="https://deploy-preview-178--cyf-module-html-css.netlify.app/multipage-clone" target="_blank">Multipage Clone</a></li>
</ul>
</div>
<div class="c-card" id="card2">
<h2 class="c-section__title">My Projects (GitHub Links)</h2>
<ul>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/fhkahin/React-Module-Project" target="_blank">React Hotel Project</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/fhkahin/JS3-Module-Project" target="_blank">TV project</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/bikes-for-refugees/pull/469" target="_blank">Bikes for Refugees</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/Module-HTML-CSS/pull/108" target="_blank">Wireframe to Web Code</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/HTML-CSS-Module-Project/pull/643" target="_blank">Store Page</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/Module-HTML-CSS/pull/130" target="_blank">Cakes Co</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/HTML-CSS-Module-Project/pull/643" target="_blank">Karma Project</a></li>
<li><i class="fas fa-project-diagram"></i> <a href="https://github.com/CodeYourFuture/Module-HTML-CSS/pull/178" target="_blank">Multipage Clone</a></li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Useful Links</h4>
<ul>
<li><a href="about.html" >about me</a></li>
<li><a href="projects">My projects</a></li>
<li><a href="contact">Contact me</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Get connected</h4>
<ul>
<li><a href="https://www.linkedin.com/in/fkahin">My Linkedin</i></a>
<li><a href="about">My CV</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- Font Awesome -->
</body>
</html>
<script src="index.js"></script>
</body>
</html>