Portfolio Project

1. Introduction

This document outlines the system requirements for a personal portfolio website for Safayet Zamil Nowshan, a Youth Human Rights Activist. The website aims to showcase achievements, engagements, and expertise to attract recruiters and hirers. It will include sections for events, publications, a blog, and youth opportunities, with a focus on an attractive, youth-friendly design.

2. System Overview

The portfolio website will serve as a digital showcase for Safayet Zamil Nowshan's professional journey and contributions in the field of youth policy research and multilateral engagement. It will feature sections for professional experience, publications, events, a blog, and youth opportunities, all editable by the user.

3. Functional Requirements

User Stories

• As a Youth Human Rights Activist, I want to showcase my achievements and engagements to attract recruiters and hirers.
• As a Youth Human Rights Activist, I want to upload and showcase events I participated in, so visitors can see my involvement.
• As a Youth Human Rights Activist, I want to display my publications, so visitors can read my work.
• As a Youth Human Rights Activist, I want to present my expertise and what I deliver, to highlight my skills and competencies.
• As a Youth Human Rights Activist, I want a blog section where I can upload content weekly, to keep my audience updated.
• As a Youth Human Rights Activist, I want to edit the content anytime, so I can update my jobs and achievements as needed.
• As a Youth Human Rights Activist, I want to showcase my advocacy writing, to demonstrate my skills in influencing policy.
• As a Central Youth Volunteer, I want to highlight my volunteer experiences, to show my commitment to youth engagement.
• As a holder of an MSS in International Relations, I want to display my educational background, to emphasize my academic qualifications.
• As an Operations Lead, I want to detail my leadership roles, to illustrate my management capabilities.
• As a UN Youth Champion for Disarmament, I want to present my contributions to disarmament advocacy, to highlight my global impact.
• As a Youth Advisor, I want to share my advisory roles, to showcase my influence in youth policy development.
• As a Youth Human Rights Activist, I want to include consultation synthesis, to demonstrate my ability to gather and analyze diverse perspectives.
• As a Youth Human Rights Activist, I want to highlight my stakeholder coordination skills, to show my effectiveness in collaborative environments.
• As a Youth Human Rights Activist, I want to demonstrate my ability in translating youth perspectives into actionable insights, to emphasize my advocacy impact.
• As a Youth Human Rights Activist, I want to showcase my diplomatic liaison experience, to highlight my skills in international relations.
• As a Youth Human Rights Activist, I want to display my experience in drafting multilateral declarations, to show my contributions to global policy.
• As a Youth Human Rights Activist, I want to present my work in producing comparative policy research, to demonstrate my analytical skills.
• As a Youth Human Rights Activist, I want to upload youth opportunities for young people, to provide valuable resources and information.

4. User Personas

Safayet Zamil Nowshan

• Role: Youth Human Rights Activist
• Goals: To showcase professional achievements and attract potential recruiters and collaborators.
• Needs: A platform to display events, publications, a blog, and youth opportunities, with the ability to update content regularly.

5. Core User Flows

Flow for Updating Blog Content

1. Safayet logs into the website.
2. Navigates to the blog section.
3. Clicks on "Add New Post" or selects an existing post to edit.
4. Enters or updates the content.
5. Saves the changes.
6. The updated content is displayed on the website.

Flow for Uploading Event Participation

1. Safayet logs into the website.
2. Navigates to the events section.
3. Clicks on "Add New Event."
4. Uploads images and enters event details.
5. Saves the changes.
6. The new event is displayed on the website.

Flow for Uploading Youth Opportunities

1. Safayet logs into the website.
2. Navigates to the youth opportunities section.
3. Clicks on "Add New Opportunity."
4. Enters details about the opportunity and uploads any relevant documents.
5. Saves the changes.
6. The new opportunity is displayed on the website.

6. Visuals Colors and Theme

• Primary: #1A73E8 (a deep blue reminiscent of the United Nations)
• Primary Light: #4D90FE (a lighter tint of the primary color)
• Secondary: #FF6F61 (a coral hue for emphasis and links)
• Accent: #FFD700 (a vibrant gold for call-to-actions and badges)
• Highlight: #FFA500 (a warm orange for hover states and notifications)
• Background: #F5F5F5 (a soft, neutral background color)
• Surface: rgba(255, 255, 255, 0.9) (a light card/panel background)
• Text: #333333 (a dark color for primary text)
• Text Muted: #666666 (a softer color for secondary text)
• Border: rgba(0, 0, 0, 0.1) (a subtle border color)

7. Signature Design Concept

The homepage will feature an interactive "Global Impact Map" using @react-three/fiber and @react-three/drei. This 3D map will allow users to explore Safayet's global engagements and contributions. Each country Safayet has impacted will be highlighted, and clicking on a country will reveal a pop-up with details of his work there. The map will rotate and zoom smoothly as users interact with it, providing an engaging and informative experience. The map will be complemented by animated transitions and hover effects using gsap to enhance the storytelling aspect of the portfolio.

8. Interaction Model & Motion Direction

The website will utilize a "parallax" interaction model for the landing page, creating a layered depth effect as users scroll. Decorative elements will move at different speeds to create a dynamic visual experience, while content remains easy to read and navigate. Internal pages will focus on "static" layouts to ensure clarity and ease of access to information.

9. Non-Functional Requirements

• The website should be responsive and accessible on various devices and screen sizes.
• It should load quickly and efficiently, providing a seamless user experience.
• The content management system should allow easy updates without technical expertise.

10. Tech Stack

• Frontend: React.js
• Backend: Python + FastAPI
• Database: MySQL with Alembic migrations

11. Assumptions and Constraints

• The user will provide all content, including images and text, for the website.
• The website will be hosted on a platform that supports the specified tech stack.
• The design will adhere to the specified color scheme and font requirements.

12. Glossary

• Youth Human Rights Activist: An individual advocating for the rights and empowerment of young people.
• CMS: Content Management System, a platform for managing digital content.
• Responsive Design: A design approach that ensures a website looks good on all devices.