From c472800d101b4cc1d16f6c06ab3750da2dc671f0 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Mon, 24 Feb 2025 22:45:26 +0100 Subject: [PATCH] feat: enhance accessibility and improve styling in Home page --- src/pages/index.tsx | 567 ++++++++++++++++++++++++-------------------- 1 file changed, 307 insertions(+), 260 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 577bd53..3736ae1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -137,9 +137,9 @@ export default function Home() { .red .theme-primary { color: rgba(255, 0, 0, 0.9); } .gold .theme-primary { color: rgba(255, 204, 0, 0.9); } - .black .theme-secondary { color: rgba(255, 255, 255, 0.6); } - .red .theme-secondary { color: rgba(255, 0, 0, 0.6); } - .gold .theme-secondary { color: rgba(255, 204, 0, 0.6); } + .black .theme-secondary { color: rgba(255, 255, 255, 0.7); } + .red .theme-secondary { color: rgba(255, 0, 0, 0.7); } + .gold .theme-secondary { color: rgba(255, 204, 0, 0.7); } .black .theme-accent { background-color: rgba(255, 255, 255, 0.03); } .red .theme-accent { background-color: rgba(255, 0, 0, 0.03); } @@ -152,6 +152,39 @@ export default function Home() { .theme-transition { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } + + /* Focus styles for accessibility */ + a:focus-visible, button:focus-visible { + outline: 2px solid #4D90FE; + outline-offset: 2px; + } + + /* Improved touch targets for mobile */ + @media (max-width: 640px) { + a, button { + min-height: 44px; + min-width: 44px; + } + } + + /* Skip to content */ + .skip-to-content { + position: absolute; + left: -9999px; + top: 0; + z-index: 999; + padding: 1rem; + background-color: white; + color: black; + text-decoration: none; + transform: translateY(-100%); + transition: transform 0.3s; + } + + .skip-to-content:focus { + left: 0; + transform: translateY(0); + } `}
@@ -191,21 +224,24 @@ export default function Home() { + {/* Skip to content link for keyboard users */} + Skip to content +
-
-
-
- -
+
+
+
+ - -
- -
- Role - Fullstack Developer -
-
- Experience - 5+ Years -
-
- -
-
- -
-
- -
-

About

-
-
- - -
-
- -
- Jan-Marlon Leibl - Fullstack Software Developer -
- - -
-

Jan-Marlon Leibl

-

Fullstack Developer

-
- -
- - -
-

- Hello! I'm Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created. -

-

- Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands. -

-
- -
-
-
-

Technologies

-
-
-
    - {['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => ( -
  • - - {tech} -
    • - ))} -
+
+ + Available for Work
- -
-
-

Interests

-
+
+

Jan-Marlon Leibl

+
+

+ Software Developer +
+ based in +

-
    - {[ - 'Web Development', - 'System Architecture', - 'UI/UX Design', - 'Performance Optimization' - ].map((interest) => ( -
  • - - {interest} -
    • - ))} -
- -
+

+ Passionate about creating digital experiences, with a focus on PHP and modern web technologies. +

+
+ +
+ +
+ Role + Fullstack Developer +
+
+ Experience + 5+ Years +
+
-
-
+ -
-
-
- -
- Portfolio -
-

Selected Work

-
+
+
+ +
+

About

+
-
- - -
- {[ - { - title: 'ventry.host v2', - year: '2025', - description: 'Free file hosting revamped with a modern design and improved user experience.', - tags: ['Next.js', 'Tailwind CSS', 'TypeScript'] - }, - { - title: 'ventry.host', - year: '2023', - description: 'A free file hosting solution with thousands of daily visitors.', - tags: ['PHP', 'JavaScript', 'MySQL'] - }, - { - title: 'ShareUpload', - year: '2022', - description: 'High-performance file sharing platform with unlimited storage.', - tags: ['PHP', 'MySQL', 'Performance'] - }, - { - title: 'RestoreM', - year: '2023', - description: 'Discord server backup and restoration service.', - tags: ['PHP', 'MySQL', 'Discord API'] - } - ].map((project, index) => ( - -
-
-
- {project.year} -
-
+ + +
+
+ +
+ Jan-Marlon Leibl - Fullstack Software Developer +
+ + +
+

Jan-Marlon Leibl

+

Fullstack Developer

+
+ +
+ + +
+
+

+ Hello! I'm Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created. +

+

+ Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands. +

-
-
-

- {project.title} -

-

- {project.description} -

+
+
+
+

Technologies

+ +
+
    + {['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => ( +
  • + + {tech} +
    • + ))} +
-
-
-

Technologies

-
- {project.tags.map((tag, tagIndex) => ( - - {tag}{tagIndex !== project.tags.length - 1 && ( - • - )} - - ))} +
+
+

Interests

+ +
+
    + {[ + 'Web Development', + 'System Architecture', + 'UI/UX Design', + 'Performance Optimization' + ].map((interest) => ( +
  • + + {interest} +
    • + ))} +
+
+
+ + +
+ +
+
+
+ +
+ +
+ +
+ Portfolio +
+

Selected Work

+ +
+
+ + +
+ {[ + { + title: 'ventry.host v2', + year: '2025', + description: 'Free file hosting revamped with a modern design and improved user experience.', + tags: ['Next.js', 'Tailwind CSS', 'TypeScript'] + }, + { + title: 'ventry.host', + year: '2023', + description: 'A free file hosting solution with thousands of daily visitors.', + tags: ['PHP', 'JavaScript', 'MySQL'] + }, + { + title: 'ShareUpload', + year: '2022', + description: 'High-performance file sharing platform with unlimited storage.', + tags: ['PHP', 'MySQL', 'Performance'] + }, + { + title: 'RestoreM', + year: '2023', + description: 'Discord server backup and restoration service.', + tags: ['PHP', 'MySQL', 'Discord API'] + } + ].map((project, index) => ( + +
+
+
+ {project.year} +
+ +
+ +
+
+

+ {project.title} +

+

+ {project.description} +

+
+ +
+
+

Technologies

+
+ {project.tags.map((tag, tagIndex) => ( + + {tag}{tagIndex !== project.tags.length - 1 && ( + + )} + + ))} +
- -
-
- - ))} + + ))} +
-
-
+ +