Abdulah Eren İynemli — Portfolio Website

A bilingual (English / Turkish) portfolio and engineering-services website built with plain HTML5, CSS3 and vanilla JavaScript — no frameworks, no build tools, no backend.

This README is written for beginners. Every section below explains exactly which file to open and what to change.

---

1. How to open the website locally

The simplest option: double-click index.html. It will open in your default browser and work correctly, because the site uses only relative paths and local files.

2. How to start a local server (recommended)

Opening the file directly works, but running a small local server is closer to how the site will behave on GitHub Pages, and avoids occasional browser restrictions on local files.

Using Python (already installed on most systems):

# from inside the project folder
python -m http.server 5500
# or, on some Windows installs:
py -m http.server 5500

Then open http://localhost:5500 in your browser.

Using VS Code: install the "Live Server" extension, right-click index.html, and choose "Open with Live Server".

3. How to edit Turkish and English text

Almost all visible text lives in script.js, inside the TRANSLATIONS object near the top of the file, and inside the data arrays below it (SERVICES, PROJECTS, EXPERIENCE, SKILLS, PROCESS).

• Fixed section text (navigation, hero, about, contact, footer, etc.) → edit the en and tr objects inside TRANSLATIONS. Each key matches a data-i18n="key" attribute in index.html.
• Repeating content (service cards, projects, experience entries, skill tags, process steps) → edit the corresponding array (e.g. SERVICES) directly. Each entry has an en and tr block.

You do not need to touch index.html to change text — only script.js.

4. How to change the email address

The email address appears in three places:

1. index.html — search for abdullaheren.iynemli@gmail.com (mailto links and the visible contact value).
2. script.js — inside initCopyEmail(), the email variable.
3. index.html — inside the JSON-LD <script type="application/ld+json"> block in <head>.

Replace all occurrences with the new address.

5. How to change the Sakarya location

Search for Sakarya, Türkiye in index.html (hero and contact sections, footer) and update the JSON-LD addressLocality / addressCountry fields in the same <head> block if the location changes to a different city or country.

6. How to replace project SVGs with real images

Project and hero illustrations are stored in assets/images/ as .svg files. To use a real photo instead:

1. Add your image (e.g. .jpg or .png) to assets/images/.
2. In script.js, find the relevant project inside the PROJECTS array and change its image field to the new file path, e.g. image: 'assets/images/my-photo.jpg'.

No other changes are required — the layout and modal automatically use whatever path is set.

7. How to add new projects

Open script.js and find the PROJECTS array. Copy an existing project object and edit:

• id — a unique short identifier.
• image — path to an image in assets/images/.
• categories — an array using the keys defined in CATEGORIES (e.g. 'robotics', 'embedded', 'iot').
• technologies — array of technology name strings (shown as tags, not translated).
• en / tr — title, description, and a responsibilities array (bullet points shown in the project modal).

The project grid, filters and modal update automatically — no HTML editing required.

8. How to add real GitHub or video URLs later

Each project object in PROJECTS has url: null and videoUrl: null. Once you have a real repository or video link, set these to the URL string, e.g. url: 'https://github.com/you/repo'. There's a TODO comment directly above the PROJECTS array and inside fillModal() in script.js marking exactly where to render a link/button using these values — no button is shown while the value stays null.

9. How to add a downloadable CV later

No CV file exists yet. Once you have one:

1. Add the PDF file to assets/documents/ (see assets/documents/README.txt).

2. In index.html, find the TODO comment inside the hero .hero-actions block and add a button, for example:

   <a class="btn btn-ghost" href="assets/documents/cv-abdulaheren-iynemli.pdf" download>Download CV</a>

10. How to change colors

All colors are defined once, as CSS variables, at the top of styles.css inside :root (look for the /* DESIGN TOKENS */ comment). Change --color-accent, --color-accent-2, --color-bg, etc., and the whole site updates automatically. Spacing, border-radius and shadow values are defined the same way, right below the colors.

11. How to deploy to GitHub Pages

1. Create a GitHub repository and push the contents of this folder to it (the repository can be named anything; if it's a project page rather than a user/organization page, GitHub Pages will serve it from a subdirectory-style URL, which this site fully supports since all asset paths are relative).
2. In the repository settings, open Pages, and set the source to the branch you pushed (commonly main) and the root folder (/).
3. GitHub will publish the site at https://<username>.github.io/<repository-name>/.
4. No build step is required — the site is static HTML/CSS/JS.

12. How to connect a custom domain later

1. In the repository's Settings → Pages, add your custom domain in the "Custom domain" field. GitHub will create a CNAME file automatically (or you can add one yourself with your domain name as its only content).
2. At your domain registrar, add a CNAME record (for a subdomain like www) or A records (for an apex domain) pointing to GitHub Pages, following GitHub's official Pages documentation.
3. Update the TODO-marked canonical URL and Open Graph URL near the top of index.html (<head>) to your new domain once it's live.

13. Which files control what

File	Controls
index.html	Page structure, sections, static markup, SEO/meta tags, JSON-LD
styles.css	All visual design — colors, spacing, layout, responsive rules, animations
script.js	All text content (TRANSLATIONS), all repeating content data (services, projects, experience, skills, process), language switching, navigation behavior, project modal, filters, copy-to-clipboard, scroll reveal
assets/images/	SVG illustrations used in the hero and project cards
assets/documents/	Reserved for a future downloadable CV/resume file
404.html	Fallback page shown by GitHub Pages for unknown URLs

---

Built with plain HTML, CSS and JavaScript — no frameworks, no dependencies, no build tools.