Pranto Mollick Portfolio HTML CSS Website

Welcome to the Sushi Delight Responsive Theme repository! This premium, developer-friendly theme is designed to create stunning, responsive websites with a delightful sushi theme. Perfect for restaurants, food bloggers, or anyone looking to add a touch of elegance to their web presence.

Table of Contents

1. ⬇️ Installation
2. 📂 Folder Structure
3. ⚙️ Tech Stack
4. 🛠️ Features
5. 🤝 Connect With me
6. 🧾 Credit

⬇️ Installation

Follow these steps to set up the project locally on your machine. Prerequisites Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

$ git clone https://github.com/prantomollick/pranto-portfolio.git

$ cd pranto-portfolio

Installation Install the project dependencies using npm:

$ npm install

Running the Project

$ npm run dev

Open http://localhost:5173 in your browser to view the project.

📂 Folder Structure

.
├── README.MD
├── index.html
├── javascript.svg
├── package-lock.json
├── package.json
├── public
│   ├── hero-section-1
│   │   ├── Chart.svg
│   │   ├── Ellipse 4.svg
│   │   ├── Graph.svg
│   │   ├── Group 1966.svg
│   │   ├── Heart.svg
│   │   └── young-attractive-handsome-guy-feels-delighted-gladden-amazed 1.png
│   ├── icons
│   │   └── ArrowUpRight.svg
│   ├── logo.svg
│   ├── portfolio
│   │   ├── project-1.png
│   │   ├── project-10.png
│   │   ├── project-2.png
│   │   ├── project-3.png
│   │   ├── project-4.png
│   │   ├── project-5.png
│   │   ├── project-6.png
│   │   ├── project-7.png
│   │   ├── project-8.png
│   │   └── project-9.png
│   ├── service
│   │   ├── backend-1.png
│   │   ├── frontend-1.png
│   │   └── secure-computer-4530142_640.png
│   ├── testimonial
│   │   ├── image-1.png
│   │   ├── image-2.png
│   │   └── image-3.png
│   └── vite.svg
└── src
    ├── css
    │   ├── global.css
    │   ├── keyframes.css
    │   ├── queries.css
    │   ├── style.css
    │   └── utilities.css
    └── js
        └── main.js

⚙️ Tech Stack

• HTML5
• CSS 3
• AOS Animate on scroll library

🛠️ Features

Key Features and Techniques

• CSS Variables: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project.
• Importing CSS Files: Promote modularity and organization in styling by importing CSS files into others.
• Flex and Position Properties: Employ flex and position properties in CSS to create responsive and well-structured layouts.
• Rendering HTML through JavaScript: Enhance code efficiency by rendering HTML through JavaScript using reusable functions.
• Smooth Animations: Implement smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.
• BEM Methodology: Follow the Block Element Modifier (BEM) methodology for naming classes, promoting a clear and maintainable structure.
• Organized File and Folder Structure: Maintain a well-organized file and folder structure for easy navigation and management of project assets.
• Responsive Design: Fully responsive design optimized for mobile, tablet, and desktop views.
• Cross-Browser Compatibility: Compatible with modern web browsers like Chrome, Firefox, Edge, and Safari.
• Optimized Performance: Lazy loading of images and minified CSS/JS for faster loading times.
• SEO Friendly: Meta tags, schema markup, and clean semantic code to improve search engine rankings.
• Interactive Animations: Engaging hover effects and transitions using CSS and JavaScript.
• Accessible Design: Follows WCAG 2.1 guidelines, ensuring inclusivity for all users.
• Smooth Scrolling: Enables a seamless user experience while navigating between sections.
• HTML5 & CSS3: Structured content with modern styles using Flexbox and Grid.
• JavaScript/ES6: Dynamic interactions and logic for user interface components.
• Version Control (Git): Managed project changes with Git and GitHub.

Website Sections

• Header
• Hero Section
• Clients Section
• About Us Section
• Skills Section
• Portfolio Section
• Clients Testimonial Section
• My Service Section
• Stats Section
• Footer Section

🤝 Connect With me

👥 @prantomollick ❌ @prantomollick55 ✉️ prantomollick01@gmail.com 🌎 https://prantomollick.com

🧾 Credit

This project is develope to followed by Pranto Mollick! prantomollick.com