JosephFerano/ferano.io-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update (simplify) content and improve CSS

Browse Source
This commit is contained in:
Joseph Ferano 2024-06-11 14:15:44 +07:00
parent 39db748b53
commit de063057c4
2 changed files with 44 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -10,7 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="topbar"></div> <!-- <div id="topbar"></div> -->
<!-- <div class="overlay-gradient"></div> --> <!-- <div class="overlay-gradient"></div> -->
<svg class="o-grad" xmlns='http://www.w3.org/2000/svg'> <svg class="o-grad" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'> <filter id='noiseFilter'>
@ -23,33 +23,34 @@
</svg> </svg>
<div id="content"> <div id="content">
<div class="content-topbar" id="content-topbar-4"></div> <div class="content-topbar" id="content-topbar-4"></div>
<!-- <div class="content-topbar" id="content-topbar-2"></div> -->
<!-- <div class="content-topbar" id="content-topbar-3"></div> -->
<!-- <div class="content-topbar" id="content-topbar-4"></div> -->
<!-- <div class="content-topbar" id="content-topbar-5"></div> -->
<div id="content-body"> <div id="content-body">
<h1>Joseph Ferano</h1> <h1>Joseph Ferano</h1>
<hr> <hr>
<!-- <a href="https://blog.ferano.io">blog</a> --> <!-- <a href="https://blog.ferano.io">blog</a> -->
<h2>Projects</h2> <h2>Projects</h2>
<p></p> <ul>
<br /> <li>
<p>Wargate Heroes</p> <a href="https://www.youtube.com/watch?v=p39bR69Ws8s">Wargate Heroes</a>
<br /> </li>
<a href="https://www.youtube.com/watch?v=MwaA7Ao7FDA">Gameplay</a> | <a href="https://www.youtube.com/watch?v=p39bR69Ws8s">Trailer</a> <li>
<br /> <a href="https://www.youtube.com/watch?v=uWEXo278UmQ">Jaws.io</a>
<a href="https://moonminers.app">Moon Miners</a> </li>
<br /> <li>
<a href="https://github.com/JosephFerano/kanban-tui">Kanban TUI</a> <a href="https://www.youtube.com/watch?v=T5DXcvSaR-w">Starship Troopers: Invasion "Mobile Infantry"</a>
<br /> </li>
<li>
<a href="https://git.ferano.io/JosephFerano/kanban-tui">Kanban TUI</a>
</li>
<li>
<a href="https://github.com/JosephFerano/basicterm">Basicterm</a> <a href="https://github.com/JosephFerano/basicterm">Basicterm</a>
<br /> </li>
<li>
<a href="https://github.com/JosephFerano/elm-graphics">Elm Graphics</a> <a href="https://github.com/JosephFerano/elm-graphics">Elm Graphics</a>
<br /> </li>
<li>
<a href="https://git.ferano.io/JosephFerano/dotfiles">dotfiles</a> <a href="https://git.ferano.io/JosephFerano/dotfiles">dotfiles</a>
<h2>Resume</h2> </li>
<a href="https://ferano.io/resume">PDF</a> | </ul>
<a href="https://ferano.io/resume">HTML</a>
<h2>Socials</h2> <h2>Socials</h2>
<div> <div>
<a class="svg-icon" href="https://git.ferano.io"> <a class="svg-icon" href="https://git.ferano.io">
@ -94,7 +95,7 @@
</a> </a>
</div> </div>
<h2>Contact</h2> <h2>Contact</h2>
<span>Ask for my email</span> <span>joseph @ this sites url</span>
<!-- <script src="static/main.js"></script> --> <!-- <script src="static/main.js"></script> -->
</div> </div>
</body> </body>

36
main.css
View File

@ -4,13 +4,13 @@
left: 0; left: 0;
background-color: #594F4F; background-color: #594F4F;
width: 100%; width: 100%;
height: 12px; /* height: 12px; */
} }
.content-topbar { .content-topbar {
width: 600px; width: 100%;
height: 20px; height: 20px;
margin: -24px; /* margin: -24px; */
} }
#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); } #content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); }
@ -26,7 +26,7 @@
/* #594F4F, 5%) 100%) */ /* #594F4F, 5%) 100%) */
body { body {
margin: 0; /* margin: 0; */
overflow: hidden; overflow: hidden;
} }
@ -60,7 +60,7 @@ body {
hsla(0, 6%, 25%, 1) 100% hsla(0, 6%, 25%, 1) 100%
) no-repeat; ) no-repeat;
background-color: hsla(0, 6%, 25%, 1); background-color: hsla(0, 6%, 25%, 1);
margin: 20px auto; margin: auto;
max-width: 600px; max-width: 600px;
line-height: 1.6; line-height: 1.6;
font-size: 18px; font-size: 18px;
@ -70,13 +70,13 @@ body {
p { p {
font-family: 'Playfair', serif; font-family: 'Playfair', serif;
margin: 0px 0px -30px 0px; /* margin: 0px 0px -30px 0px; */
padding: 0px; /* padding: 0px; */
} }
div.gallery { div.gallery {
float: left; float: left;
margin: -10px; /* margin: -10px; */
width: 200px; width: 200px;
} }
@ -86,18 +86,26 @@ span {
#content { #content {
background-color: hsla(84, 20%, 99%, 1); background-color: hsla(84, 20%, 99%, 1);
position: relative;
/* padding: 24px; */
}
#content-body {
padding: 24px; padding: 24px;
} }
hr { hr {
color: hsla(134, 52%, 75%, 1); color: hsla(0,6%,33%, 0.9);
}
h1 {
color: hsla(190, 21%, 36%, 1);
font-family: 'Playfair', serif;
/* margin-top: -5px; */
} }
h1, h2, h3 { h2, h3 {
color: hsla(190, 21%, 36%, 1); color: hsla(190, 21%, 36%, 1);
line-height: 1.6; line-height: 1.2;
margin-top: 40px;
margin-bottom: 10px;
font-family: 'Playfair', serif; font-family: 'Playfair', serif;
} }
@ -117,7 +125,7 @@ a {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
font-family: 'Playfair', sans-serif; font-family: 'Playfair', sans-serif;
margin: 0px 0px 50px 0px; /* margin: 0px 0px 50px 0px; */
} }
a:hover { a:hover {