24 |
52 | );
53 | }
54 |
55 | });
56 |
57 | // ---------- register hash change event to do some transation;
58 | // window.addEventListener("hashchange", onHashChange);
59 | // function onHashChange(e){
60 | // /*
61 | // newURl, oldURL,
62 | // */
63 |
64 | // }
65 |
66 |
67 |
68 |
69 |
70 | module.exports = App;
--------------------------------------------------------------------------------
/public/app/components/Grid.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 |
4 | var Grid = React.createClass({
5 | propTypes:{
6 | gridData: React.PropTypes.array.isRequired,
7 | },
8 | getDefaultProps:function(){
9 | return {
10 | gridData: [],
11 | }
12 | },
13 | // getInitialState:function(){
14 |
15 | // },
16 | // componentWillMount: function(){
17 |
18 | // },
19 | componentDidMount: function(){
20 | var wraper = this.getDOMNode();
21 | wraper.style.marginLeft="10px";
22 | wraper.style.width = (window.innerWidth - 20)+'px';
23 | },
24 | componentWillUnmount:function(){
25 |
26 | },
27 | // componentWillReceiveProps:function(nextProps){
28 | // console.log('next props is:');
29 | // console.log(nextProps);
30 | // },
31 | componentDidUpdate:function(){
32 | // store last selection so we can do leaving animation:
33 | this.lastSelected = this.props.selected;
34 | },
35 | render: function(){
36 | var self = this;
37 | var items = [];
38 |
39 | this.props.items.forEach(function(item,index){
40 | var data = self.props.gridData[index] || {};
41 |
42 | var itemStyle = {
43 | width: data.width+ 'px',
44 | height: data.height + 'px',
45 | top: data.top,
46 | left: data.left,
47 | };
48 |
49 | var isSelected = self.props.selected == index;
50 |
51 | if( isSelected ){
52 | var trans = 'translate3d(-50%,-'+(window.innerHeight/2)+'px,0)';
53 | itemStyle = {
54 | width: '100%',
55 | height: window.innerHeight+ 'px',
56 | top: '0',
57 | left: '0',
58 | zIndex: '10',
59 | WebkitTransform: trans,
60 | MozTransform: trans,
61 | msTransform: trans,
62 | OTransform: trans,
63 | transform: trans,
64 | marginTop: (window.innerHeight/2)+'px',
65 | }
66 | }
67 | // this one should leave the sence
68 | if(self.lastSelected == index){
69 | itemStyle.zIndex = '9';
70 | }
71 |
72 | var classname = 'gf-grid-item '+ (isSelected?'full-screen':'');
73 |
74 | items.push(
75 |
25 |
27 |
29 | 
30 |
31 |
50 |
30 |
84 | {items}
85 |
86 | )
87 | }
88 |
89 | });
90 |
91 | module.exports = Grid;
--------------------------------------------------------------------------------
/public/app/components/Navtoggle.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var navActions = require('../actions/navActions.js');
3 | var navStore = require('../stores/navStore.js')
4 |
5 | var Navtoggle = React.createClass({
6 | _onChange: function() {
7 | // this.setState({});
8 | // console.log('navStore.getState().isNavOpen :'+ navStore.getState().isNavOpen );
9 | if( navStore.getState().isNavOpen ){
10 | this.openNav()
11 | }else{
12 | this.closeNav()
13 | }
14 |
15 | },
16 | componentDidMount: function(){
17 | navStore.addChangeListener(this._onChange);
18 |
19 | // store dom elements here
20 | this.gfelm = {
21 | gfApp:document.getElementById('gf-app'),
22 | navSvgPoints : {
23 | from: [115,800,115,800,115,1,115,1 ],//this.gfelm.navSvgPolygon.attr('points'),
24 | to: [115,800,5 , 800,115,1,115,1 ],//this.gfelm.navSvg.getAttribute('data-points-hover'),
25 | }
26 | }
27 |
28 | this.gfelm.navSvg = Snap( document.getElementById('nav-svg') );//;
29 | this.gfelm.navSvgPolygon = this.gfelm.navSvg.polygon( this.gfelm.navSvgPoints.from );
30 | this.gfelm.navSvgPolygon.attr({
31 | id:"nav-svg-poly",
32 | fill: "#ffffff",
33 | });
34 | this.gfelm.isNavSvgOpen = false;
35 |
36 | // -----create a backdrop overlay ------
37 | this.gfelm.backdrop = document.createElement('div');
38 | this.gfelm.backdrop.id = 'gf-nav-backdrop';
39 | this.gfelm.gfApp.appendChild( this.gfelm.backdrop );
40 | // add event listener to close nav
41 | this.gfelm.backdrop.addEventListener('click',function(e){
42 | navActions.toggle('close');
43 | });
44 |
45 | this._onChange();
46 | },
47 | componentWillUnmount:function(){
48 | navStore.removeChangeListener(this._onChange);
49 | },
50 | openNav:function(){
51 | this.gfelm.gfApp.classList.add('show-nav');
52 | var node = this.getDOMNode();
53 |
54 | node.classList.add('uac-close');
55 | node.classList.add('uac-dark');
56 | this.gfelm.backdrop.style.visibility = 'visible';
57 |
58 | this.gfelm.navSvgPolygon.animate({
59 | 'points': this.gfelm.navSvgPoints.to,
60 | },300, mina.easeinout );
61 | },
62 | closeNav:function(){
63 | var that = this;
64 | this.gfelm.gfApp.classList.remove('show-nav');
65 | var node = this.getDOMNode();
66 |
67 | node.classList.remove('uac-close');
68 | node.classList.remove('uac-dark');
69 |
70 | this.gfelm.backdrop.style.visibility = 'hidden';
71 |
72 | this.gfelm.navSvgPolygon.animate({
73 | 'points': this.gfelm.navSvgPoints.from,
74 | },300, mina.easeinout, function(){
75 |
76 | });
77 | },
78 | // toggleNav:function(){
79 | // this.gfelm.gfApp.classList.toggle('show-nav');
80 | // var node = this.getDOMNode();
81 |
82 | // node.classList.toggle('uac-close');
83 | // node.classList.toggle('uac-dark');
84 |
85 | // this.gfelm.navSvgPolygon.animate({
86 | // 'points': navStore.getState().isNavOpen ? this.gfelm.navSvgPoints.from : this.gfelm.navSvgPoints.to,
87 | // },300, mina.easeinout );
88 | // }
89 | onToggle: function(){
90 | navActions.toggle();
91 | },
92 | render: function(){
93 | var svgString = ' ';
96 | return (
97 |
102 | )
103 | }
104 | });
105 |
106 | module.exports = Navtoggle;
107 |
--------------------------------------------------------------------------------
/public/app/components/RouteCover.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var routeCoverStore = require('../stores/routeCoverStore.js');
3 | var routeCoverActions = require('../actions/routeCoverActions.js');
4 |
5 | var RouteCover = React.createClass({
6 | _onChange: function() {
7 | // this.setState({});
8 |
9 | var state = routeCoverStore.getState();
10 | if( state.isCoverShown ){
11 | this.start();
12 | }else{
13 | this.finish( );
14 | }
15 |
16 | },
17 | componentDidMount:function(){
18 | routeCoverStore.addChangeListener( this._onChange );
19 | // polygon points
20 | var width = window.innerWidth, height = window.innerHeight;
21 | this.startPoints = [
22 | [0,0, 0,0, 0,height, 0,height ], // 0 start at right;
23 | [0,0, width/4,0, 1,height, 0,height ], // 1
24 |
25 | // [0,0, width/4,0, width/4 ,height, 0,height ], // 2
26 | [0,0, width/4,0, width/2 ,height, 0,height ], // 3
27 |
28 | // [0,0, width/2,0, width/2 ,height, 0,height],
29 | [0,0, width/4*3,0, width/2 ,height, 0,height],
30 |
31 | // [0,0, width/4*3,0, width/4*3 ,height, 0,height],
32 | [0,0, width/4*3,0, width ,height, 0,height],
33 |
34 | [0,0, width,0, width,height, 0,height],//full screen
35 | ];
36 | this.finishPoints = [
37 | [0,0, width,0, width,height, 0,height ],// full screen
38 | [width/4,0, width,0, width,height, 0,height ],
39 | [width,0, width,0, width,height, width/4*3,height ],
40 | [width,0, width,0, width,height, width,height ],
41 | ];
42 |
43 | this.gfelm = {
44 | routeCoverSvg : Snap( document.getElementById('route-cover-svg') ),
45 | };
46 |
47 | this.gfelm.routeCoverPoly= this.gfelm.routeCoverSvg.polygon( this.startPoints[0] );
48 | this.gfelm.routeCoverPoly.attr({
49 | id:"route-cover-poly",
50 | fill: "#fff",
51 | opacity:0.97,
52 | });
53 |
54 | },
55 | start:function(){
56 | // show element
57 | this.getDOMNode().style.display = 'block';
58 | var index = 1;
59 | var that = this;
60 | anim();
61 |
62 | function anim(){
63 | routeCoverStore.setState('isAnimating',true );
64 |
65 | that.gfelm.routeCoverPoly.animate({
66 | 'points': that.startPoints[ index ],
67 | },100, mina.easeinout, function(){
68 | index ++;
69 | if(index < that.startPoints.length ){
70 | // return anim();
71 | setTimeout(anim , 50 );
72 | }
73 | // else{
74 | // // done
75 | // routeCoverStore.setState('isAnimating',false );
76 | // // call finish
77 | // routeCoverActions.finish( );
78 | // }
79 |
80 | } );
81 | }
82 |
83 | },
84 | finish:function( ){
85 | // this func will be called twice, execute at last time
86 | if(routeCoverStore.getState().isAnimating) return;
87 | if(routeCoverStore.getState().isCoverShown ) return;
88 |
89 | var that = this;
90 | this.gfelm.routeCoverPoly.animate({'points': this.finishPoints[ 1 ],},80, mina.easeinout,function(){
91 | that.gfelm.routeCoverPoly.animate({'points': that.finishPoints[ 2 ],},300, mina.easeinout,function(){
92 | that.gfelm.routeCoverPoly.animate({'points': that.finishPoints[ 3 ],},80, mina.easeinout,function(){
93 | that.gfelm.routeCoverPoly.attr({
94 | points: that.startPoints[0],
95 | });
96 | // and hide element
97 | that.getDOMNode().style.display = 'none';
98 | })
99 | })
100 |
101 | } )
102 |
103 |
104 | },
105 | render: function(){
106 | var width = window.innerWidth, height = window.innerHeight;
107 | var svgString = '';
109 | return (
110 |
111 |
112 | )
113 | }
114 | });
115 |
116 | module.exports = RouteCover;
--------------------------------------------------------------------------------
/public/app/components/Typer.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var Typer = React.createClass({
4 | propTypes:{
5 | words: React.PropTypes.string.isRequired
6 | },
7 | getDefaultProps:function(){
8 | return {
9 | words: 'Web Design||Art',
10 | }
11 | },
12 | componentDidMount: function(){
13 | var $wraper = this.getDOMNode();
14 | $wraper.classList.add('uac-waiting');
15 |
16 | var $words = $wraper.getElementsByTagName('b');
17 |
18 | var _duration = 3000;
19 | var animationDuration = 1200;// in and out duration;
20 | var letterAnimDelay = 80;
21 |
22 | var activeWordIndex=0,$current = $words[0],$previous, $next;
23 |
24 | var letterInInterval = setInterval(function(){
25 | letterIn($current.childNodes );
26 | },100 );;
27 |
28 | this.wordTimer = setInterval(function(){
29 | if(letterInInterval) clearInterval( letterInInterval );
30 |
31 | if(activeWordIndex >= $words.length ) activeWordIndex = 0;
32 | $current = getByIndex($words, activeWordIndex );
33 | $previous = getByIndex($words, activeWordIndex - 1 );
34 | $next = getByIndex($words, activeWordIndex +1 );
35 |
36 | $current.classList.remove('uac-hidden');
37 | $current.classList.add('uac-visible');
38 |
39 | $previous.classList.remove('uac-visible');
40 | $previous.classList.add('uac-hidden');
41 |
42 | // ----------letterery
43 | $wraper.classList.remove('uac-waiting');
44 | setTimeout(function(){
45 | // select words
46 | $wraper.classList.add('uac-selected');
47 | } , _duration - 500 );
48 |
49 | letterInInterval = setInterval(function(){
50 | letterIn($current.childNodes );
51 | },letterAnimDelay );
52 |
53 | letterOut( $previous.childNodes );
54 |
55 | activeWordIndex ++;
56 | }, _duration );
57 |
58 | // sequencially add .uac-in and .uac-out to letters
59 | var inLetterIndex = 0, outLetterIndex = 0;
60 | function letterIn(letters){
61 |
62 | $wraper.classList.remove('uac-selected');
63 |
64 | if(letters[inLetterIndex]){
65 | letters[inLetterIndex].classList.remove('uac-out');
66 | letters[inLetterIndex].classList.add('uac-in');
67 | }
68 |
69 | inLetterIndex++;
70 | if( inLetterIndex < letters.length ) {
71 | return;
72 | }else{ // finished all letter animation , now waitting for next
73 | inLetterIndex = 0;
74 | // flicker effect
75 | $wraper.classList.add('uac-waiting');
76 | clearInterval( letterInInterval );
77 | }
78 | }
79 |
80 | function letterOut(letters){
81 | // hide all at onece;
82 | for(var ii=0;iithis is about page
5 |{this.getPathname()}
6 |this.getRoutes() : {this.getRoutes()}
7 |this.getParams(): {this.getParams()}
8 |this.getQuery(): {this.getQuery()}
9 | 10 | */ 11 | var About = React.createClass({ 12 | mixins: [ Router.State ], 13 | render: function(){ 14 | return ( 15 |
19 |
47 | ABOUT.ME.
20 |GREETINGS.
21 |Hi there. I am Eisneim Terry(made in 1991), Shanghai based Digital artist & Developer. I'm currently work at startup project xinpingzi.com as lead web developer. 22 | And, here glexe.com is my personal space to memorize my workpieces and memories of the enjoyment of creating beautiful things. 23 |
24 |25 | My university degree is Bachelor in Electronic Engineering, but I taught myself a lot more than electronics. 26 | Great thanks to the Internet, I learned almost all my skills online from: Youtube, Vimeo, 27 | lynda.com, 28 | tutsplus.com, 29 | pluralsight.com, 30 | DigitalTutors.com, and many many more. 31 | I record and share free video tutorials as well, you can find them on zexeo.com 32 | 33 |
34 |WHAT I love to DO.
35 |MotionGraphics, VFX, Web Development, Digital Paint, Parkour, BodyBuilding
36 | 37 |SKILL SETS.
38 |
39 | Design & Motion & VFX: After Effects, Cinema 4D, Nuke, Illustrator, Photoshop, MochaPro, Premiere
40 | Web ServerSide: Node.JS, Golang, MongoDB, PHP
41 | Web ClientSide: Angular.JS, React.JS, SVG, Javascript, CSS3, HTML5
42 |
63 |
69 |
71 |
64 |
67 |
68 | {this.state.formError}
65 |{this.state.formInfo}
66 |69 |
Shot me an Email here ✉ eisneim1@sina.com
70 |
8 |
10 |
11 | this is Ideas page
9 |
13 |
14 |
15 |I Love To Do
18 |
20 |
23 |
24 |
25 |
30 | 15 |
袁维隆
16 |Eisneim Terry
17 |I Love To Do
18 |
20 | 24yrs old, currently based in Shanghai, China
21 | My Projects → 22 |
101 |
104 |
105 | {item.name}
102 |{item.description}
103 |
112 | My projects →
113 |
114 |
49 |
54 | )
55 | }
56 | });
57 |
58 | module.exports = Item;
--------------------------------------------------------------------------------
/public/app/pages/Project.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var Router = require('react-router');
3 | var request = require('superagent');
4 | var _ = require('lodash');
5 |
6 | var Project = React.createClass({
7 | // mixins: [Navigation],
8 | mixins: [Router.State],
9 | // statics:{
10 | // // scen enter animation
11 | // willTransitionTo: function (transition, params) {
12 |
13 | // },
14 | // // leave animation
15 | // willTransitionFrom: function(transition, component ){
16 |
17 | // },
18 | // },
19 | // getInitialState:function(){
20 | // return {
21 | // // isFullscreen: false,
22 | // }
23 | // },
24 | getInitialState:function(){
25 | return {
26 | projectData: this.props.projectData,
27 | }
28 | },
29 | componentDidMount:function(){
30 | var node = this.getDOMNode();
31 | setTimeout(function(){
32 | node.style.opacity = 1;
33 | },500);
34 |
35 | var self = this;
36 |
37 | request.get('data/projects/'+self.props.projectData.url+'.html')
38 | .end(function(req,res){
39 | var projectData = _.extend( self.props.projectData );
40 | projectData.content = res.text;
41 | self.setState({
42 | projectData: projectData,
43 | })
44 | })
45 | },
46 | // componentWillUnmount:function(){
47 |
48 | // },
49 | leaveSence:function(){
50 | // this.elm.dragwraper.style.transform = 'translateX(-'+( that.ui.currentSlide /that.elm.slides.length * 100)+'%)';
51 | // this.getDOMNode().classList.add('gf-leave');
52 | },
53 | render: function(){
54 | var projectData = this.state.projectData || {};
55 | return (
56 |
60 | )
61 | }
62 | });
63 |
64 | module.exports = Project;
--------------------------------------------------------------------------------
/public/app/pages/Projects.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var Router = require('react-router');
3 | var RouteHandler = Router.RouteHandler;
4 | var Navigation = Router.Navigation;
5 | var Dragdealer = require('dragdealer').Dragdealer;
6 | var navActions = require('../actions/navActions.js');
7 | var request = require('superagent');
8 |
9 | var projectsStore = require('../stores/projectsStore.js');
10 | var projectsActions = require('../actions/projectsActions.js');
11 |
12 | var projects = null;
13 |
14 | var Projects = React.createClass({
15 | mixins: [Navigation,Router.State],
16 | statics:{
17 | // scen enter animation
18 | willTransitionTo: function (transition, params) {
19 | },
20 | // leave animation
21 | willTransitionFrom: function(transition, component ){
22 | // close side navigation;
23 | // navActions.toggle('close');
24 | // // start leave animation;
25 | // component.leaveSence();
26 |
27 | // setTimeout(function(){
28 | // component.leaveAnimationDone = true;
29 | // transition.retry();
30 | // },500);
31 | // if(!component.leaveAnimationDone){
32 | // transition.abort();
33 | // }
34 | },
35 | },
36 | _onChange: function() {
37 | this.setState( projectsStore.getState() );
38 | },
39 | getInitialState:function(){
40 | return {
41 | // showAll: false,
42 | projects: this.props.preload,
43 | showGuide: projectsStore.getState().showGuide ,
44 | ui:{
45 | showAll:false,
46 | currentSlide: 0,
47 | }
48 |
49 | }
50 | },
51 | componentDidMount:function(){
52 | projectsStore.addChangeListener( this._onChange );
53 |
54 |
55 | this.ui = {
56 | showAll:false,
57 | currentSlide: 0,
58 | },
59 | this.elm = {
60 | slides: [].slice.call( document.getElementById('gf-projects-wraper').children ),
61 | dragwraper: document.getElementById('gf-projects-wraper'),
62 | };
63 | this.elm.slides[0].classList.add('active');
64 |
65 | this._initDrag();
66 | this._initEvents();
67 |
68 | // if(this.state.activePorject){
69 | // this.showProject();
70 | // }
71 | },
72 | componentWillUnmount:function(){
73 | document.removeEventListener( 'keydown', this.keyEventHandler );
74 | },
75 | _initDrag: function(){
76 | var that = this;
77 | this.dd = new Dragdealer('gf-projects-drag', {
78 | steps: this.props.preload.length,
79 | speed: 0.3,
80 | loose: true,
81 | requestAnimationFrame: true,
82 | callback: function( x, y ) {
83 | // console.log( self.dd.getStep() );
84 | that.ui.currentSlide = that.dd.getStep()[0]-1;
85 | // update class of curren active slide;
86 | for(var ii =0;ii< that.elm.slides.length; ii++){
87 | that.elm.slides[ii].classList.remove('active');
88 | };
89 | that.elm.slides[ that.ui.currentSlide].classList.add('active');
90 | // change transform orgin
91 |
92 | }
93 | });
94 | },
95 | _initEvents:function(){
96 | var self = this;
97 | this.elm.slides.forEach( function( slide ) {
98 | // clicking the slides when not in showAll mode
99 | slide.addEventListener( 'click', function(e) {
100 | if(e.target.tagName == 'A') {
101 | if( e.target.className.indexOf('gf-project-link') > -1 ){
102 | // self.showProject();
103 | }
104 | return;
105 | }
106 |
107 | if( !self.ui.showAll || self.dd.activity ) return false;
108 |
109 | if( self.elm.slides.indexOf( slide ) === (self.ui.currentSlide) ) {
110 | self.onToggleView();
111 | }else {
112 | self.dd.setStep( self.elm.slides.indexOf( slide ) + 1 );
113 | }
114 | } );
115 |
116 | } );
117 | this.keyEventHandler = function( ev ) {
118 | var keyCode = ev.keyCode || ev.which,
119 | currentSlide = self.elm.slides[ self.ui.currentSlide ];
120 |
121 | switch (keyCode) {
122 | case 40: // down key
123 | if( self.ui.showAll ){
124 | // should to to poject page:
125 | self.transitionTo('project',{
126 | projectUrl: self.props.preload[ self.ui.currentSlide ].url,
127 | });
128 |
129 | return;
130 | };
131 | self.onToggleView( currentSlide );
132 | break;
133 | //up
134 | case 38:
135 | // if not fullscreen don't reveal the content. If you want to navigate directly to the content then remove this check.
136 | if( !self.ui.showAll ) return;
137 | self.onToggleView( currentSlide );
138 | break;
139 | // left;
140 | case 37:
141 | self.dd.setStep( self.ui.currentSlide - 1 );
142 | break;
143 | case 39:
144 | // righ
145 | self.dd.setStep( self.ui.currentSlide + 2 );
146 | break;
147 | }
148 | };
149 | // keyboard navigation events
150 | document.addEventListener( 'keydown', this.keyEventHandler );
151 |
152 | },
153 | onToggleView:function(){
154 | var that = this;
155 | this.getDOMNode().classList.toggle('gf-showall');
156 | that.dd.disable();
157 | // reculculate translateX
158 | this.elm.dragwraper.style.transform = 'translateX(-'+( that.ui.currentSlide /that.elm.slides.length * 100)+'%)';
159 |
160 | setTimeout(function(){
161 | that.dd.reflow();
162 | that.dd.enable();
163 | that.ui.showAll = !that.ui.showAll;
164 | },520);
165 | },
166 | componentDidUpdate:function(){
167 | var self = this;
168 | // recalculate for dragdealer
169 | setTimeout(function(){
170 | self.dd.reflow();
171 | },100);
172 |
173 | if( this.getParams().projectUrl ){
174 | this.getDOMNode().classList.add('gf-leave')
175 | // remove event handler
176 | document.removeEventListener( 'keydown', this.keyEventHandler );
177 |
178 | }else{
179 | this.getDOMNode().classList.remove('gf-leave')
180 | document.addEventListener( 'keydown', this.keyEventHandler );
181 | }
182 |
183 | },
184 | leaveSence:function(){
185 | // this.elm.dragwraper.style.transform = 'translateX(-'+( that.ui.currentSlide /that.elm.slides.length * 100)+'%)';
186 |
187 | // this.getDOMNode().classList.add('gf-leave');
188 | // var self = this;
189 | // setTimeout(function(){
190 | // var $drag = document.getElementById('gf-projects-drag');
191 | // if($drag) $drag.style.display = 'none';
192 | // },1000);
193 | },
194 | /**
195 | * show a specific project and hide dragable gird;
196 | */
197 | showProject:function(){
198 | this.leaveSence();
199 |
200 | },
201 | render: function(){
202 | var self = this;
203 | var projects = this.props.preload;
204 |
205 | var projectElms = [];
206 | var selectedProject = null;
207 | var activePorject = this.getParams().projectUrl;
208 |
209 | projects.forEach(function(pp ,index ){
210 | var projectStyle = {
211 | 'backgroundImage': 'url('+pp.cover+')',
212 | 'width': (100/projects.length)+'%'
213 | };
214 |
215 | if( activePorject == pp.url ) selectedProject = projects[index];
216 |
217 | projectElms.push(
218 |
51 |
52 |
53 |
219 |
228 | )
229 | });
230 | var classese = 'gf-view '+( activePorject ? 'gf-leave':'');
231 |
232 | return (
233 |
220 |
223 |
227 | {pp.name} ↓
221 |{pp.description}
222 |
237 |
245 |
246 |
238 |
242 | 243 |
244 | Interactions
239 | Drag Sliders 240 | Use Arrows 241 | Switch view242 | 243 |
247 |
253 |
248 |
252 |
249 | {projectElms}
250 |
251 | 3333
" 19 | }, 20 | { 21 | "name":"3th item", 22 | "description":"lorem ipsome delo ca deso someca totl esos cess", 23 | "url":"item3", 24 | "thumbnail":"images/u3.jpg", 25 | "cover":"images/u3.jpg", 26 | "date":"2015-5-1", 27 | "content":"this is some conent
" 28 | }, 29 | { 30 | "name":"4th item", 31 | "description":"lorem ipsome delo ca deso someca totl esos cess", 32 | "url":"item4", 33 | "thumbnail":"images/u4.jpg", 34 | "cover":"images/u4.jpg", 35 | "date":"2015-5-1", 36 | "content":"this is some conent
" 37 | }, 38 | { 39 | "name":"5th item", 40 | "description":"lorem ipsome delo ca deso someca totl esos cess", 41 | "url":"item5", 42 | "thumbnail":"images/u5.jpg", 43 | "cover":"images/u5.jpg", 44 | "date":"2015-5-1", 45 | "content":"this is some conent
" 46 | }, 47 | { 48 | "name":"6th item", 49 | "description":"lorem ipsome delo ca deso someca totl esos cess", 50 | "url":"item6", 51 | "thumbnail":"images/u6.jpg", 52 | "cover":"images/u6.jpg", 53 | "date":"2015-5-1", 54 | "content":"this is some conent
" 55 | }, 56 | { 57 | "name":"7th item", 58 | "description":"lorem ipsome delo ca deso someca totl esos cess", 59 | "url":"item7", 60 | "thumbnail":"images/u7.jpg", 61 | "cover":"images/u7.jpg", 62 | "date":"2015-5-1", 63 | "content":"this is some conent
" 64 | }, 65 | { 66 | "name":"8th item", 67 | "description":"lorem ipsome delo ca deso someca totl esos cess", 68 | "url":"item8", 69 | "thumbnail":"images/u8.jpg", 70 | "cover":"images/u8.jpg", 71 | "date":"2015-5-1", 72 | "content":"this is some conent
" 73 | }, 74 | { 75 | "name":"9th item", 76 | "description":"lorem ipsome delo ca deso someca totl esos cess", 77 | "url":"item9", 78 | "thumbnail":"images/u9.jpg", 79 | "cover":"images/u9.jpg", 80 | "date":"2015-5-1", 81 | "content":"this is some conent
" 82 | }, 83 | { 84 | "name":"10th item", 85 | "description":"lorem ipsome delo ca deso someca totl esos cess", 86 | "url":"item10", 87 | "thumbnail":"images/u10.jpg", 88 | "cover":"images/u10.jpg", 89 | "date":"2015-5-1", 90 | "content":"this is some conent
" 91 | }, 92 | { 93 | "name":"11th item", 94 | "description":"lorem ipsome delo ca deso someca totl esos cess", 95 | "url":"item11", 96 | "thumbnail":"images/u11.jpg", 97 | "cover":"images/u11.jpg", 98 | "date":"2015-5-1", 99 | "content":"this is some conent
" 100 | }, 101 | { 102 | "name":"12th item", 103 | "description":"lorem ipsome delo ca deso someca totl esos cess", 104 | "url":"item12", 105 | "thumbnail":"images/u12.jpg", 106 | "cover":"images/u12.jpg", 107 | "date":"2015-5-1", 108 | "content":"this is some conent
" 109 | }, 110 | { 111 | "name":"13th item", 112 | "description":"lorem ipsome delo ca deso someca totl esos cess", 113 | "url":"item13", 114 | "thumbnail":"images/u13.jpg", 115 | "cover":"images/u13.jpg", 116 | "date":"2015-5-1", 117 | "content":"this is some conent
" 118 | } 119 | ] -------------------------------------------------------------------------------- /public/data/portfolio/item1.html: -------------------------------------------------------------------------------- 1 | 2 |半路出家自学搬砖，工头最近管得松，特借此机会录搬砖之法以供分享，鄙人毕业不久水平很菜，还望各路高手手下留情 别把我拍死了。。。。
3 |教程的几个章节：
4 |-
5 |
- 1.初识ReactJS(讲的太烂，直接跳过吧....) 6 |
- 2.第一个组件hellow world 7 |
- 3.组件的嵌套 8 |
- 4.组件的状态state 9 |
- 5.组件的参数props 10 |
- 6.事件events 11 |
- 7.指向ref 12 |
- 8.双向数据流 13 |
- 9.组件生命周期 14 |
- 10.mixin 15 |
- 11.1 开发环境和工具 16 |
- 11.2 分成小组件 17 |
- 11.3 添加功能 18 |
- 12.结尾 19 |
如果大家觉得有用，我讲继续录React+flux+react-router的教程，或许会加上relay，graphQL(如果时间来得及的话)
22 |教程最后要实现的app：
23 |
here is some content!!
well well well, are we going to paridise?
", 17 | "cover":"images/u2.jpg" 18 | },{ 19 | "date":"2015-4-1", 20 | "_id":"4243423", 21 | "name":"project3", 22 | "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco ", 23 | "url":"project3", 24 | "content":"here is some content!!
well well well, are we going to paridise?
", 25 | "cover":"images/u3.jpg" 26 | } 27 | ] -------------------------------------------------------------------------------- /public/data/projects/project1.html: -------------------------------------------------------------------------------- 1 |this is project 1
2 |and here is some descritpion writen in html
3 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores esse sunt ipsum animi inventore maxime fugiat, voluptas libero ex fuga consectetur eveniet id tenetur, illo recusandae excepturi tempore sint quasi?
-------------------------------------------------------------------------------- /public/data/projects/project2.html: -------------------------------------------------------------------------------- 1 |this is project 2
2 |and here is some descritpion writen in html
3 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores esse sunt ipsum animi inventore maxime fugiat, voluptas libero ex fuga consectetur eveniet id tenetur, illo recusandae excepturi tempore sint quasi?
-------------------------------------------------------------------------------- /public/data/projects/project3.html: -------------------------------------------------------------------------------- 1 |this is project 3
2 |and here is some descritpion writen in html
3 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores esse sunt ipsum animi inventore maxime fugiat, voluptas libero ex fuga consectetur eveniet id tenetur, illo recusandae excepturi tempore sint quasi?
-------------------------------------------------------------------------------- /public/images/u1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u1.jpg -------------------------------------------------------------------------------- /public/images/u10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u10.jpg -------------------------------------------------------------------------------- /public/images/u11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u11.jpg -------------------------------------------------------------------------------- /public/images/u12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u12.jpg -------------------------------------------------------------------------------- /public/images/u13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u13.jpg -------------------------------------------------------------------------------- /public/images/u2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u2.jpg -------------------------------------------------------------------------------- /public/images/u3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u3.jpg -------------------------------------------------------------------------------- /public/images/u4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u4.jpg -------------------------------------------------------------------------------- /public/images/u5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u5.jpg -------------------------------------------------------------------------------- /public/images/u6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u6.jpg -------------------------------------------------------------------------------- /public/images/u7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u7.jpg -------------------------------------------------------------------------------- /public/images/u8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u8.jpg -------------------------------------------------------------------------------- /public/images/u9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/images/u9.jpg -------------------------------------------------------------------------------- /public/img/cover/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/contact.jpg -------------------------------------------------------------------------------- /public/img/cover/forest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/forest.jpg -------------------------------------------------------------------------------- /public/img/cover/forest2_dim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/forest2_dim.jpg -------------------------------------------------------------------------------- /public/img/cover/intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/intro.jpg -------------------------------------------------------------------------------- /public/img/cover/portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/portrait.jpg -------------------------------------------------------------------------------- /public/img/cover/woods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/woods.jpg -------------------------------------------------------------------------------- /public/img/cover/woods_dim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/cover/woods_dim.jpg -------------------------------------------------------------------------------- /public/img/d5logo.svg: -------------------------------------------------------------------------------- 1 | 73 | -------------------------------------------------------------------------------- /public/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/favicon.png -------------------------------------------------------------------------------- /public/img/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /public/img/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /public/img/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /public/img/icons/ios7-close-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | -------------------------------------------------------------------------------- /public/img/icons/ios7-close-outline-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/img/icons/ios7-close-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/img/icons/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/prev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/page/drag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | -------------------------------------------------------------------------------- /public/img/page/keys.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 46 | -------------------------------------------------------------------------------- /public/img/page/switchmax.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /public/img/page/switchmin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | -------------------------------------------------------------------------------- /public/img/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/pattern.png -------------------------------------------------------------------------------- /public/img/social/Sina_Weibo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/Sina_Weibo-512.png -------------------------------------------------------------------------------- /public/img/social/be.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/be.png -------------------------------------------------------------------------------- /public/img/social/facebook-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/facebook-icon.png -------------------------------------------------------------------------------- /public/img/social/git.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/git.jpg -------------------------------------------------------------------------------- /public/img/social/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/github.png -------------------------------------------------------------------------------- /public/img/social/sc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/sc.png -------------------------------------------------------------------------------- /public/img/social/zhihu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/public/img/social/zhihu.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
18 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/snapshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eisneim/gortfolio/83842f2f21b246623cee6a373abd78dfcadc7ed6/snapshot.png
--------------------------------------------------------------------------------
/test.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "fmt"
5 | "reflect"
6 | )
7 |
8 | type somestring struct {
9 | Host string
10 | }
11 |
12 | func main() {
13 | var aa somestring
14 |
15 | fmt.Println(reflect.TypeOf(a))
16 |
17 | if aa.Host == "" {
18 | fmt.Println("it is empty ")
19 | } else {
20 | fmt.Println("it is not empty")
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------