hammam36/portofolio-id

Purpose and Runtime

This is a static personal portfolio/resume SPA built with React and Vite. It presents professional information, projects, writing, awards, skills, and contact content, with English and Indonesian localization. The browser is the primary runtime; no backend, API layer, database, or server-side application is represented.

Entry and build boundaries:

• src/main.jsx mounts the React application.

• src/App.jsx composes the top-level portfolio experience.

• vite.config.js defines the Vite development/build boundary.

• index.html is the browser document shell.

Application Composition

App.jsx is the application orchestrator. It likely owns the page-level layout and composes navigation plus content sections into a single scrolling experience rather than routed pages.

Core UI composition:

• src/App.jsx

• src/components/Sidebar.jsx

• src/components/SectionTabs.jsx

The sidebar and tab controls form the primary navigation/control boundary between the visitor and section content.

Content Sections

The portfolio is organized as independently rendered visual sections. Each section owns its presentation CSS and consumes localized content and/or static assets.

Major stages:

• Hero/introduction: src/sections/Hero.jsx, src/sections/Hero.css

• Career/education timeline: src/sections/Journey.jsx, src/sections/Journey.css

• Skills and capabilities: src/sections/Abilities.jsx, src/sections/Abilities.css

• Project portfolio: src/sections/Projects.jsx, src/sections/Projects.css

• Blog content: src/sections/Blog.jsx, src/sections/Blog.css

• Awards and certifications: src/sections/Awards.jsx, src/sections/Awards.css

• Contact presentation: src/sections/Contact.jsx, src/sections/Contact.css

Control flow is primarily top-down: main.jsx → App.jsx → navigation/components and section components → localized data/assets.

Localization Data Boundary

Localized content is file-based JSON rather than fetched remotely. src/i18n/index.js is the localization aggregation/selection boundary; sections should consume translation data through it rather than embedding language-specific copy.

Translation domains align with page sections:

• src/i18n/hero/en.json, src/i18n/hero/id.json

• src/i18n/projects/en.json, src/i18n/projects/id.json

• src/i18n/journey/en.json, src/i18n/journey/id.json

• src/i18n/blog/en.json, src/i18n/blog/id.json

• src/i18n/abilities/en.json, src/i18n/abilities/id.json

• src/i18n/awards/en.json, src/i18n/awards/id.json

• src/i18n/contact/en.json, src/i18n/contact/id.json

This makes language content a build-time bundled dependency and establishes JSON schemas as an implicit contract with their corresponding sections.

Media and Document Presentation

Portfolio media is served as static public content. Project, experience, education, blog, achievement, and certification imagery/documents reside under public/assets/; the downloadable résumé is public/CV_Hammam_Mubarak_Resume.pdf.

Modal components provide the interaction boundary for rich static content:

• src/components/ImageModal.jsx

• src/components/PdfModal.jsx

Sections can open these viewers for visual assets or PDF certifications without requiring external document services.

Styling and UI Infrastructure

Styling is component/section-scoped through colocated CSS, with global styling in src/index.css. Tailwind/PostCSS configuration exists as build styling infrastructure:

• src/index.css

• tailwind.config.js

• postcss.config.js

Reusable icon definitions are centralized in src/lib/icons.js, avoiding icon selection logic being duplicated across sections.

External Dependencies and Deployment Shape

The repo indicates a client-only Vite deployment: build output can be hosted by any static-file host/CDN. React provides rendering and state behavior; Vite provides local development, HMR, and production bundling. Static PDFs and assets are served directly from the public directory. No external service integrations are evident from the repository tree or README.