diff --git a/Projects/2-Intermediate/Portfolio-Website.md b/Projects/2-Intermediate/Portfolio-Website.md new file mode 100644 index 00000000..12481cef --- /dev/null +++ b/Projects/2-Intermediate/Portfolio-Website.md @@ -0,0 +1,57 @@ +# **Portfolio App** + +**Tier:** 2 - Intermediate + +A **Portfolio App** is a personal website that showcases your professional background, projects, skills, and achievements. It helps recruiters, clients, and collaborators quickly understand your technical expertise and career highlights. The app provides sections such as *About Me*, *Skills*, *Projects*, *Experience*, and *Contact*. + +--- + +### **Purpose** +The purpose of this application is to create a visually appealing and responsive online portfolio that highlights a developer’s profile, skills, and work samples. + +--- + +### **Resources Needed** +- React.js (Frontend framework) +- Tailwind CSS or Bootstrap for styling +- GitHub Pages or Vercel for deployment +- Figma (for design reference) + +--- + +## **User Stories** + +- [ ] User can view a professional landing page with the developer’s name and tagline. +- [ ] User can view an "About Me" section with personal and career details. +- [ ] User can browse through a list of showcased projects with links and descriptions. +- [ ] User can view skills represented via progress bars or icons. +- [ ] User can find contact information and social media links. +- [ ] User can switch between light and dark mode. + +--- + +## **Bonus Features** + +- [ ] User can download the developer’s resume. +- [ ] User can view GitHub contributions or stats dynamically. +- [ ] User can see animations or transitions when navigating between sections. +- [ ] User can submit a message via a contact form integrated with EmailJS. + +--- + +## **Useful Links and Resources** + +- **DeveloperFolio Template:** [https://developerfolio.js.org/](https://developerfolio.js.org/) +- **GitHub Repository:** [https://github.com/saadpasta/developerFolio](https://github.com/saadpasta/developerFolio) +- **Live Example:** [https://techggdev.vercel.app/](https://techggdev.vercel.app/) +- React Documentation: [https://react.dev/](https://react.dev/) +- Tailwind CSS Docs: [https://tailwindcss.com/docs](https://tailwindcss.com/docs) + +--- + +## **Example Projects** + +- [DeveloperFolio by Saad Pasta](https://github.com/saadpasta/developerFolio) +- [TechGGDev Portfolio](https://techggdev.vercel.app/) + +These examples demonstrate structure, responsiveness, and design inspiration for building a professional developer portfolio. diff --git a/README.md b/README.md index c54bfa41..c9be4697 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,7 @@ required to complete them. | [To-Do App](./Projects/2-Intermediate/To-Do-App.md) | Manage personal to-do tasks | 2-Intermediate | | [Typing Practice](./Projects/2-Intermediate/Typing-Practice-App.md) | Typing Practice | 2-Intermediate | | [Voting App](./Projects/2-Intermediate/Voting-App.md) | Voting App | 2-Intermediate | +| [Portfolio Website](./Projects/2-Intermediate/Portfolio-Website.md) | Portfolio Website | 2-Intermediate | ### Tier-3: Advanced Projects