01 / PROJECT IDENTIFICATION
Project: Personal Portfolio Website
Author: Lucas Le Gueut
Project type: Static website
Primary technologies: HTML5, CSS3, JavaScript
Hosting platform: GitHub Pages
Interface: Responsive web application
Visual identity: Matrix / Terminal
Document type: Technical documentation
02 / PROJECT OVERVIEW
The portfolio is a personal website designed to present technical skills, development projects, professional experience and contact information in a structured interface.
Its visual identity is inspired by terminal interfaces and the Matrix aesthetic. A dark background, green accents and technical typography establish a consistent visual language.
Primary objectives
- Present projects and technical skills.
- Organize information into clearly identifiable sections.
- Provide a responsive interface across devices.
- Keep the website lightweight and easy to maintain.
- Publish the source through a version-controlled repository.
03 / SYSTEM ARCHITECTURE
The website relies on standard browser technologies. HTML defines the document structure, CSS handles presentation and layout, and JavaScript provides client-side behavior where necessary.
Logical document structure
index.html ├── HEAD │ ├── Metadata │ ├── Page title │ └── CSS / font declarations ├── BODY │ ├── Header │ ├── Navigation │ ├── Main content │ │ ├── About │ │ ├── Skills │ │ ├── Projects │ │ ├── Contact │ │ └── Technical documentation │ └── Footer └── JavaScript
This diagram represents a logical overview. The actual file structure may differ depending on the page implementation.
Rendering process
The browser loads the HTML document, resolves linked assets, applies the CSS rules and executes any JavaScript required by the page.
04 / TECHNOLOGIES
HTML5 — Document structure
HTML provides the semantic organization of the interface.
Elements such as header, nav,
main, section and footer
identify the roles of individual content areas.
CSS3 — Presentation
CSS defines colors, typography, spacing, borders and responsive layouts. Custom properties centralize recurring design values. Flexbox and Grid can be used to organize interface components.
JavaScript — Client-side logic
JavaScript can manage interactive navigation, expandable project categories and other dynamic interface elements. It executes in the visitor's browser.
Custom fonts
The local font file Minecraft.ttf can be loaded
using @font-face. If unavailable, the browser
falls back to the configured generic font.
05 / DESIGN SYSTEM
Style: Matrix / Terminal
Primary accent: #00FF41
Background: #050805
Panel: #090F0A
Primary text: #D5FFD9
Secondary text: #72A77B
Typography: Minecraft.ttf
Design principles
- High contrast between text and background.
- Consistent green accent colors.
- Clear heading hierarchy.
- Minimal decorative elements.
- Reusable CSS rules and design variables.
06 / RESPONSIVE DESIGN
Responsive behavior allows the interface to adapt to different screen widths without requiring a separate mobile website.
Implementation principles
- Flexible widths instead of fixed page dimensions.
- Media queries for narrow screens.
- Fluid typography where appropriate.
- Controlled overflow for long technical content.
- Touch-friendly navigation and links.
Documentation viewport
The technical datasheet uses a fixed header and footer. The central content area scrolls independently, keeping navigation landmarks visible on desktop and mobile.
08 / SECURITY AND ACCESSIBILITY
Security
- Use HTTPS for published resources.
- Use appropriate link attributes for external tabs.
- Load third-party resources only when required.
- Do not expose passwords, API keys or private credentials.
- Validate external links and embedded content.
Accessibility
- Use semantic HTML elements.
- Provide meaningful page titles and link labels.
- Maintain sufficient text contrast.
- Support keyboard navigation and visible focus states.
- Respect reduced-motion preferences.
09 / HOSTING AND DEPLOYMENT
GitHub Pages can serve the portfolio as a static website directly from a configured repository and branch.
Deployment workflow
1. Edit the source files 2. Test locally in a browser 3. Validate HTML and CSS 4. Commit changes with Git 5. Push changes to GitHub 6. Verify the published website
A server-side runtime or database is not required for static pages. Features requiring server-side processing or persistent user data need an additional service.
10 / MAINTENANCE AND DEVELOPMENT
Code maintenance
- Keep HTML semantic and correctly nested.
- Centralize recurring styles in CSS variables.
- Remove unused styles and obsolete components.
- Use consistent naming for classes and identifiers.
- Test layouts after significant changes.
Validation
HTML validation, responsive testing, keyboard checks and browser-console inspection help identify implementation problems before deployment.
Future improvements
Potential extensions include project-specific datasheets, source-code examples, performance improvements and automated deployment checks.
11 / SOURCE CODE AND RESOURCES
GitHub profile: github.com/Luco667
Published website: lucaslg.fr
Source management: Git
Documentation format: HTML
Hosting model: Static web hosting
This document describes the project's general architecture and development principles. Implementation-specific details should be verified against the actual source code.