Update style
This commit is contained in:
MD. Ariful Alam
parent
3dc02f91c1
commit
154d1ebf99
@ -10,52 +10,49 @@ const AvatarCard = () => {
|
||||
|
||||
return (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<figure>
|
||||
{
|
||||
loading ? (
|
||||
skeleton({
|
||||
width: 'w-full',
|
||||
shape: '',
|
||||
style: {
|
||||
height: imageHeight
|
||||
}
|
||||
})
|
||||
) : (
|
||||
<LazyImage
|
||||
className="object-cover w-full opacity-90"
|
||||
src={profile.avatar ? profile.avatar : fallbackImage}
|
||||
alt={profile.name}
|
||||
style={{height: imageHeight}}
|
||||
height={imageHeight}
|
||||
placeholder={skeleton({
|
||||
width: 'w-full',
|
||||
shape: '',
|
||||
style: {
|
||||
height: imageHeight
|
||||
}
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</figure>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<div className="section-title">
|
||||
<h5 className="card-title">
|
||||
{
|
||||
loading ? (
|
||||
skeleton({width: 'w-3/6', height: 'h-8'})
|
||||
) : profile.name
|
||||
}
|
||||
</h5>
|
||||
</div>
|
||||
<span className="text-base-content text-opacity-40 text-justify">
|
||||
<div className="grid place-items-center py-8">
|
||||
<div class="avatar">
|
||||
<div class={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
|
||||
{
|
||||
loading ? (
|
||||
skeleton({width: 'w-48', height: 'h-4'})
|
||||
skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
shape: '',
|
||||
})
|
||||
) : (
|
||||
<LazyImage
|
||||
className="opacity-90"
|
||||
src={profile.avatar ? profile.avatar : fallbackImage}
|
||||
alt={profile.name}
|
||||
height={imageHeight}
|
||||
placeholder={
|
||||
skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-full',
|
||||
shape: '',
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mx-8">
|
||||
<div className="text-lg font-extrabold">
|
||||
{
|
||||
loading ? (
|
||||
skeleton({ width: 'w-48', height: 'h-8' })
|
||||
) : profile.name
|
||||
}
|
||||
</div>
|
||||
<div className="mt-3 text-sm text-base-content text-opacity-60">
|
||||
{
|
||||
loading ? (
|
||||
skeleton({ width: 'w-48', height: 'h-4' })
|
||||
) : profile.bio
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ const Blog = () => {
|
||||
const loading = useSelector(state => state.loading);
|
||||
|
||||
return (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<div className="section-title">
|
||||
|
||||
@ -29,7 +29,7 @@ const Details = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
{
|
||||
|
||||
@ -35,7 +35,7 @@ const Education = () => {
|
||||
<>
|
||||
{
|
||||
(typeof config.education !== 'undefined' && config.education.length !== 0) && (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
<li>
|
||||
|
||||
@ -35,7 +35,7 @@ const Experience = () => {
|
||||
<>
|
||||
{
|
||||
(typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
<li>
|
||||
|
||||
@ -13,7 +13,7 @@ const Project = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < LIMIT; index++) {
|
||||
array.push((
|
||||
<div className="card shadow-lg compact side bg-base-100" key={index}>
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center opacity-60">
|
||||
@ -23,10 +23,10 @@ const Project = () => {
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<span className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
<p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
|
||||
{skeleton({width: 'w-full', height: 'h-4'})}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<div className="flex flex-grow">
|
||||
@ -53,7 +53,7 @@ const Project = () => {
|
||||
|
||||
const renderProjects = () => {
|
||||
return repo.slice(0, LIMIT).map((item, index) => (
|
||||
<a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact side bg-base-100" key={index}>
|
||||
<a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center opacity-60">
|
||||
@ -96,7 +96,7 @@ const Project = () => {
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* <div className="col-span-2">
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
<li>
|
||||
|
||||
@ -22,7 +22,7 @@ const Skill = () => {
|
||||
<>
|
||||
{
|
||||
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="inline-flex gap-2 flex-wrap justify-center p-3">
|
||||
{
|
||||
|
||||
@ -16,8 +16,8 @@ const ThemeChanger = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card overflow-visible shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body p-3">
|
||||
<div className="card overflow-visible shadow-lg compact bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body mx-4">
|
||||
<div className="flex-1">
|
||||
<div className="section-title">
|
||||
<h5 className="card-title">
|
||||
@ -31,6 +31,7 @@ const ThemeChanger = () => {
|
||||
loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10' }) : (
|
||||
<div title="Change Theme" className="dropdown dropdown-end">
|
||||
<div tabIndex={0} className="btn btn-ghost m-1 normal-case opacity-50">
|
||||
<svg class="inline-block w-5 h-5 stroke-current md:mr-2" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"></path><circle cx="144" cy="208" r="32"></circle><circle cx="152" cy="311" r="32"></circle><circle cx="224" cy="144" r="32"></circle><circle cx="256" cy="367" r="48"></circle><circle cx="328" cy="144" r="32"></circle></svg>
|
||||
<span className="hidden md:inline">
|
||||
Change Theme
|
||||
</span>
|
||||
@ -43,13 +44,14 @@ const ThemeChanger = () => {
|
||||
{
|
||||
config.themeConfig.themes.map((item, index) => (
|
||||
<li key={index}>
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => changeTheme(e, item)}
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => changeTheme(e, item)}
|
||||
className={`${theme === item ? 'active' : ''}`}
|
||||
>
|
||||
<span className="text-opacity-60 capitalize flex items-center">
|
||||
<IoColorPaletteOutline className="inline-block w-4 h-4 stroke-current mr-2"/> {item === config.themeConfig.default ? 'Default' : item}
|
||||
<span className="opacity-60 capitalize flex items-center">
|
||||
<svg className="inline-block w-4 h-4 stroke-current mr-2" stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.20348 2.00378C9.46407 2.00378 10.5067 3.10742 10.6786 4.54241L19.1622 13.0259L11.384 20.8041C10.2124 21.9757 8.31291 21.9757 7.14134 20.8041L2.8987 16.5615C1.72713 15.3899 1.72713 13.4904 2.8987 12.3188L5.70348 9.51404V4.96099C5.70348 3.32777 6.82277 2.00378 8.20348 2.00378ZM8.70348 4.96099V6.51404L7.70348 7.51404V4.96099C7.70348 4.63435 7.92734 4.36955 8.20348 4.36955C8.47963 4.36955 8.70348 4.63435 8.70348 4.96099ZM8.70348 10.8754V9.34247L4.31291 13.733C3.92239 14.1236 3.92239 14.7567 4.31291 15.1473L8.55555 19.3899C8.94608 19.7804 9.57924 19.7804 9.96977 19.3899L16.3337 13.0259L10.7035 7.39569V10.8754C10.7035 10.9184 10.7027 10.9612 10.7012 11.0038H8.69168C8.69941 10.9625 8.70348 10.9195 8.70348 10.8754Z" fill="currentColor"></path><path d="M16.8586 16.8749C15.687 18.0465 15.687 19.946 16.8586 21.1175C18.0302 22.2891 19.9297 22.2891 21.1013 21.1175C22.2728 19.946 22.2728 18.0465 21.1013 16.8749L18.9799 14.7536L16.8586 16.8749Z" fill="currentColor"></path></svg>
|
||||
{item === config.themeConfig.default ? 'Default' : item}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
githubUsername: 'tailwindlabs', // required
|
||||
githubUsername: 'arifszn', // required
|
||||
email: 'contact@arifszn.com', // optional
|
||||
linkedinUsername: 'ariful-alam', // optional
|
||||
dribbbleUsername: '', // optional
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user