diff --git a/components/PageCard.vue b/components/PageCard.vue index da611c35edc379ca1142eb14778f1c9f85bbce09..5293a60973f50ad9d38d32aada72e2f021e905b4 100644 --- a/components/PageCard.vue +++ b/components/PageCard.vue @@ -48,6 +48,8 @@ export default { width: 100%; img { + width: 100%; + height: auto; opacity: 1; transition: all 0.2s; } diff --git a/components/Profile.vue b/components/Profile.vue new file mode 100644 index 0000000000000000000000000000000000000000..b6c539642ad858fa3d1b69a9d018490f0172aee7 --- /dev/null +++ b/components/Profile.vue @@ -0,0 +1,58 @@ +<template> + <div class="profile-wrap"> + <div class="img-wrap"> + <img :src="url" alt="" /> + </div> + <div class="text-wrap"> + <div class="name">{{name}}</div> + <div class="title"> + <slot></slot> + </div> + </div> + </div> +</template> + +<script> +export default { + props: { + url: { + type: String, + required: true, + }, + name: { + type: [String, null], + default: null + } + }, +}; +</script> + +<style lang='scss' scoped> +.profile-wrap { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 90%; + margin: 20px; + + .img-wrap { + padding: 10px; + + img{ + border-radius: 1000px; + width: 100%; + height: auto; + box-shadow: $shadow-1; + } + } + + .text-wrap { + text-align: center; + + .title { + font-size: 0.7em; + } + } +} +</style> \ No newline at end of file diff --git a/components/ShowMore.vue b/components/ShowMore.vue index 24ef81888dbd76926d369f89f5266da5d3978496..249fa8cb726f0e9958cef4f4509cdc7ae804b582 100644 --- a/components/ShowMore.vue +++ b/components/ShowMore.vue @@ -86,5 +86,11 @@ export default { opacity: 1; } } + + @media (max-width: 991px) { + .show-more-wrap { + margin-bottom: 60px; + } + } } </style> \ No newline at end of file diff --git a/pages/business-plan.vue b/pages/business-plan.vue deleted file mode 100644 index e9b2e3158fb4cee7ce2f54b93fd2811bedd53b7c..0000000000000000000000000000000000000000 --- a/pages/business-plan.vue +++ /dev/null @@ -1,25 +0,0 @@ -<template> - <div> - <div class="pdf-viewer" id="pdf-1"></div> - </div> -</template> - -<script> -import * as PDFObject from 'pdfobject/pdfobject.min.js' -export default { - data() { - const url = '/assets/pdf/iGEM-HKPOLYU-Business Plan-Final.pdf' - // PDFObject.embed(url, "#pdf-1"); - PDFObject.embed(url) - - return { - url, - PDFObject - } - } -} -</script> - -<style lang='scss' scoped> - -</style> \ No newline at end of file diff --git a/pages/dev.vue b/pages/dev.vue index ba1daa5261eba735beeab011c5f689f64b8d8430..f860a1a1289e06e46586c72ec7f840f5f3b12b75 100644 --- a/pages/dev.vue +++ b/pages/dev.vue @@ -7,7 +7,6 @@ >--> <div class="main"> <div class="content-wrap no-sidebar"> - <PDFViewer url="/assets/pdf/iGEM-HKPOLYU-Business Plan-Final.pdf"/> </div> </div> </div> diff --git a/pages/entrepreneurship.vue b/pages/entrepreneurship.vue index 973f047ed6957f2a60f818303c5909fa9371f20b..bee4a54557c99e32baf6bea8726afa60eaffd644 100644 --- a/pages/entrepreneurship.vue +++ b/pages/entrepreneurship.vue @@ -15,7 +15,7 @@ <div class="content-2"> <p> <FigureInline - src="/assets/img/entreprenueship/entreprenueship-1.jpeg" + src="https://static.igem.wiki/teams/4774/wiki/static/img/entreprenueship/entreprenueship-1.jpeg" alt="" align="right" size="200px" diff --git a/pages/human-practices.vue b/pages/human-practices.vue index dacaf6b0dae8b779ad9c2561e14549458014e824..c566009e9c0ab9a7bae63b824bde1322a2d23abb 100644 --- a/pages/human-practices.vue +++ b/pages/human-practices.vue @@ -73,16 +73,54 @@ <b>Integrated Human Practices</b> section, where you can discover how we incorporate input from stakeholders into our projects. </p> - <!--TODO: å›¾æ ‡å¾…æ›¿æ¢ --> <div class="page-card-wrap"> - <PageCard url="/hkpolyu/human-practices"> + <PageCard + :url="null" + @click="scrollTo('content-4')" + img-url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/social.png" + > + Social engagement + </PageCard> + <PageCard + :url="null" + @click="scrollTo('content-5')" + img-url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/education.png" + > + Education + </PageCard> + <PageCard + :url="null" + @click="scrollTo('content-6')" + img-url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/collaboration.png" + > + Collaboration + </PageCard> + <PageCard + :url="null" + @click="scrollTo('content-7')" + img-url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp.png" + > Integrated Human Practices </PageCard> + <PageCard + url="/hkpolyu/entrepreneurship" + :blank="true" + img-url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/entrepreneurship.png" + > + Entrepreneurship + </PageCard> </div> + + <Figure + number="0" + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-map.png" + data-scrollent="fade-up" + > + </Figure> </ContentBlock> <ContentBlock :id="3"> <template #subtitle> How we start the journey? </template> - <!--TODO: Album: Collaborative idea generation--> + <Carousel :images="carouselMe"></Carousel> <p> Engaging the entire human practices team to identify all pertinent stakeholders for our project. @@ -100,13 +138,7 @@ project's progression. </p> - <!--TODO: å›¾æ ‡å¾…æ›¿æ¢ --> - <div class="page-card-wrap"> - <PageCard :url="null"> Public </PageCard> - <PageCard :url="null"> Clinical Oncologists </PageCard> - <PageCard :url="null"> NGO </PageCard> - <PageCard :url="null"> Biotechnology Company </PageCard> - </div> + <!--TODO: 4项? --> </ContentBlock> <ContentBlock :id="4"> <template #subtitle> Social Engagement </template> @@ -115,7 +147,22 @@ <p class="subtitle-2">1. The Public Survey</p> <div class="content-2"> - <!--TODO: Survey QR code--> + <Horizontal left="50%"> + <Figure + number="0" + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-survey-1.jpg" + data-scrollent="fade-up" + > + </Figure> + <template v-slot:right> + <Figure + number="0" + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-survey-2.jpg" + data-scrollent="fade-up" + > + </Figure> + </template> + </Horizontal> <p> Our journey to raise awareness about non-small cell lung carcinoma (NSCLC) began with a comprehensive public survey. This @@ -767,7 +814,7 @@ <div class="content-wrap-2"> <p class="subtitle-2">Social media</p> <div class="content-2"> - <!--TODO: Reels iFrames--> + <!--TODO: Reels iGEM Universe--> <p> In the digital age, online platforms are powerful tools for spreading information quickly and widely. We leveraged this @@ -994,7 +1041,7 @@ <p>The figure below shows the stakeholders we consulted:</p> - <!--TODO: Pic: stakeholders--> + <!--TODO: Pic: stakeholders map--> </div> <div class="content-wrap-2"> @@ -1003,27 +1050,34 @@ <div class="content-wrap-3"> <p class="subtitle-3">Problem identification</p> <div class="content-3"> - <p> - Our project originated from the pressing issue of cancer - in Hong Kong, particularly the high mortality rate - associated with lung cancer. Recognizing this, our team - engaged in a meaningful conversation with Professor Lee - Kin-Wah, an esteemed expert in cancer research at The Hong - Kong Polytechnic University. - </p> - <!--TODO: Prof. Pic--> - <p> - Associate Head of Applied Biology and Chemical Technology - Assoc. DoULS & Professor at The Hong Kong Polytechnic - University. - </p> - <p>Prof. Lee is an esteemed expert in cancer research.</p> - <p> - During our discussion, we shared our initial idea, and - Prof. Lee expressed strong encouragement for us to realize - our idea. He advised us to narrow our focus further by - specifically targeting a particular type of lung cancer. - </p> + <Horizontal left="70%"> + <p> + Our project originated from the pressing issue of cancer + in Hong Kong, particularly the high mortality rate + associated with lung cancer. Recognizing this, our team + engaged in a meaningful conversation with Professor Lee + Kin-Wah, an esteemed expert in cancer research at The + Hong Kong Polytechnic University. + </p> + <p>Prof. Lee is an esteemed expert in cancer research.</p> + <p> + During our discussion, we shared our initial idea, and + Prof. Lee expressed strong encouragement for us to + realize our idea. He advised us to narrow our focus + further by specifically targeting a particular type of + lung cancer. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/terence.png" + name="Prof. Lee Kin-wah, Terence" + > + Associate Head of Applied Biology and Chemical + Technology Assoc. DoULS & Professor at The Hong Kong + Polytechnic University + </Profile> + </template> + </Horizontal> <p> This suggestion greatly inspired us. Following this conversation, we conducted an extensive literature review, @@ -1127,91 +1181,113 @@ First, we sought advice on developing our own bispecific antibody by interviewing Professor Mok Shu-Kam. </p> - <!--TODO: Stakeholder Pic--> - <p> - Chairman, Department of Clinical Oncology at The Chinese - University of Hong Kong - </p> + <Horizontal left="70%"> + <p> + Prof. Mok is a pioneer in the identification of EGFR + mutations in lung cancer and an expert in biomarkers and + targeted therapies for lung cancer. He is also a + cofounder of the Lung Cancer Research Group and has led + multinational studies on personalized medicine for lung + cancer. During our conversation with Prof. Mok, he + emphasized the importance of comprehending existing + resistance mechanisms in cancer cells and devising + strategies to overcome them. Furthermore, he provided + insight into a similar drug to our bispecific antibody + called amivantamab and encouraged us to explore ways to + differentiate our antibody and make it novel. The + guidance received from Prof. Mok prompted us to engage + in further brainstorming sessions to enhance the + innovation of our project. + </p> - <p> - Prof. Mok is a pioneer in the identification of EGFR - mutations in lung cancer and an expert in biomarkers and - targeted therapies for lung cancer. He is also a cofounder - of the Lung Cancer Research Group and has led - multinational studies on personalized medicine for lung - cancer. During our conversation with Prof. Mok, he - emphasized the importance of comprehending existing - resistance mechanisms in cancer cells and devising - strategies to overcome them. Furthermore, he provided - insight into a similar drug to our bispecific antibody - called amivantamab and encouraged us to explore ways to - differentiate our antibody and make it novel. The guidance - received from Prof. Mok prompted us to engage in further - brainstorming sessions to enhance the innovation of our - project. - </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/mok.png" + name="Prof. Mok Shu-Kam, Tony" + > + Chairman, Department of Clinical Oncology at The + Chinese University of Hong Kong + </Profile> + </template> + </Horizontal> - <!--TODO: podcast and video--> + <!--TODO: podcast and video (Prof. Mok)--> <p> In addition to learning from the laboratory perspective, our team sought insights from Dr. Chan Sum-Yin. </p> - <!--TODO: Stakeholder Pic--> - <p>Clinical oncologist at Hong Kong Public Hospital</p> - <p> - In an interview with Dr. Chan, she shared valuable - insights into the challenges faced in real-life cancer - cases, the applications of targeted therapy and bispecific - antibodies in NSCLC, and the importance of patient - participation in clinical trials. Dr. Chan also expressed - concerns about the <b>cost of our drug</b>, as patients - often consider financial burdens when choosing treatment - options. - </p> + <Horizontal left="70%"> + <p> + In an interview with Dr. Chan, she shared valuable + insights into the challenges faced in real-life cancer + cases, the applications of targeted therapy and + bispecific antibodies in NSCLC, and the importance of + patient participation in clinical trials. Dr. Chan also + expressed concerns about the <b>cost of our drug</b>, as + patients often consider financial burdens when choosing + treatment options. + </p> - <!--TODO: podcast and video--> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/ann.png" + name="Dr. Chan Sum-Yin, Ann" + > + Clinical oncologist at Hong Kong Public Hospital + </Profile> + </template> + </Horizontal> - <p>Our third interviewee was Dr. Li Siu-Ching.</p> - <!--TODO: Stakeholder Pic--> - <p> - Assistant Professor (Clinical) – Department of Clinical - Oncology at The Chinese University of Hong Kong - </p> + <!--TODO: podcast and video (Dr. Chan)--> - <p> - Dr. Li currently serves as the principal investigator for - numerous lung cancer clinical trials and translational - studies. - </p> + <p>Our third interviewee was Dr. Li Siu-Ching.</p> + <Horizontal left="70%"> + <p> + Dr. Li currently serves as the principal investigator + for numerous lung cancer clinical trials and + translational studies. + </p> - <p> - During the interview, Dr. Li <b>confirmed</b> the - potential of our bispecific antibody as a promising - solution for overcoming resistance in current NSCLC - treatments. He explained that over 50% of NSCLC patients - present with stage 4 cancer, which limits their treatment - options. Despite targeted therapies and immunotherapies, - resistance develops, and patient survival rates remain - poor. Dr. Li emphasized the importance of clinical trials - in testing and approving new therapies as well as - providing patients with access to novel treatments that - may improve their outcomes. His encouraging words - <b>supported our project direction</b> and - <b - >prompted us to consider the future development of our - drug</b - >. - </p> + <p> + During the interview, Dr. Li <b>confirmed</b> the + potential of our bispecific antibody as a promising + solution for overcoming resistance in current NSCLC + treatments. He explained that over 50% of NSCLC patients + present with stage 4 cancer, which limits their + treatment options. Despite targeted therapies and + immunotherapies, resistance develops, and patient + survival rates remain poor. Dr. Li emphasized the + importance of clinical trials in testing and approving + new therapies as well as providing patients with access + to novel treatments that may improve their outcomes. His + encouraging words + <b>supported our project direction</b> and + <b + >prompted us to consider the future development of our + drug</b + >. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/molly.png" + name="Dr. Li Siu-Ching, Molly" + > + Assistant Professor (Clinical) – Department of + Clinical Oncology at The Chinese University of Hong + Kong + </Profile> + </template> + </Horizontal> <p> We also produced a video clip of the interview and summarized the highlights of Prof. Li’s keynotes in our team podcast. </p> - <!--TODO: podcast and video--> + <!--TODO: podcast and video (Dr. Li)--> <p> To gain a deeper understanding of NSCLC and engage in @@ -1219,8 +1295,13 @@ interview with the Hong Kong Cancer Fund. </p> - <!--TODO: Stakeholder Pic--> <p> + <FigureInline + src="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/cancer-fund.jpeg" + alt="" + align="right" + size="300px" + /> The Hong Kong Cancer Fund is a nongovernmental organization dedicated to providing free information and professional support to individuals affected by cancer. @@ -1305,30 +1386,35 @@ Hong Kong Polytechnic University. </p> - <!--TODO: Stakeholder Pic--> - <p> - Associate Professor at The Hong Kong Polytechnic - University - </p> - - <p> - Dr. Zhao specializes in investigating novel functional - peptides. During our meeting with Dr. Zhao, she - appreciated our idea and confirmed its <b>feasibility</b>. - Dr. Zhao specializes in the investigation of the novel - functional peptides. During our meeting with Dr. Zhao, she - appreciated our ideas and confirmed their feasibility. - However, there are a number of EGFR peptides available - after a literature search, and this raised the question of - which one is employed to link to the c-MET antibody. To - address this question, we are advised to employ molecular - docking approach and selected the best candidate with the - highest binding affinity to EGFR protein. Based on the - results obtained from the dry lab analysis, we have chosen - the best EGFR peptide with highest binding with the - guidance of Dr. Zhao. - </p> - + <Horizontal left="70%"> + <p> + Dr. Zhao specializes in investigating novel functional + peptides. During our meeting with Dr. Zhao, she + appreciated our idea and confirmed its + <b>feasibility</b>. Dr. Zhao specializes in the + investigation of the novel functional peptides. During + our meeting with Dr. Zhao, she appreciated our ideas and + confirmed their feasibility. However, there are a number + of EGFR peptides available after a literature search, + and this raised the question of which one is employed to + link to the c-MET antibody. To address this question, we + are advised to employ molecular docking approach and + selected the best candidate with the highest binding + affinity to EGFR protein. Based on the results obtained + from the dry lab analysis, we have chosen the best EGFR + peptide with highest binding with the guidance of Dr. + Zhao. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/zhao.png" + name="Dr. Zhao Qian" + > + Associate Professor at The Hong Kong Polytechnic + University + </Profile> + </template> + </Horizontal> <p> With this achievement, we have now reached the second milestone of our project and have identified the @@ -1350,19 +1436,25 @@ <b>constructing the peptide</b>. To gain insights into new techniques, we sought advice from Dr. Lee Chun-kit. </p> - <!--TODO: Stakeholder Pic--> - <p> - Scientific Officer at The Hong Kong Polytechnic University - </p> - - <p> - Dr. Lee is our wet lab supervisor and technical support. - We used a <b>biosynthetic approach</b> employing the - <b>pET-24d expression vector</b> to synthesize the - EGFR-binding peptide. Initially, our - <b>biobrick design</b> involved a linear EGFR-binding - peptide system with a histidine tag for purification. - </p> + <Horizontal left="70%"> + <p> + Dr. Lee is our wet lab supervisor and technical support. + We used a <b>biosynthetic approach</b> employing the + <b>pET-24d expression vector</b> to synthesize the + EGFR-binding peptide. Initially, our + <b>biobrick design</b> involved a linear EGFR-binding + peptide system with a histidine tag for purification. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/alan.png" + name="Dr Lee Chun-kit, Alan" + > + Scientific Officer at The Hong Kong Polytechnic + University + </Profile> + </template> + </Horizontal> <!--TODO: å›¾æ ‡å¾…æ›¿æ¢ --> <p class="line center color-mid-dark"> @@ -1381,32 +1473,44 @@ this problem, Dr. Lee suggested that we seek advice from Dr. Wong Tsun-Ting. </p> - <!--TODO: Stakeholder Pic--> + <!--TODO: Stakeholder Pic (Dr. Wong)--> <p> Assistant Professor at The Hong Kong Polytechnic University </p> - <p> - Dr. Wong Tsun-Ting specializes in utilizing advanced - peptide and protein chemistries to manipulate biological - systems, including the development of multifunctional - antibodies for immunotherapy. When we discussed our - challenges with Dr. Wong, he recommended using a - <b>cyclic peptide</b> instead of a linear peptide. He also - provided examples of successful cyclic peptide drugs such - as caspofungin, octreotide, oxytocin, and reginepide for - us to study. Through further research, we discovered the - benefits of using cyclized peptides, including - <b - >improved stability, potency, selectivity, cell - permeability, and resistance to proteolysis</b - >. Based on this information, we hypothesized that the - cyclized peptide could solve the binding problem in our - bispecific antibody. We also evaluated the binding - affinity of the cyclic peptide with the linear peptide by - molecular docking. - </p> + <Horizontal left="70%"> + <p> + Dr. Wong Tsun-Ting specializes in utilizing advanced + peptide and protein chemistries to manipulate biological + systems, including the development of multifunctional + antibodies for immunotherapy. When we discussed our + challenges with Dr. Wong, he recommended using a + <b>cyclic peptide</b> instead of a linear peptide. He + also provided examples of successful cyclic peptide + drugs such as caspofungin, octreotide, oxytocin, and + reginepide for us to study. Through further research, we + discovered the benefits of using cyclized peptides, + including + <b + >improved stability, potency, selectivity, cell + permeability, and resistance to proteolysis</b + >. Based on this information, we hypothesized that the + cyclized peptide could solve the binding problem in our + bispecific antibody. We also evaluated the binding + affinity of the cyclic peptide with the linear peptide + by molecular docking. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/clarence.png" + name="Dr. Wong Tsun-ting, Clarence" + > + Assistant Professor at The Hong Kong Polytechnic + University + </Profile> + </template> + </Horizontal> <!--TODO: å›¾æ ‡å¾…æ›¿æ¢ --> <p class="line center color-mid-dark"> @@ -1465,19 +1569,26 @@ be conjugated to the anti-c-MET antibody, resulting in the completion of our novel bispecific antibody named Polyneerab. Dr. Wong Wai-ting is another technical support - in our wet lab - </p> - <!--TODO: Stakeholder Pic--> - <p> - Scientific Officer at The Hong Kong Polytechnic University + in our wet lab. </p> - <p> - With the assistance of Dr. Wong, we conducted further - analyses, including ELISA, MTT assay and Bliss analysis to - evaluate the binding affinity and efficacy of our novel - bispecific antibody toward EGFR and c-MET. - </p> + <Horizontal left="70%"> + <p> + With the assistance of Dr. Wong, we conducted further + analyses, including ELISA, MTT assay and Bliss analysis + to evaluate the binding affinity and efficacy of our + novel bispecific antibody toward EGFR and c-MET. + </p> + <template v-slot:right> + <Profile + url="https://static.igem.wiki/teams/4774/wiki/static/img/ihp/profiles/waiting.png" + name="Dr. Wong Wai-ting" + > + Scientific Officer at The Hong Kong Polytechnic + University + </Profile> + </template> + </Horizontal> <!--TODO: å›¾æ ‡å¾…æ›¿æ¢ --> <p class="line center color-mid-dark"> @@ -1616,7 +1727,17 @@ <div class="content-wrap-2"> <p class="subtitle-2">Conclusion</p> <div class="content-2"> - <p>Throughout each milestone and each stage of our Polyneerab project, our success can be attributed to the inputs and advices provided by different experts as well as our continuous efforts. Stakeholders played a crucial role in guiding and shaping our progress, and our determination drove incremental improvements in our project. Ultimately, we achieved our goal of overcoming the problem of osimertinib resistance in NSCLC so as to achieve better therapeutic efficacy and patients’ survival.</p> + <p> + Throughout each milestone and each stage of our Polyneerab + project, our success can be attributed to the inputs and + advices provided by different experts as well as our + continuous efforts. Stakeholders played a crucial role in + guiding and shaping our progress, and our determination drove + incremental improvements in our project. Ultimately, we + achieved our goal of overcoming the problem of osimertinib + resistance in NSCLC so as to achieve better therapeutic + efficacy and patients’ survival. + </p> </div> </div> </div> @@ -1635,35 +1756,45 @@ export default { let carouselHMS = []; let carouselMolly = []; let carouselArbele = []; + let carouselMe = []; - for (let i in Array.from(new Array(3).keys())) { + for (let i = 0; i < 3; i++) { carouselMolly.push( `https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-iv-1-${ - Number(i) + 1 + i + 1 }.jpg` ); carouselArbele.push( `https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-iv-4-${ - Number(i) + 1 + i + 1 }.jpg` ); } - for (let i in Array.from(new Array(6).keys())) { + for (let i = 0; i < 6; i++) { carouselPE.push( `https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-pe-${ - Number(i) + 1 + i + 1 }.jpg` ); carouselHMS.push( `https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-gc-${ - Number(i) + 1 + i + 1 + }.jpg` + ); + } + + for (let i = 0; i < 7; i++) { + carouselMe.push( + `https://static.igem.wiki/teams/4774/wiki/static/img/ihp/ihp-meet-${ + i + 1 }.jpg` ); } return { page, + carouselMe, carouselPE, carouselHMS, carouselMolly, @@ -1678,6 +1809,9 @@ export default { } this.$refs[`interview-${index}`].classList.add("active"); }, + scrollTo(id) { + this.$scrollTo(`#${id}`); + }, }, }; </script> @@ -1772,7 +1906,7 @@ export default { } .abstract { - font-size: 0.2em; + font-size: 0.7em; } } } diff --git a/pages/notebook.vue b/pages/notebook.vue index 9e4d1cee5c544ccc8f9e562957202ec59c15aec9..42e14dfae6d7ab59547915109735102377c85227 100644 --- a/pages/notebook.vue +++ b/pages/notebook.vue @@ -22,7 +22,7 @@ <p class="subtitle-2">Week 2 8th -14th May</p> <div class="content-2"> <List :start="2" - :data="['Transformation to TOP10:Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 1b, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.']" /> + :data="['Transformation to TOP10:Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 2, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.']" /> <Figure number="2" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-2.png" data-scrollent="fade-up" size="60%"> @@ -34,7 +34,7 @@ <p class="subtitle-2">Week 3 15th - 21st May</p> <div class="content-2"> <List :start="2" :data="[ - 'Colonies are picked and inoculated: Two individual colonies were selected from the ligation plate, and each colony was inoculated into a separate tube containing LB broth. The tubes were incubated overnight at 37°C with shaking. ', 'Recombinant plasmid purification: The recombinant plasmid was purified from the cell suspension using TIANprep Mini Plasmid Kit.', 'Transformation to BL21(DE3) The purified recombinant plasmid was transformed into competent BL21(DE3) cells using the heat shock method. As seen in Figure 1d, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates; no contamination occurred. ' + 'Colonies are picked and inoculated: Two individual colonies were selected from the ligation plate, and each colony was inoculated into a separate tube containing LB broth. The tubes were incubated overnight at 37°C with shaking. ', 'Recombinant plasmid purification: The recombinant plasmid was purified from the cell suspension using TIANprep Mini Plasmid Kit.', 'Transformation to BL21(DE3) The purified recombinant plasmid was transformed into competent BL21(DE3) cells using the heat shock method. As seen in Figure 3, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates; no contamination occurred. ' ]" /> <Figure number="3" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-3.png" @@ -81,7 +81,7 @@ Vector design of pET-24d(+)-Scrb-Ssp-Mxe (SS) </Figure> <List :start="2" :data="[ - 'Restriction digestion of insert: The PUC-Ebp-Ssp-Mxe and PUC-Scrb-Ssp-Mxe vectors were subjected to restriction digestion using XbaI and HindIII enzymes to generate compatible ends. Subsequently, DNA gel electrophoresis was performed on the restriction-digested products. Upon examination of the gel image (refer to Figure 2c), fragments of the desired length (~1500 bp size) were observed in each lane. However, an additional third band was present, indicating the presence of an uncut vector. This is believed to be a result of inadequate reaction time, which did not allow for complete digestion.' + 'Restriction digestion of insert: The PUC-Ebp-Ssp-Mxe and PUC-Scrb-Ssp-Mxe vectors were subjected to restriction digestion using XbaI and HindIII enzymes to generate compatible ends. Subsequently, DNA gel electrophoresis was performed on the restriction-digested products. Upon examination of the gel image (refer to Figure 6), fragments of the desired length (~1500 bp size) were observed in each lane. However, an additional third band was present, indicating the presence of an uncut vector. This is believed to be a result of inadequate reaction time, which did not allow for complete digestion.' ]" /> <Figure number="6" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-6.png" data-scrollent="fade-up"> @@ -98,7 +98,7 @@ <p class="subtitle-2">Week 6 5th - 11th June</p> <div class="content-2"> <List :start="6" :data="[ - 'Transformation to TOP10: Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 2d and Figure 2e, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.' + 'Transformation to TOP10: Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 7 and Figure 8, the plate for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.' ]" /> <Figure number="7" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-7.png" data-scrollent="fade-up"> @@ -114,12 +114,12 @@ <p class="subtitle-2">Week 7 12th - 18th June</p> <div class="content-2"> <List :start="7" :data="[ - 'Colonies picking and inoculation: Five individual colonies were picked from the pET24d-Ebp-Ssp-Mxe ligation plate, and each colony was inoculated into a separate tube of LB broth. The tubes were incubated overnight at 37°C with shaking.', 'Recombinant plasmid purification: The recombinant plasmid was purified from the cell suspension using TIANprep Mini Plasmid Kit.', 'R.E of recomb. plasmid S1 for colony selection: The recombinant plasmid was digested with XbaI and HindIII enzymes and subsequently subjected to gel electrophoresis. As shown in Figure 2f, all lanes exhibited two bands with lengths of approximately 5000 bp and 1500 bp, equivalent to the sizes of pET and Ebp-Ssp-Mxe, respectively. The insert ES was present in the recombinant plasmid in the TOP10 cells.' + 'Colonies picking and inoculation: Five individual colonies were picked from the pET24d-Ebp-Ssp-Mxe ligation plate, and each colony was inoculated into a separate tube of LB broth. The tubes were incubated overnight at 37°C with shaking.', 'Recombinant plasmid purification: The recombinant plasmid was purified from the cell suspension using TIANprep Mini Plasmid Kit.', 'R.E of recomb. plasmid S1 for colony selection: The recombinant plasmid was digested with XbaI and HindIII enzymes and subsequently subjected to gel electrophoresis. As shown in Figure 9, all lanes exhibited two bands with lengths of approximately 5000 bp and 1500 bp, equivalent to the sizes of pET and Ebp-Ssp-Mxe, respectively. The insert ES was present in the recombinant plasmid in the TOP10 cells.' ]" /> <Figure number="9" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-9.png" data-scrollent="fade-up"> - Fig. 2f. DNA gel electrophoresis result of restriction digested pET-24d(+)-Ebp-Ssp-Mxe (ES). Lane 1, + DNA gel electrophoresis result of restriction digested pET-24d(+)-Ebp-Ssp-Mxe (ES). Lane 1, Thermo Fisher Scientific GeneRuler 1kb DNA Ladder; lane 2 to 6, restriction digested pET-24d(+)-Ebp-Ssp-Mxe (ES) from different colonies. </Figure> @@ -129,7 +129,7 @@ <p class="subtitle-2">Week 8 19th - 25th June</p> <div class="content-2"> <List :start="10" :data="[ - 'Colony PCR : Eight individual colonies were picked from the pET24d-Scrb-Ssp-Mxe ligation plate, and each colony was inoculated into a separate tube of LB broth, as well as a PCR tube containing the master mix. Colony PCR and gel electrophoresis were performed to confirm successful insertion. As seen in Figure 2g, all lanes showed a fragment of the desired length (~1700 bp). The additional bands with a size of approximately 300 bp were believed to be primers.' + 'Colony PCR : Eight individual colonies were picked from the pET24d-Scrb-Ssp-Mxe ligation plate, and each colony was inoculated into a separate tube of LB broth, as well as a PCR tube containing the master mix. Colony PCR and gel electrophoresis were performed to confirm successful insertion. As seen in Figure 10, all lanes showed a fragment of the desired length (~1700 bp). The additional bands with a size of approximately 300 bp were believed to be primers.' ]" /> <Figure number="10" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-10.png" @@ -147,7 +147,7 @@ <p class="subtitle-2">Week 9 26th June - 2nd July</p> <div class="content-2"> <List :start="13" :data="[ - 'Transformation to BL21(DE3): The purified product was transformed into competent BL21(DE3) cells using the heat shock method. As shown in Figure 2h and Figure 2i, multiple colonies were observed on LB-Kan agar plates after overnight incubation, indicating successful transformation, and no contamination was detected.' + 'Transformation to BL21(DE3): The purified product was transformed into competent BL21(DE3) cells using the heat shock method. As shown in Figure 11 and Figure 12, multiple colonies were observed on LB-Kan agar plates after overnight incubation, indicating successful transformation, and no contamination was detected.' ]" /> <Figure number="11" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-11.png" @@ -167,7 +167,7 @@ <p class="subtitle-2">Week 10 3rd - 9th July</p> <div class="content-2"> <List :start="15" :data="[ - 'Expression: The Ebp-Ssp-Mxe (ES) expression was induced with IPTG at 25°C overnight. After harvesting the cells through centrifugation and lysing them to obtain soluble and insoluble proteins, the samples were heated at 90°C for 5 minutes and run on an SDS-PAGE gel. As seen in Figure 2j, a distinct band with high intensity, corresponding to the overexpressed protein, was observed at approximately 50 kDa molecular weight, indicating successful expression of the soluble protein.' + 'Expression: The Ebp-Ssp-Mxe (ES) expression was induced with IPTG at 25°C overnight. After harvesting the cells through centrifugation and lysing them to obtain soluble and insoluble proteins, the samples were heated at 90°C for 5 minutes and run on an SDS-PAGE gel. As seen in Figure 13, a distinct band with high intensity, corresponding to the overexpressed protein, was observed at approximately 50 kDa molecular weight, indicating successful expression of the soluble protein.' ]" /> <Figure number="13" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-13.png" @@ -180,7 +180,7 @@ <p> The Scrb-Ssp-Mxe (SS) expression was induced with IPTG at 25°C overnight. After harvesting the cells through centrifugation and lysing the cells to obtain soluble and insoluble proteins, the samples were - heated at 90°C for 5 minutes and run on an SDS-PAGE gel. As seen in Figure 2k, a clear band with high + heated at 90°C for 5 minutes and run on an SDS-PAGE gel. As seen in Figure 14, a clear band with high intensity, corresponding to the overexpressed protein, was observed at approximately 50 kDa molecular weight, indicating successful expression of the soluble protein. </p> @@ -235,7 +235,7 @@ Vector design of pET-24d(+)-eGFP-Npu-SsrA (GN) </Figure> <List :start="2" - :data="['Restriction digestion of insert: The PUC-Ebp-Npu-SsrA, PUC-Scrb-Npu-SsrA, and PUC-GFP-Npu-SsrA vectors were subjected to restriction digestion using XbaI and HindIII enzymes to generate compatible ends. Subsequently, DNA gel electrophoresis was performed on the restriction-digested products. Upon examination of the gel image (refer to Figure 3d), fragments of the desired lengths (972 bp and 1653 bp) were observed in each lane. However, an additional third band was present, indicating the presence of an uncut vector. This is believed to be a result of inadequate reaction time, which did not allow for complete digestion.']" /> + :data="['Restriction digestion of insert: The PUC-Ebp-Npu-SsrA, PUC-Scrb-Npu-SsrA, and PUC-GFP-Npu-SsrA vectors were subjected to restriction digestion using XbaI and HindIII enzymes to generate compatible ends. Subsequently, DNA gel electrophoresis was performed on the restriction-digested products. Upon examination of the gel image (refer to Figure 18), fragments of the desired lengths (972 bp and 1653 bp) were observed in each lane. However, an additional third band was present, indicating the presence of an uncut vector. This is believed to be a result of inadequate reaction time, which did not allow for complete digestion.']" /> <Figure number="18" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-19.png" data-scrollent="fade-up"> @@ -254,7 +254,7 @@ <p class="subtitle-2">Week 13 24th - 30th July</p> <div class="content-2"> <List :start="6" :data="[ - 'Transformation to TOP10: Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 3e, Figure 3f and Figure 3g, plates for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.' + 'Transformation to TOP10: Ligated products were transformed into competent TOP10 cells through the heat shock method. As seen in Figure 19, Figure 20 and Figure 21, plates for pET24d showed multiple colonies after overnight incubation on LB–Kan agar plates without any contamination.' ]" /> <Figure number="19" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-20.png" @@ -264,7 +264,7 @@ <Figure number="20" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-21.png" data-scrollent="fade-up"> - Fig. 3f. LB agar plate with pET-24d(+)-Scrb-Npu-SsrA transformants (TOP10). + LB agar plate with pET-24d(+)-Scrb-Npu-SsrA transformants (TOP10). </Figure> <Figure number="21" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-22.png" @@ -280,7 +280,7 @@ <p class="subtitle-2">Week 14 31st July - 6th August</p> <div class="content-2"> <List :start="9" :data="[ - 'R.E of recomb. plasmid EN for colony selection. Recombinant plasmids were digested by XbaI and HindIII, and run through gel electrophoresis. As seen in Figure 3h, all lanes showed 2 bands with lengths ~5000bp and ~1000bp which were equivalent to pET and Ebp-Npu-Ssra size. Insert EN was present in the recombinant plasmid in TOP10 cell.' + 'R.E of recomb. plasmid EN for colony selection. Recombinant plasmids were digested by XbaI and HindIII, and run through gel electrophoresis. As seen in Figure 22, all lanes showed 2 bands with lengths ~5000bp and ~1000bp which were equivalent to pET and Ebp-Npu-Ssra size. Insert EN was present in the recombinant plasmid in TOP10 cell.' ]" /> <Figure number="22" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-23.png" @@ -293,7 +293,7 @@ 'Colony PCR: Eight individual colonies were picked from the pET24d-Scrb-Ebp-Npu-Ssp and pET24d-GFP-Npu-SsR ligation plate, and each colony was inoculated into a separate tube of LB broth, as well as a PCR tube containing master mix. Colony PCR and gel electrophoresis were performed to confirm successful insertion.' ]" /> <p> - As seen in Figure 3i from SN, all lanes exhibited a fragment of the desired length (~1200 bp). The + As seen in Figure 23 from SN, all lanes exhibited a fragment of the desired length (~1200 bp). The additional bands with a size of approximately 300 bp were believed to be primers. </p> <Figure number="23" @@ -304,7 +304,7 @@ colonies. </Figure> <p> - While, for GN in Figure 3j all lanes showed fragments with desired length (~1700bp). The extra bands with + While, for GN in Figure 24 all lanes showed fragments with desired length (~1700bp). The extra bands with ~300bp size are believed to be primers. </p> <Figure number="24" @@ -315,7 +315,7 @@ colonies. </Figure> <List :start="11" :data="[ - 'Glycerol stock: Cells with pET-24d(+)-Ebp-Npu-SsrA, pET-24d(+)-Scrb-Npu-SsrA and pET-24d(+)-GFP-Npu-SsrA were stored in glycerol.', 'Transformation to BL21(DE3): The purified product is transformed into competent BL21(DE3) cells using the heat shock method. As shown in Figure 3k, Figure 3l, and Figure 3m, the plates for pET24d-Ebp-NpuSsrA, pET24d-Scrb-NpuSsrA, and pET24d-GFP-NpuSsrA display multiple colonies after overnight incubation on LB-Kan agar plates, indicating successful transformation without any contamination.' + 'Glycerol stock: Cells with pET-24d(+)-Ebp-Npu-SsrA, pET-24d(+)-Scrb-Npu-SsrA and pET-24d(+)-GFP-Npu-SsrA were stored in glycerol.', 'Transformation to BL21(DE3): The purified product is transformed into competent BL21(DE3) cells using the heat shock method. As shown in Figure 25, Figure 26, and Figure 27, the plates for pET24d-Ebp-NpuSsrA, pET24d-Scrb-NpuSsrA, and pET24d-GFP-NpuSsrA display multiple colonies after overnight incubation on LB-Kan agar plates, indicating successful transformation without any contamination.' ]" /> <Figure number="25" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-26.png" @@ -342,7 +342,7 @@ 'Colony sequencing result: Selected EN, SN and GN plasmids were sent to BGI for sanger sequencing using the T7 promoter and T7 terminator. After aligning the designed sequence with the sequences sent for analysis, it was found that the sequences for EN, SN, and GN were correct.', 'Expression: EN and SN expressions were induced by IPTG at 25°C for 6 hours. After harvesting the cells through centrifugation and obtaining the soluble and insoluble proteins using a lysis buffer, the samples were run on a PAGE gel under two different conditions. For denatured samples, they were heated at 90°C for 5 minutes, treated with SDS, and then loaded onto the gel. For native samples, they were treated with 2X native gel loading buffer, not boiled, and then loaded onto the gel.' ]" /> <p> - As seen in Figure 3n, a clear band with high intensity at the SDS protein lane was shown at ~37kD Mw, and + As seen in Figure 28, a clear band with high intensity at the SDS protein lane was shown at ~37kD Mw, and soluble protein EN was successfully expressed. </p> <Figure number="28" @@ -355,7 +355,7 @@ insoluble. </Figure> <p> - At the same time, in Figure 3o, a distinct band at the native protein lane was shown at ~40kD Mw and + At the same time, in Figure 29, a distinct band at the native protein lane was shown at ~40kD Mw and soluble protein SN was successfully expressed. </p> <Figure number="29" @@ -372,7 +372,7 @@ and lysing the cells to obtain soluble and insoluble proteins, the samples were run on a PAGE gel under two different conditions. For denatured samples, they were heated at 90°C for 5 minutes and treated with SDS before loading onto the gel. For native samples, they were not boiled and treated with 2X native gel - loading buffer prior to loading onto the gel. In Figure 3p, there was very little soluble protein was + loading buffer prior to loading onto the gel. In Figure 30, there was very little soluble protein was expressed, instead, there was an intense band of insoluble protein at 60kDa. </p> <!--å°‘å¼ å›¾--> @@ -396,7 +396,7 @@ <p> After adjusting the conditions, the expression was carried out again. The cells were harvested and the soluble and insoluble proteins were obtained using a lysis buffer. The samples were then run through - native PAGE. Upon examining the gel image (refer to Figure 3q), a clear band with high intensity in the + native PAGE. Upon examining the gel image (refer to Figure 31), a clear band with high intensity in the native protein lane was observed at approximately 60 kDa molecular weight, indicating successful expression of the soluble protein GN. </p> @@ -409,7 +409,7 @@ soluble; Insol = insoluble. </Figure> <p> - To confirm the expression of eGFP, samples were observed under a UV box. As shown in Figure 3r, strong + To confirm the expression of eGFP, samples were observed under a UV box. As shown in Figure 32, strong fluorescence was observed in the eGFP-Npu-SsrA induced soluble group, indicating the successful expression of eGFP and the functionality of the biobrick. </p> @@ -424,7 +424,7 @@ <p class="subtitle-2">Week 16 14th - 20th August</p> <div class="content-2"> <List :start="15" :data="[ - 'Purification: Glycerol stocks of EN, SN and GN were used to do protein expression in 100 ml of medium, to obtain a sufficient amount of the desired protein. The cells were then harvested through centrifugation with 7500 rpm for 15 minutes, subsequently lysed using sonication. The sonication cycles consisted of an on time of 20 seconds followed by an off time of 30 seconds. A total on time of 10 minutes and 60% Amplitude was employed. The soluble protein in the lysate was subsequently obtained through centrifugation with 8000 rpm for 5 minutes. The soluble protein, which contained the Npu splicing biobrick, was loaded onto the chitin column for one-step purification and cyclization.', '16. Liquid Chromatography-Electrospray Ionization-Mass Spectrometry (LC-ESI-MS) After chitin column purification, the elution fractions from GN was subjected to LC-ESI-MS to determine the presence of the targeted eGFP protein. For GN, please refer to the result in Figure 3s, where a peak at 26921 Da was observed. This peak aligned with the expected molecular mass of cyclic eGFP, which is 26923 Da, indicating that cyclic eGFP was detected in the elution fraction.' + 'Purification: Glycerol stocks of EN, SN and GN were used to do protein expression in 100 ml of medium, to obtain a sufficient amount of the desired protein. The cells were then harvested through centrifugation with 7500 rpm for 15 minutes, subsequently lysed using sonication. The sonication cycles consisted of an on time of 20 seconds followed by an off time of 30 seconds. A total on time of 10 minutes and 60% Amplitude was employed. The soluble protein in the lysate was subsequently obtained through centrifugation with 8000 rpm for 5 minutes. The soluble protein, which contained the Npu splicing biobrick, was loaded onto the chitin column for one-step purification and cyclization.', '16. Liquid Chromatography-Electrospray Ionization-Mass Spectrometry (LC-ESI-MS) After chitin column purification, the elution fractions from GN was subjected to LC-ESI-MS to determine the presence of the targeted eGFP protein. For GN, please refer to the result in Figure 33, where a peak at 26921 Da was observed. This peak aligned with the expected molecular mass of cyclic eGFP, which is 26923 Da, indicating that cyclic eGFP was detected in the elution fraction.' ]" /> <Figure number="33" url="https://static.igem.wiki/teams/4774/wiki/static/img/notebook/notebook-figure-33.png"