-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
99 lines (90 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="/images/profile/favicon-white.png">
<!-- START OF WEBSITE SETTINGS -->
<!-- # Design settings -->
<style>
body{
--container-margin: 16px;
--website-background: #070707;
--default-text-color: #777;
--link-text-color: #ffffff;
--link-text-hover-color: #ffffff;
--border-radius-style: 14px;
--shadow-style: 10px 10px 32px #050505;
/* Profile */
--profile-background: #0b0b0b;
--profile-border: 2px solid #ffffff;
--header-text-color: #fff;
/* Sidebar */
--sidebar-item-background: #090909;
--sidebar-item-border: 2px solid #111518;
/* Projects */
--project-border: 2px solid #111518;
--project-background: #0b0b0b;
--project-text-color: #fff;
--project-name-font-size: 24px;
}
</style>
<!-- # Misc settings -->
<title>Traced's Portfolio</title>
<!-- # Sidebar Profiles, links, and text -->
<meta
data-sidebar="profile"
data-avatar-url="./images/profile/tracedlol-pfp.png"
data-text="Hello i'm Traced a young self-taught fullstack web developer and this is my portfolio. Here I showcase all the cool stuff I’ve made, fixed, or broken.">
<meta
data-sidebar="text"
data-text="rs6r"
data-icon-url="./images/icons/discord.svg"
>
<!-- You can remove or leave the below mention as you wish -->
<meta
data-sidebar="link"
data-text="bio page"
data-link="https://traced.lol"
data-icon-url="./images/icons/link.svg"
>
<meta
data-sidebar="link"
data-text="github"
data-link="https://github.com/traced-dev"
data-icon-url="./images/icons/github.svg"
>
<!-- # Portfolio Projects -->
<meta
data-project
data-name="BIO PAGE"
data-img-url="./images/projects/image.png"
data-description="This is a simple and clean looking bio page with a cursor effect and background music that i made wich is open source and currently being hosted on github."
data-link="https://traced.lol"
>
<meta
data-project
data-name="GITHUB README"
data-img-url="./images/projects/project-2.png"
data-description="This is my readme on github."
data-link="https://github.com/traced-dev"
>
<meta
data-project
data-name="THIS WEBSITE"
data-img-url="./images/projects/project-3.png"
data-description="My portfolio, on this website i show my projects and more..."
>
<!-- END OF WEBSITE SETTINGS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Rubik:400,500,700&display=swap);body,html{--main-min-width:50%;--main-max-width:80%;width:100%;height:100%}body{margin:0;background:#070707;display:flex;color:var(--default-text-color);font-family:Rubik;align-content:center;justify-content:center;overflow-y:scroll}a,h1,h2,h3,h4,h5,h6,li,p,ul{padding:0;margin:0;text-decoration:none;color:var(--default-text-color)}.link,a{color:var(--link-text-color)}.link:active,.link:focus,.link:hover,a:active,a:focus,a:hover{color:var(--link-text-hover-color)}main{display:flex;min-width:var(--main-min-width);max-width:var(--main-max-width);padding-top:64px;position:relative;flex-wrap:wrap}section{display:flex;flex-direction:column}.sidebar{flex-basis:25%;display:flex;z-index:100;padding:0;margin:0;list-style:none;flex-direction:column}.profile{box-sizing:border-box;border:var(--profile-border);border-radius:var(--border-radius-style);background:var(--profile-background);display:flex;align-content:center;justify-content:center;position:relative;z-index:10;padding:32px;margin-bottom:var(--container-margin)}.profile__anchor{position:relative;display:flex}.profile__avatar{width:128px;height:auto;border-radius:25px;margin:0 auto;box-shadow:var(--shadow-style)}.profile__anchor+.bio{padding-top:16px}.bio__header{color:var(--header-text-color);padding-top:8px;text-align:center}.bio__content{padding:8px 0;text-align:center}.sidebar__item{margin-bottom:var(--container-margin);display:flex;border-radius:var(--border-radius-style);background:var(--sidebar-item-background);border:var(--sidebar-item-border)}.sidebar__icon{width:16px;height:auto;padding-left:16px}.sidebar__link,.sidebar__text{align-self:center;padding:0 8px;padding:16px;flex-grow:1}.projects{margin-left:var(--container-margin);width:800px}.project{transition:ease .5s;margin-bottom:var(--container-margin);background:var(--project-background);box-shadow:var(--shadow-style);box-sizing:border-box;border-radius:var(--border-radius-style);border:var(--project-border);position:relative;padding:calc(var(--container-margin) * 2);background-size:cover;background-attachment:fixed;overflow:hidden}.project::before{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background:#000;opacity:.9}.project__description,.project__link,.project__name,.project__picture{position:relative;opacity:1}.project--hide,.project--hide .project__wrap,.project--hide .project__wrap .project__description,.project--hide .project__wrap .project__link,.project--hide .project__wrap .project__name,.project--hide .project__wrap .project__picture{height:0;margin:0;padding:0;transition:ease 1s;border-width:0;transform:scale(.8)}.project.hidden{opacity:0;transform:scale(.8)}.project__name{font-size:var(--project-name-font-size);color:var(--project-text-color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:center;padding-bottom:16px}.project.open .project__name{align-self:flex-start;white-space:pre-wrap}.project__picture{width:100%;border-radius:var(--border-radius-style);cursor:pointer}.project__description,.project__link{padding-top:16px}.project__description{max-width:80%}.project__description~.project__description{padding:0}.project__link{display:block;font-size:14px}@media (max-width:1400px){.sidebar{flex-grow:1}.projects{margin:0;flex-grow:1}}@media (max-width:500px){main{max-width:95%}}
</style>
</head>
<body>
<main><ul class=sidebar></ul><section class=projects></section></main>
<script type="text/javascript">
var $=function(t){return Array.from(document.querySelectorAll(t))},$s=function(t){return $("meta[data-"+t+"]")},getCSSTimeInMS=function(t){var e=t.toString(),i=e.toLowerCase().endsWith("ms"),r=e.toLowerCase().endsWith("s");return i?parseInt(e.slice(0,-2)):r?1e3*parseInt(e.slice(0,-1)):0},projectTransitionDuration=getCSSTimeInMS(getComputedStyle(document.body).getPropertyValue("--project-transition-duration").replace(/\s/g,"")),Project=function(t){Object.assign(this,t.dataset)};Project.prototype.cardClick=function(t){var e=this.container;this.isOpen()?t.target===this.backBtn&&(e.classList.remove("open"),e.style.height="",e.parentNode.classList.remove("viewing-project")):(projects.forEach((function(t){t.container.classList.remove("open")})),e.classList.add("open"),e.parentNode.classList.add("viewing-project"))},Project.prototype.isOpen=function(){return-1!==Array.from(this.container.classList).indexOf("open")},Project.prototype.create=function(){var t=this;return this.container=Object.assign(document.createElement("div"),{className:"project hidden"}),this.container.style.backgroundImage="url("+this.imgUrl+")",this.container.dataset.project=this.name.replace(/[^a-zA-Z-\s0-9]/g,"").toLowerCase().replace(/\s/g,"-"),this.container.innerHTML=['<h2 class="project__name">'+this.name+"</h2>",'<img class="project__picture" src="'+this.imgUrl+'" />',this.description&&this.description.split("\\n").map((function(t){return'<p class="project__description">'+(t||"</br>")+"</p>"})).join(""),this.link?'<a class="project__link link" href="'+this.link+'" target="_blank">'+this.link+"</a>":""].join(""),this.picture=this.container.querySelector(".project__picture"),this.backBtn=this.container.querySelector(".project__backbtn"),this.container.addEventListener("click",(function(e){return t.cardClick.call(t,e)})),this.picture.addEventListener("click",(function(e){return t.pictureClicked.call(t,e)})),this.container},Project.prototype.pictureClicked=function(t){this.isOpen()&&window.open(this.picture.src,"_blank")},Project.prototype.display=function(){this.container.classList.remove("hidden")};var Profile=function(t){Object.assign(this,t.dataset)};Profile.prototype.create=function(){return this.container=Object.assign(document.createElement("section"),{className:"profile hidden"}),this.container.innerHTML=[this.avatarUrl?'<a href="?" class="profile__anchor">':"",this.avatarUrl&&'<img class="profile__avatar" src="'+this.avatarUrl+'" />'||"",this.avatarUrl?"</a>":"",this.header||this.text?'<section class="bio">':"",this.header&&'<h3 class="bio__header">'+this.header+"</h3>"||"",this.text&&'<p class="bio__content">'+this.text+"</p>"||"",this.header||this.text?"</section>":""].join(""),this.container},Profile.prototype.display=function(){this.container.classList.remove("hidden")};var SideBarItem=function(t){console.log({itemSettings:t}),Object.assign(this,t.dataset)};SideBarItem.prototype.create=function(){return this.item=Object.assign(document.createElement("li"),{className:"sidebar__item hidden"}),this.item.innerHTML=[this.iconUrl&&'<img class="sidebar__icon" src="'+this.iconUrl+'">',this.link&&'<a class="sidebar__link" href="'+this.link+'" target="_blank">'+(this.text||"")+"</a>"||'<span class="sidebar__text">'+(this.text||"")+"</span>"].join(""),this.item},SideBarItem.prototype.display=function(){this.container.classList.remove("hidden")};var sidebarContainer=$(".sidebar")[0],sidebarItems=$s("sidebar");sidebarItems.forEach((function(t){var e=t.dataset.sidebar.toLowerCase(),i="profile"===e?new Profile(t):"text"===e||"link"===e?new SideBarItem(t):"";""!==i&&sidebarContainer.appendChild(i.create())}));var projectContainer=$(".projects")[0],projects=$s("project").map((function(t){return new Project(t)}));projects.forEach((function(t,e){projectContainer.appendChild(t.create()),setTimeout((function(){t.display()}),100*e)}));
</script>
</body>
</html>