-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprojects.html
More file actions
147 lines (121 loc) · 9.76 KB
/
Copy pathprojects.html
File metadata and controls
147 lines (121 loc) · 9.76 KB
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
<!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">
<meta name="description" content="This is the project page for Agnes Beviz's portfolio website"/>
<title>Agnes Beviz: Portfolio</title>
<link rel="shortcut icon" type="image/png" href="/images/portrait-ab-stylized.png"/>
<link href="/CSS/projects.css" rel="stylesheet">
<!-- Favicon library for social media connect links-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Component JS files-->
<script src="/components/nav.js" type="text/javascript" defer></script>
<script src="/components/footer.js" type="text/javascript" defer></script>
<!-- Plausible HQ analytics-->
<script defer data-domain="agnesbeviz.co.uk" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<nav-component></nav-component>
<header id="header">
<h1> <b>Projects</b> </h1>
</header>
<main>
<section id="intro">
<p>Here are some of the projects I have completed or been involved with. Currently these projects are mainly Wordpress / HTML / CSS, and I will add more when I learn new technologies.</p>
</section>
<section id="project_section">
<!-- ---------Project: Echo Manchester------------ -->
<div class="project_item" id="echo_manchester">
<div class="project_header">
<div class ="project_image_div">
<a href="">
<img class="project_image" src="/images/echo-manchester.png" alt="Image of a logo of Echo Manchester. Text below it reads: using Echo Manchester, you can also: list your own events, embed the calendar on your website, and get your news appearing on Echo.">
</a>
</div>
<div class ="project_header_text"><h2><b>Echo Manchester</b></h2></a>
<p class="date">2013 - 2014</p>
</div>
</div>
<div class="project_description">
<details class="project_details">
<summary class="project_summary">Content aggregator site to bring together events in the inclusivity and diversity and left community in Manchester. I contributed to community outreach, content planning, and UX design. Click for more.
</summary>
<br>
<p>The website was developed by my colleague, and I joined the project to help publicise, form connections with the local community to integrate the website, and contribute to project planning and UX design. We planned changes to the website around the needs of the local community, and I also found new event feeds and groups for us to link in with.</p>
<p>The aggregator was originally written in PHP, and then re-written using JavaScript / Node.js.</p>
<p>My contributions here were more on the UX, project management, and user engagement side rather than technical, and I learned a lot from the project:</p>
<ul>
<li><b>Importance of thinking about the needs of users</b> - for both designing features and what to include & not include in a project.</li>
<li><b>Iterative process</b> - way of working where we continually optimise the project and user experience using feedback and monitoring performance.</li>
<li><b>Accessibility</b> - we wanted to make the content available to people who couldn’t / may not come across it online. We enabled a feature to print a weekly list of events from the website, which event organisers could use to have paper copies available at in person events. This was also a good way for new people to find out about the project.</li>
</ul><br>
<p>This project is also interesting for me to look back on - while I was involved with it the tech side of it seemed daunting. Now that I am learning to code, I am interested in how it all works!</p>
<a href="https://github.com/takkaria/echojs" class="link_from_project_page" target="_blank" id="echo_manchester_github">→ Archived Echo Manchester github repo</a>
<a href="https://web.archive.org/web/20171001115332/https://echomanchester.net/" class="link_from_project_page" target="_blank" id="echo_manchester_snapshot">→ Snapshot of echomanchester.net from Internet Archive</a>
</details>
</div>
</div>
<!-- ---------Project: Manchester Social Centre------------ -->
<div class="project_item" id="manchester_socialcentre">
<div class="project_header">
<div class ="project_image_div">
<a href="">
<img class="project_image" src="/images/mcr-socialcentre-cakes.jpg" alt="Photo of a display of different cakes">
</a>
</div>
<div class ="project_header_text"><h2><b>Manchester Social Centre</b></h2></a>
<p class="date">2012 - 2014</p>
</div>
</div>
<div class="project_description">
<details class="project_details">
<summary class="project_summary">Developed and maintained a wordpress based website for a community centre. Trained volunteers to update the website & write content. Click for more.
</summary>
<br>
<p>Manchester Social Centre was a volunteer community event space in Rusholme with a cafe. I developed the website using Wordpress and some HTML and CSS customisation, and taught volunteers how to update it and add posts. </p>
<p>What I learned from this project:</p>
<ul>
<li>Importance of thinking about the tech skill level of the future maintainers and users of a system when designing it. </li>
<li>How to communicate about technical issues to people with less experience.</li>
<li>Working as part of a large team to plan and deliver a project. I was developing the website alone, but liaised with the whole social centre community about the brief and content. </li>
</ul>
<a href="https://twitter.com/mcrsocialcentre" class="link_from_project_page" target="_blank" id="manchester_social_centre_twitter">→ Manchester Social Centre Twitter</a>
<a href="https://web.archive.org/web/20150430013423/http://manchestersocialcentre.org.uk/" class="link_from_project_page" target="_blank" id="manchester_social_centre_snapshot">→ Snapshot of manchestersocialcentre.org.uk from Internet Archive</a>
</details>
</div>
</div>
<!-- ---------Project: Portfolio Website------------ -->
<div class="project_item" id="portfolio_website">
<div class="project_header">
<div class ="project_image_div">
<img class="project_image" src="/images/portfolio-website-cropped.jpg" alt="Photo of a mobile phone with this website on the screen. The phone is on a piece of paper with a plan for how to make this website drawn on it.">
</div>
<div class ="project_header_text"><h2><b>Portfolio Website</b></h2></a>
<p class="date">2022</p>
</div>
</div>
<div class="project_description">
<details class="project_details">
<summary class="project_summary">..and this website is also a project. I built it after completing the Responsive Web Design module on freeCodeCamp, and at the moment it uses HTML5, CSS and a little bit of JavaScript. Click for more.
</summary>
<br>
<p>I've tried to keep the content clear and the website accessible, using Lighthouse and axe DevTools for testing. The website is hosted via github pages, and in the future I plan to add a blog engine using Jekyll. </p>
<p>What I learned from this project:</p>
<ul>
<li>Setting up and using a Visual Studio Code environment with a git workflow to a github repository</li>
<li>How to setup a custom domain and redirect with github pages (configured apex and subdomains with a DNS provider and setup SSL certificates with github pages)</li>
<li>How to create a website from scratch using HTML and CSS</li>
<li>Creating reusable custom HTML elements using JavaScript</li>
<li>Setting up web analytics in a secure and GDPR compliant way</li>
<li>…and using tools like Trello to project manage the above! </li>
</ul>
<a href="https://github.com/mxkoder/mxkoder.github.io" class="link_from_project_page" target="_blank" id="portfolio_website_repository">→ Portfolio website github repository</a>
</details>
</div>
</div>
</section>
</main>
<footer-component></footer-component>
</body>