diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..66544f0
Binary files /dev/null and b/.DS_Store differ
diff --git a/components/BackGround.js b/components/BackGround.js
new file mode 100644
index 0000000..a40c518
--- /dev/null
+++ b/components/BackGround.js
@@ -0,0 +1,18 @@
+const BackGround = () => {
+    return <div className="background">
+        <style jsx>{`
+            .background{
+                position: relative;
+                background: url('../static/img/blog.jpg') center center/cover no-repeat;
+                min-height: 200px;
+                max-height: 400px;
+            }
+            .background:after{
+                content: '';
+                display: block;
+                padding-top:21%;
+            }
+        `}</style>
+    </div>
+}
+export default BackGround
diff --git a/components/Footer.js b/components/Footer.js
new file mode 100644
index 0000000..c2cd295
--- /dev/null
+++ b/components/Footer.js
@@ -0,0 +1,71 @@
+import Link from 'next/link';
+const CopyRight = () => {
+	return (
+		<footer className="footer">
+			<div className="w1500">
+				<div className="list">
+					<div className="item">
+						<h3>关于Blog</h3>
+						<p>此Blog诞生的原因是想记录一些日常踩到的坑,也希望借此可以结交到其他的小伙伴啦,分享技术,一起进步.</p>
+					</div>
+					<div className="item">
+						<h3>友情链接</h3>
+						<div className="links">
+							<Link href="/blog"><a className="blog">博文</a></Link>
+							<Link href="/"><a className="dev">实验室</a></Link>
+							<Link href="/"><a className="message">留言</a></Link>
+							<Link href="/"><a className="about">关于</a></Link>
+						</div>
+					</div>
+				</div>
+				<p>Design & Code by Blue.use Mongodb + Next.js</p>
+			</div>
+			<style jsx>{`
+				.footer{
+					padding: 20px 0;
+					color: #ccc;
+					background: #333;
+					font-size: 14px;
+				}
+				.list{
+					display: flex;
+					justify-content: space-between;
+				}
+				h3{
+					font-size: 20px;
+					padding-bottom: 10px;
+					white-space: nowrap;
+				}
+				p{
+					padding-bottom: 10px;
+				}
+				.links{
+					display: flex;
+					flex-direction: column;
+				}
+				.links a{
+					line-height: 1.8;
+					transition: 0.3s;
+				}
+				.links a:hover{
+					color: #1890ff;
+				}
+				@media(max-width:500px){
+					.list{
+						flex-direction: column;
+					}
+					.w1500{
+						width: 100%;
+					}
+					.links{
+						align-items: flex-start;
+					}
+					.footer{
+						padding: 20px 15px;
+					}
+				}
+			`}</style>
+		</footer>
+	)
+}
+export default CopyRight
diff --git a/components/Header.js b/components/Header.js
index f0679d8..14775e0 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -55,8 +55,9 @@ const Header = (props) => {
 						</Link>
 					</div>
 					<div className="links">
-						<Link href="/"><a className="blog">博文</a></Link>
+						<Link href="/blog"><a className="blog">博文</a></Link>
 						<Link href="/"><a className="dev">实验室</a></Link>
+						<Link href="/"><a className="works">作品展</a></Link>
 						<Link href="/"><a className="message">留言</a></Link>
 						<Link href="/"><a className="about">关于</a></Link>
 					</div>
@@ -116,7 +117,7 @@ const Header = (props) => {
 					border-radius: 1px;
 				}
 
-				@media(max-width:500px){
+				@media(max-width:700px){
 					.arrow.active{
 						top: 5px;
 						transform: translateY(0);
@@ -170,7 +171,7 @@ const Header = (props) => {
 					opacity: 0;
 					visibility: hidden;
 				}
-				@media(max-width:500px){
+				@media(max-width:700px){
 					.nav{
 						height: auto;
 					}
@@ -186,7 +187,7 @@ const Header = (props) => {
 					justify-content: space-between;
 					transition: 0.3s;
 				}
-				@media(max-width:500px){
+				@media(max-width:700px){
 					.w1500{
 						flex-direction:column;
 						width: 100%;
@@ -203,7 +204,7 @@ const Header = (props) => {
 					padding: 0 10px;
 					line-height: 56px;
 				}
-				@media(max-width:500px){
+				@media(max-width:700px){
 					.brand a{
 						display: inline-block;
 					}
@@ -221,7 +222,7 @@ const Header = (props) => {
 				.links a:hover{
 					color: #1890ff;
 				}
-				@media(max-width:500px){
+				@media(max-width:700px){
 					.links{
 						overflow-x: scroll;
 						-webkit-overflow-scrolling: touch;
diff --git a/components/Layout.js b/components/Layout.js
index b3aa308..6f58d77 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -4,6 +4,7 @@ import {
 	createRef
 } from 'react';
 import Header from './Header';
+import Footer from './Footer';
 
 const Layout = props => {
 	const [blur, setBlur] = useState(false);
@@ -12,6 +13,7 @@ const Layout = props => {
 			<Header blur={blur} setBlur={setBlur} />
 			<div className={`${blur ? 'blur' : ''}`}>
 				{props.children}
+				<Footer />
 			</div>
 			{/* background: rgba(255,255,255,0.6) */}
 			<style jsx>{`
diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000..9bb0cf8
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+import '../css/reset.styl';
+import Head from 'next/head'
+
+class MyApp extends App {
+  // Only uncomment this method if you have blocking data requirements for
+  // every single page in your application. This disables the ability to
+  // perform automatic static optimization, causing every page in your app to
+  // be server-side rendered.
+  //
+  // static async getInitialProps(appContext) {
+  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
+  //   const appProps = await App.getInitialProps(appContext);
+  //
+  //   return { ...appProps }
+  // }
+
+  render() {
+    const { Component, pageProps } = this.props
+    return <Container>
+      <Head>
+        <title>Blog</title>
+      </Head>
+      <Component {...pageProps} />
+    </Container>
+  }
+}
+
+export default MyApp
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 0000000..940daa7
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,20 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+export default class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx)
+        return { ...initialProps }
+    }
+    render() {
+        return (
+            <html lang="zh-cmn-Hans">
+                <Head>
+                    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
+                </Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </html>
+        )
+    }
+}
diff --git a/pages/about.jsx b/pages/about.js
similarity index 100%
rename from pages/about.jsx
rename to pages/about.js
diff --git a/pages/blog.js b/pages/blog.js
new file mode 100644
index 0000000..da53784
--- /dev/null
+++ b/pages/blog.js
@@ -0,0 +1,381 @@
+import React, {
+    useEffect,
+    useState, createRef
+} from 'react';
+import Layout from '../components/Layout';
+import BackGround from '../components/BackGround';
+import Link from 'next/link';
+// import { useRouter } from 'next/router'
+
+// back = #1890ff
+// color = #333
+export default (props) => {
+    // const router = useRouter();    
+    return <Layout>
+        <BackGround />
+        <Container>
+            <List />
+            <Aside />
+        </Container>
+    </Layout>
+}
+const Container = (props) => {
+    return <div className="container">
+        <div className="w1500">
+            {props.children}
+        </div>
+        <div style={{ height: 30, }}></div>
+        {/* background: #dee3e7; */}
+        {/* border-top: 1px solid #c4cdd4; */}
+        <style jsx>{`
+            .container{
+                
+                background: #fff;
+            }
+            .w1500{
+                display: flex;
+            }
+            @media(max-width:1200px){
+                .w1500{
+                    flex-direction: column;
+                }
+            }
+            @media(max-width:700px){
+                .w1500{
+                    width: 100%;
+                    padding: 0 15px;
+                    box-sizing: border-box;
+                }
+            }
+        `}</style>
+    </div>
+}
+const Aside = () => {
+    const SpaceBorder = (props) => {
+        return <div style={{ paddingBottom: props.paddingBottom, }}>
+            {props.children}
+            <style jsx>{`
+                div{
+                    padding: 20px 0;
+                    border-bottom: 1px solid #eee;
+                }
+            `}</style>
+        </div>
+    }
+    return <aside className="aside">
+        <SpaceBorder>
+            <UserInfo />
+        </SpaceBorder>
+        <SpaceBorder paddingBottom={10}>
+            <Label />
+        </SpaceBorder>
+        <SpaceBorder>
+            <Card />
+        </SpaceBorder>
+        <style jsx>{`
+            .aside{
+                flex: 4;
+                max-width: 350px;
+                min-width: 300px;
+            }
+            @media(max-width:1200px){
+                .aside{
+                    display: none;
+                }
+            }
+            @media(max-width:700px){
+                .aside{
+                    display: block;
+                    margin: 0 auto;
+                    min-width: auto;
+                }
+            }
+        `}</style>
+    </aside>
+}
+const Card = () => {
+    return <div>
+        <h3>美女</h3>
+        <img src="../static/img/g3M004FA5wKgBOV1RTiuAZ4lYAALxKzVe0xQ305.jpg" alt="" />
+        <style jsx>{`
+            img{
+                width: 100%;
+                display: block;
+            }
+            h3{
+                font-size: 20px;
+                color: #333;
+                text-align: left;
+                line-height: 1;
+                padding-bottom:20px; 
+            }
+    
+        `}</style>
+    </div>
+}
+const UserInfo = () => {
+    return <div>
+        <img src="../static/img/g3M004C9DwKgBOV1QLUSACpB8AAGXwF1Yrlw824.jpg" alt="" />
+        <h2>Blue</h2>
+        <style jsx>{`
+            img{
+                width: 110px;
+                height: 110px;
+                border-radius: 50%;
+                display: block;
+                margin:0 auto;
+            }
+            h2{
+                font-size: 30px;
+                color: #333;
+                text-align: center;
+                line-height: 1;
+                padding-top:5px; 
+            }
+        `}</style>
+    </div>
+}
+const List = () => {
+    const Item = () => {
+        return <Link href="/">
+            <a>
+                <div className="item">
+                    <div className="img">
+                        <img src="../static/img/g3M004FA5wKgBOV1RTiuAZ4lYAALxKzVe0xQ305.jpg" alt="" />
+                    </div>
+                    <div className="content">
+                        <div>
+                            <h3><span>[几天前]</span>JavaScript 数据结构与算法之美 - 桶排序、计数排序、基数排序</h3>
+                            <p>之所以把计数排序、桶排序、基数排序 放在一起比较，是因为它们的平均时间复杂度都为 O(n)。</p>
+                        </div>
+                        <div>
+                            <div className="option"><span>查看242</span><span>评论3</span><span>赞1</span>2019-07-30 22:54:16</div>
+                        </div>
+                    </div>
+                </div>
+
+                <style jsx>{`
+                a{
+                    display: block;
+                }
+                .item{
+                    padding: 20px 0;
+                    border-bottom: 1px solid #eee;
+                    display: flex;
+                }
+               
+                .img img{
+                    display: block;
+                    max-width: 200px;
+                }
+                .content{
+                    flex:1 1 auto;
+                    min-width: 0;
+                    padding-left:20px;
+                    display:flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                }
+                .content h3 {
+                    color: #333;
+                    padding-bottom: 5px;
+                    display: block;
+                    font-size: 18px;
+                    font-weight: 700;
+                    line-height: 1.5;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                }
+                .content p {
+                    padding: 0 0 10px;
+                    font-size: 14px;
+                    line-height: 24px;
+                    color: #555
+                }
+
+                .content .option {
+                    font-size: 12px;
+                    line-height: 20px;
+                    color: #555;
+                }
+                span{
+                    padding-right:5px;
+                }
+                @media(max-width:700px){
+                    .item{
+                        flex-direction: column;
+                        max-width: 400px;
+                        margin: 0 auto;
+                    }
+                    .img img{
+                        max-width: none;
+                        width: 100%;
+                    }
+                    .content{
+                        padding:10px 0 0 0;
+                    }
+                }
+            `}</style>
+            </a>
+        </Link>
+    }
+    const Page = () => {
+        return <div className="page">
+            <Link href="/">
+                <a className="left">
+                    <svg viewBox="64 64 896 896" width="12" height="12" fill="currentColor"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
+                </a>
+            </Link>
+            <Link href="/"><a className="number active">1</a></Link>
+            <Link href="/"><a className="number">2</a></Link>
+            <Link href="/"><a className="number">3</a></Link>
+            <Link href="/"><a className="number">4</a></Link>
+            <span>...</span>
+            <Link href="/"><a className="number">100</a></Link>
+            <Link href="/">
+                <a className="right">
+                    <svg viewBox="64 64 896 896" width="12" height="12" fill="currentColor"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg>
+                </a>
+            </Link>
+            <style jsx>{`
+                .page{
+                    padding: 20px 0;
+                    display: flex;
+                    justify-content: center;
+                    color: #333;
+                    font-size: 12px;
+                }
+                span{
+                    margin: 0 3px;
+                    line-height: 32px;
+                }
+                .page a{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 30px;
+                    height: 30px;
+                    border:1px solid #d9d9d9;
+                    border-radius: 5px;
+                    margin: 0 3px;
+                    transition: 0.3s;
+                }
+                .page a.active,
+                .page a:hover{
+                    color: #1890ff;
+                    border-color: #1890ff;
+                }
+            `}</style>
+        </div>
+    }
+    return <div className="container">
+        <Item />
+        <Page />
+        <style jsx>{`
+            .container{
+                flex:8;
+                padding-right: 30px;
+                min-width: 0;
+            }
+            @media(max-width:1200px){
+                .container{
+                    flex: 1;
+                    padding-right: 0;
+                }
+            }
+        `}</style>
+    </div>
+}
+const Label = () => {
+    let list = [{ title: '全部标签', value: 5 }, { title: 'javascript', value: 50, select: true }, { title: 'jQuery', value: 0 }, { title: '分享', value: 0 }, { title: '前端', value: 0 }]
+    const Item = (props) => {
+        const { item } = props;
+        return <>
+            <div className={`item ${item.select ? 'active' : ''}`}>
+                {item.title}
+                {item.value ? <span>{item.value}</span> : ''}
+            </div>
+            <style jsx>{`
+                .item {
+                    position: relative;
+                    max-width: 100%;
+                    height: 24px;
+                    margin: 0 5px 10px;
+                    line-height: 24px;
+                    padding: 0 8px 0 18px;
+                    border-radius: 0 4px 4px 0;
+                    background: #eee;
+                    font-size: 12px;
+                    color: #333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                }
+
+                .item span {
+                    opacity: .3;
+                    padding: 0 0 0 5px
+                }
+
+                .item:before {
+                    position: absolute;
+                    content: "";
+                    top: 0;
+                    left: 0;
+                    width: 0;
+                    height: 0;
+                    border-width: 12px 12px 12px 0;
+                    border-color: #fff transparent;
+                    border-style: solid
+                }
+
+                .item:after {
+                    position: absolute;
+                    content: "";
+                    width: 4px;
+                    height: 4px;
+                    top: 10px;
+                    left: 8px;
+                    border-radius: 100%;
+                    background: #fff
+                }
+
+                .item:hover {
+                    background: #333;
+                    color: #fff
+                }
+
+                .item.active {
+                    background: #1890ff;
+                    color: #fff
+                }
+            `}</style>
+        </>;
+    }
+    return <div className="container">
+        {list.map((value, index) => {
+            return <Item key={index} item={value} />
+        })}
+        {/* .container{
+                padding: 10px 0 0;
+            } */}
+        <style jsx>{`
+         
+            .container{
+                display: flex;
+                flex-wrap: wrap;
+            }
+            @media(max-width:600px){
+                .w1500{
+                    width:100%;
+                    padding: 0 10px;
+                    box-sizing: border-box;
+                }
+            }
+        `}</style>
+    </div>
+}
diff --git a/pages/index.jsx b/pages/index.js
similarity index 83%
rename from pages/index.jsx
rename to pages/index.js
index c33cd62..0e7ed70 100644
--- a/pages/index.jsx
+++ b/pages/index.js
@@ -4,87 +4,18 @@ import React, {
 } from 'react';
 import Link from 'next/link';
 import Layout from '../components/Layout';
-import '../css/reset.styl';
 // back = #1890ff
 // color = #333
 export default (props) => {
+	const [mask, setMask] = useState(false);	
 	return <Layout>
-		<InitPage />
-		<Home />
+		<InitPage setMask={setMask} />
+		<Home mask={mask} />
 		<Design />
 		<Drive />
-		<CopyRight />
 	</Layout>
 }
-const CopyRight = () => {
-	return (
-		<footer className="footer">
-			<div className="w1500">
-				<div className="list">
-					<div className="item">
-						<h3>关于Blog</h3>
-						<p>此Blog诞生的原因是想记录一些日常踩到的坑,也希望借此可以结交到其他的小伙伴啦,分享技术,一起进步.</p>
-					</div>
-					<div className="item">
-						<h3>友情链接</h3>
-						<div className="links">
-							<Link href="/"><a className="blog">博文</a></Link>
-							<Link href="/"><a className="dev">实验室</a></Link>
-							<Link href="/"><a className="message">留言</a></Link>
-							<Link href="/"><a className="about">关于</a></Link>
-						</div>
-					</div>
-				</div>
-				<p>Design & Code by Blue.use Mongodb + Next.js</p>
-			</div>
-			<style jsx>{`
-				.footer{
-					padding: 20px 0;
-					color: #ccc;
-					background: #333;
-					font-size: 14px;
-				}
-				.list{
-					display: flex;
-					justify-content: space-between;
-				}
-				h3{
-					font-size: 20px;
-					padding-bottom: 10px;
-					white-space: nowrap;
-				}
-				p{
-					padding-bottom: 10px;
-				}
-				.links{
-					display: flex;
-					flex-direction: column;
-				}
-				.links a{
-					line-height: 1.8;
-					transition: 0.3s;
-				}
-				.links a:hover{
-					color: #1890ff;
-				}
-				@media(max-width:500px){
-					.list{
-						flex-direction: column;
-					}
-					.w1500{
-						width: 100%;
-					}
-					.links{
-						align-items: flex-start;
-					}
-					.footer{
-						padding: 20px 15px;
-					}
-				}
-			`}</style>
-		</footer>
-	)
-}
+
 const Drive = () => {
 	return <div className="container">
 		<h3>Next.js强力驱动</h3>
@@ -115,6 +46,7 @@ const Drive = () => {
 				color: #fff;
 				text-align: left;
 				padding: 5px 10px;
+				border-radius: 5px;
 			}
 			a{
 				color: #1890ff;
@@ -332,9 +264,9 @@ const Design = () => {
 		</div>
 	)
 }
-const Home = () => {
+const Home = (props) => {	
 	return <section className="home">
-		<header className="header">
+		<header className={`header ${props.mask ? 'show' : ''}`}>
 			<div className="container">
 				{/* <div className="w1500"> */}
 				<h3 className='fz28'>你好!</h3>
@@ -350,6 +282,22 @@ const Home = () => {
 			</div>
 		</header>
 		<style jsx>{`
+			@keyframes circle_zoom {
+				0% {
+					opacity: 0;
+					-webkit-mask-size: 30%
+				}
+
+				40% {
+					opacity: .6;
+					-webkit-mask-size: 60%
+				}
+
+				to {
+					opacity: 1;
+					-webkit-mask-size: 300%
+				}
+			}
 			.header{
 				width: 100%;
 				background:url('../static/img/mask2.png'), url('../static/img/home.JPG') center center/cover no-repeat;
@@ -358,6 +306,15 @@ const Home = () => {
 				position: relative;
 				overflow: hidden;
 				transition: 0.3s background-position;
+				visibility: hidden;
+			}
+			.header.show{
+				-webkit-mask-image: url('../static/img/mask.png');
+				-webkit-mask-repeat: no-repeat;
+				-webkit-mask-position: center center;
+				-webkit-mask-size: 300%;
+				animation: circle_zoom 0.6s ease-in;
+				visibility: visible;
 			}
 			.header:after{
 				content: '';
@@ -428,7 +385,7 @@ const Home = () => {
 }
 
 let refInitPage = createRef();
-const InitPage = () => {
+const InitPage = (props) => {
 	const [action, setAction] = useState(false);
 	const [hide, setHide] = useState(false);
 	useEffect(() => {
@@ -437,8 +394,8 @@ const InitPage = () => {
 		}, 100);
 	}, [])
 	const transitionEnd = () => {
-		console.log('加载动画执行完毕');
 		setHide(true);
+		props.setMask(true);
 	}
 	return <section onTransitionEnd={transitionEnd} className={`initPage ${action ? 'action' : ''} ${hide ? 'hide' : ''}`}>
 		<style jsx>{`
diff --git a/pages/post.jsx b/pages/post.js
similarity index 100%
rename from pages/post.jsx
rename to pages/post.js
diff --git a/readme.md b/readme.md
index 5e34786..8513527 100644
--- a/readme.md
+++ b/readme.md
@@ -38,3 +38,12 @@ font-family: -apple-system-font, sans-serif;
 
 PS:此方法并不能解决移动端font-size小于12px以下出现的不能垂直居中问题。可能还需要各位用其它方式来解决。
 # blog
+
+
+
+
+            {/*
+                flex布局会组织文本框的内容小于自身,所以需要设置min-with:0 来改善这个问题
+                min-width: 0;
+             */}
+             触发原因是: flex布局里面使用white-space nowrap 会造成问题
diff --git a/static/img/blog.jpg b/static/img/blog.jpg
new file mode 100644
index 0000000..d66e2a1
Binary files /dev/null and b/static/img/blog.jpg differ
diff --git a/static/img/g3M004C9DwKgBOV1QLUSACpB8AAGXwF1Yrlw824.jpg b/static/img/g3M004C9DwKgBOV1QLUSACpB8AAGXwF1Yrlw824.jpg
new file mode 100644
index 0000000..3f1841f
Binary files /dev/null and b/static/img/g3M004C9DwKgBOV1QLUSACpB8AAGXwF1Yrlw824.jpg differ
diff --git a/static/img/g3M004FA5wKgBOV1RTiuAZ4lYAALxKzVe0xQ305.jpg b/static/img/g3M004FA5wKgBOV1RTiuAZ4lYAALxKzVe0xQ305.jpg
new file mode 100644
index 0000000..4ade00d
Binary files /dev/null and b/static/img/g3M004FA5wKgBOV1RTiuAZ4lYAALxKzVe0xQ305.jpg differ