lcsvoj.github.io

Video Demo:

https://youtu.be/FVIMbx0z8n0

Description:

This portfolio website is my final project for Harvard's CS50: https://lcsvoj.github.io/

The website is composed of four static HTML pages, showcasing my skills, projects, and professional background, each featuring an animated and visually appealing header and footer that provides a cohesive and engagind experience.

The style was implemented using Bootstrap, and some JavaScript features were added to enhance the user experience.

The website is designed to be responsive across various screen sizes, from smartphones, through tablets and notebooks, to large desktop monitors.

Technologies Used:

• HTML
• CSS
• JavaScript
• Bootstrap

Files overview:

HTML files:

1. index.html

   • The landing page of the website.
   • Styled using index.css.
   • A JavaScript animation, implemented in index.js, provides a dynamic and attention-capturing continuous background animation.

2. aboutme.html

   • This page offers a look at some personal and professional information about me, including an overview of my education, work experience and interest.
   • Styled using aboutme.css.

3. projects.html

   • This page showcases the projects I've worked on with a description, technologies used, and links to repositories or live sites.
   • Styled using projects.css.

4. skills.html

   • This page presents my skills and certifications.
   • Styled using skills.css.
   • A JavaScript animation in skills.js highlights the ability to zoom in on each certificate in the certificates gallery.
   • Another JavaScript feature is implemented as a flashing message over each certificate to give the user a hint of the zoom-in possibility.

CSS files:

• index.css: Styles for the landing page, including layout, typography, and the background animation.
• aboutme.css: Styles for the "About me" page, including layout and typography.
• projects.css: Styles for the "Projects" page, including layout, cards for each project, and responsive design.
• skills.css: Styles for the "Skills" page, including layout, gallery, arrangemente, and responsiveness.

JavaScript files:

• index.js: Contains the JavaScript code for the continuous background animation on the landing page.
• skills.js: Contains the JavaScript code for the zoom-in feature on the certificates in the "Skills" page.

Design Choices:

• Responsive Design: Ensuring that the site looks and works well on various devices was a priority. This choice enhances accessibility and user experience.
• Animated Headers and Footers: The consistent animation across pages creates a visually appealing and unified design.
• Interactive Elements: The zoom-in feature on the "Skills" page was implemented to provide a more engaging and accessible way to view details.

Future Enhancements:

I plan to continually update the website with new projects and skills. I'm also considering adding a blog section to share insights and learnings from my professional journey.

Contact:

If you have any questions or suggestions, please feel free to reach out to me. You can reach me through the links on the website footer.