This repository has been archived by the owner on Aug 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio_page.html
146 lines (135 loc) · 5.77 KB
/
portfolio_page.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Noticia+Text|Nunito+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<title>Chris Woodward Portfolio</title>
</head>
<!-- Note: I did get some advice from this blog post:
https://www.taniarascia.com/you-dont-need-a-framework/
I mainly used it for how it set up the grids and rows.
Most of that I have changed though so its not a direct
copy of her work.
-->
<body>
<header class="main-nav">
<div class="logo left">
<img src="media/logo.svg" alt="logo">
</div>
<div class="main-title">
<h3 class="site-title">Chris Woodward</h3>
<p class="site-tagline">The Works</p>
</div>
</header>
<main>
<hr>
<p class="sect-tag">Featured Work</p>
<section class="featured-work row">
<a href="https://empathicfutures.wordpress.com/portfolio/h-e-l-l-o-w-o-r-l-d/">
<img src="media/fairy_tales.jpg" alt="EFL Fairy Tales Competition Entry" class="radius shadow">
</a>
<div class="feature-caption">
<h3 class="article-title">[ H E L L O W O R L D ]</h3>
<div class="article-author">Empathic Futures Lab</div>
<div class="article-description">
An Architecture Fairy Tales competition entry
exporing AI technology through design fiction.
The basic plot follows the story of a family and
their AI smart home as they adjust to life together.
The catch is that it is told from the perspective
of the AI in the smart home.
</div>
</div>
</section>
<hr>
<p class="sect-tag">Futher Work</p>
<section class="articles-container row">
<article class="content-article left article-grid">
<a href="https://empathicfutures.podbean.com/" class="article-image">
<img src="media/EFL_logo.png" alt="EFL Logo" class="radius shadow">
</a>
<div class="article-caption left">
<h3 class="article-title">EFL Podcast</h3>
<div class="article-author">Empathic Futures Lab</div>
<div class="article-description">
The Podcast about human focused Futures
for the environment in which we live.
</div>
</div>
</article>
<article class="content-article left article-grid">
<div class="article-image left">
<img src="media/keyboard1.jpg" alt="60% Keyboard" class="radius shadow">
</div>
<div class="article-caption left">
<h3 class="article-title">60% Keyboard</h3>
<div class="article-author">Christopher Woodward</div>
<div class="article-description">
A keyboard with a GH60 pcb and a wood case housing Cherry
Black Switches in a 60% form factor.
</div>
</div>
</article>
<article class="content-article left article-grid">
<a href="https://github.com/cwoodward10/IOT_home" class="article-image left">
<img src="media/sensors.jpg" alt="Sensor Board" class="radius shadow">
</a>
<div class="article-caption left">
<h3 class="article-title">I.o.T Home</h3>
<div class="article-author">Empathic Futures Lab</div>
<div class="article-description">
A home sensor network that aggregates data on a local server
and displays that data on a local webpage.
</div>
</div>
</article>
<article class="content-article left article-grid">
<div class="article-image left">
<img src="media/keyboard2.jpg" alt="40% Keyboard" class="radius shadow">
</div>
<div class="article-caption left">
<h3 class="article-title">Let's Split (Acrylic)</h3>
<div class="article-author">Christopher Woodward</div>
<div class="article-description">
An ergonomic 40% board call a "Let's Split" with Hako True switches in a
white acryclic case.
</div>
</div>
</article>
<article class="content-article left article-grid">
<a href="https://cmwoodward.com" class="article-image left">
<img src="media/floating_house_rendering.jpg" alt="Render" class="radius shadow">
</a>
<div class="article-caption left">
<h3 class="article-title">Woodward_Design</h3>
<div class="article-author">Christopher Woodward</div>
<div class="article-description">
My personal portfolio site with all of my Architecture
work during undergrad and grad school at UIUC
</div>
</div>
</article>
<article class="content-article left article-grid">
<div class="article-image left">
<img src="media/keyboard3.jpg" alt="40% Keyboard" class="radius shadow">
</div>
<div class="article-caption left">
<h3 class="article-title">Let's Split (MDF)</h3>
<div class="article-author">Christopher Woodward</div>
<div class="article-description">
An ergonomic 40% board call a "Let's Split" with
Outemu Ice Purple switches in a floral themed MDF case.
</div>
</div>
</article>
</section>
<hr>
</main>
<footer>
<div class=site-footer>All content produced by:</div>
<div class=site-footer>Christopher Woodward</div>
</footer>
</body>