当青训营遇上码上掘金《我的名片》

前言

当青训营遇上码上掘金 - 主题一：我的名片。

对于程序员来说，个人名片可以用来解释自己的专业技能、联系方式、来自哪里等等，个人名片可以作为一种营销工具，帮助我们展示自己的技能和经验，并且可以在求职和业务扩展时脱颖而出。

基本功能

个人开发的简单demo，是基于React和Css创建一个个人名片组件。这个组件包含了基本的元素，如个人照片、姓名、头衔、联系方式和网站。

其中一个主要的特点是使用了Css过渡和背景颜色变化来创建属于悬停时的动画。当用户将鼠标移动到卡片上时，它会稍微旋转，背景颜色也会改变，为组件增加了动态和一些交互元素

逻辑步骤

1. Card组件：它承载了主要的页面布局和载体，接受相关信息，并展示卡片的内容
2. CSS 样式： 我们使用 CSS 来给卡片添加样式，包括背景图片、颜色、字体和过渡。
3. 定义一个UseState值，鼠标移入移出的记录其boolean值。
4. onMouseEnter 和 onMouseLeave 事件处理程序: 这些函数用来监听鼠标移入和移出卡片事件，在事件触发时监听hover的ture或者false切换不同的类名，来实现动画和过渡的效果。

具体代码

Card组件

const Card = function () {
  const [isHovering, setIsHovering] = useState(false);
  
  return (
    <div 
      className={`card-container ${isHovering ? 'card-hover' : ''}`}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <div className="card-header">
        <img src="https://avatars1.githubusercontent.com/u/1234123" alt="profile" className="profile-picture" />
        <h1 className="name">Jack Pen</h1>
        <h2 className="title">Software Developer</h2>
      </div>
      <div className="card-body">
        <p className="email">jack.pen@example.com</p>
        <p className="phone">(86)-8888888</p>
        <p className="location">Chinese, Guangdong</p>
        <a href="#" className="website">www.example.com</a>
      </div>
    </div>
  )
};

Css代码

.card-container {
  width: 300px;
  height: 450px;
  border: 1px solid black;
  padding: 20px;
  transition: all 0.5s ease-in-out;
  background-image: linear-gradient(to right, #F1C40F, #E67E22);
}

.card-hover {
  transform: rotate(10deg);
  box-shadow: 0px 5px 10px gray;
  background-image: linear-gradient(to right, #E67E22, #F1C40F);
  color: #333;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.name {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
}

.title {
  font-size: 18px;
  color: gray;
  text-align: center;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.email, .phone, .location, .website {
  font-size: 16px;
  margin-top: 10px;
}

具体效果

鼠标移入移出可以查看效果

总结

这个个人卡片demo学习了 React 中组件的使用，包括如何使用 JSX 来编写组件结构，以及如何在组件中使用事件处理程序。我们还学习了如何使用 CSS 来给组件添加样式和使用 CSS 过渡创建动画效果。