Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Responsive personal portfolio using Tailwind CSS and animations.

accessibility, tailwind-css, animation
Santiago Del Percio R•10
@santiagodelpercioR
A solution to the Social links profile challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I’m proud of creating a fully responsive personal portfolio using Tailwind CSS. This project helped me implement animations, dynamic layouts, and responsive designs that adapt well to different screen sizes. I’m especially proud of the animated gradient background and the clean, modern design of the page.

Next time, I’d focus more on accessibility features, like improving contrast ratios and adding ARIA labels where necessary. I’d also like to optimize the images further for faster loading and explore using Tailwind plugins to enhance the design without adding too much custom CSS.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was ensuring the page looked good on different screen sizes, especially handling visibility of elements like text and icons. Initially, some text disappeared on larger screens due to incorrect Tailwind classes. I resolved this by debugging with developer tools and verifying my media query breakpoints in the Tailwind configuration.

Another challenge was getting the gradient animation to feel smooth and visually appealing without being distracting. After experimenting with timing and easing functions in the @keyframes animation, I achieved a subtle yet engaging effect that fits the theme of the project.

Lastly, I had some issues hosting the live version of the site, but I followed documentation for my hosting platform to troubleshoot and successfully publish the project.

What specific areas of your project would you like help with?

Responsiveness and layout adjustments: I’d appreciate feedback on how the layout adapts to larger screens. Are there any noticeable gaps or misalignments that I might have overlooked?

Accessibility improvements: Are there specific accessibility issues (e.g., contrast ratios, screen reader support) that I should address to make the site more inclusive?

Performance optimization: Any advice on reducing the load time of the site, particularly for the animated gradient background and images?

Animation smoothness: Does the gradient animation feel natural, or could the timing and transitions be improved to enhance the user experience?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Santiago Del Percio R's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License