根据昨天的《静态网页托管平台》一文里面的介绍，一个轻量级的个人卡片项目应运而生，我们来瞅一瞅这个无聊的网页。主要是因为这个占着我的GithubPages仓库空间，想把它删掉，但又有点可惜，于是截图留念一下。
这个网页收集了前端开发中常用的软件和网站，看看你是否全中？至于其中的图片素材单独上传到CSDN上面。
网页总共分为5个板块，分别是：
-
联系方式 ：博主的各种博客和社交媒体
-
社区网站：博主最喜欢的社区和技术论坛
-
App：博主MacBook上的所有开发工具。。。
-
软件 ：博主最常用的开源库
-
关于：关于这个博客的源码、求打赏等信息
居然还有版权说明。。。。
这个博客还挺有意思的，比如：
-
每个卡片的宽高比都是黄金分割比例；
-
它的介绍页面是通过临时将markdown转成html5来渲染的；
-
网站利用local storage进行缓存
-
整个内容是由一个json渲染而成
-
使用了非常冷门的库：Material Design Component
-
网站非常轻量，用户访问只需要下载10k
而它的源码实在是太少了，数据源就是一个json文件：
[
{
"priority": 100,
"name": "Contact",
"about": "Find me Everywhere on Internet (#^.^#)",
"img": "./img/back/back0.jpg",
"icon": "<i class='mdl-color-text--blue-grey-400 material-icons' role='presentation'>tag_faces</i>",
"list": [
{
"name": "about.me",
"url": "https://about.me/jinhengyu",
"about": "做了一个个人名片, 把所有境外账号挂上去, 别点了, 没啥实质内容",
"logo": "/img/logo/about.me.png"
},
{
"name": "WebHub",
"url": "https://cloud.tencent.com/developer/column/72646",
"about": "云+社区的blog专栏哦~ 体验非常流畅, 标签系统无敌",
"logo": "/img/logo/WebHub.png"
},
{
"name": "公众号",
"url": "/img/icon/公众号.png",
"about": "和朋友共同维护的技术公众号(myWebHub), 目前处于断更状态...",
"logo": "/img/logo/公众号.png"
},
{
"name": "CSDN",
"url": "https://blog.csdn.net/github_38885296",
"about": "非常古老的中文社区, 能坚持到现在是个奇迹 (我是博客砖家哦~)",
"logo": "/img/logo/csdn.png"
},
{
"name": "云栖博客",
"url": "https://yq.aliyun.com/u/jinhengyu",
"about": "阿里云栖社区一言难尽, 体验还行吧, 感觉投入精力和预算有限",
"logo": "./img/logo/yq.png"
},
{
"name": "iBlog",
"url": "http://jinhengyu.xyz",
"about": "基于MEVN全栈的博客~\\(≧▽≦)/~啦啦啦, 硅谷的机器等不及就跳过吧",
"logo": "./img/logo/iBlog.png"
},
{
"name": "微博",
"url": "https://www.weibo.com/jinhengyu123",
"about": "",
"logo": "/img/logo/微博.png"
},
{
"name": "GitHub",
"url": "https://github.com/JinHengyu",
"about": "star? follow? 来全球最大的同性交友社区交流哲学吧",
"logo": "/img/logo/GitHub.png"
},
{
"name": "云+社区",
"url": "https://cloud.tencent.com/developer/user/3549958",
"about": "国内对Material Design实现比较nice的技术平台, 而且很新",
"logo": "/img/logo/云+社区.png"
},
{
"name": "Jim's Page",
"url": "https://JinHengyu.github.io",
"about": "最最给力的静态网站托管平台GitHub Pages, 也就是这个主页啦",
"logo": "/img/logo/Page.png"
},
{
"name": "开源中国",
"url": "https://my.oschina.net/jinhengyu/",
"about": "源中国成立于2008年8月，是目前国内最大的开源技术社区，拥有超过200万会员",
"logo": "/img/logo/OSChina.png"
},
{
"name": "博客园",
"url": "https://home.cnblogs.com/u/jinhengyu/",
"about": "博客园诞生于江苏扬州这样一个IT非常落后的小城市，城市虽小，但是这里却有很多求知创新的人.",
"logo": "/img/logo/博客园.png"
},
{
"name": "LinkedIn",
"url": "https://www.linkedin.com/in/jinhengyu/",
"about": "LinkedIn（领英），全球最大职业社交网站，是一家面向商业客户的社交网络（SNS）",
"logo": "/img/logo/LinkedIn.png"
}
]
},
{
"priority": 90,
"name": "Community",
"about": "Here r my Favourite Tech Communities / Forums",
"img": "./img/back/back1.jpg",
"icon": "<i class='mdl-color-text--blue-grey-400 material-icons' role='presentation'>people</i>",
"list": [
{
"name": "Hacker News",
"url": "https://news.ycombinator.com/",
"about": "Hacker News is a social news website focusing on computer science and entrepreneurship.",
"logo": "/img/logo/hacker.png"
},
{
"name": "MDN",
"url": "https://developer.mozilla.org",
"about": "MDN是JavaScript开发者必读的官网网站, 其他的都是辣鸡...",
"logo": "/img/logo/MDN.png"
},
{
"name": "Wikipedia",
"url": "https://www.wikipedia.org/",
"about": "维基百科，是一个基于维基技术的多语言百科全书协作计划，用多种语言编写的网络百科全书。",
"logo": "/img/logo/Wikipedia.png"
},
{
"name": "Stack Overflow",
"url": "https://stackoverflow.com/",
"about": "Stack Overflow是一个与程序相关的IT技术问答网站。",
"logo": "/img/logo/stack.png"
},
{
"name": "云栖社区",
"url": "https://yq.aliyun.com/",
"about": "",
"logo": "/img/logo/yq.png"
},
{
"name": "开源动弹",
"url": "https://www.oschina.net/tweets",
"about": "OSChina的开源动弹很好玩, 一起来聊天吧, 属于程序猿的聊天室",
"logo": "/img/logo/OSChina.png"
},
{
"name": "SegmentFault",
"url": "https://segmentfault.com/",
"about": "SegmentFault是一家中文的开发者社区及媒体。最初的产品原型模仿自最大的程序员问答社区StackOverflow",
"logo": "/img/logo/SegmentFault.png"
}
]
},
{
"priority": 85,
"name": "Application",
"about": "List of ALL the APPs on my MacBook",
"img": "./img/back/back4.jpg",
"icon": "<i class='mdl-color-text--blue-grey-400 material-icons' role='presentation'>toys</i>",
"list": [
{
"name": "VSCode",
"url": "https://code.visualstudio.com/",
"about": "Code editing. Redefined. Free. Open source. Runs everywhere.",
"logo": "/img/logo/VSCode.png"
},
{
"name": "网易云音乐",
"url": "https://music.163.com/",
"about": "网易云音乐是一款由网易开发的音乐产品，简称云村. 上班族必备良器",
"logo": "/img/logo/网易云音乐.png"
},
{
"name": "Chrome",
"url": "https://www.google.com/chrome/",
"about": "Google Chrome 是一款快速、安全且免费的网络浏览器,能很好地满足新型网站对浏览器的要求。",
"logo": "/img/logo/chrome.png"
},
{
"name": "shadowsocks",
"url": "https://shadowsocks.org/",
"about": "A secure socks5 proxy, designed to protect your Internet traffic.",
"logo": "/img/logo/shadowsocks.png"
},
{
"name": "Steam",
"url": "https://store.steampowered.com/",
"about": "",
"logo": "/img/logo/Steam.png"
},
{
"name": "Photoshop",
"url": "https://www.photoshop.com/",
"about": "",
"logo": "/img/logo/Photoshop.jpg"
}
]
},
{
"priority": 80,
"name": "Software",
"about": "Best of the Frameworks & Softwares I Often Use",
"img": "./img/back/back2.jpg",
"icon": "<i class='mdl-color-text--blue-grey-400 material-icons' role='presentation'>apps</i>",
"list": [
{
"name": "Font Awesome",
"url": "https://fontawesome.com/",
"about": "Icons. Easy. Done. Fontawesome is the web's most popular icon set and toolkit.",
"logo": "/img/logo/fontawesome.png"
},
{
"name": "webpack",
"url": "https://webpack.js.org/",
"about": "Webpack 是一个前端资源加载/打包工具, 将相互关联的模块按照指定的规则生成对应的静态资源。",
"logo": "/img/logo/webpack.png"
},
{
"name": "selenium",
"url": "https://www.seleniumhq.org/",
"about": "个人非常喜欢的web自动化框架, 可以借助它模拟各种用户操作, 实现各种爬虫",
"logo": "/img/logo/selenium.png"
},
{
"name": "electron",
"url": "https://electronjs.org/",
"about": "Build cross platform desktop apps with JavaScript, HTML, and CSS",
"logo": "/img/logo/electron.png"
},
{
"name": "Node.js",
"url": "https://nodejs.org/",
"about": "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.",
"logo": "/img/logo/node.png"
},
{
"name": "MongoDB",
"url": "https://www.mongodb.com/",
"about": "MEAN全栈的重要成员, JavaScript的忠实拥护者--MongoDB",
"logo": "/img/logo/mongo.png"
},
{
"name": "Express",
"url": "http://expressjs.com/",
"about": "Fast, unopinionated, minimalist web framework for Node.js",
"logo": "/img/logo/Express.png"
},
{
"name": "ag-Grid",
"url": "https://www.ag-grid.com/",
"about": "THE BEST JAVASCRIPT GRID IN THE UNIVERSE",
"logo": "/img/logo/ag-Grid.png"
},
{
"name": "Chart.js",
"url": "https://www.chartjs.org/",
"about": "Simple yet flexible JavaScript charting for designers & developers",
"logo": "/img/logo/chart.js.png"
},
{
"name": "MATERIAL",
"url": "https://material.io/",
"about": "Material is a design system that helps teams build digital experiences",
"logo": "/img/logo/MATERIAL.png"
},
{
"name": "Qt",
"url": "https://www.qt.io/",
"about": "Create fluid, high-performance and intuitive UIs, applications, and embedded devices.",
"logo": "/img/logo/Qt.png"
},
{
"name": "shadowsocks",
"url": "https://shadowsocks.org/",
"about": "A secure socks5 proxy, designed to protect your Internet traffic.",
"logo": "/img/logo/shadowsocks.png"
},
{
"name": "Hexo",
"url": "https://hexo.io/",
"about": "A fast, simple & powerful blog framework based on Node.js",
"logo": "/img/logo/Hexo.png"
}
]
},
{
"priority": 70,
"name": "About",
"about": "Something Else About This Lite Blog",
"img": "./img/back/back3.jpg",
"icon": "<i class='mdl-color-text--blue-grey-400 material-icons' role='presentation'>send</i>",
"list": [
{
"name": "网站源码",
"url": "https://github.com/JinHengyu/JinHengyu.github.io",
"about": "基于Material风格的索引式个人主页, 托管于Github Page",
"logo": "/img/logo/default.png"
},
{
"name": "LICENSE",
"url": "/LICENSE",
"about": "Apache License Version 2.0, January 2004 http://www.apache.org/licenses/",
"logo": "/img/logo/Apache.png"
},
{
"name": "README",
"url": "/README.html",
"about": "",
"logo": "/img/logo/README.png"
},
{
"name": "data.json",
"url": "/data.json",
"about": "The Core Data Storing In Single Json File & LocalStorage",
"logo": "/img/logo/json.png"
},
{
"name": "私信",
"url": "mailto:jinhengyu666@gmail.com",
"about": "交换友链? 遇到bug? 谈谈哲学? 互粉互赞? @我让俺听见你滴声音",
"logo": "/img/logo/Gmail.png"
},
{
"name": "支持",
"url": "/pay.png",
"about": "Pay me Any Amount, at Any Time if ur Touched by the Work",
"logo": "/img/logo/二维码.png"
}
]
}
]
