-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added 01-11-2024 Solution and 02-11-2024 Question
Added 01-11-2024 Solution and 02-11-2024 Question
- Loading branch information
1 parent
7a56f47
commit b4ad41c
Showing
15 changed files
with
2,754 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
# Portfolio Webpage Creation, Deployment, and Documentation | ||
|
||
## Overview | ||
|
||
The **Career Highlights** page is an integral part of my portfolio website, showcasing significant achievements and milestones in a visually engaging, single-page format. It serves as an excellent example of a streamlined portfolio layout that allows visitors to quickly understand my professional highlights without navigating multiple pages. This page is part of my main portfolio website, accessible at: | ||
|
||
- [Main Portfolio Website](https://madhurimarawat.github.io/Portfolio-Website/index.html) | ||
The Career Highlights page complements the main portfolio by offering a concise, focused display of achievements. | ||
|
||
## Project Structure | ||
|
||
- **Solution.html**: The main HTML file structuring the Career Highlights page, containing sections for achievements, a dynamic social links wheel, and contact information. | ||
- **css/Solution.css**: The custom CSS file responsible for styling, ensuring a polished, cohesive look that matches the overall portfolio's color scheme and branding. | ||
- **js/Solution.js**: JavaScript file managing interactivity, including the rotating social links animation. | ||
- **README.md**: General project documentation. | ||
- **EXPLANATION.md**: Detailed explanation of design decisions, project structure, and deployment steps specific to the Career Highlights page. | ||
|
||
## Design Choices | ||
|
||
### Color Scheme and Styling | ||
|
||
The **Career Highlights** page employs a professional color scheme with subtle, visually appealing accents. A light background enhances readability, while strategic use of color draws attention to sections like achievements and social links. This portfolio showcases a **creative blend of emojis** to enhance visual appeal and expressiveness, contributing to a unique, engaging experience for visitors. A harmonious blend of professional colors ensures a polished, attractive look, maintaining a cohesive aesthetic across both pages. | ||
|
||
### Single-Page Layout | ||
|
||
This page is structured as a single-page web design, a practical approach for portfolios. It enables users to access all essential information in one view without navigating to other pages, making it easier to communicate key points quickly and effectively. This one-page layout is ideal for personal portfolios, allowing for an organized, visually rich presentation without overwhelming the user. | ||
|
||
### Dynamic Social Links Wheel Animation | ||
|
||
The **social links wheel animation** is a standout feature, where icons are displayed in a rotating wheel format. Each social link takes turns in the center, and after every three icons, the wheel reverses direction. The central icon and title update with each rotation, giving a dynamic and interactive feel to the page. The continuous animation ensures that all links receive equal attention, enhancing visitor engagement. This feature has been integrated across both the main portfolio page and the Career Highlights page, with a **social links logo added to the main page** and **corresponding Font Awesome icons** placed on the Career Highlights page. | ||
|
||
### Icons and Fonts | ||
|
||
Font Awesome icons represent social links and other important details, enhancing the page’s modern look. A calligraphic font choice adds a touch of elegance, complementing the personal branding. | ||
|
||
## Additional Features | ||
|
||
This portfolio includes the following features to enhance functionality and user experience: | ||
|
||
- **Responsive Design**: Ensures the portfolio looks great and functions well on all devices and screen sizes, providing a seamless experience for all users. | ||
- **Dynamic Color Dropdown**: A dropdown for dynamically changing the website’s color scheme with options for **Autumn, Summer, Rainy, and Winter** themes. Upon selection, the website colors change instantly. Refreshing the page restores the default color scheme, making it versatile for different seasons. | ||
- **User-Friendly Interface**: A clean and intuitive layout ensures that the website is simple to navigate, making it easy for visitors to focus on the content. | ||
- **Career Achievements Section**: A dedicated area highlights career milestones, allowing visitors to quickly grasp key achievements. | ||
|
||
## Deployment | ||
|
||
The **Career Highlights** page and the entire portfolio were deployed on **GitHub Pages**, making it accessible to the public. Deployment steps include: | ||
|
||
1. **Repository Setup**: Files like `Solution.html`, `css/Solution.css`, and `js/Solution.js` were committed to the repository. | ||
2. **GitHub Pages Activation**: GitHub Pages was enabled by selecting the main branch. | ||
3. **Live URL**: The page is accessible here: | ||
- [Career Highlights Page](https://madhurimarawat.github.io/Portfolio-Website/career-highlights.html) | ||
|
||
## Repository and Live Links | ||
|
||
- **GitHub Repository**: [Portfolio GitHub Repository](https://github.com/madhurimarawat/Portfolio-Website) | ||
- **Live Portfolio**: [Career Highlights Page](https://madhurimarawat.github.io/Portfolio-Website/career-highlights.html) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.