This is a personal portfolio website designed to showcase my projects, skills, and contact information.
- Introduction
- Features
- Technologies Used
- Getting Started
- Project Structure
- Usage
- Code Overview
- Contributing
- License
- Contact
This project is a fully responsive personal portfolio website developed to highlight my work, technical skills, and professional background. The website includes sections such as About, Resume, Portfolio, Blog, and Contact.
- Responsive design compatible with desktops, tablets, and mobile devices
- Sidebar navigation with a toggle functionality
- Dynamic portfolio filtering based on project categories
- Testimonials section with a modal pop-up
- Contact form with validation and submission handling
- Smooth animations and transitions for a polished user experience
- HTML5: Structure and semantic content of the website
- CSS3: Styling and layout
- JavaScript (ES6+): Interactive features and DOM manipulation
- Google Fonts: Custom fonts for typography
- Ionicons: Icon library for visual elements
- Media Queries: Responsive design ensuring cross-device compatibility
-
Clone the repository:
git clone https://github.com/Nipuna-Lakruwan/nipunas-portfolio.git
-
Navigate to the project directory:
cd nipunas-portfolio -
Open the project in your preferred IDE or text editor.
nipunas-portfolio/
├── index.html
├── assets/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.icoOpen
index.html
in a web browser to view the portfolio website.
index.html
- Description: Main HTML file setting up the structure of the website.
- Key Sections:
<head>: Meta information, title, favicon, CSS links, and fonts.<body>: Contains the main content, including the sidebar and main sections.
style.css
- Description: Contains all the styling for the website.
- Key Features:
- CSS variables for consistent styling.
- Reset styles for cross-browser compatibility.
- Responsive design using media queries.
script.js
- Description: Adds interactivity to the website.
elementToggleFunc
: Toggles the active class on elements.
- Sidebar toggle for mobile view.
- Testimonials modal functionality.
- Portfolio filter functionality.
- Contact form validation and submission handling.
Contributions are welcome. Please follow these steps:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature-name
-
Commit your changes:
git commit -m "Add new feature" -
Push to the branch:
git push origin feature-name
-
Submit a pull request.
This project is licensed under the MIT License.
For any inquiries, please contact me at [email protected].