diff --git a/assets/imgs/5years.png b/assets/imgs/5years.png new file mode 100644 index 0000000..a883284 Binary files /dev/null and b/assets/imgs/5years.png differ diff --git a/assets/imgs/beginnings.png b/assets/imgs/beginnings.png new file mode 100644 index 0000000..78e50a4 Binary files /dev/null and b/assets/imgs/beginnings.png differ diff --git a/assets/imgs/index.js b/assets/imgs/index.js index c44c7c2..539d586 100644 --- a/assets/imgs/index.js +++ b/assets/imgs/index.js @@ -36,6 +36,14 @@ const Images = { medium: require('./medium.png'), twitter: require('./twitter.png'), youtube: require('./youtube.png'), + + beginnings: require('./beginnings.png'), + worldrecord: require('./worldrecord.png'), + nonprofit: require('./nonprofit.png'), + fiveyears: require('./5years.png'), + joinus: require('./joinus.png'), + sustainable: require('./sustainable.png'), + }; export default Images; diff --git a/assets/imgs/joinus.png b/assets/imgs/joinus.png new file mode 100644 index 0000000..8e8bdf8 Binary files /dev/null and b/assets/imgs/joinus.png differ diff --git a/assets/imgs/nonprofit.png b/assets/imgs/nonprofit.png new file mode 100644 index 0000000..d0061c4 Binary files /dev/null and b/assets/imgs/nonprofit.png differ diff --git a/assets/imgs/sustainable.png b/assets/imgs/sustainable.png new file mode 100644 index 0000000..200a3a9 Binary files /dev/null and b/assets/imgs/sustainable.png differ diff --git a/assets/imgs/worldrecord.png b/assets/imgs/worldrecord.png new file mode 100644 index 0000000..a1b392d Binary files /dev/null and b/assets/imgs/worldrecord.png differ diff --git a/package.json b/package.json index f938afb..f188a17 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "react-native-tab-view": "^2.10.0", "react-native-vector-icons": "^4.6.0", "react-navigation": "^2.13.0", - "yo": "2.0.3" + "yo": "2.0.3", + "resolveAssetSource": "latest" }, "devDependencies": { "babel-eslint": "^8.2.3", diff --git a/src/components/About.js b/src/components/About.js new file mode 100644 index 0000000..2471413 --- /dev/null +++ b/src/components/About.js @@ -0,0 +1,200 @@ +import React, {Component} from 'react'; +import { + View, + FlatList, Image, StyleSheet, Linking, Text, +} from 'react-native'; +import Images from '../../assets/imgs'; +import resolveAssetSource from 'resolveAssetSource'; + +import { + ViewContainer, + SubHeading, +} from './Base'; +import {H3, H5} from "./Text"; + +export class Milestone { + constructor(date, name, image, payload) { + this.date = date; + this.name = name; + this.image = image; + this.payload = payload; + } +} + +const DATA = [ + new Milestone( + 'AUGUST 2015', + 'Our Humble Beginnings', + Images['beginnings'], +
+ Technica was founded at the University of Maryland, by students who saw a gap that mainstream hackathons + weren’t addressing. Our goal has since remained the same: to introduce women and non-binary folks from + diverse backgrounds to the field of tech. +
+ ), + new Milestone( + 'NOVEMBER 2016', + 'A World Record', + Images['worldrecord'], +
+ Technica became the + Linking.openURL('https://eng.umd.edu/news/story/technica-becomes-largest-allwomen-hackathon')}>{" "}largest + all-women & + non-binary hackathon{" "} + with over 850 participants coming from schools + across the East coast, Midwest, California, Florida, and even Canada! +
+ ), + new Milestone( + 'AUGUST 2018', + 'Nonprofit Status', + Images['nonprofit'], +
+ Technica was officially recognized by the US Government as a nonprofit! This grounded our mission: to + empower diversity in technology. Our work isn’t for profits or show, but to fight for what is just and + equitable. +
+ ), + new Milestone( + 'AUGUST 2019', + '5th Year Celebration', + Images['fiveyears'], +
+ Technica turns five! We celebrated our anniversary with a + Linking.openURL('https://youtu.be/5m13YSjSgVE')}>{" "}video{" "} + honoring + the past 5 years. We’re proud to + have hosted over 3,000 women & non-binary people and counting and look forward to the future. +
+ ), + new Milestone( + 'SEPTEMBER 2019', + 'Becoming More Sustainable', + Images['sustainable'], +
+ Large events, like hackathons, can be particularly wasteful. To minimize our impact on the global climate + crisis, we pledged this year to commit to greater sustainability practices at Technica. Our pledge can be + found + Linking.openURL('https://docs.google.com/presentation/d/153j3iVsLimOyS9ayPpt90978d441nWAR-UpogdP3rxU/edit?usp=sharing')}>{" "}here + . +
), + new Milestone( + 'NOVEMBER 2019', + 'Join Us!', + Images['joinus'], +
+ We’re back for our fifth iteration! We are so excited to celebrate half a decade of Technica and host the + future of technology for a weekend immersed in learning, connecting, and personal growth. +
+ ), + ] +; +// This is the part of the app users goes to for our milestones +export default class About extends Component { + + constructor(props) { + super(props); + } + + renderIcon(milestone, align) { + let imageInfo = resolveAssetSource(milestone.image); + return ( + + + + ) + } + + renderPayload(milestone, align) { + return ( + +

{milestone.date}

+

{milestone.name}

+ {milestone.payload} + + ) + } + + renderMilestone(milestone, index) { + if (index % 2 == 0) { + return ( + + {this.renderIcon(milestone, 'flex-start')} + {this.renderPayload(milestone, 'right')} + + ) + } else { + return ( + + {this.renderPayload(milestone, 'left')} + {this.renderIcon(milestone, 'flex-end')} + + ) + } + } + + // Completes overall setup of the page + render() { + let index = 0; + return ( + + + + + + Milestones + + + We've come a long way + + + this.renderMilestone(item, index++)} + keyExtractor={item => item.name} + /> + + + ) + } +} + +const styles = StyleSheet.create({ + logo: { + width: 275, + height: 55, + marginTop: 0, + marginBottom: 0 + }, +}) \ No newline at end of file diff --git a/src/screens/Home.js b/src/screens/Home.js index a9bbe23..edf42b7 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -40,6 +40,7 @@ import Icon from "react-native-vector-icons/SimpleLineIcons"; import { FlatGrid } from "react-native-super-grid"; import PhotoView from "react-native-photo-view"; import Connect from "../components/Connect" +import About from "../components/About"; export default class Home extends Component { constructor(props) { @@ -200,11 +201,8 @@ export default class Home extends Component { this.toggleAboutUsModal()} - heading="Challenges" /> - - About Us - + );