feat: add bio-card play

src/plays/bio-card/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './styles.css';
+import Avatar from './components/Avatar';
+import Intro from './components/Intro';
+import SkillList from './components/SkillList';
+
+const App = () => {
+  return (
+    <div className="bio-card_card">
+      <Avatar />
+      <div className="bio-card_data">
+        <Intro />
+        <SkillList />
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/plays/bio-card/BioCard.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import App from './App';
+
+function BioCard(props: any) {
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          <App />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default BioCard;

src/plays/bio-card/Readme.md

@@ -0,0 +1,27 @@
+# Bio Card
+
+The card is a compact profile display featuring a person’s image, a brief bio, and a list of technologies they specialize in.
+
+## Play Demographic
+
+- Language: ts
+- Level: Beginner
+
+## Creator Information
+
+- User: aaqib605
+- Gihub Link: https://github.com/aaqib605
+- Blog: https://hashnode.com/@aaqib605
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

src/plays/bio-card/components/Avatar.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import profileImg from '../assets/aaqib-javaid.jpg';
+
+function Avatar() {
+  return <img alt="Aaqib Javaid" className="bio-card_profile-picture" src={profileImg} />;
+}
+
+export default Avatar;

src/plays/bio-card/components/Intro.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Intro() {
+  return (
+    <div>
+      <h1 className="bio-card_name">Aaqib Javaid</h1>
+      <p className="bio-card_person-bio">
+        Passionate about crafting beautiful and functional web experiences. Love open source. Let's
+        connect and collaborate on some cool projects!
+      </p>
+    </div>
+  );
+}
+
+export default Intro;

src/plays/bio-card/components/Skill.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface SkillProps {
+  skill: string;
+  color: string;
+  level: string;
+}
+
+const Skill: React.FC<SkillProps> = ({ skill, color, level }) => {
+  return (
+    <div className="bio-card_skill" style={{ backgroundColor: color }}>
+      <span>{skill}</span>
+      <span>
+        {level === 'beginner' && '👶'}
+        {level === 'intermediate' && '👍'}
+        {level === 'advanced' && '💪'}
+      </span>
+    </div>
+  );
+};
+
+export default Skill;

src/plays/bio-card/components/SkillList.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import Skill from './Skill';
+
+function SkillList() {
+  const skills = [
+    {
+      skill: 'HTML+CSS',
+      level: 'advanced',
+      color: '#2662EA'
+    },
+    {
+      skill: 'JavaScript',
+      level: 'advanced',
+      color: '#EFD81D'
+    },
+    {
+      skill: 'Web Design',
+      level: 'advanced',
+      color: '#C3DCAF'
+    },
+    {
+      skill: 'Git and GitHub',
+      level: 'intermediate',
+      color: '#E84F33'
+    },
+    {
+      skill: 'React',
+      level: 'advanced',
+      color: '#60DAFB'
+    },
+    {
+      skill: 'Svelte',
+      level: 'beginner',
+      color: '#FF3B00'
+    }
+  ];
+
+  return (
+    <div className="bio-card_skill-list">
+      {skills.map((skill) => (
+        <Skill color={skill.color} level={skill.level} skill={skill.skill} />
+      ))}
+    </div>
+  );
+}
+
+export default SkillList;

src/plays/bio-card/styles.css

@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'IBM Plex Mono', sans-serif;
+  background-color: #f7f7f7;
+}
+
+.bio-card_name {
+  font-size: 2rem;
+  margin: 1rem auto 2rem auto;
+  text-align: center;
+}
+
+.bio-card_card {
+  max-width: 450px;
+  margin: 40px auto;
+  border: 4px solid #222;
+}
+
+.bio-card_card::after {
+  content: '';
+  display: block;
+}
+
+.bio-card_profile-picture {
+  width: 100%;
+  display: block;
+  background: none;
+}
+
+.bio-card_data {
+  padding: 32px;
+  padding-top: 24px;
+}
+
+.bio-card_person-bio {
+  text-align: center;
+}
+
+.bio-card_skill-list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.bio-card_skill {
+  padding: 2px 12px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+@media (max-width: 425px) {
+  .bio-card_data {
+    padding: 1rem 0.5rem;
+    padding-top: 0;
+  }
+
+  .bio-card_name {
+    font-size: 1.5rem;
+    margin: 1rem auto;
+  }
+}