Skip to content

Commit 1d69695

Browse files
elcordovaelcordova
committed
first end template
1 parent e8c3bc2 commit 1d69695

12 files changed

+203
-3
lines changed

Diff for: ‎README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# portfolio-minimal [(Demo)](https://sivanesh-s.github.io/portfolio-minimal/)
2+
This is for developers who thinks
3+
4+
**"My work and code speaks more than a Portfolio"**
5+
6+
7+
A small **minimal Portfolio** for developers who are tiring of thinking about creating their own new portfolio website.
8+
9+
**NO WEB DEVELOPMENT SKILLS NEEDED** (If you do have, then can customize with your skills and ideas. :smile:)
10+
11+
## Responsive
12+
It is fully responsible.
13+
14+
### Laptops
15+
<img src="./README_DOCS/Lg.JPG"/>
16+
17+
### Tabs
18+
<img src="./README_DOCS/md.JPG" width="500px">
19+
20+
### Mobile
21+
<img src="./README_DOCS/sm.JPG"
22+
width="182px" >
23+
24+
## Data for the Portfolio
25+
You don't need to surf through HTML docs and update the data. All the data needed for your portfolio must be updated in `data.js`. (_Right now just for functionality I provided my links. You can change it_)
26+
27+
<img src="./README_DOCS/Data.JPG">
28+
29+
---

Diff for: ‎README_DOCS/Data.JPG

73.9 KB
Loading

Diff for: ‎README_DOCS/Lg.JPG

136 KB
Loading

Diff for: ‎README_DOCS/My Portfolio.JPG

102 KB
Loading

Diff for: ‎README_DOCS/md.JPG

39.7 KB
Loading

Diff for: ‎README_DOCS/sm.JPG

34.1 KB
Loading

Diff for: ‎data.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const main = {
2+
name: 'Erick Córdova',
3+
mail: '[email protected]',
4+
img: 'https://s.gravatar.com/avatar/26b27e7762b8bb9cd039ea765e6ae6e3?s=400',
5+
role: ['Software Solutions Developer'],
6+
// Refer https://ionicons.com/ and put the icon name inside iconName key
7+
connects: [
8+
{
9+
name: 'Home',
10+
iconName: 'logo-firefox',
11+
link: 'https://elcordova.github.io/'
12+
},
13+
{
14+
name: 'Github',
15+
iconName: 'logo-github',
16+
link: 'https://github.com/elcordova'
17+
},
18+
{
19+
name: 'Linkedin',
20+
iconName: 'logo-linkedin',
21+
link: 'https://www.linkedin.com/in/erick-cordova-29a813125/'
22+
},
23+
{
24+
name: 'StackOverflow',
25+
iconName: 'logo-stackoverflow',
26+
link: 'https://stackoverflow.com/users/7420509/elcordova'
27+
},
28+
{
29+
name: 'Twitter',
30+
iconName: 'logo-twitter',
31+
link: 'https://twitter.com/erickLeninC'
32+
},
33+
{
34+
name: 'npm',
35+
iconName: 'logo-npm',
36+
link: 'https://www.npmjs.com/~elcordova'
37+
},
38+
{
39+
name: 'Mail',
40+
iconName: 'mail-outline',
41+
link: `mailto:${'[email protected]'}?Subject=Hello%20again`
42+
}
43+
],
44+
links: [
45+
{ name: 'Projects', link: '#projects' },
46+
{ name: 'Blogs', link: '#blogs' }
47+
]
48+
};

Diff for: ‎index.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@media (min-width: 1024px) {
2+
#main {
3+
font-size: 1.2em;
4+
overflow: hidden;
5+
}
6+
7+
.main-image {
8+
width: 80%;
9+
}
10+
11+
.child {
12+
position: relative;
13+
top: 50%;
14+
height: 100vh;
15+
width: 100%;
16+
margin-top: -128px; /* account for padding and border if not using box-sizing: border-box; */
17+
overflow: hidden;
18+
}
19+
20+
#main .imgBorder {
21+
position: relative;
22+
top: 50vh;
23+
transform: translateY(-50%);
24+
}
25+
}

Diff for: ‎index.html

+37-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,43 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>prueba github pages</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="shortcut icon" href="./user.png" />
8+
9+
<!-- StyleSheets -->
10+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="./index.css">
12+
513
</head>
614
<body>
7-
<h1>hello world!</h1>
15+
<div id="main" class="relative h-screen border-b-2 lg:grid lg:grid-cols-2 lg:gap-4">
16+
<!-- CSS: right sight border as line seperator
17+
- Phone top - down
18+
- Lap right left.
19+
-->
20+
<div id="left" class="left lg:my-0 my-20 ">
21+
<div class="imgBorder border-r-10">
22+
<img id='img' src="" alt="" class="img m-auto w-64 main-image rounded-lg" >
23+
</div>
24+
</div>
25+
26+
<!-- Main - Contents -->
27+
<div id="contents" class="m-auto px-4 lg:my-20 child">
28+
<div id="name" class="text-center lg:text-left text-6xl"></div>
29+
<div id="role" class="text-center lg:text-left text-3xl"></div>
30+
<div id="connects" class="text-center lg:text-left text-3xl my-4">
31+
32+
</div>
33+
<div id="links" class="text-center lg:text-left"></div>
34+
<a target="_top" id="mail" class="block text-center lg:text-left text-sm my-2"></a>
35+
</div>
36+
</div>
37+
38+
<!-- <ion-icon name="heart"></ion-icon> -->
39+
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
40+
<script src="./data.js"></script>
41+
<script src="./script.js"></script>
842
</body>
943
</html>

Diff for: ‎script.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const getDOM = selector => () => {
2+
return document.querySelector(selector);
3+
};
4+
5+
document.title = `${main.name} | ${main.role}`
6+
7+
// Values DOM nodes
8+
const dom = {
9+
main: {
10+
name: getDOM('#main #name'),
11+
mail: getDOM('#main #mail'),
12+
img: getDOM('#main #img'),
13+
role: getDOM('#main #role'),
14+
connects: getDOM('#main #connects'),
15+
links: getDOM('#main #links')
16+
},
17+
projects: getDOM('#projects'),
18+
logo: getDOM('#projects-page #logo')
19+
};
20+
21+
function assignDOM(dom, value, options) {
22+
console.log('dom, value, img:', dom, value, img);
23+
24+
if (options?.isImg) {
25+
dom.src = value;
26+
return;
27+
}
28+
29+
if (options?.isAdjacent) {
30+
dom.insertAdjacentHTML('afterbegin', value);
31+
}
32+
33+
dom.innerHTML = value;
34+
}
35+
36+
// Assigning
37+
38+
// MAIN
39+
40+
assignDOM(dom.main.name(), main.name);
41+
assignDOM(dom.main.mail(), main.mail);
42+
dom.main.mail().href = `mailto:${main.mail}?Subject=Hello%20again`;
43+
assignDOM(dom.main.img(), main.img, { isImg: true });
44+
assignDOM(dom.main.role(), main.role);
45+
// assignDOM(dom.main.links(), main.links)
46+
47+
// External Links (ICONS)
48+
const connectsDOM = main.connects
49+
.map(
50+
({ name, iconName, link }) =>
51+
`<a href=${link} target="_blank"><ion-icon name="${iconName}" title="${name}"></ion-icon></a>`
52+
)
53+
.join('\n');
54+
assignDOM(dom.main.connects(), connectsDOM);
55+
56+
// Internal Links
57+
const getLinks = links =>
58+
links
59+
.map(({ name, link }) => `<a href="${link}" class="text-pink-500" >${name}</a>`)
60+
.map((link, index, links) => index === links.length - 1 ? link: `${link} - `)
61+
.join('\n');
62+
assignDOM(dom.main.links(), getLinks(main.links));
63+

Diff for: ‎tailwind.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎user.png

5.75 KB
Loading

0 commit comments

Comments
 (0)