Welcome to my portfolio! This project is a responsive website built using only HTML, CSS, and JavaScript. It showcases my projects, skills, and experience as a web developer. The website is designed with modern web development practices to ensure it looks great on all devices, from desktops to mobile phones.
- Responsive Design: The website adapts to various screen sizes (desktop, tablet, and mobile) using CSS media queries.
- Interactive UI: JavaScript-powered animations and transitions provide a smooth, dynamic user experience.
- Project Carousel: A responsive carousel displaying two project images at a time, with smooth transitions on navigation.
- Smooth Transitions: Navigation between sections and elements happens smoothly with CSS and JavaScript.
- Contact Form: A functional contact section where users can reach out to me directly.
- No Frameworks: The website is built without any CSS frameworks (e.g., Bootstrap) or JavaScript libraries (e.g., jQuery). Everything is handcrafted for performance and customization.
The website is designed to be fully responsive. Here's how the layout adjusts based on screen size:
- Desktop Layout: A multi-column design with navigation, projects, and contact sections laid out horizontally.
- Tablet Layout: Adjusts to a two-column design with stacked projects and responsive grid changes.
- Mobile Layout: Single-column layout for easy navigation on small screens. Buttons and text scale appropriately for smaller devices.
Media queries are used to change the layout and styling depending on the screen width, ensuring optimal display on all devices.
- Color Scheme: A modern color palette that combines dark gray with white text and accent colors for links and hover effects.
- Typography: Elegant, professional font choices for headers and body text to maintain readability and aesthetics.
- Animations and Transitions: Subtle CSS and JavaScript-based transitions are applied to various UI elements for smooth animations.
- Hover Effects: Interactive buttons and links with hover effects to enhance user experience.
- Grid and Flexbox: Layout is managed using CSS Grid and Flexbox for optimal alignment and distribution of elements.
- HTML5: Semantic HTML5 elements for a well-structured and accessible website.
- CSS3: Advanced CSS3 features like Flexbox, Grid, media queries, and animations.
- JavaScript (ES6+): For interactive elements like the project carousel, smooth transitions, and responsive behavior.
📁 david-portfolio/
│
├── 📁 css/ # Contains all CSS files
│ └── styles.css # Main CSS file for styling the entire website
│
├── 📁 js/ # Contains JavaScript files
│ └── script.js # Main JavaScript file for website interactions
│
├── 📁 images/ # Contains images used in the website
│
├── 📁 projects/ # Project thumbnails and images used in carousel
│
├── index.html # Main HTML file
│
└── README.md # Project README file
The portfolio is designed to be customizable. You can easily modify:
- Content: Update the HTML content in index.html to reflect your projects, skills, and experience.
- Styling: Modify styles.css to customize the color scheme, fonts, and layout to match your personal brand.
- Animations: Adjust the animations and transitions defined in script.js for custom interactive effects.
If you have any questions or suggestions, feel free to reach out to me:
- Email: davidisumba@gmail.com
- GitHub: @prototypedave
- LinkedIn: David Isumba
You can view the live version of this portfolio here: https://prototypedave.github.io
Feel free to explore and let me know if you have any feedback or collaboration opportunities and leave a star!