feat: visual enhancements - animated download buttons, social icons positioning, translation warnings

Author: ishkabar

portfolio/src/app/[locale]/about/page.tsx

@@ -214,17 +214,31 @@ export default async function About() {
                 )}
               </Row>
             )}
-              <Row paddingTop="m" gap="8" className={styles.blockAlign}>
-                  <StaticDownloadButton
-                      href="/Dominik_Karczewski_Backend_Developer.pdf"
-                      label={t("downloadCV")}
-                      prefixIcon="fileText"
-                  />
-                  <StaticDownloadButton
-                      href="/Dominik_Karczewski_Cover_Letter.pdf"
-                      label={t("downloadCoverLetter")}
-                      prefixIcon="mail"
-                  />
+              <Row paddingTop="m" gap="16" className={styles.blockAlign}>
+                  <div
+                      style={{
+                          animation: 'subtlePulse 3s ease-in-out infinite',
+                          position: 'relative',
+                      }}
+                  >
+                      <StaticDownloadButton
+                          href="/Dominik_Karczewski_Backend_Developer.pdf"
+                          label={t("downloadCV")}
+                          prefixIcon="fileText"
+                      />
+                  </div>
+                  <div
+                      style={{
+                          animation: 'subtlePulse 3s ease-in-out 0.5s infinite',
+                          position: 'relative',
+                      }}
+                  >
+                      <StaticDownloadButton
+                          href="/Dominik_Karczewski_Cover_Letter.pdf"
+                          label={t("downloadCoverLetter")}
+                          prefixIcon="mail"
+                      />
+                  </div>
               </Row>
           </Column>
 

portfolio/src/app/[locale]/blog/[slug]/page.tsx

@@ -86,7 +86,15 @@ export default async function Blog({ params }: { params: Promise<{ slug: string
       <Row fillWidth horizontal="center">
         <Column as="section" maxWidth="m" horizontal="center" gap="l" paddingTop="24">
             {!hasContent && (
-                <Row fillWidth padding="16" background="warning-alpha-medium" radius="m" horizontal="center" marginBottom="l">
+                <Row
+                    fillWidth
+                    maxWidth="l"
+                    padding="16"
+                    background="warning-alpha-medium"
+                    radius="m"
+                    horizontal="center"
+                    marginBottom="l"
+                >
                     <Text>{tCommon('translationInProgress')}</Text>
                 </Row>
             )}

portfolio/src/app/[locale]/blog/page.tsx

@@ -47,12 +47,12 @@ export default async function Blog() {
             {!hasFullTranslation && (
                 <Row
                     fillWidth
+                    maxWidth="l"
                     padding="16"
                     background="warning-alpha-medium"
                     radius="m"
                     horizontal="center"
                     marginBottom="l"
-                    marginX="24"
                 >
                     <Text>{tCommon('translationInProgress')}</Text>
                 </Row>

portfolio/src/app/[locale]/work/[slug]/page.tsx

@@ -79,7 +79,15 @@ export default async function Project({
     return (
         <Column as="section" maxWidth="m" horizontal="center" gap="l">
             {!hasContent && (
-                <Row fillWidth padding="16" background="warning-alpha-medium" radius="m" horizontal="center" marginBottom="l">
+                <Row
+                    fillWidth
+                    maxWidth="l"
+                    padding="16"
+                    background="warning-alpha-medium"
+                    radius="m"
+                    horizontal="center"
+                    marginBottom="l"
+                >
                     <Text>{tCommon('translationInProgress')}</Text>
                 </Row>
             )}

portfolio/src/app/[locale]/work/page.tsx

@@ -78,6 +78,7 @@ export default async function Work() {
             {!hasFullTranslation && (
                 <Row
                     fillWidth
+                    maxWidth="l"
                     padding="16"
                     background="warning-alpha-medium"
                     radius="m"

portfolio/src/components/Header.tsx

@@ -84,6 +84,8 @@ export const Header = () => {
     const H = (p: string) => normalize(withLocale(p, locale));
     const isAt = (p: string) => pathname === H(p);
     const isUnder = (p: string) => pathname === H(p) || pathname.startsWith(H(p) + "/");
+    const isAboutPage = pathname.endsWith('/about');
+
 
     const isHomeActive = () => {
         const homeLocalized = H("/");
@@ -119,8 +121,7 @@ export const Header = () => {
             <Fade s={{hide: true}} fillWidth position="fixed" height="80" zIndex={9}/>
             <Fade hide s={{hide: false}} fillWidth position="fixed" bottom="0" to="top" height="80" zIndex={9}/>
 
-            {/* Osobna sekcja - Social icons po lewej (pod barem) */}
-            {display.location && social.length > 0 && (
+            {display.location && social.length > 0 && !isAboutPage && (
                 <Column
                     position="fixed"
                     style={{
@@ -138,7 +139,7 @@ export const Header = () => {
                                 <div
                                     key={item.name}
                                     style={{
-                                        transform: 'scale(1.3)',  // <--- Skalowanie całego buttona
+                                        transform: 'scale(1.3)',
                                         transformOrigin: 'center'
                                     }}
                                 >

portfolio/src/messages/da/about.json

@@ -6,9 +6,9 @@
   "tableOfContent": { "display": true, "subItems": true },
   "avatar": { "display": true },
   "calendar": { "display": false, "link": "", "cta": "" },
-  "downloadCV": "Download CV",
+  "downloadCV": "Hent CV",
   "generatingCV": "Genererer...",
-  "downloadCoverLetter": "Download følgebrev",
+  "downloadCoverLetter": "Hent følgebrev",
 
   "intro": {
     "display": true,

portfolio/src/messages/nl/about.json

@@ -6,9 +6,9 @@
   "tableOfContent": { "display": true, "subItems": true },
   "avatar": { "display": true },
   "calendar": { "display": false, "link": "", "cta": "" },
-  "downloadCV": "Download CV",
+  "downloadCV": "CV downloaden",
   "generatingCV": "Genereren...",
-  "downloadCoverLetter": "Download motivatiebrief",
+  "downloadCoverLetter": "Motivatiebrief downloaden",
 
   "intro": {
     "display": true,

portfolio/src/resources/custom.css

@@ -51,4 +51,26 @@
   --scheme-neutral-600-30: rgba(137,152,159,0.3);
   --scheme-neutral-600-50: rgba(137,152,159,0.5);
   /*
-}*/
+}*/
+@keyframes subtlePulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        border-radius: 12px; /* <--- DODANE */
+    }
+    50% {
+        opacity: 0.85;
+        transform: scale(1.05);
+        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
+        border-radius: 12px; /* <--- DODANE */
+    }
+}
+
+/* Hover dla dodatkowego efektu */
+div:has(> a[href*=".pdf"]):hover {
+    transform: translateY(-4px) !important;
+    filter: brightness(1.1) saturate(1.2);
+    transition: all 0.3s ease;
+    border-radius: 12px;
+}