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>
<MdLocationOn className="mr-2" /> <div>
{props.profile.location} <MdLocationOn className="mr-2"/>
</div>
<div>
{props.profile.location}
</div>
</span> </span>
</li> </li>
) )
@@ -51,38 +55,50 @@ const Details = (props) => {
props.profile.company && ( props.profile.company && (
<li> <li>
<span> <span>
<FaBuilding className="mr-2" /> <div>
{props.profile.company} <FaBuilding className="mr-2"/>
</div>
<div>
{props.profile.company}
</div>
</span> </span>
</li> </li>
) )
} }
<li> <li>
<span> <span>
<AiFillGithub className="mr-2" /> <div>
<a <AiFillGithub className="mr-2"/>
href={`https://github.com/${config.github.username}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://github.com/${config.github.username}`}
> target="_blank"
{config.github.username} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.github.username}
</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>
<GrLinkedinOption className="mr-2" /> <div>
<a <GrLinkedinOption className="mr-2"/>
href={`https://www.linkedin.com/in/${config.social.linkedin}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://www.linkedin.com/in/${config.social.linkedin}`}
> target="_blank"
{config.social.linkedin} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.linkedin}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -91,15 +107,19 @@ const Details = (props) => {
typeof config.social.twitter !== 'undefined' && config.social.twitter && ( typeof config.social.twitter !== 'undefined' && config.social.twitter && (
<li> <li>
<span> <span>
<SiTwitter className="mr-2" /> <div>
<a <SiTwitter className="mr-2"/>
href={`https://twitter.com/${config.social.twitter}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://twitter.com/${config.social.twitter}`}
> target="_blank"
{config.social.twitter} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.twitter}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -108,15 +128,19 @@ const Details = (props) => {
typeof config.social.dribbble !== 'undefined' && config.social.dribbble && ( typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
<li> <li>
<span> <span>
<CgDribbble className="mr-2" /> <div>
<a <CgDribbble className="mr-2"/>
href={`https://dribbble.com/${config.social.dribbble}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://dribbble.com/${config.social.dribbble}`}
> target="_blank"
{config.social.dribbble} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.dribbble}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -125,15 +149,19 @@ const Details = (props) => {
typeof config.social.behance !== 'undefined' && config.social.behance && ( typeof config.social.behance !== 'undefined' && config.social.behance && (
<li> <li>
<span> <span>
<FaBehanceSquare className="mr-2" /> <div>
<a <FaBehanceSquare className="mr-2"/>
href={`https://www.behance.net/${config.social.behance}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://www.behance.net/${config.social.behance}`}
> target="_blank"
{config.social.behance} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.behance}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -142,15 +170,19 @@ const Details = (props) => {
typeof config.social.facebook !== 'undefined' && config.social.facebook && ( typeof config.social.facebook !== 'undefined' && config.social.facebook && (
<li> <li>
<span> <span>
<FaFacebook className="mr-2" /> <div>
<a <FaFacebook className="mr-2"/>
href={`https://www.facebook.com/${config.social.facebook}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://www.facebook.com/${config.social.facebook}`}
> target="_blank"
{config.social.facebook} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.facebook}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -159,15 +191,19 @@ const Details = (props) => {
typeof config.social.medium !== 'undefined' && config.social.medium && ( typeof config.social.medium !== 'undefined' && config.social.medium && (
<li> <li>
<span> <span>
<AiFillMediumSquare className="mr-2" /> <div>
<a <AiFillMediumSquare className="mr-2"/>
href={`https://medium.com/@${config.social.medium}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://medium.com/@${config.social.medium}`}
> target="_blank"
{config.social.medium} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.medium}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -176,15 +212,19 @@ const Details = (props) => {
typeof config.social.devto !== 'undefined' && config.social.devto && ( typeof config.social.devto !== 'undefined' && config.social.devto && (
<li> <li>
<span> <span>
<FaDev className="mr-2" /> <div>
<a <FaDev className="mr-2"/>
href={`https://dev.to/${config.social.devto}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`https://dev.to/${config.social.devto}`}
> target="_blank"
{config.social.devto} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.devto}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -193,15 +233,19 @@ const Details = (props) => {
typeof config.social.website !== 'undefined' && config.social.website && ( typeof config.social.website !== 'undefined' && config.social.website && (
<li> <li>
<span> <span>
<FaGlobe className="mr-2" /> <div>
<a <FaGlobe className="mr-2"/>
href={`${config.social.website}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`${config.social.website}`}
> target="_blank"
{config.social.website} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.website}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -210,14 +254,18 @@ const Details = (props) => {
typeof config.social.phone !== 'undefined' && config.social.phone && ( typeof config.social.phone !== 'undefined' && config.social.phone && (
<li> <li>
<span> <span>
<RiPhoneFill className="mr-2" /> <div>
<a <RiPhoneFill className="mr-2"/>
href={`tel:${config.social.phone}`} </div>
rel="noreferrer" <div>
className="text-base-content-important" <a
> href={`tel:${config.social.phone}`}
{config.social.phone} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.phone}
</a>
</div>
</span> </span>
</li> </li>
) )
@@ -226,15 +274,19 @@ const Details = (props) => {
typeof config.social.email !== 'undefined' && config.social.email && ( typeof config.social.email !== 'undefined' && config.social.email && (
<li> <li>
<span> <span>
<MdMail className="mr-2" /> <div>
<a <MdMail className="mr-2"/>
href={`mailto:${config.social.email}`} </div>
target="_blank" <div>
rel="noreferrer" <a
className="text-base-content-important" href={`mailto:${config.social.email}`}
> target="_blank"
{config.social.email} rel="noreferrer"
</a> className="text-base-content-important"
>
{config.social.email}
</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>
<GoPrimitiveDot className="mr-2 opacity-40"/> <div>
<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>
<GoPrimitiveDot className="mr-2 opacity-40"/> <div>
<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">