Built Portfolio Page - 8 (Skills Component)

从零搭建

Steps:

  1. Add Skills Component
  2. Add margin bottom in Projects.tsx
  3. Add css to skill component
  4. Add hook
  5. Add animation

1. Add Skills Component

Add src/components/Skills.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react'
import SectionHeading from './Section-heading'
import { skillsData } from '@/libs/data'

export default function Skills() {
  return (
    <section>
      <SectionHeading>My skills</SectionHeading>
      <ul>
        {
          skillsData.map((skill,index)=>(
            <li key={index}>{skill}</li>
          ))
        }
      </ul>
    </section>
  )
}

More...

背单词提示词

有趣资源

背景

背单词总是背不下来，缺少相关背景，可以利用下面的提示词给GPT提问

提示词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
下面我将输入英文单词或词组，请按下面格式返回，看懂了回答“明白了”：
# [用户输入的单词]
- 基本释义：确保标题清晰突出，音标准确（美式与英式），并提供简洁明了的中文释义。
---
### 记忆方法
在以下记忆方法旁，请随机选择一个emoji图标进行标记，以增强学习的趣味性和视觉记忆。
1. 方法一：[描述]
2. 方法二：[描述]
3. 方法三：[描述]
4. 场景记忆法：将单词放入一个具体的日常生活场景中，帮助形成更加鲜明的记忆印象。
5. 动作记忆法：为每个单词创造一个特定的动作，通过动作帮助记忆单词。
6. 情感联结法：将单词与个人的情感经历或感受联系起来，通过情感经历加深记忆。
7. 分组分类法：将学习的单词按主题或类别分组，帮助大脑更有效地组织和记忆信息。
- 词根词源：[如果有]
---
### 常用词组
选择与日常生活和学习贴近的词组，以增加其实际应用的可能性。
| 词组 | 使用场景说明 |
|---|---|
| 词组1 | 场景说明 |
| 词组2 | 场景说明 |
| 词组3 | 场景说明 |
| 词组4 | 场景说明 |
---
### 联想记忆
- 近义词：[列表]
- 反义词：[列表]
- 联想词：[列表]
- 同根词：[列表]
- 反义连词：[列表]
- 形近词：[列表]
- 情态词汇：[列表]
- 反义连词：[列表]
---
### 台词记忆
选择富有画面感和情感色彩的电影台词，使记忆过程更加有趣。
> "英文台词" - 电影名
中文翻译
---
### 结合记忆宫殿
尝试将单词与个人经历或熟悉的地点结合，创建更个性化的记忆桥梁。
- 中英结合短句1：[描述]
- 中英结合短句2：[描述]
- 中英结合短句3：[描述]
More...

如何用Prisma为数据库添加初始化数据

日常练习

背景

到目前为止，数据库还是为空的，因此，我们需要创建一个种子脚本，填充一些初始数据进入数据库，有些初始数据是程序必不可少的，比如货币语言信息等，有时候开发需要重置数据库，因此为数据库播种也很有必要。

首先，创建一个名为prisma/seed.ts。 然后粘贴以下模板代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { PrismaClient } from "@prisma/client";
// 初始化 Prisma Client
const prisma = new PrismaClient();

async function main() {
  //在此编写 Prisma Client 查询
}

main()
  .catch((e) => {
    console.error(e);
    process.exit(1);
  })
  .finally(async () => {
    // 关闭 Prisma Client
    await prisma.$disconnect();
  });

为了能够让 nodejs 运行 typescript，我们需要安装ts-node

1
npm i -D ts-node

然后在 tsconfig.json 中指定输出格式为 commonjs

1
2
3
4
5
6
7
{
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

接下来，我们在 main 函数中创建一个用户:

1
2
3
4
5
6
7
8
9
10
11
async function main() {
  const user = await prisma.user.create({
    data: {
      name: "小马",
      avatar:
        "https://p3-passport.byteimg.com/img/user-avatar/585e1491713363bc8f67d06c485e8260~100x100.awebp",
    },
  });
  console.log(user)
}

执行命令

1
npx ts-node ./prisma/seed.ts

为nextjs项目添加日志

日常练习

背景

经常做全栈项目或者做过正式后端项目的开发者都知道，日志记录是一个项目不可或缺的功能。不过，经常看Next.js开源项目的朋友会发现，几乎没什么项目集成了日志模块。

但是，根据我的经验看，Next.js项目还是比较需要日志模块的，根据实际经验总结出来的原因如下有几个：

  • Serverless 平台和自己购买的服务器环境是有区别的，这就带来Next.js项目运行时不同，例如在Serverless 平台里，Next.js使用的是edge运行时，它相比于Node环境来说，缺少了一些API，这会导致偶尔出现本地运行正常，部署到Serverless 平台发现报错了。
  • 调用了第三方平台的API，当出现连接错误的情况，你去排查是第三方服务不稳定还是你的API额度用完，这都是比较麻烦了，但是如果有日志文件直接查看，定位问题就可以更快速。

安装必要Package：

1
npm install winston winston-daily-rotate-file

添加通用函数：

More...

Built Portfolio Page - 5 (Link scroll)

从零搭建

Steps:

  1. Add id to different element
  2. Add scroll-mt propriety to classman

Modify Intro.tsx:

1
2
3
4
5
6
7
8
export default function Intro() {
  return (
    <section 
      id = "home"
      className='mb-28 max-w-[50rem] text-center sm:mb-0
      scroll-mt-[100rem]'
    >
....

Modify About.tsx:

1
2
3
4
5
6
7
8
9
export default function About() {
  return (
    <motion.section className='mb-28 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28'
      initial={{ opacity:0, y:100}}
      animate={{ opacity:1, y:0 }}
      transition={{ delay: 0.175 }}
      id="about"
    >
...

Modify Projects.tsx

1
2
3
4
export default function Projects() {
  return (
    <section id="projects" className='scroll-mt-28'>
...

Scroll smoothly

Modify layout.tsx:

1
2
3
4
5
6
7
8
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className='!scroll-smooth'>
...

Built Portfolio Page -4 (Scroll effect)

从零搭建

Steps:

  1. move project code to project component

useScroll Memo:

1
2
3
4
5
const ref = useRef<HTMLElement>(null);
const { scrollYProgress  } = useScroll({
  target: ref,
  offset:["0 1", "1.33 1"]
});
  • 创建一个 ref,用于引用某个 DOM 元素(可能在JSX中通过 ref={ref} 绑定到一个元素上)。
  • 使用 useScroll 来监听这个被引用元素的滚动情况。
  • 设置滚动动画的触发范围:从元素开始进入视口底部(“0 1”)到元素完全离开视口底部 33% 的位置(“1.33 1”)。
  • 获取 scrollYProgress 值,这个值可能随着元素的滚动而变化,范围可能是 0 到 1。

Add project component

More...

Built Portfolio Page -3 (Projects Component)

从零搭建

Steps:

  1. Add project component

Add projects component

add src/components/Projects.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react'
import SectionHeading from './Section-heading'
import { projectsData } from '@/libs/data'
import Image from 'next/image';

export default function Projects() {
  return (
    <section>
      <SectionHeading>
        My Projects
      </SectionHeading>
      <div>
        {projectsData.map((project, index)=>( 
          <React.Fragment key={index}>
            <Project  {...project} />
          </React.Fragment>
        ))}
      </div>
    </section>
  )
}

type ProjectProps = (typeof projectsData)[number]; 

function Project({title,description,tags,imageUrl } : 
ProjectProps) {
  return(
    <section className="group bg-gray-100 max-w-[42rem] border border-black/5
    overflow-hidden sm:pr-8 relative sm:h-[20rem] mb-3 sm:mb-8 last:mb-0 even:pl-8
    hover:bg-gray-200 transition">
      <div className='py-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] 
      flex flex-col h-full group-even:ml-[18rem]'>
        <h3 className='text-2xl font-semibold'>{title}</h3>
        <p className='mt-2 leading-relaxed text-gray-700'>{description}</p>
        <ul className='flex flex-wrap mt-4 gap-2 sm:mt-auto'>
          {tags.map((tag,index) => (
            <li className='bg-black/[0.7] px-3 py-1 text-[0.7rem] upppercase
            tracking-wider text-white rounded-full' 
            key={index}
            >
              {tag}
            </li>
          ))}
        </ul>
      </div>
      <Image 
        src={imageUrl} alt="Project I worked on" quality={95} 
        className='absolute top-8 -right-40 w-[28.25rem] rounded-t-lg shadow-2xl
        transition
        group-hover:scale-[1.05]
        group-hover:-translate-x-3
        group-hover:translate-y-3
        group-hover:-rotate-2

        group-even:group-hover:translate-x-3
        group-even:group-hover:-translate-y-3
        group-even:group-hover:rotate-2
        group-even:right-[inital] group-even:-left-40'
      />
    </section>
  )
}

More...

请我喝杯咖啡吧~

支付宝
微信