A modern, responsive portfolio website showcasing my work as a Full-Stack Web Developer
A description for your portfolio project should be clear, concise, and informative. It should highlight the project's goals, challenges, and outcomes. It should also showcase your skills and abilities.
- Responsive Design: Optimized for all devices from mobile to desktop
- Dark/Light Mode: Toggle between themes with local storage persistence
- Smooth Animations: AOS animations and custom CSS transitions
- Interactive Elements: Hover effects and micro-interactions
- Contact Form: Functional contact form using Formspree
- Modern UI: Clean, professional design with gradient accents
- Performance Optimized: Fast loading with optimized assets
- Clone the repository:
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name- Install dependencies:
npm install- Start the development server:
npm start- Open your browser and visit
http://localhost:3000
├── index.html # Main HTML file
├── style.css # Main stylesheet
├── projectStyle.css # Project section styles
├── script.js # JavaScript functionality
├── projectData.json # Project data
├── img/ # Images and icons
├── assest/ # Assets (resume, preloader)
└── Fonts/ # Custom fonts
You Can See live on https://rishabhkushwah.netlify.app/
I am a Frontend Web Developer who is passionate about learning and constantly improving my skills in the field. My goal is to stay at the forefront of web development trends and technologies.
In addition to my development work, I also enjoy sharing my knowledge with the web development community. Feel free to connect with me or follow me to stay updated with my insights.
-
HTML: The project's structure and content were created using HTML, the standard markup language for building web pages.
-
CSS: CSS was used to style and design the project, ensuring a visually appealing and responsive layout.
-
JavaScript: We implemented interactivity and dynamic behavior on the site with JavaScript, enhancing the user experience.
-
Font Awesome Icons: Icon fonts from Font Awasome were used to incorporate a wide range of icons, enhancing the project's visual elements.
-
SVG Icons: SVG icons from Iconduck were utilized to provide scalable and high-quality icons for the project.
-
Chatbot Integration: The project features a chatbot integrated from Tidio to provide real-time communication and support.
-
Custom Preloader GIF: To enhance the user experience and provide visual feedback while the page loads, a custom preloader GIF from Loading.io was added.
-
Contact Form: The contact form in the project was implemented using Formspree, enabling users to easily get in touch.
-
Project SVG Graphics: SVG graphics for the project's visual elements were sourced from Freepik, ensuring a visually engaging design.
These technologies and libraries were thoughtfully chosen to create a seamless and visually appealing user experience while keeping the project lightweight and efficient.
-
Day/night mode with local storage: This is a great feature for users, as it allows them to choose the mode that is most comfortable for them and to have their preference saved so that they don't have to select it every time they visit your site.
-
Custom scroll bars: This is a nice touch that can give your site a more polished look and feel.
-
View project code: This is a great feature for developers and designers, as it allows them to see how your code works and to learn from your work.
-
Responsive design: This is important for ensuring that your site looks good and functions well on all devices, from desktop computers to mobile phones.
-
Preloader: This is a nice way to keep users engaged while your site is loading.
-** Chatboat for direct contact**: This is a great way to make it easy for users to get in touch with you.
-
Mail in form contact section: This is a traditional way for users to contact you, and it's still a good option to have available.
-
Cool hover effect: This is a fun way to add some visual interest to your site.
Page Performance Metrics (Based on Median Run by Speed Index):
First View (Run 3):
Time to First Byte: 0.714 seconds
Start Render: 1.900 seconds
First Contentful Paint: 1.908 seconds
Speed Index: 4.700 seconds
Largest Contentful Paint: 1.908 seconds
Cumulative Layout Shift: 0.002
Total Blocking Time: 0.460 seconds
Page Weight: 1,744KB
These metrics offer insights into the performance of the project during the median run, with a particular focus on the Speed Index, a crucial indicator of how quickly a user perceives the page becoming usable. Here are some additional details to help you understand these metrics:
Time to First Byte: This measures how long it took for the first byte of data to be received from the server, indicating the server's responsiveness.
Start Render: It represents the time when the browser began rendering content.
First Contentful Paint: This metric marks when the first content (e.g., text or images) appeared on the page.
Speed Index: The Speed Index is a key indicator of user experience, showing how quickly the page appears to be usable.
Largest Contentful Paint: This metric indicates when the largest visible content element on the page finished loading.
Cumulative Layout Shift: It measures the extent to which the layout of the page shifts during loading, which can impact user experience.
Total Blocking Time: This quantifies how much time the main thread was blocked, which can affect interactivity.
Page Weight: This is the total size of all resources (HTML, CSS, JavaScript, images, etc.) load by the page.