https://github.com/nipuna-lakruwan/nipuna-portfolio
This is a personal portfolio website designed to showcase my projects, skills, and contact information.
https://github.com/nipuna-lakruwan/nipuna-portfolio
Last synced: 2 months ago
JSON representation
This is a personal portfolio website designed to showcase my projects, skills, and contact information.
- Host: GitHub
- URL: https://github.com/nipuna-lakruwan/nipuna-portfolio
- Owner: Nipuna-Lakruwan
- Created: 2024-12-14T17:37:43.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-01T20:59:04.000Z (3 months ago)
- Last Synced: 2025-02-01T21:26:32.884Z (3 months ago)
- Language: CSS
- Homepage: https://nipunalakruwan.me/
- Size: 5.37 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nipuna's Portfolio
This is a personal portfolio website designed to showcase my projects, skills, and contact information.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Project Structure](#project-structure)
- [Usage](#usage)
- [Code Overview](#code-overview)
- [index.html](#indexhtml)
- [style.css](#stylecss)
- [script.js](#scriptjs)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## Introduction
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.
## Features
- 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
## Technologies Used
- **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
## Getting Started
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/Nipuna-Lakruwan/nipunas-portfolio.git
```
2. **Navigate to the project directory**:
```bash
cd nipunas-portfolio
```
3. **Open the project** in your preferred IDE or text editor.
## Project Structure
```bash
nipunas-portfolio/
├── index.html
├── assets/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.ico
```
## Usage
Open
index.html
in a web browser to view the portfolio website.
## Code Overview
###
index.html
- **Description**: Main HTML file setting up the structure of the website.
- **Key Sections**:
- ``: Meta information, title, favicon, CSS links, and fonts.
- ``: 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.
- **Key Functions**:
-
elementToggleFunc
: Toggles the `active` class on elements.
- Sidebar toggle for mobile view.
- Testimonials modal functionality.
- Portfolio filter functionality.
- Contact form validation and submission handling.
## Contributing
Contributions are welcome. Please follow these steps:
1. **Fork the repository**.
2. **Create a new branch**:
```bash
git checkout -b feature-name
```
3. **Commit your changes**:
```bash
git commit -m "Add new feature"
```
4. **Push to the branch**:
```bash
git push origin feature-name
```
5. **Submit a pull request**.
## License
This project is licensed under the MIT License.
## Contact
For any inquiries, please contact me at [[email protected]](mailto:[email protected]).