后端开发教程 - Java、Spring Boot 实战 - msg200.com
我如何创建我的投资组合：从思考过程到部署。
规划与设计
项目结构
优化
部署
💖 欢迎在评论中分享您的投资组合和任何其他有用的资源。
在进入企业界之前，我一直希望拥有一个投资组合，我很高兴地告诉大家，大约一个月前，这个任务已经完成了🎉。
您可以在https://prafulla.tech查看我的投资组合。
在这篇文章中，我想分享我从思考过程到部署的历程。
我将在下一节中分解整个过程
规划与设计
在这个阶段，我使用了基于浏览器的设计和原型工具Figma。其他工具，例如 Adobe XD、Sketch 等也可以使用。
这是我的投资组合的 Figma 计划板。
我之所以将规划和设计阶段放在一页纸上，是为了更容易地将想法付诸行动。
规划阶段包括两个步骤：
目标
写下投资组合所期望的基本要求有助于产生更强的目的，并让人三思而后行，看看所实施的设计和内容是否能够满足这些要求。
例子：- 
参考
在直接进入开发和设计之前，最好先参考一些示例网站并列出一些你喜欢的想法。
您只需简单搜索即可轻松找到参考网站Top portfolio websites in <xyz> field。
以下是我推荐的一些投资组合：
记下你认为你的作品集必须具备的特点。
例如： 
设计阶段
这是我将可视化设计付诸实践的阶段。
我将我的设计按照以下格式放在每个页面/部分中。RequirementsLight Mode Mobile & Desktop ViewDark Mode Mobile & Desktop View
例子：-
该要求指定了我认为该页面/部分应该存在的组件。
将需求放在部分设计旁边有助于找到实现需求的创造性方法，同时也减少了遗漏重要细节的机会。
项目结构
在本节中，我想更多地谈论我使用过的技术堆栈以及我组织代码的方式。
由于我当时刚刚开始学习 JavaScript 框架，所以我使用 react.js 来创建我的作品集。
我的投资组合完全是静态的，没有后端要求，因此不需要实现复杂的状态管理、数据库连接等。
我使用过 SASS，它是一个 CSS 预处理器，可以使样式组件更加灵活。
堆栈使用
因为我想要一个单页应用程序（SPA），所以甚至不需要实现 react-router。
文件结构
.
├── src
├──📂components
├──📂about
├── 📄About.scss
├── 📄About.js
├──📂footer
├──📂....(Other Components)
│ └──📂services (APIs)
| └──📄App.js (Root App)
| └──📄index.js
| └──📄_variables.scss (Variables)
在我的代码库中，作品集的每个页面/部分都是基于 React 类的组件，并存储在组件目录中，并带有各自的样式文件。
📄App.js
是一个根级组件，它包含所有按所需顺序排列的组件。这是我的 App.js 的粗略模板
// Module Imports
class App extends React.Component {
constructor(props){
super(props);
let theme = localStorage.getItem("theme");
// Switch Theme as per time Logic
}
componentDidMount(){
// Console Log Messages
}
changeTheme = (theme)=>{
// Change Theme Helper Function
}
render(){
// * Render the components as a SPA
return <div className={'App app-'+this.state.theme}>
<ThemeToggler theme={this.state.theme} changeTheme={this.changeTheme}></ThemeToggler>
<NavWidget theme={this.state.theme}></NavWidget>
<Landing theme={this.state.theme}></Landing>
<Projects theme={this.state.theme}></Projects>
<About theme={this.state.theme}></About>
<Skills theme={this.state.theme}></Skills>
<Hobbies theme={this.state.theme}></Hobbies>
<Footer theme={this.state.theme}></Footer>
</div>;
}
}
export default App;
📂services目录包含调用所需后端 API 的辅助方法（例如，我使用 DEV 的 API 来获取我的文章并将其显示在我的投资组合中）
📄_variables.scss
是一个 SASS 文件，包含颜色组合和其他有用的变量，可以导入到其他样式中，以提高其可重复使用性。
示例
// Text Colors
$lightPrimaryText:#3F3D56;
$darkPrimaryText:#FAFAFA;
$darkSecondaryColor:#FDCA13;
$lightSecondaryColor:#66BB6A;
$lightTextColorGray:#828282;
$darkTextColorBlue:#0d47a1;
// Container Colors
$lightContainerColor:#FFFFFF;
$darkContainerColor:#202D36;
$maxWidth: 800px;
这里的主要思想是定义一次，调用多次
优化
觉得你的投资组合不够好？你如何衡量它？
有一些工具可以帮助您使用不同的参数对您的网站进行基准测试：
这些网站将对您的网站进行基准测试，并提供详细的报告来帮助您改进网站。
例子
以下是我发现有助于提高我的 SEO 和性能的一些步骤：
- 使用内容分发网络（CDN）来提供静态资产（我使用Cloudinary）
- SEO 的一半是元标签（关键词、描述、标题、网站图标、开放图标签等），另一半是内容（确保包含与关键词相关的内容）。
- 缩小 CSS 和 JS 文件（您可以在网上找到各种工具来执行此操作）
- 延迟加载图片/视频
- 使用压缩文件格式（例如，图像使用.webp ）
- 使用插件检查颜色对比度（在 Figma 中检查）
- 有一个 xml 站点地图，将站点地图提交给 google。
部署
这是最后阶段，包括托管您的网站。
以下是一些免费托管服务提供商
- Netlify（提供免费 SSL）
- Firebase 托管（提供免费 SSL）
- 000网站主机
- Heroku（最受欢迎的托管全栈应用程序之一，包含客户端和服务器）
以下是一些广泛使用的付费提供商
我使用 Netlify 和 Heroku 主要因为它们更容易与 GitHub 的持续集成和部署集成。