diff --git a/README.md b/README.md index af1706e..d9d98b3 100644 --- a/README.md +++ b/README.md @@ -150,6 +150,8 @@ As this is a Vite project, you can also host your website to Netlify, Vercel, He All the magic happens in the file `gitprofile.config.ts`. Open it and modify it according to your preference. +You can leave most of the sections empty if you don't want to display them on your portfolio. + ```ts // gitprofile.config.ts @@ -216,7 +218,10 @@ const CONFIG = { researchGate: '', facebook: '', instagram: '', + reddit: '', + threads: '', youtube: '', // example: 'pewdiepie' + udemy: '', dribbble: '', behance: '', medium: 'arifszn', @@ -289,13 +294,22 @@ const CONFIG = { publications: [ { title: 'Publication Title', - conferenceName: 'Conference Name', + conferenceName: '', journalName: 'Journal Name', authors: 'John Doe, Jane Smith', link: 'https://example.com', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', }, + { + title: 'Publication Title', + conferenceName: 'Conference Name', + journalName: '', + authors: 'John Doe, Jane Smith', + link: 'https://example.com', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', + }, ], // Display articles from your medium or dev account. (Optional) blog: { @@ -413,7 +427,17 @@ You can create your own custom theme by modifying these values. Theme `procyon` ```ts // gitprofile.config.ts const CONFIG = { - // ... + /** + * Defines the custom theme colors and styles for the application. + * The theme includes the following properties: + * - `primary`: The primary color used throughout the application. + * - `secondary`: The secondary color used for accents and highlights. + * - `accent`: The accent color used for special elements. + * - `neutral`: The neutral color used for backgrounds and text. + * - `base-100`: The base background color. + * - `--rounded-box`: The border radius for boxes and containers. + * - `--rounded-btn`: The border radius for buttons. + */ themeConfig: { customTheme: { primary: '#fc055b', @@ -424,7 +448,6 @@ const CONFIG = { '--rounded-box': '3rem', '--rounded-btn': '3rem', }, - // ... }, }; ``` @@ -438,7 +461,7 @@ const CONFIG = { const CONFIG = { // ... googleAnalytics: { - id: '', + id: 'G-XXXXXXXXX', }, }; ``` @@ -488,7 +511,7 @@ Your avatar and bio will be fetched from GitHub automatically. ### Social Links -You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, ResearchGate, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email. +You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, ResearchGate, Facebook, Instagram, Reddit, Threads, YouTube, Udemy, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email. ```ts // gitprofile.config.ts @@ -501,7 +524,10 @@ const CONFIG = { researchGate: '', facebook: '', instagram: '', + reddit: '', + threads: '', youtube: '', + udemy: '', dribbble: '', behance: '', medium: '', diff --git a/gitprofile.config.ts b/gitprofile.config.ts index d66950d..a119f6b 100644 --- a/gitprofile.config.ts +++ b/gitprofile.config.ts @@ -63,7 +63,10 @@ const CONFIG = { researchGate: '', facebook: '', instagram: '', + reddit: '', + threads: '', youtube: '', // example: 'pewdiepie' + udemy: '', dribbble: '', behance: '', medium: 'arifszn', diff --git a/global.d.ts b/global.d.ts index bff0e6d..7809a68 100644 --- a/global.d.ts +++ b/global.d.ts @@ -137,11 +137,26 @@ interface Social { */ instagram?: string; + /** + * Reddit + */ + reddit?: string; + + /** + * Threads + */ + threads?: string; + /** * YouTube */ youtube?: string; + /** + * Udemy + */ + udemy?: string; + /** * Dribbble */ diff --git a/src/components/details-card/index.tsx b/src/components/details-card/index.tsx index b8c2a9c..2525bfc 100644 --- a/src/components/details-card/index.tsx +++ b/src/components/details-card/index.tsx @@ -1,32 +1,34 @@ -import { MdLocationOn } from 'react-icons/md'; +import { Fragment } from 'react'; import { AiFillGithub, AiFillInstagram, AiFillMediumSquare, } from 'react-icons/ai'; -import { SiTwitter, SiResearchgate } from 'react-icons/si'; import { CgDribbble } from 'react-icons/cg'; -import { RiPhoneFill, RiMailFill } from 'react-icons/ri'; -import { Fragment } from 'react'; import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe, - FaSkype, + FaLinkedin, FaMastodon, + FaReddit, + FaSkype, FaStackOverflow, FaTelegram, - FaLinkedin, FaYoutube, } from 'react-icons/fa'; -import { skeleton } from '../../utils'; +import { FaSquareThreads } from 'react-icons/fa6'; +import { MdLocationOn } from 'react-icons/md'; +import { RiMailFill, RiPhoneFill } from 'react-icons/ri'; +import { SiResearchgate, SiTwitter, SiUdemy } from 'react-icons/si'; import { Profile } from '../../interfaces/profile'; import { SanitizedGithub, SanitizedSocial, } from '../../interfaces/sanitized-config'; +import { skeleton } from '../../utils'; type Props = { profile: Profile | null; @@ -211,6 +213,22 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => { link={`https://www.instagram.com/${social.instagram}`} /> )} + {social?.reddit && ( + } + title="Reddit:" + value={social.reddit} + link={`https://www.reddit.com/user/${social.reddit}`} + /> + )} + {social?.threads && ( + } + title="Threads:" + value={social.threads} + link={`https://www.threads.net/@${social.threads.replace('@', '')}`} + /> + )} {social?.youtube && ( } @@ -219,6 +237,14 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => { link={`https://www.youtube.com/@${social.youtube}`} /> )} + {social?.udemy && ( + } + title="Udemy:" + value={social.udemy} + link={`https://www.udemy.com/user/${social.udemy}`} + /> + )} {social?.medium && ( } diff --git a/src/interfaces/sanitized-config.tsx b/src/interfaces/sanitized-config.tsx index 4f207df..10d62dd 100644 --- a/src/interfaces/sanitized-config.tsx +++ b/src/interfaces/sanitized-config.tsx @@ -49,7 +49,10 @@ export interface SanitizedSocial { researchGate?: string; facebook?: string; instagram?: string; + reddit?: string; + threads?: string; youtube?: string; + udemy?: string; dribbble?: string; behance?: string; medium?: string; diff --git a/src/utils/index.tsx b/src/utils/index.tsx index 0e8da7f..d63f21f 100644 --- a/src/utils/index.tsx +++ b/src/utils/index.tsx @@ -1,13 +1,13 @@ +import { hotjar } from 'react-hotjar'; import { LOCAL_STORAGE_KEY_NAME } from '../constants'; import { DEFAULT_CUSTOM_THEME } from '../constants/default-custom-theme'; import { DEFAULT_THEMES } from '../constants/default-themes'; +import colors from '../data/colors.json'; import { SanitizedConfig, SanitizedHotjar, SanitizedThemeConfig, } from '../interfaces/sanitized-config'; -import { hotjar } from 'react-hotjar'; -import colors from '../data/colors.json'; export const isDarkishTheme = (appliedTheme: string): boolean => { return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes( @@ -66,7 +66,10 @@ export const getSanitizedConfig = ( mastodon: config?.social?.mastodon, facebook: config?.social?.facebook, instagram: config?.social?.instagram, + reddit: config?.social?.reddit, + threads: config?.social?.threads, youtube: config?.social?.youtube, + udemy: config?.social?.udemy, dribbble: config?.social?.dribbble, behance: config?.social?.behance, medium: config?.social?.medium,