Skip to content

Commit 1f3681d

Browse files
fernandotonacoderfernandotonacoder
authored
feat: add readme / fix: improve docs / fix: improve responsiveness (#3)
* configure eslint and prettier * improve CI/CD * first readme version * update readme and docs * update readme * update readme and docs * improve mobile-first concept * improve tablet responsiveness * edit style.css * fix formatting
1 parent 66a93e6 commit 1f3681d

File tree

4 files changed

+352
-66
lines changed

4 files changed

+352
-66
lines changed

‎README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Fernando Tona - Professional Profile
2+
3+
[![CI/CD Pipeline](https://github.com/fernandotonacoder/fernandotonacoder.github.io/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/fernandotonacoder/fernandotonacoder.github.io/actions/workflows/ci-cd.yml)
4+
[![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-deployed-success?logo=github)](https://fernandotonacoder.github.io)
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6+
![GitHub last commit](https://img.shields.io/github/last-commit/fernandotonacoder/fernandotonacoder.github.io)
7+
![GitHub repo size](https://img.shields.io/github/repo-size/fernandotonacoder/fernandotonacoder.github.io)
8+
[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
9+
[![Tested with Jest](https://img.shields.io/badge/tested_with-jest-99424f.svg?logo=jest)](https://github.com/facebook/jest)
10+
![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)
11+
![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)
12+
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
13+
14+
> Professional profile website showcasing my expertise as a Software Developer.
15+
16+
**Live Site:** [fernandotonacoder.github.io](https://fernandotonacoder.github.io)
17+
18+
---
19+
20+
## Features
21+
22+
- 🌍 Multi-language support (English, Spanish, French, Portuguese)
23+
- Modern, responsive design with glassmorphism effects
24+
- Lightweight vanilla JavaScript - no frameworks
25+
- Fast static site hosted on GitHub Pages
26+
- Well-tested with Jest
27+
- SEO optimized with dynamic meta tags
28+
29+
## Tech Stack
30+
31+
**Frontend:** HTML5 • CSS3 • Vanilla JavaScript • Bootstrap 5
32+
**Development:** Jest • ESLint • Prettier
33+
**CI/CD:** GitHub Actions
34+
**Deployment:** GitHub Pages
35+
36+
## Quick Start
37+
38+
### For Visitors
39+
40+
Simply visit: **[fernandotonacoder.github.io](https://fernandotonacoder.github.io)**
41+
42+
### For Developers
43+
44+
```bash
45+
# Clone and install
46+
git clone https://github.com/fernandotonacoder/fernandotonacoder.github.io.git
47+
cd fernandotonacoder.github.io
48+
npm install
49+
50+
# Run tests and checks
51+
npm test
52+
npm run lint
53+
npm run format:check
54+
55+
# Open locally (Option 1: directly in browser)
56+
open src/index.html
57+
58+
# Or Option 2: with local server
59+
python -m http.server 8000 -d src
60+
```
61+
62+
## Project Structure
63+
64+
```
65+
src/
66+
├── index.html # Main page
67+
├── css/style.css # Styles
68+
├── js/
69+
│ ├── translations.js # Multi-language system
70+
│ ├── custom-select.js # Language selector
71+
│ └── *.test.js # Unit tests
72+
└── locales/ # Translation files (en, es, fr, pt)
73+
```
74+
75+
## Development Commands
76+
77+
```bash
78+
npm test # Run tests with Jest
79+
npm run lint # Check code quality with ESLint
80+
npm run lint:fix # Auto-fix issues with ESLint
81+
npm run format # Format code with Prettier
82+
npm run format:check # Check formatting with Prettier
83+
```
84+
85+
## CI/CD Pipeline
86+
87+
- **On PR:** Runs tests, linting, and format checks
88+
- **On Merge:** Deploys to GitHub Pages automatically
89+
- **Branch Protection:** All checks must pass before merging
90+
91+
## Author
92+
93+
**Fernando Tona**
94+
[Website](https://fernandotonacoder.github.io) • [LinkedIn](https://www.linkedin.com/in/fernandotona/) • [GitHub](https://github.com/fernandotonacoder) • fernandotonacoder@protonmail.com
95+
96+
## Documentation
97+
98+
- **[Technical Documentation](docs/project-instructions.md)** - Architecture and system internals
99+
- **[Contributing Guide](docs/CONTRIBUTING.md)** - Development workflow and key decisions
100+
101+
---
102+
103+
<div align="center">
104+
105+
**⭐ Star this repo if you find it useful!**
106+
107+
Made with ❤️ by Fernando Tona
108+
109+
</div>

‎docs/CONTRIBUTING.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
# Contributing Guide
2+
3+
## Development Setup
4+
5+
```bash
6+
git clone https://github.com/fernandotonacoder/fernandotonacoder.github.io.git
7+
cd fernandotonacoder.github.io
8+
npm install
9+
```
10+
11+
**Local development:** Open `src/index.html` in browser or use `python -m http.server 8000 -d src`
12+
13+
---
14+
15+
## Workflow
16+
17+
**Branch protection is enabled.** Always work on feature branches:
18+
19+
```bash
20+
git checkout -b feature/your-feature
21+
# make changes
22+
git add .
23+
git commit -m "Description"
24+
git push origin feature/your-feature
25+
# Create PR on GitHub
26+
```
27+
28+
**CI/CD Pipeline:**
29+
30+
- **On PR:** Tests, linting, format checks
31+
- **On merge to main:** Auto-deploys to GitHub Pages
32+
33+
---
34+
35+
## Commands
36+
37+
```bash
38+
npm test # Run Jest tests
39+
npm run lint # ESLint check
40+
npm run lint:fix # Auto-fix linting issues
41+
npm run format # Prettier format all files
42+
npm run format:check # Check if formatted correctly
43+
```
44+
45+
---
46+
47+
## Architecture Decisions
48+
49+
### Translation System
50+
51+
**Why custom instead of i18n library?**
52+
53+
- No external dependencies
54+
- Tiny footprint (~100 lines)
55+
- Does exactly what we need, nothing more
56+
57+
**Language detection priority:**
58+
59+
1. localStorage (`language` key)
60+
2. Browser language (`navigator.language`)
61+
3. Fallback to English
62+
63+
**Translation keys:** Flat structure in `/locales/*.json`. HTML elements use `data-translate` attributes:
64+
65+
- `data-translate="key"` → Updates `textContent`
66+
- `data-translate-alt="key"` → Updates `alt` attribute
67+
- `data-translate-html="key"` → Updates `innerHTML` (supported but unused)
68+
69+
**SEO:** Dynamically updates `<title>`, `<meta name="description">`, and Open Graph tags on language change.
70+
71+
### Custom Language Selector
72+
73+
**Why not a normal `<select>`?**
74+
75+
- Needed custom styling (glassmorphism effect)
76+
- Better control over appearance
77+
- Still accessible with keyboard navigation
78+
79+
### CSS Architecture
80+
81+
**Color scheme:** CSS variables in `:root` for easy theming
82+
83+
**Icon colors:** SVG filters for color manipulation:
84+
85+
```css
86+
/* White icons on dark background */
87+
filter: brightness(0) invert(1);
88+
89+
/* Dark icons on light background */
90+
filter: brightness(0) invert(0);
91+
```
92+
93+
**Glassmorphism effect:**
94+
95+
```css
96+
background: rgba(255, 255, 255, 0.1);
97+
backdrop-filter: blur(10px);
98+
```
99+
100+
### ESLint Config
101+
102+
**Why flat config (`eslint.config.mjs`)?**
103+
104+
- ESLint 9+ requires it
105+
- Different environments need different globals:
106+
- Browser JS: `setLanguage`, `getCurrentLanguage` (custom globals)
107+
- Test files: Jest globals (`describe`, `test`, `expect`)
108+
- Jest config: Node.js globals (`module`)
109+
110+
### Prettier Config
111+
112+
**Why these settings?**
113+
114+
- Double quotes, no trailing commas, always parens → Personal preference from TypeScript/C# background
115+
- `tabWidth: 4` → Personal preference from C# background
116+
117+
---
118+
119+
## Adding Features
120+
121+
### New Translation
122+
123+
1. Add key to **ALL** locale files (`en.json`, `es.json`, `fr.json`, `pt.json`)
124+
2. Add `data-translate="yourKey"` to HTML element
125+
3. Test in all languages
126+
127+
### New Language
128+
129+
1. Create `/locales/{lang}.json` with all existing keys
130+
2. Update `supportedLangs` in `js/translations.js`
131+
3. Update `languageNames` in `js/custom-select.js`
132+
4. Add option to language selector in `index.html`
133+
5. Write tests
134+
135+
---
136+
137+
## Gotchas
138+
139+
**Tests failing?**
140+
141+
- Make sure JSON files don't have trailing commas (Prettier removes them automatically)
142+
- Run `npm test -- --clearCache` if weird caching issues
143+
144+
**Translations not loading?**
145+
146+
- Check browser console for fetch errors
147+
- Verify JSON is valid
148+
- Check file paths are correct
149+
150+
**Styles not applying?**
151+
152+
- Hard refresh: `Ctrl+Shift+R` (Windows/Linux) or `Cmd+Shift+R` (Mac)
153+
154+
**Can't push to main?**
155+
156+
- That's intentional. Create a feature branch and PR.
157+
158+
---
159+
160+
## Testing Strategy
161+
162+
**What we test:**
163+
164+
- Translation system: Loading, language switching, localStorage persistence
165+
- Custom selector: UI interactions, language selection
166+
167+
**What we don't test:**
168+
169+
- Bootstrap components (already tested by Bootstrap)
170+
- Browser APIs (fetch, localStorage)
171+
- CSS styling
172+
173+
**Coverage target:** No specific target, just test critical logic.
174+
175+
---
176+
177+
## Design Tokens
178+
179+
### Colors
180+
181+
```css
182+
--clr-navy: #001f3f; /* Primary background */
183+
--clr-blue-text: #2563eb; /* Accent text */
184+
--clr-linkedin: #0077b5;
185+
--clr-github: #333;
186+
```
187+
188+
### Spacing Scale (Bootstrap)
189+
190+
`0` = 0, `1` = 4px, `2` = 8px, `3` = 16px, `4` = 24px, `5` = 48px
191+
192+
### Breakpoints
193+
194+
- Mobile first approach
195+
- Key breakpoint: 992px (tablets → desktop)
196+
197+
---
198+
199+
## Resources
200+
201+
- [Jest Docs](https://jestjs.io/docs/getting-started)
202+
- [ESLint Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files)
203+
- [Bootstrap 5](https://getbootstrap.com/docs/5.3/)
204+
- [CSS Filter Generator](https://codepen.io/sosuke/pen/Pjoqqp) for SVG colors

0 commit comments

Comments
 (0)