Skip to content
Snippets Groups Projects
Commit df93395d authored by Hanwen Li's avatar Hanwen Li
Browse files

Merge branch 'main' of https://gitlab.igem.org/2022/greatbay-scie

parents a438dbf6 17d64147
No related branches found
No related tags found
No related merge requests found
Pipeline #156806 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
components/attribution.jsx
+ 1
− 1
View file @ df93395d
......@@ -11,7 +11,7 @@ export const Member = ({ name, description, avatarUrl, right }) => {
<h3 className="p-5">{name}</h3>
</div>
</div>
<div className="text-sm text-gray-500">{description}</div>
<div className="text-md text-gray-500">{description}</div>
</div>
);
};
components/humanPracticeTimeline.jsx
+ 182
− 40
View file @ df93395d
const Bar = ({ children }) => {
return <div className="flex flex-col gap-8">{children}</div>;
return <div className="flex flex-col gap-4">{children}</div>;
};
const BarTitle = ({ children }) => {
const BarTitle = ({ children, wide }) => {
return (
<h1 className="block p-5 text-2xl font-bold text-center text-white bg-[rgb(89,162,151)] rounded-2xl">
<h1
className={
"block p-5 text-2xl font-bold text-center text-white bg-[rgb(64,135,125)] rounded-2xl " +
(wide ? "col-span-2" : "")
}
>
{children}
</h1>
);
};
// content below title with optional image on left
const BarContent = ({ children, image }) => {
const BarContent = ({ children, image, wide }) => {
return (
<div className="flex flex-col lg:flex-row gap-10 p-5 text-white bg-[rgb(89,162,151)] rounded-2xl">
<div
className={
"flex flex-col lg:flex-row gap-10 p-5 text-white rounded-2xl " +
(wide ? "col-span-2" : "") + (image ? " bg-[rgb(106,183,172)]" : " bg-[rgb(73,149,137)]")
}
>
{image ? (
<div className="flex-none">
<img src={image.src} alt={image.alt} />
<div className="flex-none rounded overflow-hidden">
<img src={image.src} alt={image.alt} width="150px" height="150px" />
</div>
) : null}
<div className={"flex-1" + (image ? "" : " text-center")}>{children}</div>
......@@ -23,9 +33,14 @@ const BarContent = ({ children, image }) => {
);
};
const Section = ({ children }) => {
const Section = ({ wide, children }) => {
return (
<div className="snap-center w-[33vw] shrink-0 first:ml-[33vw] last:mr-[33vw]">
<div
className={
"snap-center shrink-0 first:ml-[33vw] last:mr-[33vw] grid gap-4 " +
(wide ? "w-[100vw] grid-cols-2" : "w-[50vw]")
}
>
{children}
</div>
);
......@@ -33,89 +48,216 @@ const Section = ({ children }) => {
export default function Timeline() {
return (
<div className="w-full h-[90vh] bg-gradient-to-br from-teal-900 to-cyan-800 overflow-x-scroll overflow-y-hidden snap-x py-14 gap-14 flex">
<div className="w-full h-[120vh] bg-gradient-to-br from-teal-900 to-cyan-800 overflow-x-scroll overflow-y-hidden py-14 gap-14 flex items-start">
<Section>
<Bar>
<BarTitle>Part 1</BarTitle>
<BarContent>&quot;Quotations here&quot;</BarContent>
<BarTitle>PART 1: Understanding the Problem</BarTitle>
<BarContent>
&quot;There is no utter environmentalist when it comes to
fashion&quot;
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/fashion-industry-at-the-first-glimpse.jpg",
alt: "fashion industry at the first glimpse",
}}
>
Our HP journey started by meeting with a huge fashion company,
MO&Co, to investigate fashion brands&apos; perceptions of textile
sustainability. We realized there is still a long way to go for
fashion companies to balance sustainability and business.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/unveiling-the-problem-of-unsustainable-fashion.jpg",
alt: "unveiling the problem of unsustainable fashion",
}}
>
We do stuff
By discussing with Mr. Edwin Keh from the Hong Kong Research
Institute of Textiles and Apparel, we had a more in-depth
understanding of the problems of fast fashion and textile waste, as
well as how to tackle them from different perspectives: this is a
social, economic, and scientific issue.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/approaching-social-attitudes.jpg",
alt: "approaching social attitudes",
}}
>
We do stuff
We realistically surveyed people&apos;s understanding of fast
fashion and textile recycling through public questionnaires and
interviews and approached people&apos;s attitudes toward the
microbial method.
</BarContent>
</Bar>
</Section>
<Section>
<Section wide>
<BarTitle wide>PART 2: Defining A Good Solution</BarTitle>
<BarContent wide>
&quot;Things can advance rapidly when society realizes the benefits of
it. Your solution can make the idea of circularity in apparel go from
0 to 100% potentially quickly. Don’t underestimate how fast
infrastructure can shift, especially when you have a good idea.&quot;
</BarContent>
<Bar>
<BarTitle>Part 2</BarTitle>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/starting-with-incineration-and-landfill-sites.jpg",
alt: "starting with incineration and landfill sites",
}}
>
We do stuff
The inability for us to further investigate incineration and
landfill sites invoked our curiosity to track down the mysterious
route of textile waste and the domestic recycling chain.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/exploring-the-down-cycling-chain-with-mr-wang.jpg",
alt: "exploring the down-cycling chain with Mr. Wang",
}}
>
We do stuff
During the on-site visit to a standard textile recycling factory,
Mr. Wang presented us with how clothing is commonly sorted,
downcycled, or exported. After debunking myths about textile
recycling, we had a clearer picture of China&apos;s current emerging
textile recycling chain.
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/confronting-the-maturity-of-chemical-recycling.jpg",
alt: "confronting the maturity of chemical recycling",
}}
>
Talking to Mr. Zhao from Exxon Mobil, we saw the current advancement
of the chemical recycling of plastic and chemical treatment plants,
toppling some of our previous biases on chemical methods. This
helped us to define better and construct our project, and know our
place in the recycling industry.
</BarContent>
</Bar>
<Bar>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/biological-treatment-101-with-dr-chan.jpg",
alt: "biological treatment 101 with Dr. Chan",
}}
>
Dr. Chan from HKRITA had an elaborate talk introducing various
methods of decomposing and recycling waste textiles in his research
center. The introductory and inspiring discussion especially showed
us the bright prospects of the biological treatment of textiles.
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/embarking-on-an-enzymatic-route-of-recycling-pet.png",
alt: "embarking on an enzymatic route of recycling PET",
}}
>
A conversation with Mr. Hu from Jiaren New Materials, a company
focusing on the enzymatic PET recycling method, showed us that
biological treatment requires intricate design but can provide
effective re-polymerization and great products.
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/forming-a-closed-loop-and-a-circular-economy.jpg",
alt: "forming a closed loop and a circular economy",
}}
>
Through an inspirational zoom meeting with Mr. Welch from
Looptworks, we received a comprehensive overview of the textile
recycling industry from a bigger worldview, realized the need for a
closed-loop circular fashion economy, and evaluated our project in
terms of entrepreneurship and its great potential.
</BarContent>
</Bar>
</Section>
<Section>
<Bar>
<BarTitle>Part 3</BarTitle>
<BarTitle>PART 3: Ideating and Realizing Our Solution</BarTitle>
<BarContent>
&quot;We have to no longer see it [textile waste] as garbage, but as
a resource. The world is not unlimited, when we find ways to use it,
we are just saving ourselves.&quot;
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/textile-pretreatments-with-textile-chemist-mr-yao.jpg",
alt: "textile pretreatments with textile chemist Mr. Yao",
}}
>
The time to construct our wet lab: first step, textile chemist Mr.
Yao introduced biological and chemical ways for the pretreatment of
dye; we compared the pros and cons of each to conclude our primary
approach.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/finalizing-downstream-products.jpg",
alt: "finalizing downstream products",
}}
>
We do stuff
While looking at potential downstream products, Dr. Zhou, who
specializes in producing bacterial cellulose from PET, introduced
production methods and various applications of BC. We were greatly
inspired and decided our sugar from the degradation of natural fiber
could produce BC.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/wet-lab-and-hardware-improvements-with-links-china.jpg",
alt: "wet lab and hardware improvements with Links China",
}}
>
We do stuff
Facing undesirable expression of enzymes by E.Coli, LINKS_China
supported us with a shuttle vector for S.cereviae for expression and
helped us with a hardware prototype, allowing us to modify the
desirable vector to be expressed by K.marx.
</BarContent>
</Bar>
</Section>
<Section>
<Bar>
<BarTitle>Part 4</BarTitle>
<BarTitle>PART 4: Implementation and Evaluation</BarTitle>
<BarContent>
&quot;It may take a very long time, but I believe we would
eventually reach that point when biomaterials become the main
trend.&quot;
</BarContent>
<BarContent
image={{
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/proposed-end-users.png",
alt: "proposed end users",
}}
>
In the last stage, we identified the end users of our project, which
utilizes a span-new biological approach that could be used by
textile sorting plants, manufacturing and retailers of clothes, and
other relevant organizations in the future.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/evaluation-by-designer-scarlett.jpg",
alt: "evaluation by designer Scarlett",
}}
>
We do stuff
By interviewing Scarlett Yang, a London-based designer with
expertise in designing sustainable biomaterials, we understood the
difficulties designers find with biomaterials and what they value,
prompting us to consider the needs of our end users further.
</BarContent>
<BarContent
image={{
src: "https://static.igem.org/wiki/images/9/9e/T--MIT--Part1.png",
alt: "Part 1",
src: "https://static.igem.wiki/teams/4275/wiki/ihp/storyline/advantages-and-challenges.png",
alt: "advantages and challenges",
}}
>
We do stuff
After all the fruitful human practices above, we got a more
perceptive and critical view of our project and compared its
achievements (sustainability, upcycling, flexibility, publicity) and
its challenges. However, this is not the ending: we still have a
long way to go to make a complete change.
</BarContent>
</Bar>
</Section>
......
components/media.jsx
+ 9
− 13
View file @ df93395d
......@@ -5,29 +5,25 @@ export const Image = ({ src, alt, ...props }) => {
const [enlarged, setEnlarged] = useState(false);
const [cancel, setCancel] = useState(0);
return (
<div
className={
"group relative transition-all duration-300 ease-in-out transform " +
(enlarged ? " scale-125 -translate-x-32 z-50" : "")
}
onMouseOut={() => {
setCancel(setTimeout(() => setEnlarged(false), 300));
}}
>
<div className={""}>
<img
src={src}
alt={alt}
loading="lazy"
className={"cursor-pointer"}
className={
"cursor-pointer relative transition-all duration-300 ease-in-out transform " +
(enlarged ? " scale-125 -translate-x-32 -translate-y-[18%] z-50" : "")
}
onMouseOut={() => {
setCancel(setTimeout(() => setEnlarged(false), 300));
}}
onClick={() => {
setEnlarged(!enlarged);
clearTimeout(cancel);
}}
{...props}
/>
<div className="absolute bottom-0 left-0 w-full text-white text-center py-2 bg-black bg-opacity-60 opacity-10 group-hover:opacity-90 transition">
{alt}
</div>
<div className="text-center text-gray-500 text-md">{alt}</div>
</div>
);
};
layouts/contentLayout.jsx
+ 1
− 1
View file @ df93395d
......@@ -111,7 +111,7 @@ export const ContentLayout = ({ meta, ...props }) => {
<div className="p-12 flex flex-col lg:flex-row items-start gap-16">
<TOC />
<article
className="prose prose-lg m-auto container xl:max-w-4xl"
className="prose prose-lg m-auto container lg:max-w-[60vw]"
{...props}
/>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment