Tech Stack

• React
• Increase the potential of the react app using libraries: Lodash
• Handle email functionality: Email.JS
• React Router since this is portfolio is a multi-page website
• React Redux (if necessary)
• TypeScript Note: This project will be implemented using JavaScript, migrating to TypeScript will come in future updates
• CSS framework: Bootstrap CSS along with SCSS for necessary customizations, also this includes using the specific version of bootstrap made for react called react-bootstrap
• Build tool: Vite.js
• Deployment platform: Netlify
• Implementing Animation is not a top priority right now: potential libraries: GSAP or Motion

Responsive Layout:

• Mobile First approach

Notes about the general layout:

• The sections i want to implement: About me(Home page, still not sure about including image), Skills, Contact, Projects, Resume
• Toggle Dark mode on/off
• Removing the following Parts from the template:
  • Search functionality
  • The animation of skills in the Home page

Note about Accessibility

Implementation of accessibility will be limited but further enhanced in the future, refer back to the corresponding Notion section

About Me Section:

The icons used in the navigation bar are from this website Navbar responsive behavior: in mobile view, the navbar will be hidden and the user will have to press the menu button to toggle it on & off. In tablet view, it will become visible showing only the icons of different sections and finally, in the desktop view it will be completely visible.

Projects Section

This section will essentially have 4 projects, each with its own description , title , tech stack and links to live preview & github You can later add a link to a website fully dedicated to showing all the projects with category and search functionality

General Notes:

• Adding Potential Easter Eggs
• Add a reference to the website and design
• All the icons used must be suitable for both dark and light mode (this may require using one for each mode)
• Add the following social media icons:
  • Github
  • Linkedin
  • CodePen: not now but after I rework my profile and add some good work in it
  • Dev Community: not now (maybe after I get to write some articles there)
  • Instagram, Facebook, YouTube & Twitter: if I am able to create something relevant
• See the original Design
• Dark mode is the default mode

Break points for responsive design

• 320px — 480px: Mobile devices
• 481px — 768px: iPads, Tablets
• 769px — 1024px: Small screens, laptops
• 1025px — 1200px: Desktops, large screens