Developer Card

React JS

import React from "react";
import "./styles.css";

function App() {
  return (
    <div className="card">
      <img src="https://via.placeholder.com/300x180" alt="Profile picture" />
      <div className="card-content">
        <h2>Jane Doe</h2>
        <p>
          Frontend developer with a passion for creating beautiful and
          functional user interfaces. When not coding, I enjoy hiking,
          photography, and exploring new coffee shops around the city.
        </p>
        <div className="badges">
          <span className="badge html-css">HTML+CSS 🌐</span>
          <span className="badge javascript">JavaScript ⚙️</span>
          <span className="badge vue">Vue.js 🖥️</span>
          <span className="badge nodejs">Node.js 🚀</span>
          <span className="badge mongodb">MongoDB 🍃</span>
        </div>
      </div>
    </div>
  );
}

export default App;

CSS Dev Card

React TS

import React from "react";
import "./styles.css";

const App: React.FC = () => {
  return (
    <div className="card">
      <img src="https://via.placeholder.com/300x180" alt="Profile picture" />
      <div className="card-content">
        <h2>Jane Doe</h2>
        <p>
          Frontend developer with a passion for creating beautiful and
          functional user interfaces. When not coding, I enjoy hiking,
          photography, and exploring new coffee shops around the city.
        </p>
        <div className="badges">
          <span className="badge html-css">HTML+CSS 🌐</span>
          <span className="badge javascript">JavaScript ⚙️</span>
          <span className="badge vue">Vue.js 🖥️</span>
          <span className="badge nodejs">Node.js 🚀</span>
          <span className="badge mongodb">MongoDB 🍃</span>
        </div>
      </div>
    </div>
  );
};

export default App;

CSS Dev Card