A dynamic, fully responsive personal portfolio website built exclusively with HTML, CSS, and Vanilla JavaScript to showcase skills, projects, and interactive front-end development capabilities.
This project was developed as a Capstone Submission for the IBM Skillbuild Edunet program.
The goal was to move beyond the limitations of a traditional, static resume by creating a live, interactive platform that directly demonstrates proficiency in core web technologies and modern UI/UX design.
Many developers struggle to present their practical skills (like responsiveness, complex animations, and interactive design) effectively in a static document. This project solves that by providing a highly engaging, custom-coded platform to visually communicate technical abilities.
- Smooth Navigation: Fixed header and smooth scrolling behavior between sections.
- Dynamic Typing Effect: A custom JavaScript function to cycle and type out professional roles on the Home screen.
- High-Performance Animations: Image floating effects implemented using
requestAnimationFrame. - Responsive Design: Full adaptability across mobile, tablet, and desktop views using CSS Media Queries.
- Skills Visualization: Animated progress bars triggered when the section scrolls into view using the Intersection Observer API.
- Interactive Feedback: Custom ripple effect on the Contact button.
This project strictly adheres to the core front-end technology requirement, using no external frameworks or libraries beyond standard helper utilities.
- HTML5: Semantic structure and content organization.
- CSS3: Custom styling, responsiveness (Flexbox/Grid), and animation keyframes.
- JavaScript (Vanilla JS): All logic for interactivity, scrolling, animations, and user experience.
- ScrollReveal.js: Used for clean, staggered entrance animations on section elements.
- Boxicons: Used for all scalable vector icons (LinkedIn, GitHub, navigation icons, etc.).
The finished project is hosted and available for live viewing here: ➡️ [https://riyarani23.github.io/Interactive-Digital-Portfolio/]
To run this project locally on your machine:
- Clone the Repository:
git clone (https://github.com/RiyaRani23/Interactive-Digital-Portfolio.git)
- Navigate to the Directory:
cd Interactive-Digital-Portfolio - Open the File:
Simply open the
index.htmlfile in your preferred web browser (Chrome, Edge, etc.) to view the portfolio.
Feel free to connect with me!
- LinkedIn: https://www.linkedin.com/in/riya-rani-330943331/
- GitHub: https://github.com/RiyaRani23
- Email: riyarani1404@gmail.com