ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade tailwind version

Browse Source
This commit is contained in:
Ariful Alam 2025-07-06 16:03:52 +06:00
parent 4d7571c346
commit 49db036c89
17 changed files with 701 additions and 861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1436
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -27,14 +27,14 @@
}, },
"devDependencies": { "devDependencies": {
"@arifszn/blog-js": "^2.0.6", "@arifszn/blog-js": "^2.0.6",
"@tailwindcss/postcss": "^4.1.11",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.3.1", "@typescript-eslint/parser": "^7.3.1",
"@vitejs/plugin-react": "^4.4.1", "@vitejs/plugin-react": "^4.4.1",
"autoprefixer": "^10.4.20",
"axios": "^1.10.0", "axios": "^1.10.0",
"daisyui": "^4.11.1", "daisyui": "^5.0.43",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
@ -46,7 +46,7 @@
"react-helmet-async": "^2.0.5", "react-helmet-async": "^2.0.5",
"react-hotjar": "^6.3.1", "react-hotjar": "^6.3.1",
"react-icons": "^5.4.0", "react-icons": "^5.4.0",
"tailwindcss": "^3.4.3", "tailwindcss": "^4.1.11",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vail": "^1.0.3", "vail": "^1.0.3",
"vite": "^7.0.2", "vite": "^7.0.2",

3
postcss.config.js
View File

@ -1,6 +1,5 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {},
}, },
}; };

40
src/assets/index.css
View File

@ -1,6 +1,40 @@
@tailwind base; @import 'tailwindcss';
@tailwind components; @plugin "daisyui" {
@tailwind utilities; themes:
light,
dark,
'cupcake',
'bumblebee',
'emerald',
'corporate',
'synthwave',
'retro',
'cyberpunk',
'valentine',
'halloween',
'garden',
'forest',
'aqua',
'lofi',
'pastel',
'fantasy',
'wireframe',
'black',
'luxury',
'dracula',
'cmyk',
'autumn',
'business',
'acid',
'lemonade',
'night',
'coffee',
'winter',
'dim',
'nord',
'sunset',
'procyon';
}
* { * {
scrollbar-width: thin; scrollbar-width: thin;

4
src/components/avatar-card/index.tsx
View File

@ -25,7 +25,7 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
resumeFileUrl, resumeFileUrl,
}): JSX.Element => { }): JSX.Element => {
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="grid place-items-center py-8"> <div className="grid place-items-center py-8">
{loading || !profile ? ( {loading || !profile ? (
<div className="avatar opacity-90"> <div className="avatar opacity-90">
@ -42,7 +42,7 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
<div <div
className={`mb-8 rounded-full w-32 h-32 ${ className={`mb-8 rounded-full w-32 h-32 ${
avatarRing avatarRing
? 'ring ring-primary ring-offset-base-100 ring-offset-2' ? 'ring-3 ring-primary ring-offset-base-100 ring-offset-2'
: '' : ''
}`} }`}
> >

8
src/components/blog-card/index.tsx
View File

@ -38,7 +38,7 @@ const BlogCard = ({
const array = []; const array = [];
for (let index = 0; index < blog.limit; index++) { for (let index = 0; index < blog.limit; index++) {
array.push( array.push(
<div className="card shadow-lg compact bg-base-100" key={index}> <div className="card shadow-lg card-sm bg-base-100" key={index}>
<div className="p-8 h-full w-full"> <div className="p-8 h-full w-full">
<div className="flex items-center flex-col md:flex-row"> <div className="flex items-center flex-col md:flex-row">
<div className="avatar mb-5 md:mb-0"> <div className="avatar mb-5 md:mb-0">
@ -95,7 +95,7 @@ const BlogCard = ({
return articles && articles.length ? ( return articles && articles.length ? (
articles.slice(0, blog.limit).map((article, index) => ( articles.slice(0, blog.limit).map((article, index) => (
<a <a
className="card shadow-lg compact bg-base-100 cursor-pointer" className="card shadow-lg card-sm bg-base-100 cursor-pointer"
key={index} key={index}
href={article.link} href={article.link}
onClick={(e) => { onClick={(e) => {
@ -175,9 +175,9 @@ const BlogCard = ({
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div className="col-span-2"> <div className="col-span-2">
<div <div
className={`card compact bg-base-100 ${ className={`card card-sm bg-base-100 ${
loading || (articles && articles.length) loading || (articles && articles.length)
? 'shadow bg-opacity-40' ? 'shadow-sm bg-opacity-40'
: 'shadow-lg' : 'shadow-lg'
}`} }`}
> >

2
src/components/certification-card/index.tsx
View File

@ -59,7 +59,7 @@ const CertificationCard = ({
}; };
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="mx-3"> <div className="mx-3">
<h5 className="card-title"> <h5 className="card-title">

10
src/components/details-card/index.tsx
View File

@ -66,12 +66,12 @@ const ListItem: React.FC<{
}> = ({ icon, title, value, link, skeleton = false }) => { }> = ({ icon, title, value, link, skeleton = false }) => {
return ( return (
<div className="flex justify-start py-2 px-1 items-center"> <div className="flex justify-start py-2 px-1 items-center">
<div className="flex-grow font-medium gap-2 flex items-center my-1"> <div className="grow font-medium gap-2 flex items-center my-1">
{icon} {title} {icon} {title}
</div> </div>
<div <div
className={`${ className={`${
skeleton ? 'flex-grow' : '' skeleton ? 'grow' : ''
} text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`} } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
style={{ style={{
wordBreak: 'break-word', wordBreak: 'break-word',
@ -124,12 +124,12 @@ const OrganizationItem: React.FC<{
return ( return (
<div className="flex justify-start py-2 px-1 items-center"> <div className="flex justify-start py-2 px-1 items-center">
<div className="flex-grow font-medium gap-2 flex items-center my-1"> <div className="grow font-medium gap-2 flex items-center my-1">
{icon} {title} {icon} {title}
</div> </div>
<div <div
className={`${ className={`${
skeleton ? 'flex-grow' : '' skeleton ? 'grow' : ''
} text-sm font-normal text-right mr-2 ml-3 space-x-2 ${link ? 'truncate' : ''}`} } text-sm font-normal text-right mr-2 ml-3 space-x-2 ${link ? 'truncate' : ''}`}
style={{ style={{
wordBreak: 'break-word', wordBreak: 'break-word',
@ -169,7 +169,7 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
}; };
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="text-base-content text-opacity-60"> <div className="text-base-content text-opacity-60">
{loading || !profile ? ( {loading || !profile ? (

2
src/components/education-card/index.tsx
View File

@ -53,7 +53,7 @@ const EducationCard = ({
}; };
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="mx-3"> <div className="mx-3">
<h5 className="card-title"> <h5 className="card-title">

2
src/components/experience-card/index.tsx
View File

@ -58,7 +58,7 @@ const ExperienceCard = ({
return array; return array;
}; };
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="mx-3"> <div className="mx-3">
<h5 className="card-title"> <h5 className="card-title">

6
src/components/external-project-card/index.tsx
View File

@ -18,7 +18,7 @@ const ExternalProjectCard = ({
const array = []; const array = [];
for (let index = 0; index < externalProjects.length; index++) { for (let index = 0; index < externalProjects.length; index++) {
array.push( array.push(
<div className="card shadow-lg compact bg-base-100" key={index}> <div className="card shadow-lg card-sm bg-base-100" key={index}>
<div className="p-8 h-full w-full"> <div className="p-8 h-full w-full">
<div className="flex items-center flex-col"> <div className="flex items-center flex-col">
<div className="w-full"> <div className="w-full">
@ -69,7 +69,7 @@ const ExternalProjectCard = ({
const renderExternalProjects = () => { const renderExternalProjects = () => {
return externalProjects.map((item, index) => ( return externalProjects.map((item, index) => (
<a <a
className="card shadow-lg compact bg-base-100 cursor-pointer" className="card shadow-lg card-sm bg-base-100 cursor-pointer"
key={index} key={index}
href={item.link} href={item.link}
onClick={(e) => { onClick={(e) => {
@ -128,7 +128,7 @@ const ExternalProjectCard = ({
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div className="col-span-2"> <div className="col-span-2">
<div className="card compact bg-base-100 shadow bg-opacity-40"> <div className="card card-sm bg-base-100 shadow-sm bg-opacity-40">
<div className="card-body"> <div className="card-body">
<div className="mx-3 flex items-center justify-between mb-2"> <div className="mx-3 flex items-center justify-between mb-2">
<h5 className="card-title"> <h5 className="card-title">

10
src/components/github-project-card/index.tsx
View File

@ -27,7 +27,7 @@ const GithubProjectCard = ({
const array = []; const array = [];
for (let index = 0; index < limit; index++) { for (let index = 0; index < limit; index++) {
array.push( array.push(
<div className="card shadow-lg compact bg-base-100" key={index}> <div className="card shadow-lg card-sm bg-base-100" key={index}>
<div className="flex justify-between flex-col p-8 h-full w-full"> <div className="flex justify-between flex-col p-8 h-full w-full">
<div> <div>
<div className="flex items-center"> <div className="flex items-center">
@ -51,7 +51,7 @@ const GithubProjectCard = ({
</div> </div>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="flex flex-grow"> <div className="flex grow">
<span className="mr-3 flex items-center"> <span className="mr-3 flex items-center">
{skeleton({ widthCls: 'w-12', heightCls: 'h-4' })} {skeleton({ widthCls: 'w-12', heightCls: 'h-4' })}
</span> </span>
@ -76,7 +76,7 @@ const GithubProjectCard = ({
const renderProjects = () => { const renderProjects = () => {
return githubProjects.map((item, index) => ( return githubProjects.map((item, index) => (
<a <a
className="card shadow-lg compact bg-base-100 cursor-pointer" className="card shadow-lg card-sm bg-base-100 cursor-pointer"
href={item.html_url} href={item.html_url}
key={index} key={index}
onClick={(e) => { onClick={(e) => {
@ -108,7 +108,7 @@ const GithubProjectCard = ({
</p> </p>
</div> </div>
<div className="flex justify-between text-sm text-base-content text-opacity-60 truncate"> <div className="flex justify-between text-sm text-base-content text-opacity-60 truncate">
<div className="flex flex-grow"> <div className="flex grow">
<span className="mr-3 flex items-center"> <span className="mr-3 flex items-center">
<AiOutlineStar className="mr-0.5" /> <AiOutlineStar className="mr-0.5" />
<span>{item.stargazers_count}</span> <span>{item.stargazers_count}</span>
@ -138,7 +138,7 @@ const GithubProjectCard = ({
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div className="col-span-2"> <div className="col-span-2">
<div className="card compact bg-base-100 shadow bg-opacity-40"> <div className="card card-sm bg-base-100 shadow-sm bg-opacity-40">
<div className="card-body"> <div className="card-body">
<div className="mx-3 flex items-center justify-between mb-2"> <div className="mx-3 flex items-center justify-between mb-2">
<h5 className="card-title"> <h5 className="card-title">

2
src/components/gitprofile.tsx
View File

@ -288,7 +288,7 @@ const GitProfile = ({ config }: { config: Config }) => {
<footer <footer
className={`p-4 footer ${BG_COLOR} text-base-content footer-center`} className={`p-4 footer ${BG_COLOR} text-base-content footer-center`}
> >
<div className="card compact bg-base-100 shadow"> <div className="card card-sm bg-base-100 shadow-sm">
<Footer content={sanitizedConfig.footer} loading={loading} /> <Footer content={sanitizedConfig.footer} loading={loading} />
</div> </div>
</footer> </footer>

6
src/components/publication-card/index.tsx
View File

@ -13,7 +13,7 @@ const PublicationCard = ({
const array = []; const array = [];
for (let index = 0; index < publications.length; index++) { for (let index = 0; index < publications.length; index++) {
array.push( array.push(
<div className="card shadow-lg compact bg-base-100" key={index}> <div className="card shadow-lg card-sm bg-base-100" key={index}>
<div className="p-8 h-full w-full"> <div className="p-8 h-full w-full">
<div className="flex items-center flex-col"> <div className="flex items-center flex-col">
<div className="w-full"> <div className="w-full">
@ -76,7 +76,7 @@ const PublicationCard = ({
const renderPublications = () => { const renderPublications = () => {
return publications.map((item, index) => ( return publications.map((item, index) => (
<a <a
className="card shadow-lg compact bg-base-100 cursor-pointer" className="card shadow-lg card-sm bg-base-100 cursor-pointer"
key={index} key={index}
href={item.link} href={item.link}
target="_blank" target="_blank"
@ -122,7 +122,7 @@ const PublicationCard = ({
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div className="col-span-2"> <div className="col-span-2">
<div className="card compact bg-base-100 shadow bg-opacity-40"> <div className="card card-sm bg-base-100 shadow-sm bg-opacity-40">
<div className="card-body"> <div className="card-body">
<div className="mx-3 flex items-center justify-between mb-2"> <div className="mx-3 flex items-center justify-between mb-2">
<h5 className="card-title"> <h5 className="card-title">

2
src/components/skill-card/index.tsx
View File

@ -21,7 +21,7 @@ const SkillCard = ({
}; };
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg card-sm bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="mx-3"> <div className="mx-3">
<h5 className="card-title"> <h5 className="card-title">

6
src/components/theme-changer/index.tsx
View File

@ -40,7 +40,7 @@ const ThemeChanger = ({
}; };
return ( return (
<div className="card overflow-visible shadow-lg compact bg-base-100"> <div className="card overflow-visible shadow-lg card-sm bg-base-100">
<div className="flex-row items-center space-x-4 flex pl-6 pr-2 py-4"> <div className="flex-row items-center space-x-4 flex pl-6 pr-2 py-4">
<div className="flex-1"> <div className="flex-1">
<h5 className="card-title"> <h5 className="card-title">
@ -54,7 +54,7 @@ const ThemeChanger = ({
<span className="text-base-content opacity-70">Theme</span> <span className="text-base-content opacity-70">Theme</span>
)} )}
</h5> </h5>
<span className="text-base-content text-opacity-40 capitalize text-sm"> <span className="text-base-content/50 capitalize text-sm">
{loading {loading
? skeleton({ widthCls: 'w-16', heightCls: 'h-5' }) ? skeleton({ widthCls: 'w-16', heightCls: 'h-5' })
: theme === themeConfig.defaultTheme : theme === themeConfig.defaultTheme
@ -89,7 +89,7 @@ const ThemeChanger = ({
tabIndex={0} tabIndex={0}
className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content z-10" className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content z-10"
> >
<ul className="p-4 menu compact"> <ul className="p-4 menu menu-sm">
{[ {[
themeConfig.defaultTheme, themeConfig.defaultTheme,
...themeConfig.themes.filter( ...themeConfig.themes.filter(

17
tailwind.config.js
View File

@ -1,17 +0,0 @@
import CONFIG from './gitprofile.config';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
daisyui: {
logs: false,
themes: [
...CONFIG.themeConfig.themes,
{ procyon: CONFIG.themeConfig.customTheme },
],
},
};