Skip to content

Commit

Permalink
feature: use react to render the portfolios list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kilerd
Kilerd committed Sep 7, 2017
1 parent 73b0ada commit 1cf4596
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 198 deletions.
2 changes: 2 additions & 0 deletions js/portfolios-react.js
View file

Large diffs are not rendered by default.

318 changes: 120 additions & 198 deletions portfolios.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,124 @@
<!--template style-->
<link href="css/style.css" rel="stylesheet">

<script type="text/javascript">
var data = [
{
city: "Wuhan",
portfolios: [
{
img: "./images/portfolios/wuhan/Responsive-Portfolio-Template-for-Developers.jpg",
name: "Responsive-Portfolio",
author: "SZ",
tutor: "名字",
des: "Keep leaning, keep challenging. There is no way to happiness,happiness is the way.",
link: "https://stacy369.github.io/MyBlog/"
},
{
img: "./images/portfolios/wuhan/ccyilia-Blog---Sample-Post.jpg",
name: "ccyilia-Blog",
author: "ccyilia",
tutor: "名字",
des: "一段说走就走的旅行 旅行之意义并不是告诉别人，这是我来过",
link: "https://ccyilia.github.io/GirlscodingDayDemo/post.html"
},
{
img: "./images/portfolios/wuhan/girls-coding-day.jpg",
name: "girls-coding-day",
author: "girls-coding-day",
tutor: "名字",
des: "LET'S CODING",
link: "https://meeting123.github.io/girlsCodingDay/"
},
{
img: "./images/portfolios/wuhan/Amy的个人博客.jpg",
name: "Amy的个人博客",
author: "Amy",
tutor: "名字",
des: "写在2017年的中点, 参加girlscodingday 活动，搭建自己的个人博客。认识了一群很棒的小伙伴！",
link: "https://celinecoding.github.io/personalBlog/"
},
{
img: "./images/portfolios/wuhan/minerhigh.jpg",
name: "minerhigh",
author: "minerhigh",
tutor: "名字",
des: "联合国设定2月11日为 女性和女童参与科学国际日, 联合国秘书长安东尼奥·古特雷斯号召：值此国际日，我敦促各方致力于消除偏见，为所有妇女和女童接受科学、技术、工程和数学教育提供更多投资， 并为她们的事业和更长期的职业发展提供机会，以使所有人都能从她们开创性的未来贡献中获益。",
link: "https://minerhigh.github.io/codingtest/"
},
{
img: "./images/portfolios/wuhan/Girls-Coding-Day2.jpg",
name: "Girls Coding Day",
author: "Girls Coding Day",
tutor: "名字",
des: "如何制作原味酥脆滴曲奇饼干",
link: "https://brushmyteeth.github.io/GirlsCodingDay/us.html"
},
{
img: "./images/portfolios/wuhan/唐诗.jpg",
name: "唐诗三百首",
author: "牛海鸿",
tutor: "名字",
des: "唐诗三百首",
link: "https://cici2k.github.io/pageforme/"
},
{
img: "./images/portfolios/wuhan/记载CODE-GIRLS的一天.jpg",
name: "记载CODE GIRLS的一天",
author: "oneinaworld",
tutor: "名字",
des: "记载CODE-GIRLS的一天",
link: "https://oneinaworld.github.io/GirlsCodingDayDemo2/I%20AM%20X-%20Responsive%20Personal%20Portfolio%20vCard%20Template.htm"
},
{
img: "./images/portfolios/wuhan/Modern-Business.jpg",
name: "参加这个活动很海森~",
author: "shijiezaijian",
tutor: "名字",
des: "参加这个活动很海森~",
link: "https://shijiezaijian.github.io/777/"
},
{
img: "./images/portfolios/wuhan/走自己的路.jpg",
name: "走自己的路，让别人打车去吧！",
author: "huzhuqing",
tutor: "名字",
des: "走自己的路，让别人打车去吧！",
link: "https://huzhuqing.github.io/MyCodingday/post.html"
},
{
img: "./images/portfolios/wuhan/Orbit.jpg",
name: "Orbit",
author: "wuxt",
tutor: "名字",
des: "Orbit – Free Responsive Bootstrap Resume/CV Template for Developers",
link: "https://wuxt.github.io/showtime/"
},
{
img: "./images/portfolios/wuhan/MUSICHOME.jpg",
name: "MUSICHOME",
author: "vinevine",
tutor: "名字",
des: "MUSICHOME",
link: "https://vinevine.github.io/MUSICWEB/"
}
]
},
{
city: "ShangHai",
portfolios: [
{
img: "./images/portfolios/wuhan/bg.jpg",
name: "作品标题",
author: "名字",
tutor: "名字",
des: "我是作品简介",
link: "https://stacy369.github.io/MyBlog/"
}
]
}
]
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
Expand All @@ -38,204 +156,8 @@ <h1><b>She</b> Built the website <strike>almost</strike> on their own</h1>
<a href="https://github.com/CodingGirlsClub/girlscodingday"><button type="button" class="btn btn-warning">添加作品</button></a>
</div>
</div>
<section class="portfolios-city">
<header class="portfolios-title">
<h2>Wuhan</h2>
</header>
<ul class="portfolios-list">
<div class="col-md-4">
<a href='https://stacy369.github.io/MyBlog/' target="_blank">
<div class="portfolios-item">
<h3>Responsive-Portfolio</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/Responsive-Portfolio-Template-for-Developers.jpg" alt="Responsive-Portfolio-Template-for-Developers" />
<div class="portfolios-text">
<h4>作者: SZ / 助教: 名字</h4>
<p class="portfolios-description">Keep leaning, keep challenging. There is no way to happiness,happiness is the way.</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://ccyilia.github.io/GirlscodingDayDemo/post.html' target="_blank">
<div class="portfolios-item">
<h3>ccyilia-Blog</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/ccyilia-Blog---Sample-Post.jpg" alt="ccyilia-Blog" />
<div class="portfolios-text">
<h4>作者: ccyilia / 助教: 名字</h4>
<p class="portfolios-description">一段说走就走的旅行
旅行之意义并不是告诉别人，这是我来过</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://meeting123.github.io/girlsCodingDay/' target="_blank">
<div class="portfolios-item">
<h3>girls-coding-day</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/girls-coding-day.jpg" alt="girls-coding-day" />
<div class="portfolios-text">
<h4>作者: girls-coding-day / 助教: 名字</h4>
<p class="portfolios-description">LET'S CODING</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://celinecoding.github.io/personalBlog/' target="_blank">
<div class="portfolios-item">
<h3>Amy的个人博客</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/Amy的个人博客.jpg" alt="Amy的个人博客" />
<div class="portfolios-text">
<h4>作者: Amy / 助教: 名字</h4>
<p class="portfolios-description">写在2017年的中点, 参加girlscodingday 活动，搭建自己的个人博客。认识了一群很棒的小伙伴！</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://minerhigh.github.io/codingtest/' target="_blank">
<div class="portfolios-item">
<h3>minerhigh</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/minerhigh.jpg" alt="minerhigh" />
<div class="portfolios-text">
<h4>作者: minerhigh / 助教: 名字</h4>
<p class="portfolios-description">联合国设定2月11日为 女性和女童参与科学国际日, 联合国秘书长安东尼奥·古特雷斯号召：值此国际日，我敦促各方致力于消除偏见，为所有妇女和女童接受科学、技术、工程和数学教育提供更多投资， 并为她们的事业和更长期的职业发展提供机会，以使所有人都能从她们开创性的未来贡献中获益。</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://brushmyteeth.github.io/GirlsCodingDay/us.html' target="_blank">
<div class="portfolios-item">
<h3>Girls Coding Day</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/Girls-Coding-Day2.jpg" alt="Girls-Coding-Day" />
<div class="portfolios-text">
<h4>作者: Girls Coding Day / 助教: 名字</h4>
<p class="portfolios-description">如何制作原味酥脆滴曲奇饼干</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://cici2k.github.io/pageforme/' target="_blank">
<div class="portfolios-item">
<h3>唐诗三百首</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/唐诗.jpg" alt="唐诗三百首" />
<div class="portfolios-text">
<h4>作者: 牛海鸿 / 助教: 名字</h4>
<p class="portfolios-description">唐诗三百首</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://oneinaworld.github.io/GirlsCodingDayDemo2/I%20AM%20X-%20Responsive%20Personal%20Portfolio%20vCard%20Template.htm' target="_blank">
<div class="portfolios-item">
<h3>记载CODE GIRLS的一天</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/记载CODE-GIRLS的一天.jpg" alt="记载CODE GIRLS的一天" />
<div class="portfolios-text">
<h4>作者: oneinaworld / 助教: 名字</h4>
<p class="portfolios-description">记载CODE-GIRLS的一天</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://shijiezaijian.github.io/777/' target="_blank">
<div class="portfolios-item">
<h3>参加这个活动很海森~</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/Modern-Business.jpg" alt="记载CODE GIRLS的一天" />
<div class="portfolios-text">
<h4>作者: shijiezaijian / 助教: 名字</h4>
<p class="portfolios-description">参加这个活动很海森~</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://huzhuqing.github.io/MyCodingday/post.html' target="_blank">
<div class="portfolios-item">
<h3>走自己的路，让别人打车去吧！</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/走自己的路.jpg" alt="走自己的路，让别人打车去吧！" />
<div class="portfolios-text">
<h4>作者: huzhuqing / 助教: 名字</h4>
<p class="portfolios-description">走自己的路，让别人打车去吧！</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://wuxt.github.io/showtime/' target="_blank">
<div class="portfolios-item">
<h3>Orbit</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/Orbit.jpg" alt="Orbit – Free Responsive Bootstrap Resume/CV Template for Developers" />
<div class="portfolios-text">
<h4>作者: wuxt / 助教: 名字</h4>
<p class="portfolios-description">Orbit – Free Responsive Bootstrap Resume/CV Template for Developers</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='https://vinevine.github.io/MUSICWEB/' target="_blank">
<div class="portfolios-item">
<h3>Orbit</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/MUSICHOME.jpg" alt="MUSICHOME" />
<div class="portfolios-text">
<h4>作者: vinevine / 助教: 名字</h4>
<p class="portfolios-description">MUSICHOME</p>
</div>
</div>
</div>
</a>
</div>
</ul>
</section>
<section class="portfolios-city">
<header class="portfolios-title">
<h2>Shanghai</h2>
</header>
<ul class="portfolios-list">
<div class="col-md-4">
<a href='https://stacy369.github.io/MyBlog/' target="_blank">
<div class="portfolios-item">
<h3>作品标题</h3>
<div class="portfolios-content">
<img src="./images/portfolios/wuhan/bg.jpg" alt="作品截图" />
<div class="portfolios-text">
<h4>作者: 名字 / 助教: 名字</h4>
<p class="portfolios-description">简介: 我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介我是作品简介</p>
</div>
</div>
</div>
</a>
</div>
</ul>
</section>
<div id='show-list'></div>
</div>
</body>

<script type="text/javascript" src="js/portfolios-react.js"></script>
</html>

0 comments on commit 1cf4596

Please sign in to comment.