diff --git a/.vscode/settings.json b/.vscode/settings.json index 6285118..3f63653 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,6 +6,7 @@ "bilibili", "bvid", "dgut", + "dgutcs", "hongshen", "jinyu", "Uniapp" diff --git a/README.md b/README.md index 37edf05..fea514e 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,14 @@ Ciallo ～(∠・ω< )⌒⭐ 你好哇！欢迎来到 DGUT-CS-WIKI，这里是东莞理工学院计算机学习指南。 -在这里，我针对东莞理工学院的计算机专业课程收集整理了一些我亲自学习过或具有极佳口碑的计算机相关课程指南，希望对你将来的学习有所帮助。 +在这里，我们有： + +- 前端、后端等方向的大厂同学 +- XCPC（ACM）竞赛的银牌选手 +- 雅思成绩8.0，考研，留学的大佬 +- 实验室负责人等等 + +总结学习经验，相关课程指南，希望对你将来的学习有所帮助。 ## 在线访问 @@ -18,12 +25,13 @@ Ciallo ～(∠・ω< )⌒⭐ ## 本地开发 ```bash +pnpm install pnpm dev ``` ## 成为贡献者 -由于个人精力有限，我实在不可能把所有计算机相关的内容都学习一遍。因此，如果你有推荐的课程或资料分享，欢迎提交 PR 或发邮件给我。 +由于个人精力有限，我实在不可能把所有计算机相关的内容都学习一遍。因此，如果有推荐的课程或资料分享，欢迎提交 PR 或发送邮件。 贡献步骤： @@ -36,8 +44,8 @@ pnpm dev - 请确保提交的内容符合项目规范 - 新增内容请在适当的目录下创建 markdown 文件 -- 图片等资源请放在 `public` 目录下 -- 提交前请在本地测试确保无误 +- 图片等资源可直接放在 `public` 目录下，使用`/`路径 +- commit会触发eslint检查，请确保无语法错误 ## 交流群 @@ -48,4 +56,4 @@ pnpm dev - 感谢所有为这个项目做出贡献的同学 - 感谢 Astro 和 Starlight 提供了优秀的文档框架 -- 以及阅读了这本 WIKI 并慷慨地给点了 Star⭐ 的你 😘 \ No newline at end of file +- 以及阅读了这本 WIKI 并慷慨地给点了 Star⭐ 的你 😘 diff --git a/astro.config.mjs b/astro.config.mjs index 33a8521..14e23cc 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -24,8 +24,8 @@ export default defineConfig({ }, plugins: [starlightHeadingBadges(), starlightImageZoom()], components: { - Header: "./src/components/Header.astro", - MarkdownContent: "./src/components/MarkdownContent.astro", + Header: "./src/components/starlight/Header.astro", + MarkdownContent: "./src/components/starlight/MarkdownContent.astro", }, customCss: ["./src/tailwind.css"], editLink: { diff --git a/package.json b/package.json index 2cf6aa8..0e1ecc9 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": "astro build", "preview": "astro preview", "astro": "astro", + "tsc": "tsc --noEmit", "eslint": "eslint --fix --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,mdx}'", "postinstall": "husky install" }, @@ -51,6 +52,7 @@ "lint-staged": "^15.4.3", "prettier": "^3.4.2", "prettier-plugin-astro": "^0.14.1", - "sass-embedded": "^1.83.4" + "sass-embedded": "^1.83.4", + "typescript": "^5.7.3" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5339d6c..57472f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,9 @@ importers: sass-embedded: specifier: ^1.83.4 version: 1.83.4 + typescript: + specifier: ^5.7.3 + version: 5.7.3 packages: diff --git a/src/assets/blog/mango/image.png b/src/assets/blog/mango/image.png new file mode 100644 index 0000000..17a7fb8 Binary files /dev/null and b/src/assets/blog/mango/image.png differ diff --git a/src/components/Header.astro b/src/components/starlight/Header.astro similarity index 100% rename from src/components/Header.astro rename to src/components/starlight/Header.astro diff --git a/src/components/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro similarity index 76% rename from src/components/MarkdownContent.astro rename to src/components/starlight/MarkdownContent.astro index eb58dac..fea2615 100644 --- a/src/components/MarkdownContent.astro +++ b/src/components/starlight/MarkdownContent.astro @@ -1,13 +1,9 @@ --- import '@astrojs/starlight/style/markdown.css'; -import Author from './Author.astro'; +import Author from '../Author.astro'; const {entry} = Astro.props; const { data } = entry; -console.log('xzc',data); - - -const author = "test"; ---
diff --git "a/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/_react/index.mdx" "b/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/_react/index.mdx" index 74fedec..ac9c40c 100644 --- "a/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/_react/index.mdx" +++ "b/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/_react/index.mdx" @@ -3,6 +3,7 @@ title: React description: React 是一个用于构建用户界面的 JavaScript 库。它主要用于构建单页面应用，通过组件化的方式，将页面拆分成多个组件，每个组件负责一个功能，然后通过组件的嵌套，构建出复杂的页面。 --- -## React 是什么 -React 是一个用于构建用户界面的 JavaScript 库。它主要用于构建单页面应用，通过组件化的方式，将页面拆分成多个组件，每个组件负责一个功能，然后通过组件的嵌套，构建出复杂的页面。 +[React 官方文档](https://react.dev/learn) + +🚧 文章建设当中，敬请期待！✨ diff --git "a/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/react.mdx" "b/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/react.mdx" deleted file mode 100644 index 4548973..0000000 --- "a/src/content/docs/\345\211\215\347\253\257\345\274\200\345\217\221/react.mdx" +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: React学习路线 -description: React学习路线 ---- - -[React 官方文档](https://react.dev/learn) -🚧 文章建设当中，敬请期待！✨ diff --git "a/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.md" "b/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.md" deleted file mode 100644 index bc92352..0000000 --- "a/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.md" +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 芒果 -- 前端如何3个月找到实习 -description: 芒果实习 -author: 芒果 ---- - -> diff --git "a/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.mdx" "b/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.mdx" new file mode 100644 index 0000000..5945ba0 --- /dev/null +++ "b/src/content/docs/\345\256\236\344\271\240\345\260\261\344\270\232/mango.mdx" @@ -0,0 +1,78 @@ +--- +title: 芒果 -- 前端如何3个月找到实习 +excerpt: 芒果实习 +--- + +> 文章具有时效性，以笔者个人经验为主，仅供参考 + +## 前言 + +标题比较暴论，但确实是可行的，最近零基础的时候参考了知乎的文章 + +1. 前端门槛低，比后端容易入门 +2. 前端岗位没有后端 java 那么卷 +3. 前端技术栈多，但学会关键基础部分即可找实习 + +> 代价就是前端职业发展比后端差 +> 有人带和没人带，前端学习效率差距非常大 +> 有了 ai 的辅助，前端效率提升非常多 + +一点其他信息，前端:后端的比例大概为 1:3 +前端就是将后端数据表现为页面展示出来 + +## 补天计划 + +- 前端三件套一个月 +- 框架&项目一个月 +- 八股一个月 + +### 三件套 + +- HTML +- CSS +- JavaScript + +参考另外一篇[文章](/前端开发/base) + +### 框架&项目 + +框架国内无非 `vue` 或者 `react` +任选其一就可以了 + +#### react + +react 学习资源还是比较多的，个人更推荐**官方文档** +优先啃文档，跟着官方 demo 去一步一步实现 + +遇到不会的问题再去看视频 + +:::tip +个人觉得尽量去读文档 + +1. 入门视频质量参差不齐，为了照顾所有人，会讲很多废话 +2. 文档是第一手材料，视频会忽略很多细节 + ::: + +#### 项目 + +项目推荐 Youtube 上的教程视频 + +- 例如安东尼奥的教程 + 一步一步直接喂到嘴里 + +![alt text](../../../assets/blog/mango/image.png) + +8 小时，一步一步跟着敲代码 + +涉及到的组件库，css 方案，路由，状态管理，api 请求，项目部署 + +:::tip +认识的几个大厂同学，也都做过安东尼奥的项目 +如果想要提升，可以考虑规划扩展，研究用到的技术的原理 +::: + +### 简历&八股 + +这一部分也非常重要 + +详细见运营的简历&八股方案 diff --git a/src/pages/friends.astro b/src/pages/friends.astro index c444811..5794e9e 100644 --- a/src/pages/friends.astro +++ b/src/pages/friends.astro @@ -2,8 +2,18 @@ import { Icon } from '@astrojs/starlight/components'; import '../tailwind.css'; +type Contributor = { + name: string; + role: string; + avatar: string; + description: string; + tags: string[]; + github: string; + gradient?: { from: string; to: string }; +} + // 贡献者数据 -let contributors = [ +let contributors: Contributor[] = [ { name: "红神", role: "核心贡献者", @@ -11,7 +21,6 @@ let contributors = [ description: "莞青CTO", tags: ['快手', '小黑盒', '后端'], github: 'https://github.com/interca/', - details: "专注于后端开发，对分布式系统有深入研究" }, { name: "半糖", @@ -20,7 +29,6 @@ let contributors = [ description: "开源大佬", tags: ['小米', '百度', '后端'], github: 'https://github.com/BanTanger', - details: "热衷于开源项目贡献，擅长系统架构设计" }, { name: "芒果", @@ -29,7 +37,6 @@ let contributors = [ github: "https://github.com/MongoRolls", description: "前端", tags: ['前端', '开源爱好者'], - details: "负责项目的发起和维护，热爱技术分享和开源社区" }, { name: "金鱼", @@ -38,10 +45,23 @@ let contributors = [ description: "ab实验室，ak实验室", tags: ['字节预备', '小鹅通', '后端'], github: 'https://github.com/dbinggo', - details: "专注于性能优化和系统架构，热爱技术创新" } ]; +// 预定义一些渐变色组合 +const gradients = [ + { from: '#6366f1', to: '#818cf8' }, // 靛蓝色 + { from: '#f43f5e', to: '#fb7185' }, // 玫红色 + { from: '#0ea5e9', to: '#38bdf8' }, // 天蓝色 + { from: '#f59e0b', to: '#fbbf24' }, // 琥珀色 +]; + +// 为每个贡献者分配一个渐变色 +contributors = contributors.map((contributor, index) => ({ + ...contributor, + gradient: gradients[index % gradients.length] +})); + --- @@ -66,6 +86,7 @@ let contributors = [
{contributors.map((contributor) => (
+
{contributor.name} @@ -78,19 +99,15 @@ let contributors = [
{contributor.tags.map(tag => ( - {tag} + {tag} ))}
- +

{contributor.description}

- -
-

{contributor.details}

-
))} @@ -136,23 +153,39 @@ let contributors = [ .card { position: relative; - background: rgba(255, 255, 255, 0.9); - border-radius: 1rem; - padding: 1.5rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.98); + border-radius: 1.5rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; overflow: hidden; - height: 220px; /* 稍微调整初始高度 */ } .card:hover { - height: 340px; /* 调整展开高度 */ transform: translateY(-5px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card-background { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + opacity: 0.15; + clip-path: polygon(0 0, 100% 0, 100% 35%, 0 70%); + transition: all 0.3s ease; + z-index: 0; + } + + .card:hover .card-background { + opacity: 0.12; + clip-path: polygon(0 0, 100% 0, 100% 40%, 0 75%); } .card-content { position: relative; + z-index: 1; + padding: 1.5rem; } .card-header { @@ -167,12 +200,16 @@ let contributors = [ border-radius: 50%; margin-right: 1rem; object-fit: cover; + border: 3px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .card-titles h2 { margin: 0; color: #2d3748; - font-size: 1.25rem; + font-size: 1.35rem; + font-weight: 600; + letter-spacing: -0.01em; } .role { @@ -184,6 +221,8 @@ let contributors = [ color: #4a5568; margin: 1rem 0; line-height: 1.5; + font-size: 0.95rem; + opacity: 0.9; } .tags-container { @@ -201,31 +240,19 @@ let contributors = [ } .tag { - background: rgba(99, 102, 241, 0.1); - color: #4f46e5; + background: rgba(200, 200, 200, 0.2); + color: #333; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; + backdrop-filter: blur(4px); + border: 1px solid rgba(255, 255, 255, 0.2); } .tag:hover { - background: rgba(99, 102, 241, 0.2); - } - - .card-details { - opacity: 0; - transform: translateY(20px); - transition: all 0.3s ease; - margin: 1rem 0; - color: #4a5568; - line-height: 1.6; - } - - .card:hover .card-details { - opacity: 1; - transform: translateY(0); + background: rgba(150, 150, 150, 0.3); } .github-link { @@ -234,17 +261,17 @@ let contributors = [ justify-content: center; width: 2rem; height: 2rem; - color: #4a5568; border-radius: 9999px; transition: all 0.2s ease; margin-left: 0.5rem; - background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(200, 200, 200, 0.2); + color: #333; } .github-link:hover { - color: #4f46e5; - background: rgba(99, 102, 241, 0.2); transform: translateY(-2px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .back-button {