diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3736ae1..577bd53 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.7); } - .red .theme-secondary { color: rgba(255, 0, 0, 0.7); } - .gold .theme-secondary { color: rgba(255, 204, 0, 0.7); } + .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-accent { background-color: rgba(255, 255, 255, 0.03); } .red .theme-accent { background-color: rgba(255, 0, 0, 0.03); } @@ -152,39 +152,6 @@ 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); - } `}
@@ -224,24 +191,21 @@ export default function Home() { - {/* Skip to content link for keyboard users */} - Skip to content -
-
-
-
-
- +
+
+
- -
-
- -
-

About

- +
+ Role + Fullstack Developer
- - -
-
- -
- Jan-Marlon Leibl - Fullstack Software Developer -
- - -
-

Jan-Marlon Leibl

-

Fullstack Developer

-
- +
+ Experience + 5+ Years
- - -
-
-

- 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} -
    • - ))} -
-
- -
-
-

Interests

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

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. +

+
-
- -
- -
- Portfolio -
-

Selected Work

- +
+
+
+

Technologies

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

Interests

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

-
-
-

- {project.title} -

-

- {project.description} -

-
- -
-
-

Technologies

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

Technologies

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