My Portfolio

Auteur/autrice : twubg

  • Portfolio

    00 / TABLE OF CONTENTS

    1. Project Identification
    2. Project Overview
    3. System Architecture
    4. Technologies
    5. Design System
    6. Responsive Design
    7. Navigation and Interaction
    8. Security and Accessibility
    9. Hosting and Deployment
    10. Maintenance and Development
    11. Source Code and Resources

    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.

    07 / NAVIGATION AND INTERACTION

    Navigation links connect the different sections of the website. Internal anchor links can direct visitors to specific content without loading another document.

    Project presentation

    Project entries can contain a title, description, status, technologies and links to a live demonstration or source code.

    Embedded content

    An iframe can display another web page within a project entry. Its dimensions, loading behavior and interaction permissions must be configured according to the intended use.

    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.