Latest commit
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
LINKTREE - ENGLISH README ========================= Description ----------- This project is a personal Linktree-style page built with plain HTML and CSS. It collects the profile's main links in one place: Instagram, Facebook, personal website, GitHub, Steam, TikTok, and Discord server. The page uses a background image, large icon buttons, service-specific colors for some links, and a media query for smaller screens. Technologies ------------ - HTML5 - CSS3 - Local SVG/JPEG assets - No framework - No JavaScript library - No required build step Structure --------- linktree/ |-- assets/ | |-- discord_icon.svg | |-- facebook_icon.svg | |-- favicon.svg | |-- github_icon-invertito.svg | |-- github_icon.svg | |-- instagram_icon.svg | |-- steam_icon.svg | |-- tiktok_icon.svg | |-- wallpaper.jpeg | `-- website_icon.svg |-- index.html |-- style.css |-- PROJECT_CONTEXT.md |-- PROJECT_CONTEXT_EN.md |-- README_IT.txt `-- README.txt Main files ---------- - index.html: contains the page structure, links, icons, and SEO/social meta tags. - style.css: contains layout, background, colors, hover states, responsive behavior, and button sizes. - assets/: contains icons, the favicon, and the background image. - PROJECT_CONTEXT.md: detailed Italian documentation for AIs and developers. - PROJECT_CONTEXT_EN.md: English translation of the project context. How to run the project ---------------------- No installation is required. Open index.html directly in a browser. You can also use a local static server, but it is not required. How to edit links ----------------- Open index.html and edit the elements inside: <div class="link-wrapper"> ... </div> Example: <a class="instagram" href="https://instagram.com/ste_catalin_" target="_blank"> Instagram <img src="assets/instagram_icon.svg" alt=""> </a> How to change button width -------------------------- In style.css, desktop button width is controlled by: .linktree { >.link-wrapper a { width: 50%; } } For longer buttons, use something like width: 60%. For shorter buttons, use something like width: 40%. On mobile, width is overridden in the media query: @media (max-width: 600px) { .linktree > .link-wrapper a { width: 100%; } } How to change the background ---------------------------- Replace assets/wallpaper.jpeg or edit this line in style.css: background-image: url("assets/wallpaper.jpeg"); The background is handled with CSS, not with an <img> tag in the body. SEO/social meta tags -------------------- The meta tags are in the <head> of index.html. The page includes basic SEO tags, Open Graph tags, and Twitter Card tags. If the public domain changes, update these fields: - canonical - og:url - og:image - twitter:url - twitter:image Important note: social preview images need an absolute online URL. Known issues and recommended improvements ----------------------------------------- - Links are separated with <br>; using gap on .link-wrapper would be cleaner. - Links using target="_blank" still do not include rel="noopener noreferrer". - Facebook and TikTok still use the base button style, without dedicated classes. - There are no automated tests or lint/format tools. Before continuing ----------------- Read PROJECT_CONTEXT_EN.md for the full context. Keep the project simple: HTML, CSS, local assets, and no unnecessary dependencies.