Building a Unique Developer Portfolio

As a developer, I wanted to create a portfolio page that showcases my skills and experience in a unique way. I decided to go with a magazine-style concept, as it looks clean and easy to read.

Why Three Different Views?

I divided my portfolio into three views: resume, timeline, and gallery. Each view displays the same career data but in a different format.

• Resume Page: A clean and traditional resume-style page.
• Timeline: A timeline view that organizes my experience in chronological order.
• Gallery: A gallery view that showcases my projects in detail.

Each page has a distinct feel and purpose, allowing me to highlight different aspects of my portfolio.

Notable Features

Color Pencil Hover Effect

I experimented with various hover effects and settled on a color pencil underline effect. The implementation turned out better than expected.

Gallery Emphasis

When creating the project details page, I worried that lengthy content would deter readers. To address this, I highlighted key points with underlines, making it easy to scan and understand the project’s essence.

Responsive Timeline

The timeline’s responsive design was the most challenging aspect. Initially, the columns would overflow, and overflow-x: auto would break the position: sticky property. After a day of troubleshooting, I resolved the issue using transform: scale(), which scales the entire timeline to fit within the viewport on smaller screens.

Sidebar Project Summary

On the resume and timeline pages, clicking on a project displays a brief summary in the sidebar. This design choice prevents the project overview from disrupting the page’s flow, allowing readers to expand or collapse the summary as needed.

Conclusion

Through this project, I learned that the way data is presented significantly impacts the user experience. I will continue to experiment with different formats and designs to create engaging and effective portfolios.

You can visit my portfolio page at: https://readmekym.vercel.app/