Skip to content

Commit 2ac5a2e

Browse files
zcoder365zcoder365
committed
update index.html
1 parent 2348d3e commit 2ac5a2e

1 file changed

Lines changed: 127 additions & 134 deletions

File tree

‎templates/index.html‎

Lines changed: 127 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,154 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<title>Zoe Droulias</title>
5-
<link rel="stylesheet" href="styles.css">
6-
<link rel="icon" href="static/assets/coding-memoji.png" type="image/png">
7-
</head>
8-
9-
<body align="center">
10-
<div class="header-content">
11-
<img class="header-image" src="static/coding-memoji.png" alt="Zoe's Memoji coding">
12-
<p align="left">Hi, my name is</p><br>
13-
<p class="header-name">Zoe Droulias.</p>
14-
15-
<br>
16-
17-
<div class="links">
18-
<a href="https://www.linkedin.com/in/zoedroulias/"><img src="static/linkedin.png" alt="linkedin logo"></a>
19-
<a href="https://github.com/zcoder365"><img src="static/github.png" alt="github logo"></a>
20-
<a href="static/Zoe Droulias CV.pdf" class="links"><img src="static/cv-icon.png" alt="document icon"></a>
21-
</div>
22-
</div>
1+
{% extends "base.html" %}
2+
{% block content %}
233

24-
<div class="about-me">
25-
<h2>About Me</h2>
4+
<div class="header-content">
5+
<img class="header-image" src="static/coding-memoji.png" alt="Zoe's Memoji coding">
6+
<p align="left">Hi, my name is</p><br>
7+
<p class="header-name">Zoe Droulias.</p>
268

27-
<div class="about-me-content">I am a junior at McGill University, majoring in Computer Science with a minor in Communication Studies.</div>
28-
</div>
9+
<br>
2910

30-
<br><br>
11+
<div class="links">
12+
<a href="https://www.linkedin.com/in/zoedroulias/"><img src="static/linkedin.png" alt="linkedin logo"></a>
13+
<a href="https://github.com/zcoder365"><img src="static/github.png" alt="github logo"></a>
14+
<a href="static/Zoe Droulias CV.pdf" class="links"><img src="static/cv-icon.png" alt="document icon"></a>
15+
</div>
16+
</div>
3117

32-
<div class="my-projects">
33-
<h2>My Projects</h2>
18+
<div class="about-me">
19+
<h2>About Me</h2>
3420

35-
<div class="project-gallery">
36-
<!-- Promptl Project Card -->
37-
<div class="project-card">
38-
<div class="project-card__header">
39-
<img src="static/promptl.png" alt="promptl lightbulb icon" style="width: 60px; height: 60px;">
21+
<div class="about-me-content">I am a junior at McGill University, majoring in Computer Science with a minor in Communication Studies.</div>
22+
</div>
4023

41-
<h3 class="project-card__title">Promptl</h3>
24+
<br><br>
4225

43-
<a href="https://promptl.com" class="project-card__github-link" target="_blank">
44-
<i class="fab fa-github">Website</i>
45-
</a>
46-
</div>
26+
<div class="my-projects">
27+
<h2>My Projects</h2>
4728

48-
<p class="project-card__description">A web app to make writing fun and rewarding for kids with learning differences. Designed to provide an engaging and supportive environment that helps children develop their writing skills through interactive exercises and positive reinforcement.</p>
29+
<div class="project-gallery">
30+
<!-- Promptl Project Card -->
31+
<div class="project-card">
32+
<div class="project-card__header">
33+
<img src="static/promptl.png" alt="promptl lightbulb icon" style="width: 60px; height: 60px;">
4934

50-
<a href="/read-more/promptl"><button>Read more...</button></a>
51-
</div>
35+
<h3 class="project-card__title">Promptl</h3>
5236

53-
<!-- boggle project card -->
54-
<div class="project-card">
55-
<div class="project-card__header">
56-
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.cls-6nrmripjxcqmjhqlrrdbcf-1%7bfill:none%3bstroke:%23333333%3bstroke-miterlimit:10%3b%3b%7d%3c/style%3e%3c/defs%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='18.68' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='18.68' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='18.68' width='3.82' height='3.82'/%3e%3c/svg%3e" alt="brain black outline icon" style="width: 50px; height: 50px;">
37+
<a href="https://promptl.com" class="project-card__github-link" target="_blank">
38+
<i class="fab fa-github">Website</i>
39+
</a>
40+
</div>
41+
42+
<p class="project-card__description">A web app to make writing fun and rewarding for kids with learning differences. Designed to provide an engaging and supportive environment that helps children develop their writing skills through interactive exercises and positive reinforcement.</p>
5743

58-
<h3 class="project-card__title">Online Boggle</h3>
44+
<a href="/read-more/promptl"><button>Read more...</button></a>
45+
</div>
5946

60-
<a href="https://github.com/zcoder365/Boggle" class="project-card__github-link" target="_blank">
61-
<i class="fab fa-github">GitHub</i>
62-
</a>
63-
</div>
47+
<!-- boggle project card -->
48+
<div class="project-card">
49+
<div class="project-card__header">
50+
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.cls-6nrmripjxcqmjhqlrrdbcf-1%7bfill:none%3bstroke:%23333333%3bstroke-miterlimit:10%3b%3b%7d%3c/style%3e%3c/defs%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='1.5' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='10.09' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='10.09' y='18.68' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='1.5' y='18.68' width='3.82' height='3.82'/%3e%3crect class='cls-6nrmripjxcqmjhqlrrdbcf-1' x='18.68' y='18.68' width='3.82' height='3.82'/%3e%3c/svg%3e" alt="brain black outline icon" style="width: 50px; height: 50px;">
6451

65-
<p class="project-card__description">An interactive web-based version of the classic word-finding game Boggle. Designed to allow players to find words by connecting adjacent letters. The game provides an engaging experience with smooth user interaction and real-time feedback as players discover words.</p>
52+
<h3 class="project-card__title">Online Boggle</h3>
6653

67-
<a href="/read-more/boggle"><button>Read more...</button></a>
68-
</div>
54+
<a href="https://github.com/zcoder365/Boggle" class="project-card__github-link" target="_blank">
55+
<i class="fab fa-github">GitHub</i>
56+
</a>
57+
</div>
6958

70-
<!-- friendship bracelet visualizer project card -->
71-
<div class="project-card">
72-
<div class="project-card__header">
73-
<img src="static/bracelet.png" alt="friendship bracelet icon black" style="width: 50px; height: 50px;">
59+
<p class="project-card__description">An interactive web-based version of the classic word-finding game Boggle. Designed to allow players to find words by connecting adjacent letters. The game provides an engaging experience with smooth user interaction and real-time feedback as players discover words.</p>
7460

75-
<h3 class="project-card__title">Friendship Bracelet Visualizer</h3>
61+
<a href="/read-more/boggle"><button>Read more...</button></a>
62+
</div>
7663

77-
<a href="https://github.com/zcoder365/FriendshipBraceletVisualizer" class="project-card__github-link" target="_blank">
78-
<i class="fab fa-github">GitHub</i>
79-
</a>
80-
</div>
64+
<!-- friendship bracelet visualizer project card -->
65+
<div class="project-card">
66+
<div class="project-card__header">
67+
<img src="static/bracelet.png" alt="friendship bracelet icon black" style="width: 50px; height: 50px;">
8168

82-
<p class="project-card__description">A creative web application that helps crafters visualize their friendship bracelet designs. Designed to provide experimentation with different color combinations and pattern styles. Perfect for both beginners and experienced crafters.</p>
69+
<h3 class="project-card__title">Friendship Bracelet Visualizer</h3>
8370

84-
<a href="/read-more/friendship-bracelet-visualizer"><button>Read more...</button>
85-
</div>
71+
<a href="https://github.com/zcoder365/FriendshipBraceletVisualizer" class="project-card__github-link" target="_blank">
72+
<i class="fab fa-github">GitHub</i>
73+
</a>
74+
</div>
8675

87-
<!-- my series of fortunate events -->
88-
<div class="project-card">
89-
<div class="project-card__header">
90-
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.cls-0loaqqr1wk2vrsv2s5s8vm-1%7bfill:none%3bstroke:%23333333%3bstroke-miterlimit:10%3b%3b%7d%3c/style%3e%3c/defs%3e%3cpath class='cls-0loaqqr1wk2vrsv2s5s8vm-1' d='M20.59 22.5H5.32A1.91 1.91 0 0 1 4 19.24a1.89 1.89 0 0 1 1.35-.56h15.24'/%3e%3cline class='cls-0loaqqr1wk2vrsv2s5s8vm-1' x1='19.64' y1='18.68' x2='19.64' y2='22.5'/%3e%3cpath class='cls-0loaqqr1wk2vrsv2s5s8vm-1' d='M20.59 1.5v17.18H5.32a1.91 1.91 0 0 0-1.91 1.91V3.41A1.92 1.92 0 0 1 5.32 1.5Z'/%3e%3cpolygon class='cls-0loaqqr1wk2vrsv2s5s8vm-1' points='12 13.91 10.07 12.96 8.18 13.91 8.18 1.5 12 1.5 12 13.91'/%3e%3c/svg%3e" alt="notebook with a heart icon" style="width: 50px; height: 50px;">
76+
<p class="project-card__description">A creative web application that helps crafters visualize their friendship bracelet designs. Designed to provide experimentation with different color combinations and pattern styles. Perfect for both beginners and experienced crafters.</p>
9177

92-
<h3 class="project-card__title">My Series of Fortunate Events</h3>
78+
<a href="/read-more/friendship-bracelet-visualizer"><button>Read more...</button>
79+
</div>
9380

94-
<a href="https://github.com/zcoder365/MySeriesofFortunateEvents" class="project-card__github-link" target="_blank">
95-
<i class="fab fa-github">GitHub</i>
96-
</a>
97-
</div>
81+
<!-- my series of fortunate events -->
82+
<div class="project-card">
83+
<div class="project-card__header">
84+
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.cls-0loaqqr1wk2vrsv2s5s8vm-1%7bfill:none%3bstroke:%23333333%3bstroke-miterlimit:10%3b%3b%7d%3c/style%3e%3c/defs%3e%3cpath class='cls-0loaqqr1wk2vrsv2s5s8vm-1' d='M20.59 22.5H5.32A1.91 1.91 0 0 1 4 19.24a1.89 1.89 0 0 1 1.35-.56h15.24'/%3e%3cline class='cls-0loaqqr1wk2vrsv2s5s8vm-1' x1='19.64' y1='18.68' x2='19.64' y2='22.5'/%3e%3cpath class='cls-0loaqqr1wk2vrsv2s5s8vm-1' d='M20.59 1.5v17.18H5.32a1.91 1.91 0 0 0-1.91 1.91V3.41A1.92 1.92 0 0 1 5.32 1.5Z'/%3e%3cpolygon class='cls-0loaqqr1wk2vrsv2s5s8vm-1' points='12 13.91 10.07 12.96 8.18 13.91 8.18 1.5 12 1.5 12 13.91'/%3e%3c/svg%3e" alt="notebook with a heart icon" style="width: 50px; height: 50px;">
9885

99-
<p class="project-card__description">A journaling app that lets users record events and rate their positivity on a scale of 1 to 10. Designed to get users to be more positive as they review their events in the last year.</p>
86+
<h3 class="project-card__title">My Series of Fortunate Events</h3>
10087

101-
<a href="/read-more/my-series-of-fortunate-events"><button>Read more...</button></a>
102-
</div>
88+
<a href="https://github.com/zcoder365/MySeriesofFortunateEvents" class="project-card__github-link" target="_blank">
89+
<i class="fab fa-github">GitHub</i>
90+
</a>
10391
</div>
104-
</div>
10592

106-
<div class="skills">
107-
<h2>My Skills and Interests</h2>
108-
109-
<p>Here are some of the skills I have developed through my courses and projects:</p>
110-
111-
<table>
112-
<tr>
113-
<th>Courses</th>
114-
<th>Interests</th>
115-
<th>Programming</th>
116-
<th>Apps and Websites</th>
117-
</tr>
118-
<tr>
119-
<td>
120-
Intro to Computer Science <br>
121-
Intro to Software Systems <br>
122-
Intro to Computer Systems <br>
123-
Intro to Data Science <br>
124-
Data Structures and Algorithms <br>
125-
Discrete Structures and Algorithms<br>
126-
Programming Challenges <br>
127-
Software Design
128-
</td>
129-
130-
<td>
131-
Data Science <br>
132-
Web Development <br>
133-
UI/UX
134-
</td>
135-
136-
<td>
137-
Python <br>
138-
Java <br>
139-
HTML <br>
140-
CSS <br>
141-
C++ <br>
142-
Pandas <br>
143-
NumPy <br>
144-
Matplotlib <br>
145-
Seaborn
146-
</td>
147-
148-
<td>
149-
Tableau <br>
150-
GitHub <br>
151-
AWS LightSail <br>
152-
VS Code <br>
153-
Microsoft Office <br>
154-
Google Suite <br>
155-
Canva
156-
</td>
157-
</tr>
158-
</table>
93+
<p class="project-card__description">A journaling app that lets users record events and rate their positivity on a scale of 1 to 10. Designed to get users to be more positive as they review their events in the last year.</p>
94+
95+
<a href="/read-more/my-series-of-fortunate-events"><button>Read more...</button></a>
15996
</div>
160-
</body>
161-
</html>
97+
</div>
98+
</div>
99+
100+
<div class="skills">
101+
<h2>My Skills and Interests</h2>
102+
103+
<p>Here are some of the skills I have developed through my courses and projects:</p>
104+
105+
<table>
106+
<tr>
107+
<th>Courses</th>
108+
<th>Interests</th>
109+
<th>Programming</th>
110+
<th>Apps and Websites</th>
111+
</tr>
112+
<tr>
113+
<td>
114+
Intro to Computer Science <br>
115+
Intro to Software Systems <br>
116+
Intro to Computer Systems <br>
117+
Intro to Data Science <br>
118+
Data Structures and Algorithms <br>
119+
Discrete Structures and Algorithms<br>
120+
Programming Challenges <br>
121+
Software Design
122+
</td>
123+
124+
<td>
125+
Data Science <br>
126+
Web Development <br>
127+
UI/UX
128+
</td>
129+
130+
<td>
131+
Python <br>
132+
Java <br>
133+
HTML <br>
134+
CSS <br>
135+
C++ <br>
136+
Pandas <br>
137+
NumPy <br>
138+
Matplotlib <br>
139+
Seaborn
140+
</td>
141+
142+
<td>
143+
Tableau <br>
144+
GitHub <br>
145+
AWS LightSail <br>
146+
VS Code <br>
147+
Microsoft Office <br>
148+
Google Suite <br>
149+
Canva
150+
</td>
151+
</tr>
152+
</table>
153+
</div>
154+
{% endblock %}

0 commit comments

Comments
 (0)