-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
164 lines (153 loc) · 10.7 KB
/
code.html
File metadata and controls
164 lines (153 loc) · 10.7 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;600;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/jpg" href="Images/Favicon.png"/>
<script src="https://kit.fontawesome.com/f1c27a6a68.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
<title> Coding | Fizza Ahmed </title>
<meta name="description" content="Portfolio website for Fizza Ahmed">
<meta name="keywords" content="portfolio, artist, toronto, web designer, student">
<meta name="author" content="Fizza Ahmed">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header" style="padding: 0.5em 7vw 0.7em 7vw">
<a href="#main" class="skip"> Skip to Main Content </a>
<span class="name"> <a href="index.html"> fizza ahmed </a></span>
<a href="index.html" class="logo-img"> <img src="Images/logosized.png" alt="Fizza Ahmed Logo - Home" style="max-height:2.5em"> </a>
<nav id="navigation" class="site-navigation" role="navigation">
<ul style="margin: 0px;">
<li class="headLinks">
<div class="dropdown">
<button class="header-category dropdown-button" > Works </button>
<ul class="dropdown-content">
<li><a href="https://fizzara.github.io/art"> Art & Design </a></li>
<li><a href="https://fizzara.github.io/code"> Code </a></li>
<li><a href="https://fizzara.github.io/figma"> Figma Design </a></li>
<li><a href="https://fizzara.github.io/game"> Game Design </a></li>
<li><a href="https://fizzara.github.io/thesis"> Master's Thesis </a><li>
<li><a href="https://fizzara.github.io/photography"> Photography </a></li>
<li><a href="https://fizzara.github.io/video"> Video </a></li>
</ul>
</div>
<span style="border-right: 1px solid white; padding-right: 0.5em;"></span>
<button class="header-category dropdown-button" style="padding-left: 0.5em;" onclick="location.href = 'https://fizzara.github.io/resume';"> Resumé </button>
</li>
</ul>
</nav>
</header>
<main id="main" class="works-content">
<h1> Coding Work </h1>
<h2> Generative Coding </h2>
<div class="rainbow">
<div class="rainbow-code" alt="Embed showing 'Perpetual Rainbow' code running">
<iframe title="Perpetual Rainbow Code" src="https://editor.p5js.org/f51/full/7ztIji9vh" width="100%" height="642px" style="border: 1px solid black"></iframe>
</div>
<div class="rainbow-text">
<h3 style="font-size: 2em"> <b>Perpetual Rainbow</b> </h3>
<p> "Perpetual Rainbow" is a program created using p5.js the online version of the visual
coding program "Processing", a JavaScript library. It is created by using a class of points
that constantly move and are updated, between which multiple lines are drawn repetitively.
These lines can be influence by sound or by user input, and will go on to create beautiful
generative rainbows that will disappear but will return in a new shape, just as beautiful,
vibrant, and unique as before. </p>
<p style="font-size: 1em"> *Please note that the voice activation does not work in the embed. Please view the original code on the <a href="https://editor.p5js.org/f51/full/yMPvoZSWH"> p5.js website here </a>
</div>
</div>
<hr>
<h2> CodePen </h2>
<div class="codepen-code" id="codepen">
<p> I enjoy coding random things on CodePen! Here are a couple of my creations. Please visit <a href="https://codepen.io/fizzara"> my CodePen profile </a> to view all my work. </p>
<div class="codepen-carousel">
<div class="codepen-ex">
<h3>Google Search dupe</h3>
<iframe height="300" style="width: 100%;" scrolling="no" title="Random Quote Widget" src="https://codepen.io/fizzara/embed/PovbYxN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
<p class="codepen-text"> A dupe of Google Search made for CS50 Web Programming's Project 0. View the <a href="https://www.youtube.com/watch?v=Yu_4nbQxBSk">full project walkthrough video here.</a></p>
</div>
<div class="codepen-ex">
<h3> Volunteer Sign Up </h3>
<iframe height="300" style="width: 100%;" scrolling="no" title="Water Counter" src="https://codepen.io/fizzara/embed/RwmWYOG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
<p class="codepen-text"> A quick mock sign-up form created based of Daily UI's daily prompts.</p>
</div>
<div class="codepen-ex">
<h3> Time Progress Tracker </h3>
<iframe height="300" style="width: 100%;" scrolling="no" title="Water Counter" src="https://codepen.io/fizzara/embed/MWdmPeN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
<p class="codepen-text"> A bar graph showing percentage of day/week/month progress, created as a widget for a Notion template.</p>
</div>
<div class="codepen-ex">
<h3> Calculator </h3>
<iframe height="300" style="width: 100%;" scrolling="no" title="Calculator" src="https://codepen.io/fizzara/embed/Vwoawea?default-tab=&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
<p class="codepen-text"> A basic calculator using HTML, CSS, and Javascript. </p>
</div>
</div>
</div>
<hr style="margin: 30px 0px; border: dashed; border-width: 1px; border-color: #219ebc;">
<h2> Website Coding </h2>
<div id="html-code" class="html-code">
<h3 style="font-size: 1.5em"> <b>Networked Imagination Laboratory</b></h3>
<p> I coded the new website for the Networked Imagination Laboratory at McMaster University from scratch. Working with the laboratory's director, I created a responsive website that advertized all aspects
of the lab and was responsive as well as accessible. View the <a href="https://nil.mcmaster.ca"> Networked Imagination Laboratory website here. </a>
</p>
<p> For the style of the website, the director of the Networked Imagination Laboratory wished for a colourful version of the 70s hacker theme. <br style="margin-bottom: 10px">
To bring this theme a little closer to home I followed the style of the software that the NIL's Cybernetic Orchestra used. This software was quite basic, with
white boxes encompassing each person's code space and a green colour to the font. This style converted quite easily to a website, and brought in the main function
of the laboratory, to be a home for the Cybernetic Orchestra. Working with the client through sessions where we would meet for feedback, we ended up with this.
The director also wished for the website to be as accessible as possible, leading to the clean lines and fonts
used. The website code is appropriately tagged, and the images are either marked decorative or have the appropriate descriptive text.
<div>
<div class="NIL_Images">
<img class="NIL_screengrab" src="Images/NIL/Screenshot 2023-08-30 144448.png">
<p style="flex-basis: 50%">
The equipment page displays all equipment available in the Networked Imagination Laboratory. It includes both a visual layout, and a full list. The list is colour coded to match with the shapes in the visual layout, to simplify viewing. The visual layout uses Javascript to allow users to mouse over shapes in the SVG and view exactly what item is where. This has the added benefit of adding another method other than colour coding for visitors to connect shapes to objects. The visual layout is marked as decorative to allow screen readers to be directed to the list instead, to avoid unnecessary information. </p>
</div>
<div class="NIL_Images">
<img class="NIL_screengrab" src="Images/NIL/Screenshot 2023-08-30 144526.png">
<p style="flex-basis: 50%">
The Orchestra page of the website is meant to display the NIL's Cybernetic Orchestra's previous work. It includes embeds of video and audio of their album, as well as a diary of their past performances, with links where they exist. The embeds allow visitors to view the work in page, preventing the added work of opening other sites and keeping the visitor engaged, rather than sending them away. Again, the page was styled after the program used by the Cybernetic Orchestra, with the album being in a box similar to how each orchestra member would have their designated box.
</p>
</div>
</div>
<div>
</div>
<div style="margin-top: 30px;">
<h3 style="font-size: 1.5em"><b>Portfolio Website</b></h3>
<p> This website was coded by myself using HTML, CSS, and JavaScript, and is hosted on GitHub Pages! To view the source code <a href="https://github.com/fizzara/fizzara.github.io/tree/main"> please click here. </a></p>
</div>
<div style="margin-top: 30px;">
<h3 style="font-size: 1.5em"><b>Futher Website Design</b></h3>
<p> I have designed multiple websites that were not converted to code, but rather created in Figma. To view these websites please visit the <a href="design.html#web-design">Design Page</a>.</p>
</div>
<div id="wordpress" style="margin-top: 30px;">
<h3><b> WordPress <b></h3>
<iframe src="https://fizzara.wordpress.com/" title="fizzara wordpress" width="100%" height="500px"></iframe>
<p>I have designed a basic WordPress portfolio website to demonstrate proficiency. Unfortunately, the WordPress free plan is very limited in what it allows users to create. This page shows my ability to work with WordPress's interface, and if given a higher plan I would be able to create a high quality website. </p>
</div>
</div>
</main>
<footer class="footer">
<div class="footer_name" style="display: flex; gap: 10px; font-size: 2em; align-self: center; align-items: center; font-size: 2em"> <img src="Images/logosized.png" style="max-width: 50px" alt="Fizza Ahmed Logo"> fizza ahmed </div>
<div class="footer_jump">
<p style="margin: 0px;"> Jump To </p>
<ul>
<li><a href="resume.html">My Resume</a></li>
<li><a href="" onclick="footerJump()">A Random Project</a></li>
<li><a href="thesis.html">My Master's Thesis</a></li>
</ul>
</div>
<div class="footer_reach">
<p style="margin: 0px;"> Reach out by </p>
<ul>
<li id="foot_email"><a href="mailto:fizzaahmed2000@hotmail.com"> ✉ Email</a></li>
<li><a href="linkedin.com/in/fizzara"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
<li><a href="https://fizzara.github.io/contact"><i class="fa-regular fa-note-sticky"></i> Contact Form</a></li>
</ul>
</div>
</footer>
</body>
</html>