-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (193 loc) · 8.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
<title>Rimsha Ejaz</title>
<link rel="icon" href="images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<!-- Navigation -->
<nav>
<div class="contact">
<a href="https://docs.google.com/document/d/1c_NorqgYBsysrqrWjYAfCnpWutit0Jo2-Gw39bawdCs/edit?usp=sharing" target="_blank" rel="noopener noreferrer">
<i class="fa-regular fa-file"></i>
<span>Resume</span>
</a>
<a href="https://github.com/rimshaejaz" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-github"></i>
<span>Github</span>
</a>
<a href="https://www.linkedin.com/in/rimsha-e-67912b248/" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
<a href="mailto:[email protected]">
<i class="fa-solid fa-envelope"></i>
<span>Email</span>
</a>
</div>
</nav>
<main>
<!-- SECTION 1: About me -->
<section class="about">
<div class="text">
<h2>Hi, I'm Rimsha 👋</h2>
<p class="intro">
I'm a dedicated computer science student who is
always seeking opportunities to learn and grow my skills. I've created various computer
science projects that showcase my passion and expertise. You can
check out some of my exciting projects listed on this website. Feel free to connect with me
on LinkedIn or send me a direct message via email!
</p>
<div class="links">
<a href="#skills">
<i class="fa-solid fa-code"></i>
<span>Skills</span>
</a>
<a href="#projects">
<i class="fa-solid fa-pen"></i>
<span>Projects</span>
</a>
</div>
</div>
<!-- <div class="headshot">
<img class="headshot" src="images/headshot.png" alt="rimsha headshot">
</div> -->
</section>
<!-- Skills -->
<section id="skills" class="skills-section">
<h2>Skills</h2>
<div class="cells">
<div class="cell">
<img src="images/html-logo.webp" alt="html logo">
<span>HTML</span>
</div>
<div class="cell">
<img src="images/css-logo.webp" alt="css logo">
<span>CSS</span>
</div>
<div class="cell">
<img src="images/javascript-logo.webp" alt="javascript logo">
<span>JavaScript</span>
</div>
<div class="cell">
<img src="images/node-logo.webp" alt="node logo">
<span>Node.js</span>
</div>
<div class="cell">
<img src="images/react-logo.webp" alt="react logo">
<span>React.js</span>
</div>
<div class="cell">
<img src="images/flask-logo.png" alt="react logo">
<span>Flask</span>
</div>
<div class="cell">
<img src="images/python-logo.jpg" alt="react logo">
<span>Python</span>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects" class="projects-section">
<h2>Projects</h2>
<div class="group">
<div class="project-details">
<p>Hogwarts Library</p>
<a class="project" href="https://github.com/rimshaejaz/Hogwarts_Library" target="_blank" rel="noopener noreferrer">Github</a>
</div>
<div class="text-hogwarts">
<ul>
<li>
For a term project, my partner and I designed a web application in Python & Flask using a MySQL databa.
backend for a library management system
</li>
<li>
I was responsible for engineering code to perform CRUD operations on 3 out of 6 tables, developing the
DML and normalizing the database
</li>
<li>
Documented the data driven operational goals using narrative, ERD, and Schema model
</li>
</ul>
</div>
</div>
<div class="group">
<div class="project-details">
<p>Goggle Docs</p>
<a class="project" href="https://github.com/rimshaejaz/goggle-docs" target="_blank" rel="noopener noreferrer">Github</a>
<a class="project" href="https://goggle-docs-f0l8.onrender.com/document/13e48059-cfd0-436b-9040-6221ad122f3d" target="_blank" rel="noopener noreferrer">Live</a>
</div>
<div class="text-docs">
<ul>
<li>
Developed a collaborative document editor similar to Google Docs using React for the frontend, Socket.io for real-time communication,
Quill for rich-text editing, and MongoDB for database management
</li>
<li>
Integrated Quill to monitor changes made to the document by multiple users and ability to customize through various styling options
</li>
<li>
Implemented a seamless real-time connection with client side and server side applications using Socket.io, enabling live updates
</li>
</ul>
</div>
</div>
<div class="group">
<div class="project-details">
<p>Memory Game: Avatar Pairs</p>
<a class="project" href="https://github.com/rimshaejaz/memory-game" target="_blank" rel="noopener noreferrer">Github</a>
<a class="project" href="https://atla-memory.onrender.com/" target="_blank" rel="noopener noreferrer">Live</a>
</div>
<div class="text-memory">
<ul>
<li>
Designed a memory game application using React to build the user interface, ensuring a responsive and
interactive experience
</li>
<li>
Implemented game logic with JavaScript, including features such as card flipping, matching, and score
tracking
</li>
<li>
Integrated Auth0 for user authentication, allowing secure user login and a personalized game experience
</li>
</ul>
</div>
</div>
<div class="group">
<div class="project-details">
<p>Learn MERN</p>
<a class="project" href="https://learn-mern-with-rimsha.onrender.com/" target="_blank" rel="noopener noreferrer">Live</a>
</div>
<div class="text-mern">
<ul>
<li>
Designed a web application to educate users on website development topics using the MERN stack
</li>
<li>
Architected a CRUD travel history section enabling users to share, edit, update and delete their travel history
using React with JavaScript
</li>
<li>
Deployed Node & Express with React to establish the backend server communication for storing and
retrieving travel data, seamlessly serving the client-side frontend from the REST API
</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>