Daniels is a website designed to serve as a professional interface for the main character,
Jerry Daniels, a designer and web developer. The site features a simple yet appealing layout that allows
visitors to learn about his skills, services, and past work. It includes easy and clear navigation
between different sections, making it simple for visitors to quickly access the information they need.
- Check out the live demo of the project at
Daniels Website.
1. Responsive Design:
- Fully responsive layout across all devices and screen sizes.
- Burger menu for easy navigation on screens below 992px.
2. Interactive Navbar:
- A collapsible menu that transforms into a close icon when opened.
- Smooth transitions to different sections via internal links.
3. Home Section:
- Welcome Section: An animated text display featuring the title "I Am" along with titles such as "Designer" and "Developer."
- Social Media Links: Easy access to Jerry's social media profiles.
4. About Section:
- Personal Information: Details about Jerry Daniels, including his background and skills in design and development.
- Skills Showcase: A section displaying his skills with indicators of proficiency levels.
5. Services Section:
- A display of available services, such as web design, branding, and website development, accompanied by illustrative icons.
6. Portfolio Section:
- Showcase of Previous Work: A gallery of his past projects with filtering options such as "Brand," "Web," and "Graphic" for easier browsing.
7. Clients Section:
- Swiper.js-powered section with animated testimonials and background images.
- Autoplay feature for smooth transitions between feedback.
8. Blog Section:
- Featured Clients: A selection of clients that Jerry has worked with.
9. Team Section:
- Team Information: Details about the team that collaborates with Jerry.
10. Contact Section:
- Contact Form: A form that allows visitors to communicate with Jerry directly.
- SweetAlert2 messages for form submissions.
- Quick access to all sections using the navbar.
- Smooth scrolling enhances the user experience.
- Fully responsive design ensures compatibility with all screen sizes.
HTML5:
Structured the web content with semantic tags.
CSS3:
Custom styles for each section, including media queries for responsiveness.
Separate stylesheets for dark mode (darkmode.css), general styling (general.css), and media queries (media.css).
JavaScript:
Handles the navbar toggle and menu transition.
Implements dark mode functionality and counter animations on scroll.
Controls Swiper.js configuration for testimonials and portfolio sliders.
Bootstrap :
To enhance the responsive design and ensure compatibility across various screen sizes.
Font Awesome:
Provides icons for navigation, services, and dark mode toggle.
Google Fonts:
Fonts used: Poppins, Roboto, and Inter for enhanced typography.
GLightbox:
To display images in a lightbox format.
Swiper.js:
For an interactive display of works with smooth scrolling.
AOS (Animate On Scroll):
To add sliding effects during scrolling.
We welcome contributions to Daniels! Here’s how you can help:
-
Fork the repository - Click the "Fork" button at the top right of the repository page.
-
Clone your fork - Use the command:
git clone https://github.com/OmarrSakr/Daniels-Website.git
# Daniels/
│
├── 📂 CSS/
│ ├── all.min.css — Font Awesome styles
│ ├── bootstrap.min.css — Bootstrap CSS for layout and styling
│ ├── general.css — General website styling
│ ├── media.css — Media queries for responsiveness
│ ├── aos.css — Animate On Scroll (AOS) styles
│ ├── glightbox.min.css — GLightbox styles for lightbox functionality
│ ├── swiper-bundle.min.css — Swiper.js styles for sliders and carousels
│ ├── sweetalert2.min.css — SweetAlert2 CSS for popup alerts
│ └── style.css — Main stylesheet
│
├── 📂 images/ — Images used across sections
│
├── 📂 Js/
│ ├── index.js — Main JS file handling navbar and interactions
│ ├── jquery-3.6.3.min.js — jQuery library
│ ├── bootstrap.bundle.min.js — Bootstrap JavaScript bundle
│ ├── jquery.waypoints.min.js — Waypoints library for scroll detection
│ ├── noframework.waypoints.js — Waypoints without framework dependencies
│ ├── jquery.counterup.min.js — CounterUp plugin for animated counters
│ ├── navbar-toggle-icon.js — Script to toggle menu and cancel icon
│ ├── darkmode-theme-toggle.js — Handles dark mode toggle across pages
│ ├── fill-form-contact-section.js — Validates contact form inputs
│ ├── sweetalert2.min.js — SweetAlert2 for popup alerts
│ └── isotope.pkgd.min.js — Isotope library for filtering and layout
│
├── 📂 swiper/
│ └── swiper-bundle.min.js — Swiper.js for sliders and carousels
│
├── 📂 glightbox/
│ └── glightbox.min.js — GLightbox for lightbox functionality
│
├── 📂 aos/
│ └── aos.js — Animate On Scroll (AOS) library
│
├── 📄 index.html — Main HTML file
└── 📄 README.md — Project documentation
- Add More Services and Projects: Expand the portfolio section by including additional services and projects to showcase Jerry Daniels' work.
- Integrate Email Functionality: Implement email functionality to handle form submissions, allowing for better communication with visitors.
- Include a Blog Section: Create a blog section to share articles, insights, and updates related to design and development.
- This project is a
static websiteand does not include a backend or dynamic content. - Contributions are welcome to enhance the website’s interactivity and design!
