alicestrt
/
portfolio-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new website

Browse Source
master
alicestrt 5 years ago
commit 5c0126477c
36 changed files with 18013 additions and 0 deletions
Show Stats Download Patch File Download Diff File

24
.gitignore vendored
Unescape Escape View File

@ -0,0 +1,24 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
#static files
media/*

674
LICENSE
Unescape Escape View File

@ -0,0 +1,674 @@
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The GNU General Public License is a free, copyleft license for
software and other kinds of works.
The licenses for most software and other practical works are designed
to take away your freedom to share and change the works. By contrast,
the GNU General Public License is intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released this way by its authors. You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights. Therefore, you have
certain responsibilities if you distribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must pass on to the recipients the same
freedoms that you received. You must make sure that they, too, receive
or can get the source code. And you must show them these terms so they
know their rights.
Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you this License
giving you legal permission to copy, distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains
that there is no warranty for this free software. For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.
Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so. This is fundamentally incompatible with the aim of
protecting users' freedom to change the software. The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we
have designed this version of the GPL to prohibit the practice for those
products. If such problems arise substantially in other domains, we
stand ready to extend this provision to those domains in future versions
of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we wish to
avoid the special danger that patents applied to a free program could
make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and
modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy. The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based
on the Program.
To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License. If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work
for making modifications to it. "Object code" means any non-source
form of a work.
A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form. A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities. However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
The Corresponding Source for a work in source code form is that
same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met. This License explicitly affirms your unlimited
permission to run the unmodified Program. The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force. You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright. Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under
the conditions stated below. Sublicensing is not allowed; section 10
makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified
it, and giving a relevant date.
b) The work must carry prominent notices stating that it is
released under this License and any conditions added under section
7. This requirement modifies the requirement in section 4 to
"keep intact all notices".
c) You must license the entire work, as a whole, under this
License to anyone who comes into possession of a copy. This
License will therefore apply, along with any applicable section 7
additional terms, to the whole of the work, and all its parts,
regardless of how they are packaged. This License gives no
permission to license the work in any other way, but it does not
invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display
Appropriate Legal Notices; however, if the Program has interactive
interfaces that do not display Appropriate Legal Notices, your
work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
a) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by the
Corresponding Source fixed on a durable physical medium
customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by a
written offer, valid for at least three years and valid for as
long as you offer spare parts or customer support for that product
model, to give anyone who possesses the object code either (1) a
copy of the Corresponding Source for all the software in the
product that is covered by this License, on a durable physical
medium customarily used for software interchange, for a price no
more than your reasonable cost of physically performing this
conveying of source, or (2) access to copy the
Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the
written offer to provide the Corresponding Source. This
alternative is allowed only occasionally and noncommercially, and
only if you received the object code with such an offer, in accord
with subsection 6b.
d) Convey the object code by offering access from a designated
place (gratis or for a charge), and offer equivalent access to the
Corresponding Source in the same way through the same place at no
further charge. You need not require recipients to copy the
Corresponding Source along with the object code. If the place to
copy the object code is a network server, the Corresponding Source
may be on a different server (operated by you or a third party)
that supports equivalent copying facilities, provided you maintain
clear directions next to the object code saying where to find the
Corresponding Source. Regardless of what server hosts the
Corresponding Source, you remain obligated to ensure that it is
available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided
you inform other peers where the object code and Corresponding
Source of the work are being offered to the general public at no
charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling. In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage. For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product. A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source. The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information. But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law. If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it. (Additional permissions may be written to require their own
removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly
provided under this License. Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or
run a copy of the Program. Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance. However,
nothing other than this License grants you permission to propagate or
modify any covered work. These actions infringe copyright if you do
not accept this License. Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License. You are not responsible
for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations. If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License. For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The
work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement). To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License. You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU Affero General Public License into a single
combined work, and to convey the resulting work. The terms of this
License will continue to apply to the part which is the covered work,
but the special requirements of the GNU Affero General Public License,
section 13, concerning interaction through a network will apply to the
combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of
the GNU General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the
Program specifies that a certain numbered version of the GNU General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation. If the Program does not specify a version number of the
GNU General Public License, you may choose any version ever published
by the Free Software Foundation.
If the Program specifies that a proxy can decide which future
versions of the GNU General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
Later license versions may give you additional or different
permissions. However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:
<program> Copyright (C) <year> <name of author>
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, your program's commands
might be different; for a GUI interface, you would use an "about box".
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU GPL, see
<https://www.gnu.org/licenses/>.
The GNU General Public License does not permit incorporating your program
into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
<https://www.gnu.org/licenses/why-not-lgpl.html>.

35
README.md
Unescape Escape View File

@ -0,0 +1,35 @@
# food-review
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
### Deployment
```
make publish
```
Don't forget to uncomment the vue.config.js lines!

4
TODO
Unescape Escape View File

@ -0,0 +1,4 @@
* On mobile view, when click on review card, take to text (otherwise, no idea there is text)
* iframe of pdf needs space and not be chopped on bottom of the iframe

5
babel.config.js
Unescape Escape View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

12
makefile
Unescape Escape View File

@ -0,0 +1,12 @@
DEST := /var/www/food.alicestrete.me
REMOTE := kstraat
RSYNC := rsync -chavzP --rsync-path="sudo rsync"
SRC := dist/*
SSH := ssh -t
BUILD := npm run build
build:
$(BUILD)
publish: build
$(RSYNC) $(SRC) $(REMOTE):$(DEST)

15070
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

56
package.json
Unescape Escape View File

@ -0,0 +1,56 @@
{
"name": "food-review",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --host 0.0.0.0",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.18",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"@fortawesome/vue-fontawesome": "^0.1.6",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.20",
"core-js": "^2.6.5",
"i": "^0.3.6",
"npm": "^6.9.0",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"webpack": "^4.32.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"babel-eslint": "^10.0.1",
"copy-webpack-plugin": "^5.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html
Unescape Escape View File

@ -0,0 +1,17 @@
<!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="icon" href="<%= BASE_URL %>favicon.ico">
<title>food-review</title>
</head>
<body>
<noscript>
<strong>We're sorry but food-review doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

14
src/App.vue
Unescape Escape View File

@ -0,0 +1,14 @@
<template>
<b-container fluid>
<router-view></router-view>
</b-container>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
</style>

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

64
src/components/AboutPage.vue
Unescape Escape View File

@ -0,0 +1,64 @@
<style scoped>
.about-text {
font-size: 18px;
color: #212322;
text-align: justify;
}
h3 {
font-family: "Open Sans", sans-serif;
font-size: 30px;
font-weight: bold;
}
p {
font-family: "Inconsolata", monospace;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
</style>
<template>
<div>
<MenuBar/>
<b-row class="about-text">
<b-col md="10">
<p>I'm Alice, a Romanian artist/researcher based in Rotterdam, and you're looking at my portfolio.</p>
<p>For more information/questions/collaboration enquiries, drop me an email at alice.strt@gmail.com
You can also find me on <a href="https://www.instagram.com/alicestrt/" target="_blank">Instagram</a> and <a href="https://post.lurk.org/@alcstrt" target="_blank">Mastodon</a>.
</p>
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'AboutPage',
components: {
MenuBar
}
}
</script>

89
src/components/BedchairtablePage.vue
Unescape Escape View File

@ -0,0 +1,89 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">A Bed, a Chair, and a Table</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Publication</p>
<p>A Bed, a Chair, and a Table is a publication about the Poortgebouw, a former squat and vibrant living community located in the South of Rotterdam. In this book, oral histories from inside and outside the building are interlaced with material from various institutional and perfonal archives. By bringing together these tales of resilience, political struggle, frustration and friendship, with historical documents, this book brings forward new perspectives about Poortgebouw's unique history and its importance in the contemporary city.
</p>
<p>My focus in working on this publication was collecting stories and interviews from people with a strong connection to the Poortgebouw. These voices were then interlaced together to create a narrative, and to build the story of Poortgebouw's past 30 years, as well as its future.</p>
<p>This <a href="https://issue.xpub.nl/04/">publication</a> was developed together with Natasha Berting, Angeliki Diakrousi, Joca van der Horst, Alex Roidl, Elisa Chaudet and Zalán Szakács.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/bed/bed.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/bed/inside_bed.jpg"></b-img>
<p></p>
<b-img class="img-fluid" src="media/bed/stack_bed.jpg"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'BedchairtablePage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

85
src/components/CataloguePage.vue
Unescape Escape View File

@ -0,0 +1,85 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Upsetting Settings Catalogue</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Publication, graduation catalogue</p>
<p>The Upsetting Settings Catalogue presents two years' worth of work from the 2019 graduates of the Piet Zwart Institute, Experimental Publishing. The publication was launched within the graduation show Upsetting Settings, at UBIK Rotterdam. The concept behind 'Upsetting settings' arises from the defaults of technology. In every system there are settings predefined by its creators, that most of the time stay untouched by us, as users. It's their default, not ours, but it's up to us to change it. Society is made of similar preset frameworks that we take for granted. The projects in this exhibition engage with these different default modes and intervene in their core structure/source/root.
</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/catalogue/catalogue.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/catalogue/catalogue1.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/catalogue/ounupo.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/catalogue/timetoeat.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'CataloguePage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

118
src/components/CookingCard.vue
Unescape Escape View File

@ -0,0 +1,118 @@
<style scoped>
* {
border: 0px black solid;
}
p {
text-align: justify;
font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
background-color: #f0f0f0;
}
</style>
<template>
<div>
<b-row align-h="center">
<b-col cols="10">
<div class="card_content">
<a name="cooking_title"><p style="text-align: center; font-weight: bold;">We love food, we hate having to cook it</p></a>
<p>
There is a <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="theory_of_evolution" title="Theory of evolution ">theory of evolution</span> that says the following: the development of the Homo Sapiens brain happened
mainly due to the discovery of fire, and subsequently cooking. By using less energy to hunt, and spending less time chewing raw food, the <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="brain" title="Cooking Up Bigger Brains">human brain</span> had increasingly more space and time to develop new activities, ponder upon its surroundings
and grow in size. Throughout the years, cooking has maintained its crucial role worldwide, as a fundamental part of culture and society, but also as a way to make food safer to eat and easier to preserve. Cooking
also represented a catalyst for humans to become social beings, which became more civilized and introspective while sitting around the cooking fire <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="cooked" title="Cooked: A Natural History of Transformation">(Pollan, 2014)</span>. But while everybody benefited from the positive aspects of cooked food,
the labour associated with it became a task reserved only for some.
</p>
<p>
Women have been pushed towards domestic work ever since the evolution from more equal hunter-gatherer societies to settled agricultural societies <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="women_opression" title="Engels and the Origin of Women's Oppression">(Smith, 1997)</span>. Traditionally, men provided the food, earned at first by hunting, and later on through their
paid job. Women would be in charge of preparing food for everyone, and that role rarely changed. Throughout time, cooking as a means of caregiving became a practice identified more with women, while <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="performance_timetoeat" title="Cooking performance">cooking for entertainment </span> or skill
display was, and still is, associated with men (Cairns et al. 2010). In many households it is still often considered a special occasion when <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="man_cooking"
title="The cooking man">the man of the house cooks</span>. This view was reinforced in cooking advice from the 20th century; men do not cook on a daily basis, but <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="dad"
title="When dad cooks">when they do</span>, they cook dishes that best display their talents (Vester,
2015).
</p>
<p>
Discussing the gender politics of cooking, Pollan wonders: “Was home cooking denigrated because the work was mostly done by women, or did women get stuck doing most of the cooking because our culture denigrated the work?” (Pollan, 2014). Men often had
a privileged position when it comes to their cooking practice - mostly with meat, outdoors, seen as entertainment, while women’s cooking happened behind closed kitchen doors. Today, most of the world-renowned <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="male_chefs"
title="Google results for best chefs in the world"> chefs</span>, the ones who win
countless awards and get their own TV shows are men.
</p>
<p>
However, the more time we spend watching chefs cook meals we’ll never get to eat, the less time we spend cooking for ourselves. In the past decades, studies have shown that cooking time has declined (Pollan, 2014; <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="home_cooking"
title="The Slow Death of the Home Cooked Meal">Ferdman, 2015</span>). <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="cooking_timetoeat"
title="Cooking is not for everyone" left>Less cooking</span> in the average
household means, one the one side, less housework reserved for women. It also means that corporations make great profits from providing the food we eat on a daily basis, which comes with several downfalls. Food made by a corporation
has many more chemical ingredients, that people very rarely use in their kitchens (Pollan, 2014). Eating packaged foods has increased the distance between what raw ingredients are and where they come from, and the food we actually
consume. “Food becomes just another commodity, an abstraction. And as soon as that happens we become easy prey for <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="soylent_quote" title="A quote from Soylent" left>corporations selling synthetic versions</span> of the real thing - what I call edible foodlike substances.”(Pollan, 2014).
</p>
<p>
The phrase <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="woman_place" title="A woman's place">a woman’s place is in the kitchen</span>, or the home, has been traced back as far as Ancient Greece’s Aeschylus.
Since then, it has been restated and reinterpreted throughout history, in literature, art, and politics (Popik, 2013). We can see an example of this belief in <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="leave_it"
title="Leave it to the Beaver">a clip from Leave it to Beaver</span>, a popular 50s American sitcom. In it, the father explains to a confused son why he’s more suited to do all the grilling outdoors, while his mother works inside the
kitchen. “A woman’s place is in the home, and as long she’s in the home, she might as well be in the kitchen. Women do alright when they have all the modern conveniences, but us men are better at this rugged type of outdoor cooking.
Sort of a throwback to cavemen days.” (Leave it to Beaver, 1957). His last remark reinforces the idea that gender roles have an evolutionary development, are part of human nature and should not be questioned.
</p>
<p>
A brilliant example of the portrayal of women in the kitchen, from a woman’s perspective, is <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="martha_rosler" title="Martha Rosler">Martha Rosler’s Semiotics of the Kitchen</span>.
In this <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="semiotics" title="Semiotics of the Kitchen">performance piece</span>, set in a typical kitchen, Martha Rosler manipulates kitchen tools with sudden, violent gestures, sometimes even performing useless tasks such as pretending to throw the contents of a spoon over her shoulder.
Her piece is meant to express the frustration of women being stuck doing domestic labour, which is taken for granted. It is also a parody of the cooking shows of the time, particularly the one hosted by an always cheerful <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="julia_show" title="The French Chef">Julia Child</span>.
In her mock culinary show, she is no longer a cheerful performer, but uses the tools that have been assigned to her as an expression of anger and frustration: “when the woman speaks, she names her own oppression” (Rosler, 1975). Her
piece shows that gender roles enforced traditionally within the household can be oppressive, especially when the labour of women is devalued and regarded as trivial.
</p>
<p>
As both men and women have been finding their place within the workforce, sharing the workload within the home has increased slightly. However, even in homes where both partners work full-time, the majority of chores and administrative tasks still fall
on the woman’s shoulders, either mentally, or in practice. The extra workload that consists of planning and organisation and leads to the execution of the tasks has been coined by feminists as <span style='border-bottom: 2px black dashed;'
v-b-popover.click.html="mental_load" title="The mental load">the mental load</span> (Emma, 2017). Household management is yet another invisible task done by women, a time-consuming work nonetheless, which adds up to the time already
spent doing house chores.
</p>
<p>
Today, technology corporations provide more options. Rather than sharing the work equally, both the mental load and the actual chores can be automated, to some extent, through technological solutions. No longer framed explicitly as women’s work, but continuing
to be (de)valued as such, tasks such as cooking can be facilitated through <span style='border-bottom: 2px black dashed;'
v-b-popover.click.html="taskrabbit" title="Taskrabbit fulfills your cooking needs">various apps</span>. From a tool of oppression directed at women, food becomes a task delegated to gig workers by startups and other corporations. Regarding food as
a tool of oppression has opened the way for many solutions, some more realistic than others. The <span style='border-bottom: 2px black dashed;'
v-b-popover.click.html="jetsons" title="Instant food machine from The Jetsons">automation of food and cooking</span> has been a recurrent topic of conversation and space for imagination both within social movements, and
in popular culture.</p>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'CookingCard',
data: function() {
return {
theory_of_evolution: '<a href="https://www.scientificamerican.com/article/cooking-up-bigger-brains/?redirect=1" target="_blank"> A theory developed by Richard Wrangham, biological anthropologist at Harvard University</a>',
woman_place: '<a href="https://www.barrypopik.com/index.php/new_york_city/entry/a_womans_place_is_in_the_kitchen/" target="_blank"> The origins of the phrase </a>',
leave_it: '<iframe class="img-fluid" src="https://www.youtube.com/embed/MXhlTQJcgbc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
mental_load: '<iframe class="img-fluid" src="https://i.guim.co.uk/img/media/e916cc0a952d793c9f82dcd6954afcac63d68c87/0_0_2000_2000/master/2000.png?width=1920&quality=85&auto=format&fit=max&s=a2b1fc7a0500118c9bf17bc660b566b9"></iframe>',
martha_rosler: '<img class="img-fluid" src="./media/topics/gender_in_food/images/martha.jpg"></img>',
man_cooking: '<iframe class="img-fluid" src="https://archive.org/embed/Wordtoth1955" width="200" height="2000" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>',
semiotics: '<iframe class="img-fluid" src="https://www.youtube.com/embed/ZuZympOIGC0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
women_opression: '<a href="https://www.isreview.org/issues/02/engles_family.shtml" target="_blank"> "The rise of class society brought with it rising inequality–between the rulers and the ruled, and between men and women"</a>',
julia_show: '<iframe class="img-fluid" src="https://www.youtube.com/embed/hWi3NwDrQok" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
jetsons: '<img class="img-fluid" src="./media/topics/cooking/images/jetsons.gif"></img>',
male_chefs: '<img class="img-fluid" src="./media/topics/gender_in_food/images/chefs.gif"></img>',
cooked: '<a href="https://en.wikipedia.org/wiki/Cooked:_A_Natural_History_of_Transformation" target="_blank"> Michael Pollan writes a manifesto for cooking in his 2014 book</a>',
dad: '<iframe class="img-fluid" src="https://clyp.it/vc1zjuvo/widget" frameborder="0"></iframe>',
home_cooking: '<a href="https://www.washingtonpost.com/news/wonk/wp/2015/03/05/the-slow-death-of-the-home-cooked-meal/?noredirect=on&utm_term=.3da4866e460d" target="_blank">"Less than 60 percent of suppers served at home were actually cooked at home last year. Only 30 years ago, the percentage was closer to 75 percent."</a>',
brain: '<a href="https://www.scientificamerican.com/article/cooking-up-bigger-brains/?redirect=1" target="_blank"> "Our hominid ancestors could never have eaten enough raw food to support our large, calorie-hungry brains, Richard Wrangham claims. The secret to our evolution, he says, is cooking" </a>',
taskrabbit: '<img class="img-fluid" src="./media/topics/post-mom_economy/images/task.png"></img>',
cooking_timetoeat: '<video class="img-fluid" controls autoplay src="./media/topics/cooking/video/cooking.mp4"></video>',
soylent_quote: '<img class="img-fluid" src="./media/topics/meal_replacement_brands/quotes/soylent2.png"></img>',
performance_timetoeat: '<video class="img-fluid" controls autoplay src="./media/topics/gender_in_food/video/making_huel.mp4"></video>',
}
},
}
</script>

65
src/components/FullTextPage.vue
Unescape Escape View File

@ -0,0 +1,65 @@
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
#header {
margin-top: 40px;
}
.pdf {
margin-top: 40px;
}
p {
text-align: center;
}
h3 {
text-align: center;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
</style>
<template>
<div>
<MenuBar/>
<b-row align-h="center">
<b-col md="6" sm="12">
<h3>Your Body Will Make Itself Heard</h3>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="10">
<p><a href="https://git.xpub.nl/alicestrt/Thesis" target="_blank">Download</a> the full text of my thesis.</p>
</b-col>
</b-row>
<b-row align-h="center">
<b-col class="pdf" cols="12">
<b-embed
type="iframe"
aspect="4by3"
src="./media/thesis.pdf"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'FullTextPage',
components: {
MenuBar
}
}
</script>

67
src/components/FutureCard.vue
Unescape Escape View File

@ -0,0 +1,67 @@
<style scoped>
* {
border: 0px black solid;
}
p {
text-align: justify;
font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
background-color: #f0f0f0;
}
</style>
<template>
<div>
<b-row align-h="center">
<b-col cols="10">
<div class="card_content">
<a name="future_title"><p style="text-align: center; font-weight: bold;">Becoming robots, losing our tastebuds</p></a>
<p>
Within the mainstream technology field, there is a current trend towards enhancing brain and physical capacities through consumer products. More specifically, disconnecting the weakness of the body from the sharpness of the mind can be identified in trends
such as, genomics, the quantified self and biohacking. These are also a result of the frustration of not being able to change some aspects of life, such as the need to eat, rest, and the inevitability of death. Within the small circles
of the world’s millionaires, these issues are of great interest, with fortunes invested into research and development. </p>
<p>
In the view of Ray Kurzweil, the famous self-proclaimed futurist, the body deserves no respect in its fragility, and all its shortcomings can be conquered through the intelligence of the brain <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="kurzweil" title="The trailer of Transcendent Man">(Transcendent Man, 2009)</span>. In the future he predicts, a transhumanist
future, the body as an unique physical entity has no place, when <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="brains" title="Ray Kurzweil wants us to go beyond human">our minds</span> will be able to explore many new worlds and inhabit virtual bodies, while holding vast amounts of universal knowledge.</p>
<p>
Relating back to the previous chapter, meal replacements represent an ideological universal solution to the problem of the body. In my view, they play the role of a consumer market-friendly product which comes as an introduction to bigger and more
profitable issues, such as disease and aging. However, like universal knowledge, universal nutrition cannot represent a solution to the needs of the entire planet. The answers currently provided by companies which produce meal replacements
are not as sustainable, affordable and appealing as they claim (Huel.com, 2017). Even though companies such as Soylent pride in collaborating with the World Food Program to provide meals for those in need, I believe that corporate
solutions are not what the world needs to deal with its most pressing problems, such as climate change, poverty and access to food and water.
</p>
<p>
In recent years, more and more money and intelligence have been invested in Silicon Valley into studying the human body. The focus is not so much on curing diseases such as cancer and diabetes, but specifically on curing the one ‘disease’ affecting the
upper classes: growing old. The richest of the rich are deeply invested in <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="white_men" title="The rich need more time to spend their fortunes">making themselves live as long as possible</span>. The most likely implication of this plan is that anti-aging technologies will only be available to the elite, and
will not benefit the rest of the world in any way. Even Bill Gates has recently warned the world that gene editing technology will only contribute to even greater inequality between the rich and the poor (Court, 2019).
</p>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'FutureCard',
data: function() {
return {
kurzweil: '<iframe class="img-fluid" src="https://www.youtube.com/embed/ntY01qoIdus" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
brains: '<iframe class="img-fluid" src="https://www.youtube.com/embed/zDj5Drh5ZIE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
white_men: '<a href="https://splinternews.com/life-extension-technology-gives-us-a-bleak-future-more-1793857274" target="_blank">Life extension technology gives us a bleak future: more white men</a>',
}
},
}
</script>

25
src/components/GlossaryPage.vue
Unescape Escape View File

@ -0,0 +1,25 @@
<template>
<div>
Glossary of terms
</div>
</template>
<script>
export default {
name: 'GlossaryPage',
}
</script>
<style scoped>
#header{
margin-top: 40px;
}
p {
text-align: justify;
}
#introduction{
margin-top: 30px;
}
</style>

108
src/components/HappinessPage.vue
Unescape Escape View File

@ -0,0 +1,108 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">The Happiness Project</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Public intervention</p>
<p>
The Happiness Project was created together with Angeliki Diakrousi as a intervention in the city of Groningen. The intervention took place in parallel and as a response to the local festival Let's Gro, a festival about improving the city through start up initiatives, wih a focus on the assumption that Groningen locals are 'happy'. </p>
<p>Borrowing the existing infrastructure for advertising and corporate communication, or signs placed by people to regulate their own private space, creating borders between private and public, we made our own statements as a response/dialogue to the words of Let’s Gro. Using similar materials, communication methods and graphics, we created small engravings that blend in with the grass, buildings and sidewalk, and make a surprising comment on the issue of happiness. At the same time we understand the term growing, that is included in the name of the festival, as occupying a space, making a big and bold statement, which led to our choice of a big banner. We walked with a big banner, with the statement ‘Happiness is a privilege’, through the city in a rush hour.</p>
<p>The project was part of the Timeline Gallery project, developed with the help of SIGN Groningen. Find this project <a href="https://sign2.nl/events/timeline-intervention-happiness-project-alice-strete-angeliki-diakrousi/" target="_blank">here</a> as well.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/happiness/happy.gif"></b-img>
<p></p>
<b-img class="img-fluid" src="media/happiness/cope.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/happiness/grass1.JPG"></b-img>
<p></p>
<b-img class="img-fluid" src="media/happiness/grass2.JPG"></b-img>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-img class="img-fluid" src="media/happiness/grow.JPG"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/happiness/city.JPG"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/happiness/signs.JPG"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'HappinessPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

26
src/components/MenuBar.vue
Unescape Escape View File

@ -0,0 +1,26 @@
<template>
<b-row class="mb-5-menu">
<b-navbar toggleable="lg">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</b-row>
</template>
<script>
export default {
name: 'MenuBar',
}
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

87
src/components/OverunderPage.vue
Unescape Escape View File

@ -0,0 +1,87 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Over/Under</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Publication, software art</p>
<p>Over/Under explores the connection between weaving and programming, and the almost mystical connection between women and software writing, embedded deep in women's tradition of weaving not just threads, but networks.
</p>
<p>The weaving-programming connection can be represented through an equation: input + rules = output. In the case of weaving, the input is thread, the rules are the pattern, and the output is fabric. In the case of software, the input is data, the rules are the sequence, syntax, etc, and the output is data modified according to the rules. I wanted to be able to reveal the rules applied to the input through the output, by tracing back the instructions line by line. From all this came the writing of an interpreted language in Python that could receive as rules basic weaving instructions 'over' and 'under', and apply a pattern onto text.</p>
<p>The software was developed in the context of the <a href="https://issue.xpub.nl/05/">OuNuPo Special Issue</a>, at the Piet Zwart Institute. The publication was displayed at the <a href="https://gaite-lyrique.net/evenement/grrrls-tech-zine-fair">Grrrls Tech Zine Fair</a>, at Le Gaîté Lyrique, Paris.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/overunder/overunder.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/overunder/over_inside.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/overunder/22.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/overunder/instructions.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'OverUnderPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

270
src/components/ReviewPage.vue
Unescape Escape View File

@ -0,0 +1,270 @@
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
b-card {
border: 0px;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.intro_text {
text-align: justify;
font-size: 16px;
color: #212322;
font-family: 'Inconsolata', monospace;
}
.review_block {
border-bottom: 1px solid #D3D3D3;
}
.icon_dropdown {
margin-top: 10px;
margin-bottom: 10px;
}
.card-text {
font-family: 'Inconsolata', monospace;
font-size: 14px;
}
.card-title {
font-family: 'Open sans', sans-serif;
font-size: 16px;
font-weight: bold;
}
.read-button {
text-decoration: none;
color: #212322;
font-size: 14px;
}
.main-cards {
margin-top: 20px;
}
#intro_title {
font-weight: bold;
text-align: center;
font-size: 30px;
color: #212322;
font-family: 'Open Sans', sans-serif;
}
</style>
<template>
<div>
<MenuBar/>
<!-- End of top menu-->
<div class="review_block">
<b-container fluid>
<b-row align-h="center" class="mb-2">
<b-col cols="10">
<p id="intro_title">THE REVIEW</p>
<div class="intro_text">
<p>
... this goes beyond a default review. Rather than discussing the physical characteristics of one product or another, my analysis focuses on the broader context in which these products have developed, highlights the patterns of techno-solutionism I've identified as problematic, and deconstructs their benefit claims and potential for becoming increasingly relevant in today's Western societies. At the same time, having experienced such a diet myself, it also represents a situated look at what replacing food entails.
</p>
<p>
I've become interested in meal replacements because the concept of rejecting food as inefficient, and replacing it with an ultra-processed powder, intrigued me. The idea was alienating, so far removed
from my values and desires, so I had to look deeper. I ended up writing an essay, following the historical path and cultural patterns that led to the growth of a culture, an ideology, a community around the act of diminishing the importance of one
of the most basic human habits. In addition to the text, I translated my research into a video essay, which focuses on the techno-solutionist aspects of meal replacements: the problems they claim to address, and the solutions they put forward.
</p>
<p>
Below, you will find excerpts of my essay, split into the main topics covered in my research. Scattered throughout the text are images, references, articles, quotes and video snippets, some extracted from my own video essay, which together build a complex
image of the world of meal replacements.
</p>
</div>
</b-col>
</b-row>
<b-row align-h="center">
<!-- <b-col cols="6" class="text-center">
<iframe src="https://giphy.com/embed/Jpq4T77gjhcLytGjvk" width="240" height="120" frameBorder="0" allowFullScreen></iframe>
</b-col> -->
</b-row>
</b-container>
</div>
<!-- End of description-->
<b-row align-h="center" class="icon_dropdown">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
Meal replacements aim to replace food with food-like substances, removing the need to cook. But why is the relationship between humans and cooking important in the first place?
</b-dropdown-text>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item v-on:click="resetShowCookingCard(showCookingCard)" href="#cooking_title" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
When you have no time to eat throughout the day, you have to reconsider your priorities. Sometimes, that means eating your meals in liquid form.
</b-dropdown-text>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item v-on:click="resetShowTimeCard(showTimeCard)" href="#time_title" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
The food system has plenty of problems, from food waste to world hunger. Most meal replacement brands claim to tackle some of these issues through their products.
</b-dropdown-text>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item v-on:click="resetShowSolutionsCard(showSolutionsCard)" href="#solutions_title" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
If food is inefficient in keeping humans alive, what makes meal replacements an appropriate alternative?
</b-dropdown-text>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item v-on:click="resetShowValueCard(showValueCard)" href="#value_title" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
In the future, we will probably have to change the ways in which we relate to food. Will future food be purely functional?
</b-dropdown-text>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item v-on:click="resetShowFutureCard(showFutureCard)" href="#future_title" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<b-container fluid>
<b-row align-h="center">
<b-col cols="12" class="main-cards">
<transition name="fade">
<div v-if="showCookingCard">
<CookingCard/>
</div>
<div v-if="showTimeCard">
<TimeCard/>
</div>
<div v-if="showSolutionsCard">
<SolutionsCard/>
</div>
<div v-if="showValueCard">
<ValueCard/>
</div>
<div v-if="showFutureCard">
<FutureCard/>
</div>
</transition>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import CookingCard from './CookingCard'
import TimeCard from './TimeCard'
import SolutionsCard from './SolutionsCard'
import ValueCard from './ValueCard'
import FutureCard from './FutureCard'
import MenuBar from './MenuBar'
export default {
name: 'ReviewPage',
components: {
CookingCard, TimeCard, SolutionsCard, ValueCard, FutureCard, MenuBar
},
data: function() {
return {
showCookingCard: false,
showTimeCard: false,
showSolutionsCard: false,
showValueCard: false,
showFutureCard: false,
}
},
methods: {
onClick() {
this.$refs.dropdown.hide(false)
},
// because we don't know how to program JS
resetShowCookingCard(currentValue) {
this.showCookingCard = !currentValue
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = false
},
resetShowTimeCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = !currentValue
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = false
},
resetShowSolutionsCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = !currentValue
this.showValueCard = false
this.showFutureCard = false
},
resetShowValueCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = !currentValue
this.showFutureCard = false
},
resetShowFutureCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = !currentValue
},
}
}
</script>

77
src/components/SolutionsCard.vue
Unescape Escape View File

@ -0,0 +1,77 @@
<style scoped>
* {
border: 0px black solid;
}
p {
text-align: justify;
font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
background-color: #f0f0f0;
}
</style>
<template>
<div>
<b-row align-h="center">
<b-col cols="10">
<div class="card_content">
<a name="solutions_title"><p style="text-align: center; font-weight: bold;">Techno-solutionism and the rise of meal replacements</p></a>
<p>The way we eat and think of food today is bound to change. The increasing demand for food, especially meat and dairy, combined with the damaging effects of climate change on agriculture (Cho, 2018), has the potential to push the food industry
in new directions, and consumers to reconsider their choices. Within this context, technology companies, the new actors on the food industry stage, are putting forward a solution which regards food as being archaic and inefficient,
and the practices around food preparation as time-wasters. Their solution, materialized in products dubbed as ‘complete foods’ or ‘meal replacements’, which allegedly contain all the essential nutrients for the human body, is backed
up by <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="funding" title="Despite setbacks, Soylent drinks up $50 million in fresh funding">huge financial support</span> from venture capital, and presented as the future of food. However, besides that fact that it <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="solution_timetoeat" title="To what extent do meal replacements represent solutions">does not offer a real solution </span> to the problems we are facing, this interpretation of food does not reflect its
historical importance. The cultural role of food, gender representation, or collective values associated with sharing food, are largely disregarded. Instead, the emphasis is on the continuous quest to improve food products, within
the value system of <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="techno_solutionism" title="Evgeni Morozov on techno-solutionism">techno-solutionism</span>. In his book To Save Everything, Click Here, Evgeny Morozov critically describes this value system, explaining that “this never-ending quest to ameliorate [. . . ] is shortsighted and only perfunctorily
interested in the activity for which improvement is sought” (Morozov, 2013). This critique applies to the development of meal replacements, the materialization of techno-solutionism in food, which are promoted as an <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="benefits" title="The benefits of Huel">universal response</span>
to anything from time management, nutritional dilemmas, food waste and sustainability. Throughout this work, I will look at the development and implications of the meal replacement phenomenon, and, through the lens of food, provide
an outlook on tech industry’s influence on Western culture.
</p>
<p>(...)</p>
<p>
The rise of products branded as innovative foods has largely happened in the last decade, originating from Silicon Valley. The latest innovations, such as meal replacements, make promises for an empowered self, with full control over what one puts in
one’s body. Companies place a lot of emphasis on a scientific approach to selecting ingredients for a particular product, and brand their products as technologically advanced food items. But the process of producing or sourcing the
ingredients is almost never exposed, thus further obscuring the processes involved in food production. One notable example is the company Huel, which created a <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="how_its_made" title="Devon to Doorstep. How Huel is Made">video on YouTube</span> titled How Huel Is Made, but failed to actually show their
process. Instead, the video described its packaging and delivery system, a fact that was quickly noted in the <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="comment" title="A comment on the video allegedly showing how Huel is made">comments</span> section as disingenuous.</p>
<p>The celebration of not having time to tend to your bodily needs properly, together with the emphasis on giving the body personalized nutrition in the most pleasureless way is, of course, a paradoxical incongruity. At the same time, the
idea that you are <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="humans_timetoeat" title="You're the only one responsible for your success and failure">solely responsible</span> for your well-being, and that you can control your health and efficiency with the right consumer habits is another heavily promoted concept. Trying to reconcile and adopt all these suggestions for
how one should live their life is almost impossible, and leads to burnout. However, startups in Silicon Valley and all over the world are more than ready to provide products to any imaginable issue that can be identified, in order
to achieve their prescribed quality of life. This is problematic in many ways, because it completely ignores other factors that influence our lives, such as social class, income, education, access etc, while promoting efficiency and
production as the main goals to be achieved by humans.</p>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'SolutionsCard',
data: function() {
return {
techno_solutionism: '<iframe class="img-fluid" src="https://www.youtube.com/embed/fOvaNzIxz54?start=26" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
lot_2046: '<a href="https://www.lot2046.com/" target="_blank">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>',
solution_timetoeat: '<video class="img-fluid" controls autoplay src="./media/topics/meal_replacement_products/video/end_of_day_cut.mp4"></video>',
humans_timetoeat: '<video class="img-fluid" controls autoplay src="./media/topics/personal_experience/video/humans.mp4"></video>',
comment: '<img class="img-fluid" src="./media/topics/personal_experience/communities/images/doorstep.png"></img>',
how_its_made: '<iframe class="img-fluid" src="https://www.youtube.com/embed/NpK63Auk1_A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
funding: '<a href="https://techcrunch.com/2017/05/04/despite-setbacks-soylent-drinks-up-50-million-in-fresh-funding/"></a>',
benefits: '<img class="img-fluid" src="./media/topics/meal_replacement_brands/images/icons/huel.png"></img>',
}
},
}
</script>

148
src/components/SplashPage.vue
Unescape Escape View File

@ -0,0 +1,148 @@
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
border: 0px black solid;
}
.row_title {
font-size: 30px;
writing-mode: vertical-rl;
text-orientation: upright;
font-family: "Open Sans", sans-serif;
text-align: center;
padding-top: 25px;
padding-bottom: 10px;
}
.item_title {
font-family: "Open Sans", sans-serif;
font-size: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
#myname {
font-size: 30px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: black;
}
</style>
<template>
<div>
<MenuBar/>
<b-container fluid>
<b-row>
<b-col md="4">
<p id='myname'>
Alice Strete, person
</p>
</b-col>
</b-row>
</b-container>
<b-container fluid>
<b-row>
<b-col md="1">
<p class="row_title">PROJECTS</p>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/TimeCard">Is it time to eat, or is there no more time to eat?</b-link></p>
<b-img class="img-fluid" center src="media/making_huel.gif"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/HappinessPage">The Happiness Project</b-link></p>
<b-img class="img-fluid" center src="media/cope.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/xppl" >XPPL</b-link></p>
<b-img class="img-fluid" src="media/xppl_main.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/tab">Temporary Autonomous Bureau</b-link></p>
<b-img class="img-fluid" src="media/tab.jpg"></b-img>
</b-col>
</b-row>
</b-container>
<b-container fluid>
<b-row>
<b-col md="1">
<p class="row_title">WORKSHOPS</p>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/zinemachines">Zine Machines</b-link></p>
<b-img class="img-fluid" src="media/zinemachines.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/unpacking">Unpacking Gender Roles</b-link></p>
<b-img class="img-fluid" src="media/unpacking.png"></b-img>
</b-col>
</b-row>
</b-container>
<b-container fluid>
<b-row>
<b-col md="1">
<p class="row_title">PUBLICATIONS</p>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/upsetting">Upsetting Settings, Collected Works</b-link></p>
<b-img class="img-fluid" src="media/upsetting_settings_book.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/catalogue">Upsetting Settings Catalogue</b-link></p>
<b-img class="img-fluid" src="media/catalogue.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/overunder">Over/Under</b-link></p>
<b-img class="img-fluid" src="media/overunder.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/xeno">Techno/Cyber/Xeno-Feminism</b-link></p>
<b-img class="img-fluid" src="media/Xeno.png"></b-img>
</b-col>
<b-col md="2">
<p class="item_title"><b-link to="/bedchairtable" target="_blank">A Bed, a Chair and a Table</b-link></p>
<b-img class="img-fluid" src="media/bed.png"></b-img>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'SplashPage',
components: {
MenuBar
}
}
</script>

106
src/components/TabPage.vue
Unescape Escape View File

@ -0,0 +1,106 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Temporary Autonomous Bureau</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Installation, discussion, workshop, performance, publication</p>
<p>The Temporary Autonomous Bureau is a space for researching and discussing interpretations of autonomy in cultural or social projects within Rotterdam. For the duration of three months in 2018, we converted a space at TENT into a temporary office. Following two projects from 2017 – the database ‘The Autonomous Archive’ and the publication ‘A Bed, A Chair and A Table’ – we used this space to carry on researching the Poortgebouw’s history, a historic residential community located next to the Maas River.</p>
<p>The project has 3 parts. First, we organized a discussion session with guests from WORM Pirate Bay Archive, Leeszaal West and Stichting Freehouse, on the topic of <a href="https://www.tentrotterdam.nl/event/the-temporary-autonomous-bureau-anomalous-institutions/" target="_blank"><i>Anomalous Institutions</i></a> and how they can function and survive in Rotterdam. Second, within the workshop <a href="https://www.tentrotterdam.nl/event/workshop-stop-being-an-instrument-and-sing-your-own-songs/" target="_blank"><i>Stop Being an Instrument and Sing Your Own Songs</i></a>, we generated slogans with the help of a Python script, painted them on banners and displayed them in and outside of the TENT building. Finally, during our last performance <a href="https://www.tentrotterdam.nl/event/the-temporary-autonomous-bureau-anatomy-autonomy/" target="_blank"><i>Anatomy of Autonomy</i></a>, we read collectively a computer generated manifesto on autonomy and self-organization, and presented our research within a publication. </p>
<p>This research project was developed together with Angeliki Diakrousi, Giulia de Giovanelli, Naomi De Wit, Philippa Driest, and Thanos Kaltsamis. Find this project <a href="https://www.tentrotterdam.nl/tentoonstelling/rotterdam-cultural-histories-13-the-temporary-autonomous-bureau/" target="_blank">here</a> as well.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/tab/installation.jpg"></b-img>
<p></p>
<b-img class="img-fluid" src="media/tab/read.JPG"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/tab/IMG_0793.JPG"></b-img>
<p></p>
<b-img class="img-fluid" src="media/tab/code.png"></b-img>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-img class="img-fluid" src="media/tab/zine.JPG"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/tab/scan.jpg"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/tab/scan2.jpg"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'TabPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

108
src/components/TimeCard.vue
Unescape Escape View File

@ -0,0 +1,108 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Is it time to eat, or is there no more time to eat</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Desktop film, website, essay, installation, performance</p>
<p>
Is it time to eat, or is there no more time to eat is an extensive review of the most prominent techno-solutionist creation in terms of food. It manifests itself into a desktop film and an essay, alongside an archive of images, articles, videos and more, which together deconstruct the culture of future food, born in the valley of technological quick-fixes.</p>
<p>
The work takes a closer look at the culture around the techno-solutionist ideology, and the role of meal replacements within societies which value the authoritative roles of tech innovators and their potential to impact the way humans live.</p>
<p>The <a href="https://www.youtube.com/watch?v=S-maUIUAC3I" target="_blank">video</a> was presented alongside an installation and a participative performance within the Upsetting Settings graduation show of the Experimental Publishing masters program, at UBIK Rotterdam, July, 2019. Find the project <a href="https://project.xpub.nl/is-it-time-to-eat-or-is-there-no-more-time-to-eat/" target="_blank">here</a> and the thesis <a href="https://project.xpub.nl/is-it-time-to-eat-or-is-there-no-more-time-to-eat/pdf/your-body-will-make-itself-heard.pdf" target="_blank">here</a>.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/timetoeat/examples.gif"></b-img>
<p></p>
<b-img class="img-fluid" src="media/timetoeat/making_huel.gif"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/timetoeat/food_waste.gif"></b-img>
<p></p>
<b-img class="img-fluid" src="media/timetoeat/unlike_food.gif"></b-img>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-img class="img-fluid" src="media/timetoeat/review.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/timetoeat/table.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/timetoeat/flyer.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'TimeCard',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

83
src/components/UnpackingPage.vue
Unescape Escape View File

@ -0,0 +1,83 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Unpacking Gender Roles</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Workshop, discussion</p>
<p>Unpacking Gender Roles was an informal meet-up to discuss our graduation processes under the same umbrella, through the lens of gender. In our work, we explored strategies to unpack, decontextualize and infiltrate gender structures in our daily lives. During this session, we talked about public speaking and listening, visual gender representations in food culture, and how social media amplifies some voices while silencing others. The intention of this event was to make our processes public, and invite others to exchange feedback.</p>
<p>This session was created in collaboration with Angeliki Diakrousi and Natasha Berting.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/unpacking/un2.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/unpacking/un1.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/unpacking/unpacking.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'UnpackingPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

83
src/components/UpsettingPage.vue
Unescape Escape View File

@ -0,0 +1,83 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Upsetting Settings, Collected Works</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Publication, graduation thesis</p>
<p>Upsetting Settings, Collected Works presents graduation theses from the 2019 graduates of the Piet Zwart Institute, Experimental Publishing. The publication was launched within the graduation show Upsetting Settings, at UBIK Rotterdam. The concept behind 'Upsetting settings' arises from the defaults of technology. In every system there are settings predefined by its creators, that most of the time stay untouched by us, as users. It's their default, not ours, but it's up to us to change it. Society is made of similar preset frameworks that we take for granted. The projects in this exhibition engage with these different default modes and intervene in their core structure/source/root.
</p>
<p>My graduation thesis, <i>Your Body Will Make Itself Heard</i>, deals with the meal replacement phenomenon occurring in Western countries, within a culture that falls under the sphere of influence of the startup world, driven by entrepreneurial values and libertarian views. To understand the way the role of food is being transformed by technology companies, I follow a path through the history of cooking and gender roles in food preparation, the role technology has in food culture and the way Silicon Valley is appropriating food traditions and knowledge in creating new consumer products for the privileged. At the same time, I explore the potential of future food innovations, in the context of ever increasing abstraction and commodification of food and the labour of cooking.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/upsetting/scan_thesis.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/upsetting/cover.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'UpsettingPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

92
src/components/ValueCard.vue
Unescape Escape View File

@ -0,0 +1,92 @@
<style scoped>
* {
border: 0px black solid;
}
p {
text-align: justify;
font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
background-color: #f0f0f0;
}
</style>
<template>
<div>
<b-row align-h="center">
<b-col cols="10">
<div class="card_content">
<a name="value_title"><p style="text-align: center; font-weight: bold;">Nutrients > Food</p></a>
<p>
Technology startups did not invent meal replacements, nor fortified foods. These products came on the market for various historical reasons, most importantly to deal with nutrient deficiencies. However, companies producing meal replacements frame these
products as ways to disrupt mealtimes. As expressed by Huel’s community manager, “We wanted to strip it back to what the <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="purpose_timetoeat" title="What's the purpose of food?">actual purpose of food</span> is to provide nutrition (. . .) People are very focused on taste now – does it taste good?
That is not the primary purpose of food”(Turk, 2018). Nutritionism and the food industry in general have, for decades, capitalized on people’s fears and confusion related to food. They created the problem, and then promoted a product
to allegedly solve it.
</p>
<p>
Today, companies which produce and sell similar innovative food products 25put forward a number of health claims, including complete nutrition, better concentration, disease prevention, etc. But the lack of unaffiliated long-term scientific studies, and
the association with nutritionists that sit on the board of directors are bound to raise suspicion. The fact that the food industry is able to make such claims can be traced back to the 90s, when the United States Congress passed a
couple of laws, FDAMA 4 and DSHEA 5 , which gave more freedom to the food and supplements industries to introduce new substances into their products without much pushback from the Food and Drug Administration (Nestle, 2013). </p>
<p>
Looking at food as simply fuel for the body means completely disregarding the entire culture that has grown around food in every part of society. This phenomenon is described by Marion Nestle as reductionism, which, in this context, refers to reducing
food to containers of nutrients. “Techno-foods offer a reductionist approach to choosing a healthful diet” (ibid) which only encourages food producers to come up with more products for those who find this view appealing, or are confused
regarding what foods are good for them. The above examples reveal that there there is a structural issue that has led to ultra-processed food products to appear on the market, under various health claims. This phenomenon is further
exploited in the representation of what we perceive to be real food as an antiquated, and the push to promote processed products with a much higher market value.</p>
<p>
The way we transform nature for our personal purposes changes the way we relate to the world around us. This reductionist approach to food, as mentioned before, has led to the development of a new interpretation of food as fuel for the body. In this view,
the cultural and social role of eating is trivialized, transforming one of the most significant aspects of society into a nuisance, an antiquated and inefficient way to maintain human life.</p>
<p>
One telling example from today are complete foods, or meal replacements. Most commonly in the form of a powder meant to be mixed with water, these products allegedly contain all necessary nutrients, and can thus replace normal meals. Meal replacements
target young professionals who can’t find the time, or desire, to prepare and consume a traditional meal throughout the day, a situation many can relate to. By consuming a shake for breakfast and lunch, one does not have to sacrifice
time, or nutritional value, in order to be able to keep working. The companies producing these products, largely startups owned by technology entrepreneurs, promote them as solutions to a large variety of problems: lack of time, inconvenience
of cooking, food voids, which is all the times one doesn’t have direct access to a meal when hungry, world hunger, climate change, etc. </p>
<p>In my research, I followed the development of the brand <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="soylent" title="The one that started it all">Soylent</span>, the first one of its kind. The product was developed in Silicon Valley by a couple of computer scientists. They were all young white males with no cooking experience, who
were surviving on <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="frozen_food" title="The lifestyle that led to the development of Soylent">frozen fast food</span>, and were frustrated by the quality of their meals and the time it took away from their day (Widdicombe, 2014). Taking the approach of an engineer in a social vacuum, they came to the conclusion that
traditional nutrition is inefficient. The best way to go about this, according to them, is by reducing food to its most basic elements. This comes across as the ultimate life hack, as it allows them to further release themselves from
their bodily needs and exist purely for the purpose of being efficient in their search for profit. In this way, food preparation and consumption necessary on a daily basis is reduced to a minimum, and food is reinterpreted purely as
fuel for the body. </p>
<p>
After Soylent’s astonishing success, and due to the fact that it didn’t meet international food regulation standards for shipping, many similar products appeared on the international market. Meal replacement brands are often promoted similarly to software
or hardware, rather than food. They have different iterations, such as Soylent 1.0, 1.1, and so on, prominent lot numbers, and improvements are described as “fixing bugs” <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="end_of_food" title="The End of Food">(Widdicombe, 2014)</span>. Framing them as such pushes them further
away from traditional food products, and further abstracts the role of food in our life. </p>
<p>
The rise of meal replacements came not from a desire to improve food, but to disrupt the food industry and make the kind of profits a small technology startup can nowadays. The products are a techno-solutionist representation of the Silicon Valley culture,
manufacturing new problems in daily life that can only be fixed by them. They promote a quantified lifestyle, of an individual that is highly efficient and productive, both professionally and outside of work, to the point of burnout.
And, going even further, they claim to improve people’s health and solve food waste and world hunger, while disregarding issues such as wealth inequality and capitalist structures that have caused these problems in the first place.
However, the products target a demographic similar to that of a technology startup, which is dominated by Western, middle and upper class individuals, which heavily limits the universal solution ideal that they promote.</p>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'ValueCard',
data: function() {
return {
post_mom_economy: '<iframe class="img-fluid" src="https://imgur.com/i1w6ztH"></iframe>',
lot_2046: '<a href="https://www.lot2046.com/" target="_blank">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>',
purpose_timetoeat: '<img class="img-fluid" src="./media/topics/meal_replacement_products/video/unlike_food.mp4"></img>',
soylent: '<a href="https://soylent.com/" target="_blank">We thought about your food so you wouldn&#39;t have to.</a>',
end_of_food: '<a href="https://www.newyorker.com/magazine/2014/05/12/the-end-of-food" target="_blank"> For weeks, he and his acolytes emitted clouds of sulfurous gas. “I cleared out a jazz theatre once,” he recalled, nostalgically.</a>',
frozen_food: '<a href="https://www.newyorker.com/magazine/2014/05/12/the-end-of-food" target="_blank">They had been living mostly on ramen, corn dogs, and Costco frozen quesadillas—supplemented by Vitamin C tablets, to stave off scurvy—but the grocery bills were still adding up. Rob Rhinehart, one of the entrepreneurs, began to resent the fact that he had to eat at all.</a>'
}
},
}
</script>

63
src/components/VideoPage.vue
Unescape Escape View File

@ -0,0 +1,63 @@
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
#header {
margin-top: 40px;
}
.header_video {
margin-bottom: 40px;
}
p {
text-align: justify;
}
#introduction {
margin-top: 30px;
}
h3 {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
</style>
<template>
<div>
<MenuBar/>
<b-row align-h="center">
<b-col class="header_video" cols="10">
<h3>Is it time to eat, or is there no more time to eat?</h3>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="10">
<b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/S-maUIUAC3I"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'VideoPage',
components: {
MenuBar
}
}
</script>

88
src/components/XenoPage.vue
Unescape Escape View File

@ -0,0 +1,88 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Techno/Cyber/Xeno-Feminism</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Publication, reader</p>
<p>Techno/Cyber/Xeno-Feminism: The Intimate and Possibly Subversive Relationship Between Women and Machines Reader explores topics from women's introduction into the technological workforce, the connection between weaving and programming, and using technology in favour of the feminist movement. One major concept that appears throughout the reader is an almost mystical connection between women and software writing, embedded deep in women's tradition of weaving not just threads, but networks. Does software have a gender?
</p>
<p>The reader was developed using free software, in the context of the <a href="https://issue.xpub.nl/05/">OuNuPo Special Issue</a>, at the Piet Zwart Institute. The publication was displayed at the <a href="https://gaite-lyrique.net/evenement/grrrls-tech-zine-fair">Grrrls Tech Zine Fair</a>, at Le Gaîté Lyrique, Paris.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/xeno/Xeno.jpg"></b-img>
<p></p>
<b-img class="img-fluid" src="media/xeno/thumbnail.jpeg"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/xeno/readers.jpeg"></b-img>
<p></p>
<b-img class="img-fluid" src="media/xeno/zinefair.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'XenoPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

86
src/components/XpplPage.vue
Unescape Escape View File

@ -0,0 +1,86 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">XPPL</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Pirate library, web application</p>
<p>
XPPL is a space for potential pirate librarianship. It is both an experiment and a working prototype for a distributed network catalogue and library that you can run and install on several machines and share/synchronise with the same bibliographical database.</p>
<p>Initially developed as a in-house tool for the XPUB course, XPPL is a project aimed at people who are studying within and outside formal education. XPPL provides a web interface and hosts a curated catalogue of books and articles. Its distributed architecture is open to instances of uploading and downloading, and allows for the collective editing of its content. In XPPL, librarians can add, and modify small collections of books that are connected by threads of thought, or follow a certain thematic or study path.</p>
<p>My main focus within the library revolved around the notion of stacks. Rather than a bookshelf in a library, where books are lined up and often forgotten, the stacks on your table/nightstand/bathroom floor consist of books prone to be opened and reopened at any time. The stacks in XPPL are visible for others in the network to browse, annotate, update or shuffle. </p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/xppl/xppl.gif"></b-img>
<p></p>
<b-img class="img-fluid" src="media/xppl/xppl_main.png"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/xppl/xppl_stack.png"></b-img>
<p></p>
<b-img class="img-fluid" src="media/xppl/add.png"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'XpplPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

84
src/components/ZineMachinesPage.vue
Unescape Escape View File

@ -0,0 +1,84 @@
<style scoped>
* {
border: 0px black solid;
}
.project_title {
font-size: 40px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
padding-bottom: 40px;
padding-top: 30px;
}
.description_text {
font-size: 15px;
font-family: "Roboto Mono", monospace;
padding-bottom: 10px;
}
.tags {
padding-top: 10px;
font-size: 15px;
font-style: italic;
font-family: "Roboto Mono", monospace;
}
</style>
<template>
<b-container fluid>
<MenuBar/>
<b-row>
<b-col md="12">
<p class="project_title">Zine Machines</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="description_text">
<p class="tags">Workshop</p>
<p>If we let it take over, what kind of zine would a machine create? In this workshop, we explored this question through a couple of fun tools and scripts that allow us to rearrange, modify and even fully transform images, texts and sounds, in order to create unique zines.</p>
<p>This workshop was part of <a href="http://www.spreadzinefest.nl/?utm_source=Newsletter+SIGN&utm_campaign=d6b2a38072-EMAIL_CAMPAIGN_2018_02_28_COPY_01&utm_medium=email&utm_term=0_a209f9faf4-d6b2a38072-495751117" target="_blank">Spread Zinefest 2018</a> and was held during two days at SIGN Groningen. The project was developed together with Angeliki Diakrousi and Luke Murphy.</p>
</div>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/zinemachines/zine.gif"></b-img>
<p></p>
<b-img class="img-fluid" src="media/zinemachines/IMG_1310.JPG"></b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/zinemachines/IMG_1322.JPG"></b-img>
<p></p>
<b-img class="img-fluid" src="media/zinemachines/IMG_1316.JPG"></b-img>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'ZineMachinesPage',
data: function() {
return {
}
},
name: 'MenuBar.vue',
components: {
MenuBar
}
}
</script>

75
src/main.js
Unescape Escape View File

@ -0,0 +1,75 @@
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar, faStar, faStarHalfAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { VBPopover } from 'bootstrap-vue/es/directives'
import { BLink } from 'bootstrap-vue'
Vue.component('b-link', BLink)
import VueRouter from 'vue-router'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-popover', VBPopover)
library.add(faCarBattery, faSeedling, faStroopwafel, faStar, faStarHalfAlt, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar)
Vue.component('font-awesome-icon', FontAwesomeIcon)
import SplashPage from './components/SplashPage'
import TimeCard from './components/TimeCard'
import ReviewPage from './components/ReviewPage'
import AboutPage from './components/AboutPage'
import GlossaryPage from './components/GlossaryPage'
import FullTextPage from './components/FullTextPage'
import VideoPage from './components/VideoPage'
import HappinessPage from './components/HappinessPage'
import XpplPage from './components/XpplPage'
import TabPage from './components/TabPage'
import ZineMachinesPage from './components/ZineMachinesPage'
import UnpackingPage from './components/UnpackingPage'
import UpsettingPage from './components/UpsettingPage'
import CataloguePage from './components/CataloguePage'
import OverunderPage from './components/OverunderPage'
import XenoPage from './components/XenoPage'
import BedchairtablePage from './components/BedchairtablePage'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: SplashPage },
{ path: '/review', component: ReviewPage },
{ path: '/about', component: AboutPage },
{ path: '/glossary', component: GlossaryPage },
{ path: '/fulltext', component: FullTextPage },
{ path: '/video', component: VideoPage },
{ path: '/TimeCard', component: TimeCard },
{ path: '/HappinessPage', component: HappinessPage },
{ path: '/xppl', component: XpplPage },
{ path: '/tab', component: TabPage },
{ path: '/zinemachines', component: ZineMachinesPage },
{ path: '/unpacking', component: UnpackingPage },
{ path: '/upsetting', component: UpsettingPage },
{ path: '/catalogue', component: CataloguePage },
{ path: '/overunder', component: OverunderPage },
{ path: '/xeno', component: XenoPage },
{ path: '/bedchairtable', component: BedchairtablePage },
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')

5
vue.config.js
Unescape Escape View File

@ -0,0 +1,5 @@
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: { plugins: [ new CopyPlugin([ { from: 'media', to: 'media' } ]), ] }
}
Write Preview
Loading…
Cancel
Save