Skip to content

Sidebar implemented; Format cleared; Content transferred #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
inesqyx wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Sidebar implemented; Format cleared; Content transferred #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/static/css/main.555d42c5.css
View file
Open in desktop

Large diffs are not rendered by default.

28 changes: 27 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"react-dom": "^17.0.2",
"react-fade-in": "^2.0.1",
"react-hook-form": "^7.28.1",
"react-minimal-side-navigation": "^1.9.2",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.1",
"react-transition-group": "^4.4.2",
Expand Down
1 change: 1 addition & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Events from "./Components/EventPage/Events";
import AboutUs from "./Components/AboutPage/AboutUs";
import ContactUs from "./Pages/ContactPage";


class App extends React.Component {
render() {
return(
Expand Down
7 changes: 4 additions & 3 deletions src/Components/ProjectsPage/Projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,16 @@ class Projects extends React.Component {
Projects2019: proj_data.tags_to_project.Projects2019.map(filter_proj),
}
}

//Footer is commnted out: <Footer />
render() {
return(
<div>
<NavBar />
<ProjectsPage currentProjects={this.state.currentProjects}
<ProjectsPage upcomingProjects={this.state.upcomingProjects}
currentProjects={this.state.currentProjects}
Projects2020={this.state.Projects2020}
Projects2019={this.state.Projects2019}/>
<Footer />

</div>
)
}
Expand Down
65 changes: 40 additions & 25 deletions src/Data/projects.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"tags_to_project": {
"homepage_carousel": [0, 1],
"internal_projects": [8],
"external_projects": [0, 1, 2, 3, 4, 5, 6, 7],
"currentProjects": [8],
"upcomingProjects": [],
"Projects2020": [4, 5, 6, 7],
"Projects2019": [0, 1, 2, 3]
"internal_projects": [4,9],
"external_projects": [0, 1, 2, 3, 5, 6, 7, 8],
"currentProjects": [],
"upcomingProjects": [5,6,7,8,9],
"Projects2020": [],
"Projects2019": [0, 1, 2, 3, 4]
},
"proj_list": [
{
Expand Down Expand Up @@ -80,6 +80,24 @@
"teamMembers": [],
"aboutOrg": "Health Out Loud (HOL) is a CRA-registered charity that innovates health to be fun, relatable, and understandable through novel technological and other products. Building connectedness to improve mental health is a priority for our clients, which is an unmet need based on existing community platforms (ie. Facebook) that tend to foster superficial relationships and conversations."
},
{
"organizationName": "Volunteer Engineering Experience Program (VEEP)",
"projectTitle": "Web App Development",
"img_filename": "proj1.jpg",
"desc": [
"Something random about the project 1",
"Blah blah Blah blah Blah blah Blah blah Blah blah Project 1-1 Blah blah Blah blah Blah blah Blah blah Blah blah",
"Blah blah Blah blah Blah blah Blah blah Blah blah Project 1-2 Blah blah Blah blah Blah blah Blah blah Blah blah",
"Blah blah Blah blah Blah blah Blah blah Blah blah Project 1-3 Blah blah Blah blah Blah blah Blah blah Blah blah"
],
"description": "Design and improve the User Interface (UI) of the current club website",
"key": "VEEP - Web App Development",
"apply": false,
"projectType": 2,
"teamMembers": [{"name":"Iris Zuo", "position":"Technical Manager", "year":"ECE 2T4"},
{"name":"Felix Deng", "position":"Technical Manager", "year":"Mechanical 2T3"}],
"aboutOrg": "VEEP is a student run organization that focuses on providing meaningful services to the community through student led projects design to prepare student for internships in industry."
},
{
"organizationName": "Spelling Bee of Canada (SBOC)",
"projectTitle": "Web App Development",
Expand All @@ -92,11 +110,9 @@
],
"description": "To support the enrichment of youth literacy, SBOC offers a website learning platform which engages children with flashcards, practice tests, and various learning games. However, the website only supports PC. This project improved their learning platform by making it compatible across all devices",
"key": "SBOC - Web App Development",
"apply": false,
"projectType": 2,
"teamMembers": [
{"name":"Catherine Zhou", "position":"Technical Manager", "year":"ECE 2T2"},
{"name":"Fatima Sadia", "position":"Frontend Developer", "year":"Math 2T4"}
"apply": true,
"projectType": 1,
"roles": ["Designer", "Backend Developer", "Fullstack Developer", "Frontend Developer"
],
"aboutOrg": "Spelling Bee of Canada (SBOC) is an educational organization that inspires youth, parents, teachers and the community at large to participate in the education process and celebrate scholastic achievement through an annual spelling bee and other educational programs."
},
Expand All @@ -112,11 +128,12 @@
],
"description": "Currently, they are looking to improve the experience of mentors and mentees (Bigs and Littles) by supporting their pursuit for a rewarding career. BBBST hopes to do this through a networking site where Bigs, or youth who have aged out of the program, can access professionals in a mentorship capacity. This project is incredibly multifaceted, with a strong technical aspect of developing the web application through the creation of profile pages and querying capabilities, as well as key design thinking/human factors principles involving empathy-based preliminary research and usability testing before deploying the production version.",
"key": "Big Brothers Big Sisters of Toronto - Mentor Based Networking Site",
"apply": false,
"projectType": 2,
"teamMembers": [],
"apply": true,
"projectType": 1,
"roles": ["Designer", "Backend Developer", "Fullstack Developer", "Frontend Developer"],
"aboutOrg": "Big Brothers Big Sisters of Toronto (BBBST) is a Maclean’s Top 100 Charity focused on building thriving communities by empowering lives through mentorship. In 2017, they empowered over 2500 children and youth in our city."
},

{
"organizationName": "Youth Without Shelter",
"projectTitle": "Outreach Revitilization",
Expand All @@ -129,11 +146,12 @@
],
"description": "Since 2010, YWS has run Time4Change (T4C - formerly Tokens for Change) involving a fusion of art activism and fundraising at TTC subways stations in February, primarily led by student volunteers. As consumer habits change and we are transforming into a cashless society, in addition to lower ridership this year, YWS is looking to partner with VEEP to revitalize their strategy for execution of the original vision; youth supporting youth. VEEP students will play a pivotal role in the digital transformation of a $750,000+ and 4,500+ person initiative. This project involves an initial research phase which will culminate in a report with insights based on human factors research (particularly Human Computer Interaction) using key ideas in user experience design and design thinking. Students will translate research insight into a software deliverable which will be used in the new campaign next year.",
"key": "Youth Without Shelter - Outreach Revitilization",
"apply": false,
"projectType": 2,
"teamMembers": [],
"apply": true,
"projectType": 1,
"roles": ["Designer", "Backend Developer", "Fullstack Developer", "Frontend Developer","Analyst"],
"aboutOrg": "Youth Without Shelter (YWS) is a 2020 Top 100 Maclean’s National Charity which provides emergency housing and support programs to help youth develop skills to secure long term housing and jobs."
},

{
"organizationName": "The 519",
"projectTitle": "Database Consultation",
Expand All @@ -146,9 +164,9 @@
],
"description": "Currently, all their information required to run their operations (programs, space-use, membership, donors, volunteers data etc) is decentralized making it difficult and time consuming to collate, analyze and report on. To address this, VEEP is proposing a project consisting of two core parts to be completed in series. The first, a technical consultation process culminating in a report summarizing the needs of the organization with regards to their data, how their current implementation is falling short, and recommendations for improvement. The second, working in tandem with the organization to craft an RFP and time permitting, promoting the project directly to senior leadership at the organization.",
"key": "The 519 - Database Consultation",
"apply": false,
"projectType": 2,
"teamMembers": [],
"apply": true,
"projectType": 1,
"roles": ["Analyst", "Backend Developer"],
"aboutOrg": "The 519 is a City of Toronto agency, a registered charity, and a community centre committed to the health, happiness and full participation of the LGBTQ2S communities."
},
{
Expand All @@ -163,12 +181,9 @@
],
"description": "Design and improve the User Interface (UI) of the current club website",
"key": "VEEP - Web App Development",
"apply": false,
"apply": true,
"projectType": 2,
"teamMembers": [
{"name":"Iris Zuo", "position":"Technical Manager", "year":"ECE 2T4"},
{"name":"Felix Deng", "position":"Technical Manager", "year":"Mechanical 2T3"}
],
"roles": ["Designer", "Backend Developer", "Fullstack Developer", "Frontend Developer","Designer"],
"aboutOrg": "VEEP is a student run organization that focuses on providing meaningful services to the community through student led projects design to prepare student for internships in industry."
}
]
Expand Down
45 changes: 37 additions & 8 deletions src/Pages/ProjectsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,46 @@ import ProjectBox from '../Components/ProjectsPage/ProjectBox.component';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../Styles/ProjectsPage.css';



class ProjectsPage extends React.Component {
render() {
return (
<div>
<Container className="projectContainer">
<h1>Projects</h1>

<Tabs defaultActiveKey="upcoming">
<Tab eventKey="upcoming" title="Upcoming Projects">
Check back in September for this year's projects.
<Tab eventKey="upcoming" title="Upcoming Projects" tabClassName='upcomingProjects'>
<div>
<h3 className="projectTypeTitle">Community Projects</h3>
{this.props.upcomingProjects.map(project => (
project.projectType === 1 ? (
<ProjectBox key={project.key} project={project} />
) : null
))}
</div>
<div>
<h3 className="projectTypeTitle">Campus Club</h3>
{this.props.upcomingProjects.map(project => (
project.projectType === 2? (
<ProjectBox key={project.key} project={project} />
) : null
))}
</div>
<div>
<h3 className="projectTypeTitle">Startup Projects</h3>
<p>Coming soon ... </p>
{this.props.upcomingProjects.map(project => (
project.projectType === 3 ? (
<ProjectBox key={project.key} project={project} />
) : null
))}
</div>
</Tab>
<Tab eventKey="current" title="Current Projects">
<Tab eventKey="current" title="Current Projects" tabClassName='currentProjects'>
<div>
<h3 className="projectTypeTitle">Community Projects</h3>
<p>No community project this year</p>
<p>Coming soon ...</p>
{this.props.currentProjects.map(project => (
project.projectType === 1 ? (
<ProjectBox key={project.key} project={project} />
Expand All @@ -28,6 +54,7 @@ class ProjectsPage extends React.Component {
</div>
<div>
<h3 className="projectTypeTitle">Campus Club</h3>
<p>Coming soon ...</p>
{this.props.currentProjects.map(project => (
project.projectType === 2 ? (
<ProjectBox key={project.key} project={project} />
Expand All @@ -36,15 +63,15 @@ class ProjectsPage extends React.Component {
</div>
<div>
<h3 className="projectTypeTitle">Startup Projects</h3>
<p>No startup project this year</p>
<p>Coming soon ...</p>
{this.props.currentProjects.map(project => (
project.projectType === 3 ? (
<ProjectBox key={project.key} project={project} />
) : null
))}
</div>
</Tab>
<Tab eventKey="Previous" title="Previous Projects">
<Tab eventKey="Previous" title="Previous Projects" tabClassName='previousProjects'>
<Accordion className="projectCard">
<Accordion.Item eventKey="2020">
<Accordion.Header>2020-2021</Accordion.Header>
Expand All @@ -71,4 +98,6 @@ class ProjectsPage extends React.Component {
}
}

export default ProjectsPage;
export default ProjectsPage;


54 changes: 47 additions & 7 deletions src/Styles/ProjectsPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,58 @@
.projectContainer h1{
width: 100%;
text-align: center;
color: #71518A;
}


.projectContainer .tab-content {
position:relative;
top:40px;
width:100%;
left: 85px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}

.projectContainer .nav-tabs {
margin-bottom: -1;

.upcomingProjects{
position: absolute;
left:0;
top:150px;
width: 175px;
height:60px;
color: #71518A;
}

.currentProjects{
position: absolute;
left:0;
top:210px;
width:175px;
height:60px;

color: #71518A;
}


.previousProjects{
position: absolute;
left:0;
top:270px;
width:175px;
height:60px;
color: #71518A;

}


.projectContainer .nav-link{
border-left: none;
border-right: none;
border-bottom: none;
border-top: none;
color: #71518A;


font-weight: bold;
}

Expand All @@ -28,13 +63,15 @@
font-weight: bold;
}


.projectTypeTitle{
width: 100%;
text-align: center;
color: #71518A;
}

.projectCard{

margin-top: 2rem;
}

Expand All @@ -49,12 +86,15 @@
box-shadow: 0 0 0 0.15rem #bb99b7;
}

/*drop down menu sign after clicking*/
.projectCard .accordion-button:not(.collapsed)::after{
background-image: url(https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.pnghttps://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-minus-user-interface-tanah-basah-glyph-tanah-basah.png);
}

/*drop down menu sign before clicking*/
.projectCard .accordion-button::after{
background-image: url(https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png);

}

.projectCard .cardButton{
Expand Down