https://github.com/himel-sarder/skills-bar-card

Explore a captivating typewriter animation and skill showcase project. Dynamic HTML/CSS animation, while skill bars exhibit proficiency in various technologies. Responsive design ensures seamless viewing.
https://github.com/himel-sarder/skills-bar-card

card css html skills-bars typewriter-animation wave-animation

Last synced: 19 days ago
JSON representation

Explore a captivating typewriter animation and skill showcase project. Dynamic HTML/CSS animation, while skill bars exhibit proficiency in various technologies. Responsive design ensures seamless viewing.

• Host: GitHub
• URL: https://github.com/himel-sarder/skills-bar-card
• Owner: Himel-Sarder
• License: mit
• Created: 2024-04-07T07:24:41.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-07T08:11:19.000Z (9 months ago)
• Last Synced: 2024-04-08T08:29:12.400Z (9 months ago)
• Topics: card, css, html, skills-bars, typewriter-animation, wave-animation
• Language: CSS
• Homepage:
• Size: 43.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Skills-Bar-card

![EC](https://github.com/Himel-Sarder/Skills-Bar-card/assets/143216886/e71b108d-9a18-4c17-9e94-0de54b7c78e4)

This project showcases a typewriter animation effect implemented using HTML and CSS, along with skill bars representing proficiency levels in different programming languages and technologies. The combination of the typewriter animation and skill showcase creates an engaging and informative display for personal portfolios or project presentations.

## Demo ✅

[Click Here for Preview](https://himel-sarder.github.io/Skills-Bar-card/)

## Key Features ✅

- **Typewriter Animation:** The main headline "Dept. of CSE, BSFMSTU" is animated to simulate the appearance of typing, providing a visually appealing introduction to the page.

- **Skill Bars:** Below the typewriter animation, skill bars are used to visualize proficiency levels in HTML, CSS, JavaScript, Python, C, C++, Java, and Linux. Each skill bar dynamically fills up to represent the corresponding proficiency percentage.

- **Responsive Design:** The layout is responsive, ensuring optimal viewing across various devices and screen sizes.

## Technologies Used ✅

- **HTML:** Provides the structure and content of the web page.

- **CSS:** Utilized for styling, animations, and the creation of skill bars.

- **Google Fonts:** The "EB Garamond" font from Google Fonts is employed to enhance typography throughout the page.

## Usage ✅

To incorporate the typewriter animation and skill showcase into your projects:

1. Copy the HTML and CSS code provided in this repository.

2. Customize the text content and skill percentages according to your preferences and skill levels.

3. Adapt the styling and animations to suit the design aesthetic of your website or project.

## Credits ✅

- The project draws inspiration from various typewriter animation and skill bar implementations found in online tutorials and examples.

- Credit to the creators of the "EB Garamond" font for offering a stylish and elegant typography option for web projects.

## Code   ✅

Coded by---   

Himel Sarder   

Bachelor of Engineering (B.E)   

Dept. of Computer Science and Engineering   

Bangamata Sheikh Fhojilatunnesa Mujib Science and Technology University, Jamalpur, Bangladesh

## License ✅

This project is licensed under the [MIT License](LICENSE).

# Thank You 😻🤍