Fix icon placement for large text

This commit is contained in:
MD. Ariful Alam
2021-09-19 17:47:21 +06:00
parent 8f167cc940
commit 6477cceb86
4 changed files with 161 additions and 105 deletions

View File

@@ -141,7 +141,7 @@ const Blog = () => {
{ {
article.categories.map((category, index2) => ( article.categories.map((category, index2) => (
<div key={index2} className="flex text-sm mr-3 items-center opacity-50 font-bold font-mono"> <div key={index2} className="flex text-sm mr-3 items-center opacity-50 font-bold font-mono">
<CgHashtag /> <span><CgHashtag /></span>
<span>{category}</span> <span>{category}</span>
</div> </div>
)) ))

View File

@@ -41,8 +41,12 @@ const Details = (props) => {
props.profile.location && ( props.profile.location && (
<li> <li>
<span> <span>
<div>
<MdLocationOn className="mr-2"/> <MdLocationOn className="mr-2"/>
</div>
<div>
{props.profile.location} {props.profile.location}
</div>
</span> </span>
</li> </li>
) )
@@ -51,15 +55,22 @@ const Details = (props) => {
props.profile.company && ( props.profile.company && (
<li> <li>
<span> <span>
<div>
<FaBuilding className="mr-2"/> <FaBuilding className="mr-2"/>
</div>
<div>
{props.profile.company} {props.profile.company}
</div>
</span> </span>
</li> </li>
) )
} }
<li> <li>
<span> <span>
<div>
<AiFillGithub className="mr-2"/> <AiFillGithub className="mr-2"/>
</div>
<div>
<a <a
href={`https://github.com/${config.github.username}`} href={`https://github.com/${config.github.username}`}
target="_blank" target="_blank"
@@ -68,13 +79,17 @@ const Details = (props) => {
> >
{config.github.username} {config.github.username}
</a> </a>
</div>
</span> </span>
</li> </li>
{ {
typeof config.social.linkedin !== 'undefined' && config.social.linkedin && ( typeof config.social.linkedin !== 'undefined' && config.social.linkedin && (
<li> <li>
<span> <span>
<div>
<GrLinkedinOption className="mr-2"/> <GrLinkedinOption className="mr-2"/>
</div>
<div>
<a <a
href={`https://www.linkedin.com/in/${config.social.linkedin}`} href={`https://www.linkedin.com/in/${config.social.linkedin}`}
target="_blank" target="_blank"
@@ -83,6 +98,7 @@ const Details = (props) => {
> >
{config.social.linkedin} {config.social.linkedin}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -91,7 +107,10 @@ const Details = (props) => {
typeof config.social.twitter !== 'undefined' && config.social.twitter && ( typeof config.social.twitter !== 'undefined' && config.social.twitter && (
<li> <li>
<span> <span>
<div>
<SiTwitter className="mr-2"/> <SiTwitter className="mr-2"/>
</div>
<div>
<a <a
href={`https://twitter.com/${config.social.twitter}`} href={`https://twitter.com/${config.social.twitter}`}
target="_blank" target="_blank"
@@ -100,6 +119,7 @@ const Details = (props) => {
> >
{config.social.twitter} {config.social.twitter}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -108,7 +128,10 @@ const Details = (props) => {
typeof config.social.dribbble !== 'undefined' && config.social.dribbble && ( typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
<li> <li>
<span> <span>
<div>
<CgDribbble className="mr-2"/> <CgDribbble className="mr-2"/>
</div>
<div>
<a <a
href={`https://dribbble.com/${config.social.dribbble}`} href={`https://dribbble.com/${config.social.dribbble}`}
target="_blank" target="_blank"
@@ -117,6 +140,7 @@ const Details = (props) => {
> >
{config.social.dribbble} {config.social.dribbble}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -125,7 +149,10 @@ const Details = (props) => {
typeof config.social.behance !== 'undefined' && config.social.behance && ( typeof config.social.behance !== 'undefined' && config.social.behance && (
<li> <li>
<span> <span>
<div>
<FaBehanceSquare className="mr-2"/> <FaBehanceSquare className="mr-2"/>
</div>
<div>
<a <a
href={`https://www.behance.net/${config.social.behance}`} href={`https://www.behance.net/${config.social.behance}`}
target="_blank" target="_blank"
@@ -134,6 +161,7 @@ const Details = (props) => {
> >
{config.social.behance} {config.social.behance}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -142,7 +170,10 @@ const Details = (props) => {
typeof config.social.facebook !== 'undefined' && config.social.facebook && ( typeof config.social.facebook !== 'undefined' && config.social.facebook && (
<li> <li>
<span> <span>
<div>
<FaFacebook className="mr-2"/> <FaFacebook className="mr-2"/>
</div>
<div>
<a <a
href={`https://www.facebook.com/${config.social.facebook}`} href={`https://www.facebook.com/${config.social.facebook}`}
target="_blank" target="_blank"
@@ -151,6 +182,7 @@ const Details = (props) => {
> >
{config.social.facebook} {config.social.facebook}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -159,7 +191,10 @@ const Details = (props) => {
typeof config.social.medium !== 'undefined' && config.social.medium && ( typeof config.social.medium !== 'undefined' && config.social.medium && (
<li> <li>
<span> <span>
<div>
<AiFillMediumSquare className="mr-2"/> <AiFillMediumSquare className="mr-2"/>
</div>
<div>
<a <a
href={`https://medium.com/@${config.social.medium}`} href={`https://medium.com/@${config.social.medium}`}
target="_blank" target="_blank"
@@ -168,6 +203,7 @@ const Details = (props) => {
> >
{config.social.medium} {config.social.medium}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -176,7 +212,10 @@ const Details = (props) => {
typeof config.social.devto !== 'undefined' && config.social.devto && ( typeof config.social.devto !== 'undefined' && config.social.devto && (
<li> <li>
<span> <span>
<div>
<FaDev className="mr-2"/> <FaDev className="mr-2"/>
</div>
<div>
<a <a
href={`https://dev.to/${config.social.devto}`} href={`https://dev.to/${config.social.devto}`}
target="_blank" target="_blank"
@@ -185,6 +224,7 @@ const Details = (props) => {
> >
{config.social.devto} {config.social.devto}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -193,7 +233,10 @@ const Details = (props) => {
typeof config.social.website !== 'undefined' && config.social.website && ( typeof config.social.website !== 'undefined' && config.social.website && (
<li> <li>
<span> <span>
<div>
<FaGlobe className="mr-2"/> <FaGlobe className="mr-2"/>
</div>
<div>
<a <a
href={`${config.social.website}`} href={`${config.social.website}`}
target="_blank" target="_blank"
@@ -202,6 +245,7 @@ const Details = (props) => {
> >
{config.social.website} {config.social.website}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -210,7 +254,10 @@ const Details = (props) => {
typeof config.social.phone !== 'undefined' && config.social.phone && ( typeof config.social.phone !== 'undefined' && config.social.phone && (
<li> <li>
<span> <span>
<div>
<RiPhoneFill className="mr-2"/> <RiPhoneFill className="mr-2"/>
</div>
<div>
<a <a
href={`tel:${config.social.phone}`} href={`tel:${config.social.phone}`}
rel="noreferrer" rel="noreferrer"
@@ -218,6 +265,7 @@ const Details = (props) => {
> >
{config.social.phone} {config.social.phone}
</a> </a>
</div>
</span> </span>
</li> </li>
) )
@@ -226,7 +274,10 @@ const Details = (props) => {
typeof config.social.email !== 'undefined' && config.social.email && ( typeof config.social.email !== 'undefined' && config.social.email && (
<li> <li>
<span> <span>
<div>
<MdMail className="mr-2"/> <MdMail className="mr-2"/>
</div>
<div>
<a <a
href={`mailto:${config.social.email}`} href={`mailto:${config.social.email}`}
target="_blank" target="_blank"
@@ -235,6 +286,7 @@ const Details = (props) => {
> >
{config.social.email} {config.social.email}
</a> </a>
</div>
</span> </span>
</li> </li>
) )

View File

@@ -58,7 +58,9 @@ const Education = () => {
config.education.map((item, index) => ( config.education.map((item, index) => (
<li key={index}> <li key={index}>
<span> <span>
<div>
<GoPrimitiveDot className="mr-2 opacity-40"/> <GoPrimitiveDot className="mr-2 opacity-40"/>
</div>
<div> <div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium opacity-70"> <div className="font-medium opacity-70">

View File

@@ -58,7 +58,9 @@ const Experience = () => {
config.experiences.map((experience, index) => ( config.experiences.map((experience, index) => (
<li key={index}> <li key={index}>
<span> <span>
<div>
<GoPrimitiveDot className="mr-2 opacity-40"/> <GoPrimitiveDot className="mr-2 opacity-40"/>
</div>
<div> <div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium opacity-70"> <div className="font-medium opacity-70">