🔥超棒的开发者作品集页面，展示您的项目📱（响应式设计）
HTML
CSS
JS
响应式
用户体验
CodePen
剧终
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
作品集页面
创建个人作品集并非易事。我们当然可以说，最重要的在于项目本身，这绝对没错。但项目在评估之前如何展示也至关重要。这就是为什么我们需要精美的作品集页面。这样不仅能够展示项目，还能以赏心悦目的方式呈现它们。
HTML
整个作品都是使用PUG预处理器编写的，但如果您需要regular HTML，您可以使用Codepen compiler（位于文章底部）PUG在中解释HTML。
为了create new cards在系统中记录您的项目HTML，您应该使用一个表格specially created mixin并插入您需要的数据（项目名称以及创建项目时使用的技术）：
作品集卡片混合
//-- Portfolio Card Wrap
.portfolioCardWrap.clearfix
mixin portfolioCardMix(imgProjectClass, portfolioCardName, portfolioCardTechnologies)
.portfolioCard
.portfolioCard__img(class=`portfolioCard__img_${imgProjectClass}`)
.portfolioCard__about
h1.portfolioCard__name #{portfolioCardName}
h1.portfolioCard__technologies #{portfolioCardTechnologies}
+portfolioCardMix('gwent', 'card game ui', 'html,scss,react')
+portfolioCardMix('prado', 'prado museum', 'html,scss,react')
+portfolioCardMix('spiele', 'spiele museum', 'pug,scss,js')
+portfolioCardMix('cuphead', 'cuphead', 'pug,scss,js')
+portfolioCardMix('calculator', 'calculator', 'pug,scss,js,ts')
+portfolioCardMix('player', 'music player', 'pug,scss,react')
+portfolioCardMix('mobile', 'old mobile', 'html,css,js')
+portfolioCardMix('artGallery', 'art gallery', 'pug,scss,js')
+portfolioCardMix('tree', 'geometric', 'pug,scss,js')
CSS
为了创建样式，我使用了SASS带有SCSS特定语法的预处理器。
为此reset the styles，我使用了reset.css添加了box-sizing: border-box;属性的库。它被插入到代码中。
为了将insert the images图片插入到presentation（黄色背景的页面）中，您需要使用一个special mixin，contains 7 slots用于放置您的图片（您可以将其插入only 7 images到演示页面中）：
项目图像路径
/*____________________________________________________________
## Project Image Path Mixin
____________________________________________________________*/
@mixin projectImgPathMix($underlineWidth, $presentationClassModification, $presentMainImg, $detailImg1, $detailImg2, $detailImg3, $detailImg4, $portfolioLgImg, $portfolioMdImg) {
.presentation_#{$presentationClassModification} {
.presentMain__titleUnderline {
width: #{$underlineWidth}
}
.presentMain__img {
background-image: url('#{$presentMainImg}');
}
.detailItem {
&:nth-child(1) {
.detailItem__img {
background-image: url('#{$detailImg1}');
}
}
&:nth-child(2) {
.detailItem__img {
background-image: url('#{$detailImg2}');
}
}
&:nth-child(3) {
.detailItem__img {
background-image: url('#{$detailImg3}');
}
}
&:nth-child(4) {
.detailItem__img {
background-image: url('#{$detailImg4}');
}
}
}
.portfolioImg_lg {
background-image: url('#{$portfolioLgImg}');
}
.portfolioImg_md {
background-image: url('#{$portfolioMdImg}');
}
}
}
// Prado
@include projectImgPathMix(
'53px',
'prado',
'https://i.pinimg.com/originals/da/d2/be/dad2bec273660ef57d1b5b8226cdd9fa.png',
'https://i.pinimg.com/originals/ff/5a/75/ff5a75072701ac21e976857f4a8e4cc8.png',
'https://i.pinimg.com/originals/f3/9c/1f/f39c1ffd297b392afdce9f1c38ff44b1.png',
'https://i.pinimg.com/originals/1a/e0/f7/1ae0f7edfe962e0ab3cc1ccfbad381c0.png',
'https://i.pinimg.com/originals/c0/52/04/c052041d1ff7f0392d189038b919ff03.png',
'https://i.pinimg.com/originals/b7/3d/e0/b73de097933f05ba0a51dbc129b8ec61.png',
'https://i.pinimg.com/originals/c0/49/eb/c049eb8e05385fae7a136042505f53e0.png'
);
// Spiele Museum
@include projectImgPathMix(
'65px',
'spiele',
'https://i.pinimg.com/originals/57/1f/d4/571fd4a327d7b1bc1df135d8392ed26f.png',
'https://i.pinimg.com/originals/c8/7e/8a/c87e8a698ae1b4835464f2304945f84a.png',
'https://i.pinimg.com/originals/32/0b/31/320b31ee5d039a9e335b9b5be2a1000e.png',
'https://i.pinimg.com/originals/de/19/0c/de190c623f727f13114e3139ad503eda.png',
'https://i.pinimg.com/originals/a4/3a/97/a43a9788ff5635ab2559a5281e49ccf9.png',
'https://i.pinimg.com/originals/5e/74/82/5e7482f21acbfd060991b44b0946a924.png',
'https://i.pinimg.com/originals/c5/de/0c/c5de0cc134bfba07aff16db8ae06b666.png'
);
此外，在这个 mixin 中，非常重要的一点是specify the name of the project，以便将其images correspond添加到选定的项目中。
JS
在创建这个项目时，我使用了诸如JS libraries`<div>`anime.js和 `<div> ` 之类的reavelRx.js控件。它们是点击时触发所必需的transition animation。
在我们的 js 文件中，我们使用了一个，array of data这样当你点击时click on a particular project，presentation page（一个黄色背景的页面）就会被赋予必要的data（类、链接和文本）来显示有关项目的详细信息。
项目数据数组
1: {
wrapClass: 'presentation_prado',
title: 'Prado.',
demoHref: 'https://kerthin.github.io/pradoMuseum-templateSait/',
descriptTitle: 'Learning the best artists',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/pradoMuseum-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
2: {
wrapClass: 'presentation_spiele',
title: 'Spiele.',
demoHref: 'https://kerthin.github.io/computerSpieleMuseum-templateSait/',
descriptTitle: 'Dive into the past of your<br/>favorite video games.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/computerSpieleMuseum-templateSait',
detailTitle_1: 'Fillas Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
如果您希望数据显示在展示页面上，则只需将数据输入到此数组中即可。
为此edit the transition animation，您应该参考代码的这一部分（line 281）：
过渡动画
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'rl',
duration: 700,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.add('js-popupMenu_open');
contentEl.style.opacity = 1;
}
});
为此edit the closing animation，您需要参考代码的这一部分（line 311）：
关闭过渡动画
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'lr',
duration: 700,
delay: 1200,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.remove('js-popupMenu_open');
contentEl.style.opacity = 0;
}
});
响应式
该网站已适配以下屏幕分辨率：（@media 1680px@media 1600px@media 1440px@media 1280px@media 1024px@media 960px@media 848px@media 768px@media 642px@media 576px@media 414px@media 375px@media 320px@media iPad竖屏）
用户体验
要进入特定项目的展示页面，只需点击作品集页面上的卡片即可。
之后，您将被重定向到演示部分（一个黄色背景的页面），您需要点击click on the presentation该页面使其打开并浏览scroll。
要关闭它并返回作品集的主页，您需要执行click the round button in the upper-left corner以下操作，之后您将被返回。
关闭按钮
此外，页面不同角落还有指向Demo pages和 的链接GitHub project pages，您可以在 中指定它们array in JS。
CodePen
演示：
剧终
好了，亲爱的朋友们，就到这里吧。感谢你们抽出时间欣赏我的作品，我尽力让你们喜欢它。下次见！😘
文章来源：https://dev.to/kerthin/awesome-developer-portfolio-page-for-your-projects-responsive-2npp