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.