
SAID YAQUB SADAT
PERSONAL PORTFOLIO WEBSITE
Complete Product, UI/UX, Functional, Database, Security,Testing and Deployment Documentation
TECHNOLOGY STACK
React Frontend  •  Laravel Backend/API  •  MySQL Database
Brand direction: Deep Navy • Bright Blue • White
Prepared as an implementation specification

Document Control
Field
Details
Project
Said Yaqub Sadat Personal Portfolio
Document type
Complete project and implementation specification
Frontend
React
Backend
Laravel REST API or documented Laravel-integrated architecture
Database
MySQL
Primary audience
Recruiters, employers, organizations, clients, and collaborators
Status
Requirements baseline; update dates and details before release
1. Executive Summary
Build a complete, responsive, professional personal portfolio for Said Yaqub Sadat. The application must communicate a clear technical identity, demonstrate genuine software projects, present career and education information, provide a downloadable CV, and make it easy for employers or clients to contact the owner.
This is a full application—not only a static homepage. It includes a public React website, a Laravel backend, a MySQL data model, a secure administrator dashboard, content management, contact handling, testing, and deployment documentation.
2. Goals and Success Criteria
Present a consistent, credible professional identity.
Show real projects with the problem, contribution, architecture, features, and verified outcomes.
Allow the owner to update projects, skills, experience, education, certificates, and settings without editing source code.
Make the site responsive, accessible, fast, secure, and search-engine friendly.
Provide a working CV download and validated contact form.
Deploy safely with production configuration, backups, and a documented recovery process.
3. Brand and Visual Design System
Use the uploaded Said Yaqub Sadat logo as the brand reference. The palette below is a recommended implementation palette inspired by the logo; it is not a claim that the values were sampled exactly from the image.
Token
Hex
Usage
Deep Navy
#0B1B32
Logo text, headings, primary navigation, footer, dark panels
Primary Blue
#087FE5
Primary CTA, active links, highlights, selected controls
White
#FFFFFF
Main content surfaces, cards, forms
Light Background
#F1F5F9
Page backgrounds, subtle section separation
Body Text
#334155
Paragraphs and supporting content
Muted Text
#64748B
Secondary labels and metadata
Pale Blue
#DBEAFE
Tags, selected states, subtle callouts
Border
#E2E8F0
Card outlines, dividers, input borders
Success
#15803D
Successful actions only
Error
#B91C1C
Validation errors and destructive warnings
3.1 Visual rules
Use white/light backgrounds for most public content, navy for high-emphasis elements, and blue sparingly for actions.
Keep one consistent icon family and a limited set of border radii, shadows, spacing values, and button heights.
Use a readable sans-serif font such as Inter; body text should normally be around 16–18 px on desktop.
Avoid excessive gradients, glowing effects, animation, unnecessary cards, and large empty sections.
Use actual project screenshots and a real professional portrait. Label concept work clearly.
Maintain accessible contrast, visible keyboard focus, semantic HTML, and appropriately sized touch targets.
Use a responsive layout at mobile, tablet, laptop, and wide-desktop sizes.
3.2 Design tokens
Create reusable design tokens for colors, spacing, typography, shadows, radii, breakpoints, and component states. Do not hardcode different blue values throughout the application.
4. Users and Access
User
Permissions
Public visitor
Browse published pages and projects, download public CV, submit contact form
Administrator
Authenticate; create, edit, preview, publish, archive, and manage portfolio content; review contact messages; update site settings
Start with one administrator account. Add extra roles only if a genuine business requirement exists. Enforce all administrative permissions on the backend; hiding buttons in React is not authorization.
5. Public Information Architecture
Page
Content and behavior
Home
Hero, identity, short summary, technology highlights, featured projects, experience preview, contact CTA
About
Biography, professional focus, values, and career interests
Skills
Categorized skills and honest proficiency labels
Projects
Search, category filters, cards, pagination where needed
Project detail
Problem, solution, role, features, stack, architecture, screenshots, verified results, links
Experience
Employment timeline with title, organization, dates, responsibilities
Education
Degrees, institutions, dates, relevant certificates
Certificates
Credential details, issuer, date, optional verification link
CV
Download current PDF and display concise professional summary
Contact
Validated contact form, email, LinkedIn, GitHub
Privacy
Explain contact data collection, usage, retention, and contact process
404 / error pages
Helpful, branded recovery navigation
Optional blog
Technical articles, categories, slugs, publication states
6. Homepage Specification
Header: logo, navigation, active page state, responsive mobile menu, CV action.
Hero: name, title, concise value proposition, professional image, Explore Projects and Download CV actions.
Technology strip: Laravel, PHP, React, MySQL, JavaScript, and relevant frontend technologies.
About preview: short biography and link to the full About page.
Featured projects: three to six genuine projects with title, summary, technology badges, and details link.
Experience preview: latest verified role and concise contribution.
Skills and education previews.
Contact CTA and footer with verified social links.
6.1 Suggested hero copy
SAID YAQUB SADAT
Full-Stack Web Developer
Building reliable web applications, database-driven systems, and digital solutions using Laravel, React, and MySQL.
Primary CTA: Explore My Projects. Secondary CTA: Download CV.
7. Professional Content Rules
Use only accurate, verifiable career information. Confirm employment dates, job titles, responsibilities, credentials, project status, scale, and impact before publication. Do not invent client endorsements, awards, project outcomes, metrics, or qualifications.
7.1 Initial content to verify
Item
Initial value
Verification needed
Name
Said Yaqub Sadat
Confirm preferred public display
Title
Full-Stack Web Developer | Laravel & Database Specialist
Confirm final wording
Location
Kabul, Afghanistan
Publish only if desired
LinkedIn
https://linkedin.com/in/said-yaqubsadat-b286a5308
Test link
GitHub
https://github.com/Saidyaqub1234
Test link
Existing portfolio
https://saidyaqub1234.github.io/portfolio/
Test link
Email
saidyaqubsadat10@gmail.com
Confirm address is correct
Moraa role
Database Developer; May 2025–Present
Confirm title and dates
Gurgure role
Web Developer; July 2025–Present
Confirm title, dates, and whether concurrent
CSEC role
Finance Officer; 2023–2025
Confirm exact dates and responsibilities
Education
Kabul Polytechnic University, Computer Science / Information Systems, 2021–2025
Confirm official degree wording
7.2 Suggested skills categories
Category
Skills
Backend
PHP, Laravel, REST APIs, authentication, authorization, application logic
Database
MySQL, SQL, relational modeling, schema design, indexing, query optimization
Frontend
React, JavaScript, HTML, CSS, Bootstrap, Tailwind CSS
Other frameworks/languages
Vue.js, C++, Java, Python—include only at accurate proficiency
Systems
LMS, MIS, dashboards, reporting, educational and business applications
Workflow
Git, GitHub, debugging, testing, deployment, documentation
8. Project Portfolio Requirements
Every project must have a dedicated detail page. Project cards must be concise; case studies must explain the technical and practical value of the work.
Project name, unique slug, short description, full description, category, status, role, and contribution.
Technologies used, start/end dates where appropriate, featured flag, sort order, and publication state.
Cover image and multiple screenshots with captions and alt text.
Optional live demo and repository links; do not show unavailable or unauthorized links.
Problem statement, target users, solution, key workflows, technical design, challenges, and verified results.
Draft, published, and archived states; only published projects appear publicly.
Search, category filtering, pagination, and stable sorting.
Clearly label prototypes and projects that are still in development.
8.1 Suggested project categories
LMS & Education Systems; MIS & Databases; ERP & CRM; Web Applications; APIs & Integrations; Other Software.
9. React Frontend Requirements
Use reusable components and a consistent design system.
Use React Router or the selected routing solution for public and admin navigation.
Implement clear loading, empty, success, validation, and error states.
Use a centralized API client with a configurable base URL and consistent error handling.
Keep secrets out of browser code; frontend environment variables are not secret storage.
Implement responsive menus, keyboard-accessible dialogs, form labels, focus states, and useful alt text.
Do not put business-critical authorization decisions solely in the client.
Use appropriate state management; avoid introducing a large state library unless required.
Optimize image delivery, lazy-load noncritical media, and avoid unnecessary JavaScript.
10. Laravel Backend/API Requirements
Use clear route groups for public and admin endpoints.
Use controllers, request validation classes, Eloquent models, and service classes where they provide real value.
Return consistent JSON structures and correct HTTP status codes for API responses.
Validate every request on the server; apply authorization policies to protected operations.
Use pagination and validated filters for list endpoints.
Use transactions for multi-step writes when data consistency requires them.
Implement safe upload handling and controlled storage paths.
Keep credentials and environment-specific configuration outside source control.
Document authentication approach, API endpoints, request parameters, response formats, and error behavior.
10.1 Architecture decision
Choose one documented architecture before implementation: (A) React SPA consuming a Laravel REST API, or (B) React integrated into a Laravel application using a documented integration strategy. For a separate SPA, configure authentication and CORS intentionally—use a suitable secure session/Sanctum approach or another justified mechanism. Do not mix incompatible cookie, token, and CSRF assumptions.
11. MySQL Database Design
Table
Purpose
users
Administrator identity and authentication
profile_settings
Name, biography, portrait, social links, public profile fields
skills
Skill names, category, proficiency, description, icon, sort order
experiences
Organization, job title, dates, summary, responsibilities
educations
Qualification, institution, field, dates, description
certificates
Credential title, issuer, issue date, URL/file metadata
projects
Project details, slug, role, status, dates, links, publication state
project_categories
Category definitions
project_category
Many-to-many project/category mapping
project_technologies
Project technology assignments or normalized technology relation
project_images
Image path, caption, alt text, order, project relationship
contacts
Contact submissions, status, timestamps, review metadata
site_settings
Branding, SEO defaults, contact and site configuration
blog_posts (optional)
Article content, slug, publication state, metadata
blog_categories (optional)
Blog category definitions
activity_logs
Relevant administrator actions with appropriate retention
11.1 Database rules
Create schema changes through Laravel migrations.
Use foreign keys, indexes, unique constraints, timestamps, and appropriate deletion behavior.
Use unique slugs for public detail routes.
Use explicit fillable/guarded policies and validate allowed fields.
Avoid storing multiple unrelated records in one field where normalized relationships are appropriate.
Use soft deletion only where recovery is useful and define how related records behave.
Do not store uploaded binary files in MySQL unless a documented requirement justifies it; store files and keep metadata/path in the database.
Never store plaintext passwords, API secrets, or private credentials.
12. Administrator Dashboard
Module
Required functions
Overview
Useful counts, recent inquiries, drafts, quick actions
Projects
Create/edit, preview, publish, archive, reorder, delete with confirmation
Categories and technologies
Create/edit/archive categories and project technology metadata
Skills
Manage categories, proficiency labels, descriptions, display order
Experience
Manage employers, titles, dates, responsibilities, ordering
Education
Manage qualifications, institutions, dates, descriptions
Certificates
Manage credential details and optional verification links
Media library
Upload, replace, caption, alt text, remove unused files safely
Messages
Search, view, mark read/replied, archive, delete according to retention rules
Site settings
Profile details, social URLs, branding, SEO defaults, CV file
Security/logs
Account security and relevant administrative activity
12.1 Dashboard usability
Use a responsive sidebar and a clear page title/breadcrumb.
Use consistent form layout, labels, help text, validation messages, and required indicators.
Provide search, filters, pagination, and sorting for longer lists.
Use confirmation dialogs for destructive operations.
Preserve form data after validation failures where safe.
Show clear success/error notifications without exposing technical secrets.
Support draft preview and clear publication status.
Keep the admin dashboard separate from public navigation.
13. Contact Form
Fields: full name, email, subject, and message. Validate required fields, email format, and maximum lengths server-side. Add CSRF protection, rate limiting, spam mitigation, safe persistence, and configurable email notifications.
Display a success message only after the submission has been saved successfully.
Report email delivery accurately; a stored message and a delivered email are different outcomes.
Restrict access to submissions to authorized administrators.
Define retention and deletion rules for personal information.
Do not expose private messages through public APIs.
14. CV and Media Handling
Store the current public CV in a controlled location and expose a stable download route or URL.
Check that the file exists and the download works before launch.
Validate image file type, file size, and dimensions; generate safe file names.
Do not trust the original filename or MIME type alone.
Keep private documents outside publicly accessible storage or serve them through authorized routes.
Use optimized image sizes and appropriate formats, captions, and alt text.
15. Security Requirements
Use a supported Laravel version and supported dependency versions.
Use secure authentication, password hashing, session settings, and account recovery.
Enforce authorization on every admin endpoint and protected download.
Apply CSRF protection where session-based authentication is used.
Validate inputs and prevent unsafe mass assignment.
Rate-limit login and contact endpoints.
Restrict uploads, prevent path traversal, and avoid executing uploaded content.
Use HTTPS in production and secure cookie settings.
Set production debug mode off and do not expose stack traces to visitors.
Keep .env, credentials, private keys, backups, and logs out of public access and source control.
Log relevant security events without logging passwords, tokens, or unnecessary personal data.
Back up database and media files and periodically test restoration.
16. SEO, Accessibility, and Performance
16.1 SEO
Unique title and meta description for each public page.
Canonical URLs where appropriate and correct Open Graph metadata.
Sitemap XML, appropriate robots.txt, and clean human-readable URLs.
Descriptive alt text and meaningful internal links.
Project-specific metadata rather than identical metadata on every page.
Verify the deployed site in search engine tools if desired.
16.2 Accessibility
Use semantic headings and HTML elements.
Support keyboard navigation and visible focus.
Associate every form field with a label.
Make validation errors understandable and programmatically associated where practical.
Maintain sufficient text/background contrast and do not use color alone to convey state.
Respect reduced-motion preferences.
16.3 Performance targets
Treat these as targets to measure on the deployed site, not as achieved results: Largest Contentful Paint (LCP) ≤ 2.5 seconds; Interaction to Next Paint (INP) ≤ 200 milliseconds; Cumulative Layout Shift (CLS) ≤ 0.1 at the 75th percentile.
17. Functional Requirements and Priority
ID
Requirement
Priority
FR-01
Responsive public pages and navigation
Must
FR-02
Database-backed project listing and detail pages
Must
FR-03
Admin authentication and authorization
Must
FR-04
CRUD for projects, skills, experience, education, certificates
Must
FR-05
CV download
Must
FR-06
Validated contact form and message inbox
Must
FR-07
Secure image uploads and media management
Must
FR-08
SEO metadata, sitemap, and social previews
Must
FR-09
Search and project category filtering
Should
FR-10
Draft preview and publication workflow
Should
FR-11
Dark/light theme
Should
FR-12
Technical blog
Optional
FR-13
Multiple languages
Optional
FR-14
Privacy-conscious analytics
Optional
18. Testing and Acceptance Criteria
Area
Acceptance criteria
Navigation
Every public navigation item and CTA opens the correct destination
Responsive UI
No major overflow or unusable controls at mobile, tablet, and desktop widths
Authentication
Unauthenticated requests cannot access protected admin resources
Authorization
Unauthorized writes and protected reads are rejected server-side
CRUD
Authorized administrator can manage each required content type
Publication
Draft and archived projects are not visible in public listings
Uploads
Invalid and oversized files are rejected; valid files display correctly
Contact
Valid messages are stored; invalid and abusive submissions are handled
CV
Current PDF downloads successfully and no stale file is served
Database
Migrations run cleanly; constraints and relationships behave as expected
SEO
Titles, descriptions, canonical URLs, sitemap, and social metadata are checked
Accessibility
Keyboard, focus, form labels, contrast, and semantic structure are reviewed
Deployment
HTTPS works, debug is disabled, logs are usable, and backups can be restored
18.1 Minimum automated tests
Public page status and project visibility.
Project detail lookup by slug and missing-project handling.
Admin login, logout, and unauthorized access.
CRUD validation and permission checks.
Contact form valid/invalid submissions and rate-limit behavior.
Upload restrictions.
CV download behavior.
Database relationship and publication-state behavior.
19. Deployment Requirements
Confirm compatible PHP version/extensions, Composer, Node tooling, MySQL, and web server.
Set production environment variables securely; never copy development secrets to production.
Configure the web root to Laravel's public directory where applicable.
Install production dependencies and build frontend assets.
Run reviewed migrations and confirm database connectivity.
Set correct storage/cache permissions and storage links as required.
Enable HTTPS, secure cookies, production logging, and debug mode off.
Test public pages, admin access, contact submissions, uploads, and CV downloads.
Schedule database and media backups and verify a restore.
Document rollback and recovery procedures.
20. Suggested Repository Structure
portfolio/├── frontend/                 # React application (if separately deployed)│   ├── src/│   │   ├── components/│   │   ├── layouts/│   │   ├── pages/│   │   ├── features/│   │   ├── services/         # API client│   │   ├── hooks/│   │   └── styles/│   └── package.json├── backend/                  # Laravel application (if separated)│   ├── app/│   ├── database/│   │   ├── migrations/│   │   └── seeders/│   ├── routes/│   ├── tests/│   └── composer.json├── docs/│   ├── requirements.md│   ├── architecture.md│   ├── database.md│   ├── api.md│   ├── testing.md│   ├── deployment.md│   └── user-guide.md└── README.md
If React is integrated into Laravel rather than deployed separately, follow the selected integration's conventions instead of creating an artificial frontend/backend split.
21. Implementation Phases
Phase
Work
Exit condition
1. Discovery
Inspect existing repo/environment; confirm architecture and content
Plan approved; no destructive changes made
2. Design
Design tokens, shared components, public layouts, responsive behavior
Public UI reviewed on mobile and desktop
3. Data layer
Migrations, models, relationships, seeders, validation
Database builds cleanly from migrations
4. Public features
Home, about, skills, projects, detail pages, timeline, CV, contact
Public flows work with database content
5. Admin
Auth, dashboard, content CRUD, media, messages, settings
Authorized admin can manage required content
6. Hardening
Security, accessibility, SEO, automated tests, performance
Critical tests pass; serious issues fixed
7. Release
Production setup, backups, deployment and user docs
Live site verified and restore process documented
22. User Guide Requirements
Document how to log in, create/edit a project, upload screenshots, change project publication state, manage skills and employment, update education and certificates, replace the CV, review messages, change site settings, and recover from common errors. Do not include actual production passwords in the guide.
23. Final Definition of Done
All required public pages are complete and responsive.
The logo and color palette are applied consistently.
React UI is connected to working Laravel endpoints and MySQL data.
All required admin content modules support their specified workflows.
Only published public content is visible to visitors.
Contact form and CV download work end-to-end.
Authorization, validation, upload restrictions, and production settings are verified.
SEO, accessibility, and performance have been checked.
Automated tests have been run and results documented.
README, architecture, database, API, testing, deployment, and user documentation are provided.
No fake claims, placeholder links, exposed secrets, or confidential project data remain.
24. Official Technical References
Laravel documentation: https://laravel.com/docs
React documentation: https://react.dev/
MySQL documentation: https://dev.mysql.com/doc/
Google SEO Starter Guide: https://developers.google.com/search/docs/fundamentals/seo-starter-guide
Web Content Accessibility Guidelines (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
25. Master Implementation Instruction
Inspect the existing repository and environment first. Confirm the React/Laravel integration approach and versions before changing dependencies. Implement this specification phase by phase. Reuse working code where appropriate, do not overwrite files blindly, and do not stop after building a homepage or visual mockup. Connect all required UI to the backend and database, run tests, fix failures, and report completed features, test results, and known limitations honestly.
End of specification.
