refactor: website style changes

igor17400 · Oct 2, 2024 · 8baffa3 · 8baffa3
1 parent 0bb876c
commit 8baffa3
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 244 deletions.
diff --git a/gitprofile.config.ts b/gitprofile.config.ts
@@ -82,12 +82,11 @@ const CONFIG = {
     udemy: '',
     dribbble: '',
     behance: '',
-    medium: 'igorlima1740',
-    dev: '',
+    dev: 'igor1740',
     stackoverflow: '', // example: '1/jeff-atwood'
     skype: '',
     telegram: '',
-    website: 'https://www.igor174.com',
+    website: 'https://igorazevedo.com/blog',
     phone: '',
     email: '[email protected]',
   },
@@ -140,7 +139,8 @@ const CONFIG = {
       name: 'Deep Learning',
       body: 'Carnegie Mellon University',
       year: 'September 2024',
-      certificateLink: 'https://example.com',
+      certificateLink:
+        'https://certificates.emeritus.org/2c29c0a4-7d09-4537-a330-e3b457e74e85#gs.g1h2dw',
       portfolioLink: 'https://example.com',
     },
     {
@@ -210,9 +210,9 @@ const CONFIG = {
   ],
   // Display articles from your medium or dev account. (Optional)
   blog: {
-    source: 'medium', // medium | dev
-    username: 'igorlima1740', // to hide blog section, keep it empty
-    limit: 1, // How many articles to display. Max is 10.
+    source: 'dev', // medium | dev
+    username: 'igor1740', // to hide blog section, keep it empty
+    limit: 10, // How many articles to display. Max is 10.
   },
   googleAnalytics: {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
@@ -227,7 +227,7 @@ const CONFIG = {
     // defaultTheme: 'light',
 
     // If you want to activate toggle button with only two colors - dark and light
-    lightTheme: 'winter',
+    lightTheme: 'light',
     darkTheme: 'dark',
 
     // Should use the prefers-color-scheme media-query,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vail": "^1.0.3",
-    "vite": "^5.2.11",
+    "vite": "^5.4.8",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-pwa": "^0.20.0"
   },

diff --git a/src/assets/catedral.avif b/src/assets/catedral.avif
diff --git a/src/components/gitprofile.tsx b/src/components/gitprofile.tsx
@@ -24,8 +24,7 @@ import ExperienceCard from './experience-card';
 import EducationCard from './education-card';
 import CertificationCard from './certification-card';
 import { GithubProject } from '../interfaces/github-project';
-import GithubProjectCard from './github-project-card';
-import ExternalProjectCard from './external-project-card';
+
 import BlogCard from './blog-card';
 import Footer from './footer';
 import PublicationCard from './publication-card';
@@ -44,7 +43,6 @@ const GitProfile = ({ config }: { config: Config }) => {
   const [error, setError] = useState<CustomError | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [profile, setProfile] = useState<Profile | null>(null);
-  const [githubProjects, setGithubProjects] = useState<GithubProject[]>([]);
 
   const getGithubProjects = useCallback(
     async (publicRepoCount: number): Promise<GithubProject[]> => {
@@ -116,8 +114,6 @@ const GitProfile = ({ config }: { config: Config }) => {
       if (!sanitizedConfig.projects.github.display) {
         return;
       }
-
-      setGithubProjects(await getGithubProjects(data.public_repos));
     } catch (error) {
       handleError(error as AxiosError | Error);
     } finally {
@@ -193,15 +189,15 @@ const GitProfile = ({ config }: { config: Config }) => {
               googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
               appliedTheme={theme}
             />
-            <div className={`p-4 lg:p-10 min-h-full ${BG_COLOR}`}>
+            <div className={` min-h-full ${BG_COLOR}`}>
               <PortfolioHeader
                 theme={theme}
                 setTheme={setTheme}
                 lightTheme={sanitizedConfig.themeConfig.lightTheme}
                 darkTheme={sanitizedConfig.themeConfig.darkTheme}
                 resumeFileUrl={sanitizedConfig.resume.fileUrl}
               />
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
+              <div className="p-4 lg:p-10 grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
                 <div className="col-span-1">
                   <div className="grid grid-cols-1 gap-6">
                     {sanitizedConfig.educations.length !== 0 && (
@@ -216,24 +212,30 @@ const GitProfile = ({ config }: { config: Config }) => {
                         experiences={sanitizedConfig.experiences}
                       />
                     )}
-                    {sanitizedConfig.certifications.length !== 0 && (
-                      <CertificationCard
-                        loading={loading}
-                        certifications={sanitizedConfig.certifications}
-                      />
-                    )}
-                    <DetailsCard
-                      profile={profile}
-                      loading={loading}
-                      github={sanitizedConfig.github}
-                      social={sanitizedConfig.social}
-                    />
-                    {sanitizedConfig.skills.length !== 0 && (
-                      <SkillCard
+                    <div className="hidden md:block">
+                      {sanitizedConfig.certifications.length !== 0 && (
+                        <CertificationCard
+                          loading={loading}
+                          certifications={sanitizedConfig.certifications}
+                        />
+                      )}
+                    </div>
+                    <div className="hidden md:block">
+                      <DetailsCard
+                        profile={profile}
                         loading={loading}
-                        skills={sanitizedConfig.skills}
+                        github={sanitizedConfig.github}
+                        social={sanitizedConfig.social}
                       />
-                    )}
+                    </div>
+                    <div className="hidden md:block">
+                      {sanitizedConfig.skills.length !== 0 && (
+                        <SkillCard
+                          loading={loading}
+                          skills={sanitizedConfig.skills}
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
                 <div className="lg:col-span-2 col-span-1">
@@ -244,34 +246,37 @@ const GitProfile = ({ config }: { config: Config }) => {
                         publications={sanitizedConfig.publications}
                       />
                     )}
-                    {sanitizedConfig.projects.github.display && (
-                      <GithubProjectCard
-                        header={sanitizedConfig.projects.github.header}
-                        limit={sanitizedConfig.projects.github.automatic.limit}
-                        githubProjects={githubProjects}
-                        loading={loading}
-                        username={sanitizedConfig.github.username}
-                        googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
-                      />
-                    )}
-                    {sanitizedConfig.projects.external.projects.length !==
-                      0 && (
-                      <ExternalProjectCard
-                        loading={loading}
-                        header={sanitizedConfig.projects.external.header}
-                        externalProjects={
-                          sanitizedConfig.projects.external.projects
-                        }
-                        googleAnalyticId={sanitizedConfig.googleAnalytics.id}
-                      />
-                    )}
                     {sanitizedConfig.blog.display && (
                       <BlogCard
                         loading={loading}
                         googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
                         blog={sanitizedConfig.blog}
                       />
                     )}
+                    <div className="block sm:hidden">
+                      {sanitizedConfig.certifications.length !== 0 && (
+                        <CertificationCard
+                          loading={loading}
+                          certifications={sanitizedConfig.certifications}
+                        />
+                      )}
+                    </div>
+                    <div className="block sm:hidden">
+                      <DetailsCard
+                        profile={profile}
+                        loading={loading}
+                        github={sanitizedConfig.github}
+                        social={sanitizedConfig.social}
+                      />
+                    </div>
+                    <div className="block sm:hidden">
+                      {sanitizedConfig.skills.length !== 0 && (
+                        <SkillCard
+                          loading={loading}
+                          skills={sanitizedConfig.skills}
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
               </div>

diff --git a/src/components/portfolio-header/index.css b/src/components/portfolio-header/index.css
@@ -1,11 +1,17 @@
 /* Background image for the header */
-.bg-athos {
-  background-image: url('../../assets/athos.jpeg');
+.bg-image {
+  background-image: url('../../assets/catedral.avif');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
+@media (min-width: 1280px) {
+  .bg-image {
+    background-position: 100% 5%;
+  }
+}
+
 .water-fill-btn {
   position: relative;
   display: inline-block;

diff --git a/src/components/portfolio-header/index.tsx b/src/components/portfolio-header/index.tsx
@@ -32,16 +32,16 @@ const PortfolioHeader = ({
   };
 
   return (
-    <div className="min-h-screen flex flex-col bg-cover bg-center relative overflow-hidden bg-athos m-2 my-4">
+    <div className="min-h-screen flex flex-col bg-cover bg-center relative overflow-hidden bg-image sm:m-2 sm:my-4">
       {/* Overlay to reduce intensity */}
       <div className="overlay"></div>
 
-      <div className="flex justify-between items-center p-2 z-10 relative">
+      <div className="flex justify-between items-center p-2 mb-20 sm:mb-0 z-10 relative">
         <div></div>
         <div className="flex items-center space-x-4">
           <button
             onClick={toggleTheme}
-            className="btn btn-ghost text-lg border-2 rounded-full px-4 py-2 flex items-center justify-center"
+            className="btn btn-ghost bg-transparent hover:bg-transparent text-lg rounded-full px-4 py-2 flex items-center justify-center"
             style={{ width: '60px', height: '60px' }}
           >
             {theme === lightTheme ? (
@@ -58,7 +58,7 @@ const PortfolioHeader = ({
       </div>
       <div className="flex flex-col justify-center items-center text-center flex-grow pb-20">
         <div
-          className={`card justify-center text-center items-center p-7 sm:p-16 ${theme === lightTheme ? 'bg-white bg-opacity-90' : 'bg-black bg-opacity-90'}`}
+          className={`card justify-center text-center items-center m-2 p-2 sm:p-16 ${theme === lightTheme ? 'bg-white bg-opacity-70' : 'bg-black bg-opacity-70'}`}
         >
           <h1 className="text-4xl sm:text-6xl font-bold mb-4">
             Igor Lima Rocha Azevedo
@@ -88,7 +88,7 @@ const PortfolioHeader = ({
             <a
               href={resumeFileUrl}
               target="_blank"
-              className={`cursor-pointer bg-gradient-to-r py-2 px-4 sm:px-6 rounded-full font-semibold shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 ${theme === lightTheme ? 'text-black from-blue-600 via-blue-300 to-blue-600' : 'text-white from-blue-300 via-blue-700 to-blue-400'}`}
+              className={`cursor-pointer bg-gradient-to-r py-2 px-4 sm:px-6 rounded-full font-semibold shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 ${theme === lightTheme ? 'text-white from-blue-600 via-blue-400 to-blue-600' : 'text-white from-blue-300 via-blue-700 to-blue-400'}`}
               download
               rel="noreferrer"
             >
@@ -104,6 +104,18 @@ const PortfolioHeader = ({
           </div>
         </div>
       </div>
+      <div className="text-center pb-2 text-xs">
+        <p>
+          Background image by{' '}
+          <a
+            className="underline"
+            href="https://unsplash.com/@g_leighton"
+            target="_blank"
+          >
+            Gustavo Leighton
+          </a>
+        </p>
+      </div>
     </div>
   );
 };

diff --git a/src/components/publication-card/index.tsx b/src/components/publication-card/index.tsx
@@ -86,10 +86,10 @@ const PublicationCard = ({
         target="_blank"
         rel="noreferrer"
       >
-        <div className="p-8 h-full w-full">
+        <div className="p-2 sm:p-8 h-full w-full">
           <div className="flex items-center flex-col">
             <div className="w-full">
-              <div className="px-4">
+              <div className="px-2 sm:px-4">
                 <div className="text-center w-full">
                   <h2 className="font-medium opacity-60 mb-2 text-xl italic">
                     {item.title}

diff --git a/src/components/theme-changer/index.tsx b/src/components/theme-changer/index.tsx
@@ -56,7 +56,7 @@ const ThemeChanger = ({
 
     // Toggle the theme with a small delay for animation effect
     setTimeout(() => {
-      const newTheme = theme === lightTheme ? darkTheme : lightTheme;
+      const newTheme = theme === darkTheme ? lightTheme : darkTheme;
       document.querySelector('html')?.setAttribute('data-theme', newTheme);
       localStorage.setItem('theme', newTheme);
       setTheme(newTheme);