fix: improve the home chips

generate.js

@@ -17,6 +17,7 @@ const profiles = files.map((file) => {
 // generate list file
 const writeDirectoryPath = path.join(__dirname, 'public', 'list.json')
 const output = profiles.map((profile) => ({
+  name: profile.name,
   username: profile.username,
   avatar: profile.avatar,
 }))

src/Components/Home/Home.css

@@ -1,16 +1,21 @@
-a{
+a {
   text-decoration: none;
 }
-.p-chip{
+
+.p-chip {
+  transition: transform 0.33s;
   padding: 0.2rem 0.6rem;
 }
-.p-chip:hover{
+
+.p-chip:hover {
   transform: scale(1.1);
 }
-.p-chip-text{
+
+.p-chip-text {
   color: black;
 }
-.p-chip img{
+
+.p-chip img {
   height: 2.5rem;
   width: 2.5rem;
 }

src/Components/Home/Users.js

@@ -7,11 +7,7 @@ function User({ list }) {
     <>
       {list.map((user, key) => (
         <a href={`${user.username}`} key={`avatar-${key}`}>
-          <Chip
-            image={user.avatar}
-            className="p-m-2"
-            label={user.username}
-          />
+          <Chip image={user.avatar} className="p-m-2" label={user.name} />
         </a>
       ))}
     </>