https://github.com/ilias-ahmed/css_cv-page
My modern and beautiful CV/Resume page
https://github.com/ilias-ahmed/css_cv-page
css cv journey
Last synced: 7 months ago
JSON representation
My modern and beautiful CV/Resume page
- Host: GitHub
- URL: https://github.com/ilias-ahmed/css_cv-page
- Owner: Ilias-Ahmed
- Created: 2025-01-20T15:14:54.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-21T00:43:25.000Z (9 months ago)
- Last Synced: 2025-03-15T00:13:28.342Z (7 months ago)
- Topics: css, cv, journey
- Language: CSS
- Homepage: https://ilias-ahmed.github.io/CSS_CV-Page/
- Size: 1000 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern CV Website 🚀
A sleek, responsive, and modern CV/Resume website built with HTML and CSS. This project showcases a professional portfolio with smooth animations, modern design elements, and full mobile responsiveness.
## 🌟 Features
- **Responsive Design**: Fully optimized for all device sizes
- **Modern UI/UX**: Clean and professional interface with smooth animations
- **Interactive Elements**: Engaging hover effects and transitions
- **Optimized Performance**: Efficient CSS with minimal redundancy
- **Cross-Browser Compatibility**: Tested across major browsers
- **Accessible**: Follows web accessibility best practices
## 🛠️ Technologies Used
- HTML5
- CSS3
- Modern CSS Features:
- Flexbox
- CSS Grid
- Custom Properties
- Gradients
- Transitions & Animations
## 📋 Project Structure
```
cv-website/
│
├── index.html # Main HTML file
├── style.css # Stylesheet
├── assets/ # Images and other assets
│ └── my-image.png # Profile image
└── README.md # Project documentation
```
## 🚀 Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/yourusername/cv-website.git
```
2. **Navigate to project directory**
```bash
cd cv-website
```
3. **Open in browser**
- Double click `index.html` or use a live server
- For VS Code users: Use the Live Server extension
## 📱 Responsive Breakpoints
The website is responsive across all devices with the following breakpoints:
- **Mobile**: Up to 768px
- **Tablet**: 769px to 1024px
- **Desktop**: 1025px and above
## 🎨 Customization
### Colors
The main color scheme can be customized in the CSS file:
```css
:root {
/* Primary Colors */
--primary-gradient: linear-gradient(135deg, #2b4162 0%, #12100e 100%);
--text-primary: #2d3748;
--text-secondary: #718096;
}
```
### Content
To customize the content:
1. Update the personal information in `index.html`
2. Replace `my-image.png` with your profile picture
3. Modify sections in HTML to match your experience
## 🔧 Development
### Prerequisites
- Basic understanding of HTML and CSS
- Any code editor (VS Code recommended)
- Basic Git knowledge
### Making Changes
1. Create a new branch
```bash
git checkout -b feature/your-feature-name
```
2. Make your changes
3. Test responsiveness across different devices
4. Commit your changes
```bash
git commit -m "Add your commit message"
```
## 📝 Sections
1. **Header**
- Profile image
- Name
- Professional title
2. **About**
- Professional summary
- Key highlights
3. **Education**
- Academic qualifications
- Certifications
- Training
4. **Work Experience**
- Professional history
- Key achievements
- Company details
5. **Skills**
- Technical skills
- Professional competencies
6. **Footer**
- Contact information
- Social links
## ✨ Best Practices
- Semantic HTML structure
- Mobile-first approach
- Optimized images
- Clean and commented code
- Consistent naming conventions
- Performance-focused development
## 🤝 Contributing
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## 🙏 Acknowledgments
- Design inspiration from modern CV templates
- Icons and resources from [reference sources]
- Font families from Google Fonts
## 📞 Contact
Your Name - [@ilias-ahmd](https://twitter.com/ilias_Ahmd)
Project Link: [https://github.com/ilias-ahmed/cv-website](https://github.com/yourusername/cv-website)
---
⭐️ If you like this project, please give it a star on GitHub! ⭐️