react-icons/fa#FaLinkedin JavaScript Examples
The following examples show how to use
react-icons/fa#FaLinkedin.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SocialIcons.js From caasy-nextjs-blog-template with MIT License | 6 votes |
|
SocialIcons = () => (
<div className={styling.social}>
<a href={blogConfig.social.youtube} target='_blank' rel='noreferrer' hidden={!blogConfig.social.youtube}>
<FaYoutube />
</a>
<a href={blogConfig.social.linkedin} target='_blank' rel='noreferrer' hidden={!blogConfig.social.linkedin}>
<FaLinkedin />
</a>
<a href={blogConfig.social.dev} target='_blank' rel='noreferrer' hidden={!blogConfig.social.dev}>
<FaDev />
</a>
<a href={blogConfig.social.facebook} target='_blank' rel='noreferrer' hidden={!blogConfig.social.facebook}>
<FaFacebook />
</a>
<a href={blogConfig.social.instagram} target='_blank' rel='noreferrer' hidden={!blogConfig.social.instagram}>
<FaInstagram />
</a>
<a href={blogConfig.social.twitter} target='_blank' rel='noreferrer' hidden={!blogConfig.social.twitter}>
<FaTwitter />
</a>
<a href={blogConfig.social.github} target='_blank' rel='noreferrer' hidden={!blogConfig.social.github}>
<FaGithub />
</a>
</div>
)
Example #2
| Source File: socialLinks.js From gatsby-strapi-portfolio-site-2020 with MIT License | 6 votes |
|
data = [
{
id: 1,
icon: <FaFacebookSquare className="social-icon"></FaFacebookSquare>,
url: "https://www.twitter.com",
},
{
id: 2,
icon: <FaLinkedin className="social-icon"></FaLinkedin>,
url: "https://www.twitter.com",
},
{
id: 3,
icon: <FaDribbbleSquare className="social-icon"></FaDribbbleSquare>,
url: "https://www.twitter.com",
},
{
id: 4,
icon: <FaBehanceSquare className="social-icon"></FaBehanceSquare>,
url: "https://www.twitter.com",
},
{
id: 5,
icon: <FaTwitterSquare className="social-icon"></FaTwitterSquare>,
url: "https://www.twitter.com",
},
]
Example #3
| Source File: Footer.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
Footer = () => {
return (
<footer className="footer">
<div className="contact">
<a href="https://twitter.com/gdsciiitkalyani" target="_blank" rel="noreferrer" className="icon twitter"><FaTwitter size = '5x'/></a>
<a href="https://www.instagram.com/gdsciiitkalyani/" target="_blank" rel="noreferrer" className="icon instagram"><FaInstagram size = '5x'/></a>
<a href="https://www.linkedin.com/company/gdsc-iiit-kalyani/" target="_blank" rel="noreferrer" className="icon linkedin"><FaLinkedin size = '5x'/></a>
<a href="https://mail.google.com/" target="_blank" rel="noreferrer" className="icon email"><FaEnvelope size = '5x'/></a>
<a href="https://github.com/GDSC-IIIT-Kalyani" target="_blank" rel="noreferrer" className="icon github"><FaGithub size='5x'/></a>
</div>
<div className="copyright">
<h2><FaCopyright/> 2021-22 GDSC IIIT Kalyani</h2>
</div>
</footer>
);
}
Example #4
| Source File: Admin_Home_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img2 marginl"></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
<div className='pop' >
<a href="/editcollege" className="btn btn-primary text_size left_m">Edit</a></div>
</div>
</div>
</div>
</div>
</>
)
}
Example #5
| Source File: ContactMe.js From tuliofaria.dev with MIT License | 6 votes |
|
ContactMe = () => {
return (
<div className='mx-8 px-8 relative border-orange border rounded md:mx-0 md:px-16 pb-4 pt-10 mt-6'>
<h3 className='absolute bg-orange text-white py-2 px-6 top-0 -mt-5 text-2xl font-bold uppercase'>Contact me</h3>
<p className='text-center md:text-left'>
<a href='https://linkedin.com/in/tuliofaria' title='LinkedIn Profile'>
<FaLinkedin className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://github.com/tuliofaria' title='GitHub Profile'>
<FaGithub className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://youtube.com/devplenocom' title='Youtube Channel'>
<FaYoutube className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://devpleno.com' title='Blog'>
<FiLink className='text-5xl md:text-6xl inline-block' />
</a>
<br />
<span className='inline-block mt-4'>or drop a line: [email protected]</span>
</p>
</div>
)
}
Example #6
| Source File: SocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function SocialIcon() {
return (
<SocialDiv>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</SocialDiv>
);
}
Example #7
| Source File: FixSocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function FixSocialIcon() {
return (
<Social>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</Social>
);
}
Example #8
| Source File: View_Student_Company_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<Navbar_viewstdcompany></Navbar_viewstdcompany>
<div className="card1 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img "></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
</div>
</div>
</div>
</div>
</>
)
}
Example #9
| Source File: SocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
SocialLinks = ({ contacts }) => {
return (
<div className="side-social-links float-left mt-3 mb-3">
<a className="text-light p-2" href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={26} style={{ color: "secondary" }} />
</span>
</a>
<a className="text-light p-2" href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={26} style={{ color: "secondary" }} />
</span>
</a>
</div>
)
}
Example #10
| Source File: index.js From js-docs with MIT License | 6 votes |
|
contributors = metadata.contributors.map(
({ name, url_git, url_linkedin, url_avatar }, index) => {
return (
<Box key={index}>
<BoxHeader
colorOne={generateOrangeColor()}
colorTwo={generateOrangeColor()}
>
<ImgContainer>
<img src={url_avatar} alt="Avatar" />
</ImgContainer>
</BoxHeader>
<BoxContent>
<Author>{name}</Author>
<Links>
<a href={url_git} target="_blank" rel="noopener noreferrer">
<FaGithub />
</a>
<a href={url_linkedin} target="_blank" rel="noopener noreferrer">
<FaLinkedin />
</a>
</Links>
</BoxContent>
</Box>
)
}
)
Example #11
| Source File: CustomShareBlock.js From tomoblo with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center">
<i>If you like it, share it!</i>
</p>
</div>
);
}
Example #12
| Source File: SocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
SocialLinks = ({ contacts }) => {
return (
<div className="social-links float-right mr-4">
<a className="text-primary ml-4"
href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={40} style={{ color: "primary" }} />
</span>
</a>
<a className="text-light ml-4"
href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={40} style={{ color: "light" }} />
</span>
</a>
<a className="text-warning ml-4"
href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={40} style={{ color: "warning" }} />
</span>
</a>
<a className="text-success ml-4"
href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={40} style={{ color: "success" }} />
</span>
</a>
<a className="text-info ml-4"
href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={40} style={{ color: "info" }} />
</span>
</a>
</div>
)
}
Example #13
| Source File: CustomShareBlock.js From syntax.rocks with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center"><i>If you like it, share it!</i></p>
</div>
)
}
Example #14
| Source File: MobileSocialLinks.js From syntax.rocks with MIT License | 6 votes |
|
MobileSocialLinks = ({ contacts }) => {
return (
<div className="bottom-bar py-1">
<a className=" text-primary"
href={contacts.linkedin}>
<span title="Linked In">
<FaLinkedin size={26} style={{ color: "primary" }} />
</span>
</a>
<a className="text-light"
href={contacts.github}>
<span title="GitHub">
<FaGithubSquare size={26} style={{ color: "light" }} />
</span>
</a>
<a className="text-warning"
href={contacts.stackoverflow}>
<span title="Stack Overflow">
<FaStackOverflow size={26} style={{ color: "warning" }} />
</span>
</a>
<a className="text-success"
href={contacts.freecodecamp}>
<span title="freeCodeCamp">
<FaFreeCodeCamp size={26} style={{ color: "success" }} />
</span>
</a>
<a className="text-info"
href={contacts.twitter}>
<span title="Twitter">
<FaTwitterSquare size={26} style={{ color: "info" }} />
</span>
</a>
</div>
)
}
Example #15
| Source File: Navigation.js From portfolio-react with MIT License | 5 votes |
|
// import ResumeModal from "./ResumeModal";
function Navigation() {
const [showResumeModal, setShowResumeModal] = useState(false)
return (
<React.Fragment>
<Navbar variant='dark' expand='lg' fixed='top' className='nvabar-custon'>
<a href='/' className='navbar_logo_container'>
<img src={PortfolioLogo} className='navbar_logo' alt='navbar_logo' />
<span>Pranjal Jain</span>
</a>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'></Nav>
<Nav className='navbar-right'>
<Nav.Link href='http://blog.pranjaljain.me'>
<Button className='moving-gradient'>Blogs</Button>
</Nav.Link>
<Nav.Link>
<Button
variant='light'
style={{
borderRadius: '4px 0 0 4px',
borderRight: '1px solid rgba(0,0,0,0.5)',
}}
onClick={() => {
setShowResumeModal(true)
}}>
Curriculum Vitae (CV)
</Button>
<Button
variant='light'
href='https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf'
style={{
borderRadius: '0 4px 4px 0',
}}
aria-label='Resume'>
<FaDownload
aria-label='Resume'
fill='rgba(0,0,0,0.5)'
onClick={() =>
(window.location =
'https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf')
}
/>
</Button>
</Nav.Link>
<Nav.Link
aria-label='Github'
href='https://github.com/pranjaljain0'>
<FaGithub
aria-label='Github'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
<Nav.Link
aria-label='Linked In'
href='https://www.linkedin.com/in/pranjaljain0/'>
<FaLinkedin
aria-label='Linked In'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<ResumeModal
showResumeModal={showResumeModal}
closeModal={() => {
setShowResumeModal(!showResumeModal)
}}
/>
</React.Fragment>
)
}
Example #16
| Source File: index.js From react-portfolio with MIT License | 5 votes |
|
Socialicons = (params) => {
return (
<div className="stick_follow_icon">
<ul>
{socialprofils.twitter && (
<li>
<a href={socialprofils.twitter}>
<FaTwitter />
</a>
</li>
)}
{socialprofils.github && (
<li>
<a href={socialprofils.github}>
<FaGithub />
</a>
</li>
)}
{socialprofils.facebook && (
<li>
<a href={socialprofils.facebook}>
<FaFacebookF />
</a>
</li>
)}
{socialprofils.linkedin && (
<li>
<a href={socialprofils.linkedin}>
<FaLinkedin />
</a>
</li>
)}
{socialprofils.youtube && (
<li>
<a href={socialprofils.youtube}>
<FaYoutube />
</a>
</li>
)}
{socialprofils.twitch && (
<li>
<a href={socialprofils.twitch}>
<FaTwitch />
</a>
</li>
)}
</ul>
<p>Follow Me</p>
</div>
);
}
Example #17
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
export default function Rodape() {
return (
<div className="rodape">
<div className="sub_rodape">
<div className="redes_sociais">
<ul>
<li>
<FaFacebookF />
</li>
<li>
<FaInstagram />
</li>
<li>
<FaLinkedin />
</li>
<li>
<FaTwitter />
</li>
</ul>
</div>
<div>
<i>Fale Conosco: (19) 3269-4089</i>
</div>
</div>
<div className="sub_rodape2">
<div>
<ul>
<span className="usuarios">Usuários</span>
<li>Aplicativo</li>
<li>Login</li>
<li>Cadastro</li>
<li>Localização</li>
<li>Suporte</li>
<li>Termos de Uso</li>
</ul>
</div>
<div>
<ul>
<span className="fast_Help">AAMed</span>
<li>Certificações</li>
<li>Membros</li>
<li>Base</li>
<li>Localização</li>
<li>Contato</li>
<li>Aplicação</li>
</ul>
</div>
<div>
<ul>
<span className="hospitais">Hospitais</span>
<li>Certificações</li>
<li>Login</li>
<li>Unidades</li>
<li>Localização</li>
<li>Contato</li>
<li>Termos de Uso</li>
</ul>
</div>
</div>
</div>
);
}
Example #18
| Source File: View_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #19
| Source File: View_Applicant_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #20
| Source File: View_Admin_Std_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #21
| Source File: Student_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
<p ><a href="\addedu"><FaPlus></FaPlus></a> <a href="/deledu"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addexp"><FaPlus></FaPlus></a> <a href="\delexp"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addcer"><FaPlus></FaPlus></a> <a href="\delcer"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #22
| Source File: Company_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
return (
<>
<div className="magin-top">
<div className="card-body profile_width pop">
<div>
<img src={props.image} className="profile_img"></img>
</div>
<div className="cb">
<div className="cb2">
<strong>
<h4 className="card-title centers fsize2">{props.name}</h4>
</strong>
<p className="card-text centers">
<strong>Location : </strong> {props.location}
</p>
</div>
<div className="details">
<p className="card-text fsize">
<strong>Email:</strong> {props.email}
</p>
<p className="card-text fsize">
<strong> Year of Establishment:</strong> {props.year}
</p>
<p className="card-text fsize">
<strong>Description :</strong> {props.description}
</p>
<p className="card-text fsize">
<strong>Webite :</strong>{" "}
<a href={props.website}>{props.website}</a>
</p>
<p className="card-text fsize">
{" "}
<a href={props.facebook}>
<FaFacebookF></FaFacebookF>
</a>{" "}
<a href={props.twitter}>
<FaTwitter></FaTwitter>
</a>{" "}
<a href={props.LinkedIn}>
{" "}
<FaLinkedin></FaLinkedin>
</a>{" "}
<a href={props.Insta}>
{" "}
<FaInstagram></FaInstagram>
</a>
</p>
<ReactPlayer url={props.url} />
<div className="pop">
<a
href="/editcompany"
className="btn btn-primary text_size left_m"
>
Edit
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #23
| Source File: ProfileCard.js From Winter-of-Code-2.0-frontend with MIT License | 5 votes |
|
Card = ({ isHighlighted, name, image, role, socialMedia }) => {
return (
<div className={isHighlighted ? "active-card" : "card"}>
<div className="imgBx">
<img src={image} alt="profile pic of developer" />
</div>
<div className="content">
<div className="details">
<h2>
{name}
<br />
<span>{role}</span>
</h2>
<ul className="sci">
<li>
<a href={socialMedia.github} target="_blank" rel="noreferrer">
<FaGithub />
</a>
</li>
<li>
<a href={socialMedia.twitter} target="_blank" rel="noreferrer">
<FaTwitter />
</a>
</li>
<li>
<a href={socialMedia.linkedin} target="_blank" rel="noreferrer">
<FaLinkedin />
</a>
</li>
<li>
<a href={socialMedia.instagram} target="_blank" rel="noreferrer">
<FaInstagram />
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
Example #24
| Source File: NavSocial.js From codeursenseine.com with MIT License | 5 votes |
|
socialLinks = [
{
name: "Twitter",
icon: <FaTwitter />,
link: "http://twitter.com/codeursenseine",
},
{
name: "Youtube",
icon: <FaYoutube />,
link: "https://www.youtube.com/channel/UCWujmG5rANxJI0nHbMFs08w/playlists",
},
{
name: "Twitch",
icon: <FaTwitch />,
link: "https://www.twitch.tv/codeursenseine/",
},
{
name: "GitHub",
icon: <FaGithub />,
link: "https://github.com/CodeursEnSeine/",
},
{
name: "Facebook",
icon: <FaFacebook />,
link: "https://www.facebook.com/codeursenseine",
},
{
name: "Linkedin",
icon: <FaLinkedin />,
link: "https://www.linkedin.com/company/codeurs-en-seine",
},
{
name: "Slack",
icon: <FaSlack />,
link: "https://go.codeursenseine.com/slack",
},
{
name: "Flux RSS",
icon: <FaRss />,
link: "https://www.spreaker.com/show/3365517/episodes/feed",
},
{
name: "Spotify",
icon: <FaSpotify />,
link: "https://open.spotify.com/show/28UM8IYvMF68hMm0IqO0M3",
},
{
name: "iTunes",
icon: <FaItunesNote />,
link:
"https://itunes.apple.com/fr/podcast/codeurs-en-seine/id1454150414?mt=2",
},
]
Example #25
| Source File: Footer.js From plataforma-sabia with MIT License | 4 votes |
|
Footer = ({ isAbout }) => (
<StyledFooter>
<FooterHeader>
<FooterHeaderContainer>
<FooterText>Siga o sabiá por onde ele for!</FooterText>
<FooterIconsList>
<FooterIconsListItem>
<a
href={socialMediaPages.facebook}
target="_blank"
rel="noopener noreferrer"
>
<FaFacebookF />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.twitter}
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.instagram}
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.linkedIn}
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.youtube}
target="_blank"
rel="noopener noreferrer"
>
<FaYoutube />
</a>
</FooterIconsListItem>
</FooterIconsList>
</FooterHeaderContainer>
</FooterHeader>
<SiteInfo>
<SiteInfoContainer>
<div>
<Link href={internalPages.home}>
<img src="/logo-footer.svg" alt="Logo da Plataforma Sabiá" />
</Link>
</div>
<div>
<SiteInfoListTitle>Plataforma</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.intro
: `${landingPage.url}${landingPage.intro}`
}
>
O que é?
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.about
: `${landingPage.url}${landingPage.about}`
}
>
Quem somos
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Funcionalidades</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Inventores
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para a Sociedade
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Financiadores
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Recursos</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={socialMediaPages.podcast}
target="_blank"
rel="noopener noreferrer"
>
Podcasts
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={socialMediaPages.courses}>Cursos</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={socialMediaPages.blog}
target="_blank"
rel="noopener noreferrer"
>
Blog
</Link>
</SiteInfoListItem>
{/* <SiteInfoListItem>
<Link href={internalPages.ideas}>Banco de Ideias</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={internalPages.announcements}>Banco de Editais</Link>
</SiteInfoListItem> */}
<SiteInfoListItem>
<Link href={internalPages.showcase}>Vitrines tecnológicas</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Contato</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.contact
: `${landingPage.url}${landingPage.contact}`
}
>
Fale conosco
</Link>
</SiteInfoListItem>
</ul>
</div>
</SiteInfoContainer>
</SiteInfo>
<SiteSocket>
<SiteSocketContainer>
<div>
<span>Orgulhosamente</span> desenvolvido pela equipe da
<span> Plataforma Sabiá</span> na{' '}
<span>UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO - UFERSA</span>.
</div>
<SiteSocketList>
<SiteSocketListItem>
<Link href={internalPages.privacyPolicy}>Política de Privacidade</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={internalPages.termsOfUse}>Termos e Condições</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={`${landingPage.url}${landingPage.contact}`}>Contato</Link>
</SiteSocketListItem>
</SiteSocketList>
</SiteSocketContainer>
</SiteSocket>
</StyledFooter>
)
Example #26
| Source File: Layout.jsx From Next.js-Mongodb-Authentication-App with MIT License | 4 votes |
|
export default function Layout({ children }) {
const [user, { mutate }] = useUser();
const [loading, isLoading] = useState(false);
const router = useRouter();
const handleLogout = async () => {
isLoading(true);
await fetch('/api/auth', {
method: 'DELETE',
});
// set the user state to null
mutate(null);
isLoading(false);
router.push('/')
};
return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</Head>
<header>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Nextjs Auth</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" href="/"><a style={{ color: '#949585' }}>Home</a></Link>
</li>
<li>
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">
About
</a>
</li>
</ul>
{user && <button className='btn btn-primary' onClick={handleLogout}>Logout</button>}
</div>
</div>
</nav>
</header>
<main className='d-flex justify-content-center align-items-center'>
<div className="container mx-auto my-3 h-100">
<div className="row">
<div className="col-sm-12">
{children}
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div className='row' style={{ flexDirection: 'column' }}>
<div className='col text-center'>
<img src="/Images/Me.jpg" width="200px" className="rounded mx-auto img-fluid" />
<h2 className='mt-3'>I am Tushar Saxena</h2>
</div>
<div className='col text-center'>
<div className="" style={{ fontSize: '2rem' }}>
<a href="https://github.com/tsaxena4k" target="_blank"><FaGithub /> </a>
<a href="https://www.facebook.com/tushar.saxena.56232/" target="_blank"><FaFacebook /> </a>
<a href="https://www.linkedin.com/in/tushar-saxena-94b742184/" target="_blank"><FaLinkedin /> </a>
<a href="https://www.instagram.com/tsaxena4k/" target="_blank"><FaInstagram /> </a>
</div>
<hr />
<div className="mt-3">
<p><strong>I was just doing Frontend Development a few months ago, was enjoying building personalised UI/UX templates with React and different styling options like materialize css, material UI ,Sass and what not.
Though I was aware that Frontend was just not enough for me I had to start with Backend any day now, but like everyone else struggled with motivation.
<br /><br />For me that day of motivation came in with a college project that a team of three has to work on.As a start I switched to <a href="https://nextjs.org/" target="_blank">Next.js</a> and that was really smooth,
then I worked with nodejs,building API,Mongodb and all that Backend stuff.<br />But I struggled putting all of these things together to build a Login~Signup Authentication for our project.I watched every
single video on youtube for the topic but failed to get things working.This was the start to my backend journey and it was quite what I thought it would be like.
<br /><br />After alot of research and all came to know about <a href="http://www.passportjs.org/">passport.js</a> and here we are with things working. Thanks to <a href="https://hoangvvo.com/" target="_blank">Hoang</a>,his blogs helped me alot and finally
I completed my first backend task.<br />I do realise after all of this that there might be people like me trying hard to make there first Authentication backend to work.
So I decided to put this simple working model up for those who are seeking hard for it.<br /><br />I hope it helped you and I know there are tons of bugs and incomplete parts in the code I'll be working on that,
to know more check out the <a href="https://github.com/tsaxena4k" target="_blank">github repository</a> for the same.</strong></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<style jsx>{`
.container{
height:85vh;
}
main{
min-height:85vh;
}
`}</style>
</>
);
}
Example #27
| Source File: Landing.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Landing() {
const { theme, drawerOpen } = useContext(ThemeContext);
const useStyles = makeStyles((t) => ({
resumeBtn: {
color: theme.primary,
borderRadius: '30px',
textTransform: 'inherit',
textDecoration: 'none',
width: '150px',
fontSize: '1rem',
fontWeight: '500',
height: '50px',
fontFamily: 'var(--primaryFont)',
border: `3px solid ${theme.primary}`,
transition: '100ms ease-out',
'&:hover': {
backgroundColor: theme.tertiary,
color: theme.secondary,
border: `3px solid ${theme.tertiary}`,
},
[t.breakpoints.down('sm')]: {
width: '180px',
},
},
contactBtn: {
backgroundColor: theme.primary,
color: theme.secondary,
borderRadius: '30px',
textTransform: 'inherit',
textDecoration: 'none',
width: '150px',
height: '50px',
fontSize: '1rem',
fontWeight: '500',
fontFamily: 'var(--primaryFont)',
border: `3px solid ${theme.primary}`,
transition: '100ms ease-out',
'&:hover': {
backgroundColor: theme.secondary,
color: theme.tertiary,
border: `3px solid ${theme.tertiary}`,
},
[t.breakpoints.down('sm')]: {
display: 'none',
},
},
}));
const classes = useStyles();
return (
<div className='landing'>
<div className='landing--container'>
<div
className='landing--container-left'
style={{ backgroundColor: theme.primary }}
>
<div className='lcl--content'>
{socialsData.linkedIn && (
<a
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
>
<FaLinkedin
className='landing--social'
style={{ color: theme.secondary }}
aria-label='LinkedIn'
/>
</a>
)}
{socialsData.github && (
<a
href={socialsData.github}
target='_blank'
rel='noreferrer'
>
<FaGithub
className='landing--social'
style={{ color: theme.secondary }}
aria-label='GitHub'
/>
</a>
)}
{socialsData.twitter && (
<a
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
>
<FaTwitter
className='landing--social'
style={{ color: theme.secondary }}
aria-label='Twitter'
/>
</a>
)}
{socialsData.youtube && (
<a
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
>
<FaYoutube
className='landing--social'
style={{ color: theme.secondary }}
aria-label='YouTube'
/>
</a>
)}
{socialsData.blogger && (
<a
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
>
<FaBlogger
className='landing--social'
style={{ color: theme.secondary }}
aria-label='Blogger'
/>
</a>
)}
</div>
</div>
<img
src={headerData.image}
alt=''
className='landing--img'
style={{
opacity: `${drawerOpen ? '0' : '1'}`,
borderColor: theme.secondary,
}}
/>
<div
className='landing--container-right'
style={{ backgroundColor: theme.secondary }}
>
<div
className='lcr--content'
style={{ color: theme.tertiary }}
>
<h6>{headerData.title}</h6>
<h1>{headerData.name}</h1>
<p>{headerData.desciption}</p>
<div className='lcr-buttonContainer'>
{headerData.resumePdf && (
<a
href={headerData.resumePdf}
download='resume'
target='_blank'
rel='noreferrer'
>
<Button className={classes.resumeBtn}>
Download CV
</Button>
</a>
)}
<NavLink
to='/#contacts'
smooth={true}
spy='true'
duration={2000}
>
<Button className={classes.contactBtn}>
Contact
</Button>
</NavLink>
</div>
</div>
</div>
</div>
</div>
);
}
Example #28
| Source File: social-list.js From ruhulamin.dev with BSD Zero Clause License | 4 votes |
|
SocialList = () => {
return (
<div className='py-3 sm:py-5 md:pt-6 md:pb-12 max-w-3xl'>
<ul
className='grid gap-8'
style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}
>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white bg-[#00AFF0] hover:text-gray-100'
href='https://join.skype.com/invite/ph5CQgIdcQC5'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-lightBlue-100 text-[#00AFF0] rounded-full p-3'>
<FaSkype />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>
Skype{' '}
<span className='text-gray-50 text-xs'>(ruhulamin3482)</span>
</h2>
Chat with me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-100 hover:border-gray-300 block text-white hover:text-gray-100 bg-[#1DA1F2]'
href='https://twitter.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-white text-[#1DA1F2] rounded-full p-3'>
<FaTwitter />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl'>Twitter</h2>
Tweet @ me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-purple-400'
href='mailto:[email protected]'
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-purple-100 text-purple-500 rounded-full p-3'>
<FaEnvelope />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Email</h2>
Send me an email →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-gray-500'
href='https://github.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-gray-100 text-gray-500 rounded-full p-3'>
<FaGithub />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>GitHub</h2>
Profile on GitHub →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 bg-pink-400'
href='https://dribbble.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-pink-100 text-pink-500 rounded-full p-3'>
<FaDribbble />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Dribbble</h2>
Profile on Dribbble →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl bg-[#0A66C2] border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 '
href='https://www.linkedin.com/in/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-blue-100 text-[#0A66C2] rounded-full p-3'>
<FaLinkedin />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>LinkedIn</h2>
Connect with me →
</div>
</div>
</a>
</li>
<li>
<a
className='p-6 border rounded-2xl bg-[#0676E8] border-gray-200 transition-all duration-200 hover:border-gray-300 block text-white hover:text-gray-100 '
href='https://www.facebook.com/developerruhul'
target="_blank" rel="noreferrer"
>
<div className='grid grid-flow-col auto-cols-max gap-x-3'>
<div className='text-3xl bg-blue-100 text-[#0676E8] rounded-full p-3'>
<FaFacebook />
</div>
<div className='flex flex-col justify-center font-bold'>
<h2 className='text-xl font-bold tracking-tight'>Facebook</h2>
Connect with me →
</div>
</div>
</a>
</li>
</ul>
</div>
);
}
Example #29
| Source File: index.js From codeursenseine.com with MIT License | 4 votes |
|
Organisers = ({ pageContext }) => {
const { organisers } = pageContext;
const socials = [
{ name: "twitter", icon: <FaTwitter /> },
{ name: "linkedin", icon: <FaLinkedin /> },
{ name: "github", icon: <FaGithub /> },
];
return (
<Layout theme="ces">
<OGImage path="/images/ces/social.jpg" />
<Seo title="Organisateurs" />
<Heading as="h1" mb={8}>
Organisateurs
</Heading>
<Stack spacing={6}>
<Heading size="lg">Associations</Heading>
<Text>
Codeurs en Seine est une association dont le but est la promotion et
le partage des pratiques et des nouveautés technologiques entre les
acteurs du développement informatique.
</Text>
<Text>
En plus de la conférence annuelle Codeurs en Seine, nous organisons
des meetups et des ateliers tout au long de l'année, sur Rouen et ses
environs.
</Text>
<Text>
Codeurs en Seine représente le Normandy Java User Group et Normandy
Agile User Group.
</Text>
<Text>
Elle est également une étape de l'
<A href="http://www.agiletour.org/">Agile Tour</A>.
</Text>
<Heading size="lg">Équipe</Heading>
<Text mb={8}>
Codeurs en Seine est propulsé par une équipe de bénévoles passionnés :
</Text>
<Grid templateColumns="repeat(auto-fit, minmax(6rem, 1fr))" gap={6}>
{organisers.map((organiser) => (
<Stack
alignItems="center"
key={organiser.childMdx.frontmatter.name}
>
<AspectRatio ratio={1} w="6em" maxW="100%">
<Image
fallbackSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
src={organiser.childMdx.frontmatter.image.publicURL}
alt={organiser.childMdx.frontmatter.name}
boxShadow="brand"
objectFit="cover"
borderRadius={4}
/>
</AspectRatio>
<Text textAlign="center" fontSize="sm">
{organiser.childMdx.frontmatter.name}
</Text>
<Flex flexWrap="wrap">
{socials.map(
(social) =>
organiser.childMdx.frontmatter[social.name] && (
<IconButton
key={social.name}
as="a"
target="_blank"
href={organiser.childMdx.frontmatter[social.name]}
aria-label={`${organiser.childMdx.frontmatter.name} ${social.name}`}
icon={social.icon}
variant="ghost"
colorScheme="brand"
size="sm"
d="inline-flex"
/>
)
)}
</Flex>
</Stack>
))}
</Grid>
</Stack>
</Layout>
);
}
