# stylianos1995/stylianos architecture

> Architecture diagram of the GitHub repository stylianos1995/stylianos, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/stylianos1995/stylianos
- Repository: https://github.com/stylianos1995/stylianos

## Overview

This is a single-page personal portfolio: visitors browse an introduction and CV, selected projects, a technology-stack section, and contact options. The home page composes the sections; the contact form sends messages from the browser through EmailJS. The README documents responsive design, animations, dark mode, performance, and SEO; implementation details for some of these and the technology-stack and back-to-top components were not sampled, so their internal behavior is not expanded here.

Main entry points: [`src/app/page.tsx`](https://github.com/stylianos1995/stylianos/blob/main/src/app/page.tsx) (Home page), [`src/app/layout.tsx`](https://github.com/stylianos1995/stylianos/blob/main/src/app/layout.tsx) (Root layout), [`src/components/Hero.tsx`](https://github.com/stylianos1995/stylianos/blob/main/src/components/Hero.tsx) (Introduction and CV), [`src/components/Contact.tsx`](https://github.com/stylianos1995/stylianos/blob/main/src/components/Contact.tsx) (Contact form and links)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page_shell["Page shell"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_backtotop["Back to top<br/>[BackToTop.tsx]"]
  node_styles["Global styles<br/>[globals.css]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Introduction and CV<br/>[Hero.tsx]"]
  node_projects["Selected projects<br/>[Projects.tsx]"]
  node_techstack["Technology stack<br/>[TechStack.tsx]"]
  node_asset_helper["Public asset helper<br/>[publicAsset.ts]"]
  node_cv["CV PDF"]
end

subgraph group_contact["Contact"]
  node_contact["Contact form and links<br/>[Contact.tsx]"]
  node_email_config["EmailJS configuration<br/>[emailjs-config.ts]"]
  node_emailjs["EmailJS"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders page"| node_home
node_layout -->|"renders control"| node_backtotop
node_layout -->|"loads styles"| node_styles
node_home -->|"renders navigation"| node_navbar
node_home -->|"renders introduction"| node_hero
node_home -->|"renders projects"| node_projects
node_home -->|"renders stack"| node_techstack
node_home -->|"renders contact"| node_contact
node_hero -->|"resolves asset paths"| node_asset_helper
node_projects -->|"resolves image paths"| node_asset_helper
node_hero -->|"links download"| node_cv
node_contact -->|"reads settings"| node_email_config
node_contact -->|"sends message"| node_emailjs

click node_layout "https://github.com/stylianos1995/stylianos/blob/main/src/app/layout.tsx"
click node_home "https://github.com/stylianos1995/stylianos/blob/main/src/app/page.tsx"
click node_navbar "https://github.com/stylianos1995/stylianos/blob/main/src/components/Navbar.tsx"
click node_backtotop "https://github.com/stylianos1995/stylianos/blob/main/src/components/BackToTop.tsx"
click node_styles "https://github.com/stylianos1995/stylianos/blob/main/src/app/globals.css"
click node_hero "https://github.com/stylianos1995/stylianos/blob/main/src/components/Hero.tsx"
click node_projects "https://github.com/stylianos1995/stylianos/blob/main/src/components/Projects.tsx"
click node_techstack "https://github.com/stylianos1995/stylianos/blob/main/src/components/TechStack.tsx"
click node_asset_helper "https://github.com/stylianos1995/stylianos/blob/main/src/utils/publicAsset.ts"
click node_cv "https://github.com/stylianos1995/stylianos/blob/main/public/assets/Stylianos-Kalaitzis-CV.pdf"
click node_contact "https://github.com/stylianos1995/stylianos/blob/main/src/components/Contact.tsx"
click node_email_config "https://github.com/stylianos1995/stylianos/blob/main/src/lib/emailjs-config.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_home,node_navbar,node_backtotop,node_styles toneBlue
class node_hero,node_projects,node_techstack,node_asset_helper,node_cv toneAmber
class node_contact,node_email_config,node_emailjs toneMint
class node_visitor toneIndigo
```

## Components

### Page shell

- [Root layout](https://github.com/stylianos1995/stylianos/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home page](https://github.com/stylianos1995/stylianos/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Navigation](https://github.com/stylianos1995/stylianos/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Back to top](https://github.com/stylianos1995/stylianos/blob/main/src/components/BackToTop.tsx): `src/components/BackToTop.tsx`
- [Global styles](https://github.com/stylianos1995/stylianos/blob/main/src/app/globals.css): `src/app/globals.css`

### Portfolio content

- [Introduction and CV](https://github.com/stylianos1995/stylianos/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Selected projects](https://github.com/stylianos1995/stylianos/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Technology stack](https://github.com/stylianos1995/stylianos/blob/main/src/components/TechStack.tsx): `src/components/TechStack.tsx`
- [Public asset helper](https://github.com/stylianos1995/stylianos/blob/main/src/utils/publicAsset.ts): `src/utils/publicAsset.ts`
- [CV PDF](https://github.com/stylianos1995/stylianos/blob/main/public/assets/Stylianos-Kalaitzis-CV.pdf): `public/assets/Stylianos-Kalaitzis-CV.pdf`

### Contact

- [Contact form and links](https://github.com/stylianos1995/stylianos/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- [EmailJS configuration](https://github.com/stylianos1995/stylianos/blob/main/src/lib/emailjs-config.ts): `src/lib/emailjs-config.ts`
- **EmailJS**

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: opens site
- Root layout → Home page: renders page
- Root layout → Back to top: renders control
- Root layout → Global styles: loads styles
- Home page → Navigation: renders navigation
- Home page → Introduction and CV: renders introduction
- Home page → Selected projects: renders projects
- Home page → Technology stack: renders stack
- Home page → Contact form and links: renders contact
- Introduction and CV → Public asset helper: resolves asset paths
- Selected projects → Public asset helper: resolves image paths
- Introduction and CV → CV PDF: links download
- Contact form and links → EmailJS configuration: reads settings
- Contact form and links → EmailJS: sends message