Skip to content

Commit cae4421

Browse files
codejovzcodejovz
committed
Migration to React + TypeScript + Vite
1 parent e1ba608 commit cae4421

32 files changed

Lines changed: 3649 additions & 343 deletions

‎.gitignore‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
# Node modules
11+
node_modules/
12+
13+
# Build outputs
14+
dist/
15+
dist-ssr/
16+
.vite/
17+
18+
# TypeScript build info
19+
*.tsbuildinfo
20+
21+
# Local environment files
22+
*.local
23+
.env
24+
.env.local
25+
.env.*.local
26+
27+
# Editor directories and files
28+
.vscode/*
29+
!.vscode/extensions.json
30+
.idea/
31+
.DS_Store
32+
*.suo
33+
*.ntvs*
34+
*.njsproj
35+
*.sln
36+
*.sw?
37+
38+
# OS generated files
39+
Thumbs.db
40+
ehthumbs.db
41+
42+
# Additional logs
43+
*.out
44+
*.err
45+
46+
# Optional caches
47+
.npm
48+
.yarn/cache
49+
.yarn/unplugged
50+
.yarn/build-state.yml
51+
.pnp.*

‎LICENSE‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎README.md‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,78 @@
11
# Welcome to my Portfolio!
22

3-
[![https://github.com/codejovz/portfolio](Assets/portfolioShowcase.png)](https://codejovz.github.io/portfolio/)
3+
[![https://codejovz.vercel.app](/public/portfolioShowcase.png)](https://codejovz.vercel.app)
44

55
Click on the photo to see the live site.
6+
7+
8+
<details>
9+
<summary>I used React + TypeScript + Vite</summary>
10+
11+
With a template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
12+
13+
Currently, two official plugins are available:
14+
15+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
16+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
17+
18+
## Expanding the ESLint configuration
19+
20+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
21+
22+
```js
23+
export default tseslint.config([
24+
globalIgnores(['dist']),
25+
{
26+
files: ['**/*.{ts,tsx}'],
27+
extends: [
28+
// Other configs...
29+
30+
// Remove tseslint.configs.recommended and replace with this
31+
...tseslint.configs.recommendedTypeChecked,
32+
// Alternatively, use this for stricter rules
33+
...tseslint.configs.strictTypeChecked,
34+
// Optionally, add this for stylistic rules
35+
...tseslint.configs.stylisticTypeChecked,
36+
37+
// Other configs...
38+
],
39+
languageOptions: {
40+
parserOptions: {
41+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
42+
tsconfigRootDir: import.meta.dirname,
43+
},
44+
// other options...
45+
},
46+
},
47+
])
48+
```
49+
50+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
51+
52+
```js
53+
// eslint.config.js
54+
import reactX from 'eslint-plugin-react-x'
55+
import reactDom from 'eslint-plugin-react-dom'
56+
57+
export default tseslint.config([
58+
globalIgnores(['dist']),
59+
{
60+
files: ['**/*.{ts,tsx}'],
61+
extends: [
62+
// Other configs...
63+
// Enable lint rules for React
64+
reactX.configs['recommended-typescript'],
65+
// Enable lint rules for React DOM
66+
reactDom.configs.recommended,
67+
],
68+
languageOptions: {
69+
parserOptions: {
70+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
71+
tsconfigRootDir: import.meta.dirname,
72+
},
73+
// other options...
74+
},
75+
},
76+
])
77+
```
78+
</details>

‎eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎index.html‎

Lines changed: 13 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,13 @@
1-
<html lang="en">
2-
<head>
3-
<meta charset="UTF-8">
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5-
<title>Jorge Varela Zamora</title>
6-
<link rel="stylesheet" type="text/css" href="styles.css" >
7-
<link rel="icon" href="Assets/logoFavicon.png" type="image/x-icon">
8-
</head>
9-
<body id="body">
10-
11-
<header>@codejovz</header>
12-
13-
<div class="container">
14-
15-
<article id="rojo" class="box"> <!--"I've named these after color names to make editing more intuitive-->
16-
<h1>Jorge Varela Zamora</h1>
17-
<h2>A Cross-Platform Applications Degree dev.</h2>
18-
</article>
19-
20-
<article id="verde" class="box">
21-
22-
<section>
23-
<h2>Technologies:</h2>
24-
<img src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54" alt="Python"/>
25-
<img src="https://img.shields.io/badge/kotlin-%237F52FF.svg?style=for-the-badge&logo=kotlin&logoColor=white" alt="Kotlin"/>
26-
<img src="https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white" alt="MySQL"/>
27-
28-
<img src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=openjdk&logoColor=white" alt=""/>
29-
<img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt=""/>
30-
<img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt=""/>
31-
<img src="https://img.shields.io/badge/VB-Visual_Basic-325a99?style=for-the-badge&logoColor=white&labelColor=1c3969" alt=""/>
32-
</section>
33-
34-
<section>
35-
<h2>IDEs/Editors:</h2>
36-
<img src="https://img.shields.io/badge/Eclipse-FE7A16.svg?style=for-the-badge&logo=Eclipse&logoColor=white" alt="Eclipse"/>
37-
<img src="https://img.shields.io/badge/android%20studio-1a82de?style=for-the-badge&logo=android%20studio&logoColor=white" alt="Android Studio"/>
38-
<img src="https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="Visual Studio Code"/>
39-
<img src="https://img.shields.io/badge/Visual%20Studio-5C2D91.svg?style=for-the-badge&logo=visual-studio&logoColor=white" alt="Visual Studio"/>
40-
<img src="https://img.shields.io/badge/Java%20WindowBuilder-%23FFFFFF?style=flat&logo=Java&labelColor=%232C2255&color=%232C2255" alt="Java Window Builder"/>
41-
</section>
42-
43-
<section>
44-
<h2>📚Frameworks:</h2>
45-
<img src="https://img.shields.io/badge/Swing-%23ED8B00.svg?style=for-the-badge&logo=openjdk&logoColor=white" alt="SWING"/>
46-
<img src="https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white" alt=".NET"/>
47-
</section>
48-
49-
<section>
50-
<h2>CRMs:</h2>
51-
<img src="https://img.shields.io/badge/Odoo-000000?style=for-the-badge&labelColor=797979&color=ba60b8" alt="Odoo"/>
52-
</section>
53-
54-
<section>
55-
<details closed>
56-
<summary>🧠Learning and interested on:</summary>
57-
<img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React.js"/>
58-
<img src="https://img.shields.io/badge/%F0%9F%A4%96-Artificial%20Intelligence-4c2271?style=for-the-badge&labelColor=lightgrey" alt="Artificial intelligence"/>
59-
<img src="https://img.shields.io/badge/%F0%9F%93%B1-Mobile%20development-4c2271?style=for-the-badge&labelColor=lightgrey" alt="Mobile Development"/>
60-
61-
</details>
62-
</section>
63-
64-
<section>
65-
<h2>Find me on:</h2>
66-
<img src="https://img.shields.io/badge/Codepen-@codejovz-000000?style=for-the-badge&logo=codepen&logoColor=white&labelColor=000000" alt="codepen" />
67-
<img src="https://img.shields.io/badge/GMAIL-jorgevarelazamora%40gmail.com-%23FFFFFF?style=for-the-badge&logo=Gmail&logoColor=%23FFFFFF&labelColor=%23EA4335&color=%23EA4335&link=mailto%3Ajorgevarelazamorad%40gmail.com" />
68-
</section>
69-
</article>
70-
71-
72-
<article id="amarillo" class="box">
73-
74-
<div class="scroll-container">
75-
76-
<section class="scroll-item">
77-
<p><a class="repTitle" href="https://github.com/codejovz/DevHeat">DevHeat</a> <span class="repVisib">Public</span></p>
78-
<p class="repFork">Forked from <a class="forkedLink">DAMVA202425/DevHeat</a></p>
79-
<p class="repDesc">Automates GitHub profile edition and creation of READMEs.</p>
80-
<p class="repTags"><a>readme</a> <a>app</a> <a>automation</a></p>
81-
<p><span class="kotlin">Kotlin</span><img class="liscence" src="Assets/octicon_law.svg"/> The Unlicense <span class="updateDate">Updated on Jun 18, 2025</span></p>
82-
</section>
83-
84-
<section class="scroll-item">
85-
<p><a class="repTitle" href="https://github.com/codejovz/badges-codejovz">badges-codejovz</a> <span class="repVisib">Public</span></p>
86-
<p class="repDesc">Ready to use markdown svg badges.</p>
87-
<p class="repTags"><a>react-router</a> <a>reactjs</a> <a>badges</a> <a>public-transport</a></p>
88-
<p><span class="javascript">javascript</span> <span class="updateDate">Updated on Aug 13, 2025</span></p>
89-
</section>
90-
91-
<section class="scroll-item">
92-
<p><a class="repTitle" href="https://github.com/404">TFG</a> <span class="repVisib">Private</span></p>
93-
<p class="repDesc">Kotlin app for users, Python-driven local AI, a MySQL database, and a Java API for local connections.</p>
94-
<p class="repTags"><a>artificial-intelligence</a> <a>bcrypt</a> <a>ktor-server</a></p>
95-
<p><span class="kotlin">Kotlin</span> <img class="liscence" src="Assets/octicon_law.svg"/>MIT License <span class="updateDate">Updated on Jun 10, 2025</span></p>
96-
</section>
97-
98-
<section class="scroll-item">
99-
<p><a class="repTitle" href="https://github.com/codejovz/autoUpdatingBio">autoUpdatingBio</a> <span class="repVisib">Public</span></p>
100-
<p class="repDesc">Script / bot for auto-updating the biography of your Github's account.</p>
101-
<p class="repTags"><a>python</a> <a>github-api</a> <a>workflow</a> <a>yml</a></p>
102-
<p><img class="liscence" src="Assets/octicon_law.svg"/>The Unlicense <span class="updateDate">Updated on Aug 17, 2024</span></p>
103-
</section>
104-
105-
<section class="scroll-item">
106-
<p><a class="repTitle" href="https://github.com/codejovz/overlappingJFrameComponents">overlappingJFrameComponents</a> <span class="repVisib">Public</span></p>
107-
<p class="repDesc">How to overlapp a JFrame component over Graphics ( Java ).</p>
108-
<p class="repTags"><a>swing-gui</a> <a>jframes</a></p>
109-
<p class="repLast"><span class="java">Java</span> <img class="liscence" src="Assets/octicon_law.svg"/>The Unlicense <span class="updateDate">Updated on Nov 28, 2024</span></p>
110-
</section>
111-
112-
<section class="scroll-item">
113-
<p><a class="repTitle" href="https://github.com/codejovz/Desarrollo_aplicaciones_multiplataforma">Desarrollo_aplicaciones_multiplataforma </a> <span class="repVisib">Public</span></p>
114-
<p class="repDesc">Apuntes del Grado Superior de Desarrollo de Aplicaciones Multiplataforma (DAM)</p>
115-
<p><span class="java">Java</span> <span class="updateDate">Updated just now.</span></p>
116-
</section>
117-
118-
</div>
119-
<p class="amarillo-footer">Some of my proyects</p>
120-
121-
</article>
122-
123-
<article id="naranja" class="box">
124-
125-
<button id="fullScreenButton">
126-
<svg width="100%" height="100%" viewBox="0 0 200 200" fill="none" stroke="black" >
127-
<polyline points="10,70 10,10 70,10" id="arIzq"/>
128-
<polyline points="10,130 10,190 70,190" id="abIzq"/>
129-
<polyline points="130,10 190,10 190,70" id="arDer"/>
130-
<polyline points="130,190 190,190 190,130" id="abDer"/>
131-
</svg>
132-
</button>
133-
134-
<h2>More about me (<div id="CL"> <span id="CLcover">C</span><span id="CLleter">L</span></div>):</h2>
135-
136-
<section id="CL_content">
137-
<p>This is the main reason you should NOT upload a project on Friday evening:
138-
Some colours are not matching, transitions might not transition...</p>
139-
<p>Nonetheless, I hope you enjoy my Portfolio!</p>
140-
<p>I am a Cross-Platform Development degree (DAM) student. I have a verifiable B2 level of English and the High School Diploma.</p>
141-
<p>Who was I, before all of this?</p>
142-
<p>I have always loved to drive, so I worked for Seur, Uber and Amazon, and I enjoyed every moment on the road and with the clients.</p>
143-
<p>Then, I got some free time, and came to the conclusion that I wanted to do something more with my life: archieve more. I wanted to specialize in something and love and study what I do every day. So, I started programming!</p>
144-
<p>I enjoy playing sports, leading an almost entirely active lifestyle, and I try to have a smile on my face every day.</p>
145-
<p>Do you want to know something else about me? Visit my <a href="//www.linkedin.com/in/jorge-varela-zamora">Linkedin</a>!</p>
146-
</section>
147-
148-
</div>
149-
150-
</article>
151-
152-
153-
<nav id="menu">
154-
<ul>
155-
<li id="menuLin"><a href="//www.linkedin.com/in/jorge-varela-zamora">Linkedin</a></li>
156-
<li id="menuGit"><a href="https://github.com/codejovz">Github</a></li>
157-
<li id="mailLink"><a href="mailto:jorgevarelazamora@gmail.com">Mail me</a></li>
158-
</ul>
159-
</nav>
160-
161-
<svg id="menu_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <!--SVG MENU-->
162-
<line class="line" id="line1" x1="20" y1="30" x2="80" y2="30" stroke-width="8" stroke-linecap="round"/>
163-
<line class="line" id="line2" x1="20" y1="50" x2="80" y2="50" stroke-width="8" stroke-linecap="round"/>
164-
<line class="line" id="line3" x1="20" y1="70" x2="80" y2="70" stroke-width="8" stroke-linecap="round"/>
165-
</svg>
166-
167-
<footer>
168-
<a href="mailto:jorgevarelazamora@gmail.com">
169-
<img src="Assets/mail-svgrepo-com.svg" alt="Mail logo" id="mailImg"></div>
170-
</a>
171-
172-
<a href="//www.linkedin.com/in/jorge-varela-zamora">
173-
<img src="Assets/linkedin.svg" alt="Linkedin logo" />
174-
</a>
175-
<a href="https://github.com/codejovz">
176-
<img src="Assets/github.svg" alt="Github logo">
177-
</a>
178-
179-
<a href="https://codepen.io/codejovz">
180-
<img src="Assets/codepen.svg" alt="Codepen logo">
181-
</a>
182-
183-
</footer>
184-
185-
<script src="script.js"></script>
186-
</body>
187-
</html>
188-
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="./logoFavicon.png" type="image/x-icon">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Jorge Varela Zamora</title>
8+
</head>
9+
<body id="body">
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)