mirror of
https://github.com/EthanPisani/ethanpisani.com.git
synced 2025-07-02 18:15:18 -04:00
move css to main.css
This commit is contained in:
parent
9e237f5963
commit
d71cc007e3
@ -1,198 +1,108 @@
|
||||
body {
|
||||
font-size: 3em;
|
||||
background-color: #2c2c2c;
|
||||
margin: 0;
|
||||
margin-top: 10vh;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: auto;
|
||||
margin-top: 30vh;
|
||||
text-align: center;
|
||||
color: #e0e0e0;
|
||||
background-color: #232627;
|
||||
}
|
||||
|
||||
a{
|
||||
background-color: #535353;
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #229100;
|
||||
|
||||
|
||||
text-align: center;
|
||||
font-size: 5em;
|
||||
color: #37d605;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/** UNDERLINE
|
||||
:root {
|
||||
--mainColor: #00b1c9;
|
||||
h2 {
|
||||
color: #2cbb00;
|
||||
margin-top: 40px;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 2px solid #2cbb00;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom, var(--mainColor) 0%,
|
||||
var(--mainColor) 100%
|
||||
);
|
||||
font-weight: bold;
|
||||
background-position: 0 100%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 4px 4px;
|
||||
text-decoration: none;
|
||||
transition: background-size .2s;
|
||||
/* color: #2cbb00; */
|
||||
color: #e0e0e0;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #2cbb00;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-size: 4px 50px;
|
||||
color: #2cbb00;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #35e001;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.skills-list li {
|
||||
background-color: #434444;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* .project-date {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-left: 100px;
|
||||
padding-left: 100px;
|
||||
} */
|
||||
|
||||
* ----------------------------------------
|
||||
* animation text-pop-up-top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
/* DARW BOX #243754
|
||||
<div class="wrapper">
|
||||
<span class="square">
|
||||
<a class="tenth before after" href="#">Chem 12 CPT</a>
|
||||
</span>
|
||||
</div>
|
||||
.wrapper{
|
||||
margin:3em 0;
|
||||
}
|
||||
a,a:visited,a:hover,a:active{
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:relative;
|
||||
transition:0.5s color ease;
|
||||
text-decoration:none;
|
||||
color:#229100;
|
||||
font-size:2.5em;
|
||||
}
|
||||
a:hover{
|
||||
color:#40e7e7;
|
||||
}
|
||||
a.before:before,a.after:after{
|
||||
content: "";
|
||||
transition:0.5s all ease;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:absolute;
|
||||
}
|
||||
a.before:before{
|
||||
top:-0.25em;
|
||||
}
|
||||
a.after:after{
|
||||
bottom:-0.25em;
|
||||
}
|
||||
a.before:before,a.after:after{
|
||||
height:5px;
|
||||
height:0.35rem;
|
||||
width:0;
|
||||
background:#40e7e7;
|
||||
}
|
||||
a.first:after{
|
||||
left:0;
|
||||
}
|
||||
a.second:after{
|
||||
right:0;
|
||||
}
|
||||
a.third:after,a.sixth:before,a.sixth:after{
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
}
|
||||
a.fourth:before,a.fourth:after{
|
||||
left:0;
|
||||
}
|
||||
a.fifth:before,a.fifth:after{
|
||||
right:0;
|
||||
}
|
||||
a.seventh:before{
|
||||
right:0;
|
||||
}
|
||||
a.seventh:after{
|
||||
left:0;
|
||||
}
|
||||
a.eigth:before{
|
||||
left:0;
|
||||
}
|
||||
a.eigth:after{
|
||||
right:0;
|
||||
}
|
||||
a.before:hover:before,a.after:hover:after{
|
||||
/* Particles.js styles */
|
||||
#particles-js {
|
||||
/* scroll with the page */
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.square{
|
||||
box-sizing:border-box;
|
||||
margin-left:-0.4em;
|
||||
position:relative;
|
||||
font-size:1em;
|
||||
overflow:hidden;
|
||||
}
|
||||
.square a{
|
||||
position:static;
|
||||
font-size:100%;
|
||||
padding:0.2em 0.4em;
|
||||
}
|
||||
.square:before,.square:after{
|
||||
content: "";
|
||||
box-sizing:border-box;
|
||||
transition:0.25s all ease;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:absolute;
|
||||
width:5px;
|
||||
width:0.35rem;
|
||||
height:0;
|
||||
background:#40e7e7;
|
||||
}
|
||||
.square:before{
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom:-0.2em;
|
||||
}
|
||||
.square.individual:before{
|
||||
transition-delay:0.6s;
|
||||
}
|
||||
.square:after{
|
||||
right:0;
|
||||
top:-0.2em;
|
||||
}
|
||||
.square.individual:after{
|
||||
transition-delay:0.2s;
|
||||
}
|
||||
.square a:before{
|
||||
left:0;
|
||||
transition:0.25s all ease;
|
||||
}
|
||||
.square a:after{
|
||||
right:0;
|
||||
transition:0.25s all ease;
|
||||
}
|
||||
.square.individual a:after{
|
||||
transition:0.25s all ease 0.4s;
|
||||
}
|
||||
.square:hover:before,.square:hover:after{
|
||||
height:calc(100% + 0.4em);
|
||||
}
|
||||
.square:hover a:before,.square:hover a:after{
|
||||
width:100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0;
|
||||
p.project-container-p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
body::-webkit-scrollbar- {
|
||||
width: 0;
|
||||
.project-date {
|
||||
margin-left: auto; /* Ensures the date is pushed to the right */
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
/* color grey */
|
||||
border: 0;
|
||||
border-top: 1px solid #757575;
|
||||
|
||||
}
|
||||
/* ----------------------------------------------
|
||||
* Generated by Animista on 2020-12-31 16:52:43
|
||||
* Licensed under FreeBSD License.
|
||||
@ -218,9 +128,9 @@ body::-webkit-scrollbar- {
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
|
||||
0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
|
||||
0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
|
||||
0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
|
||||
0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
@keyframes text-pop-up-top {
|
||||
@ -236,22 +146,15 @@ body::-webkit-scrollbar- {
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
|
||||
0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
|
||||
0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
|
||||
0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
|
||||
0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.text-pop-up-top {
|
||||
-webkit-animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
-webkit-animation: text-pop-up-top 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
both;
|
||||
animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: text-pop-up-top 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
|
||||
iframe{
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
@ -8,161 +8,24 @@
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#2cbb00" />
|
||||
<meta name="theme-color" content="#2cbb00" />
|
||||
<title>Ethan Pisani - Resume Portfolio</title>
|
||||
<title>Ethan Pisani - Portfolio</title>
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
href="{{ url_for('static',filename='css/main.css') }}"
|
||||
as="style"
|
||||
/>
|
||||
<!-- Google Font -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/main.css') }}"
|
||||
/>
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
margin-top: 10vh;
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: #e0e0e0;
|
||||
background-color: #232627;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 5em;
|
||||
color: #37e401;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #2cbb00;
|
||||
margin-top: 40px;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 2px solid #2cbb00;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
/* color: #2cbb00; */
|
||||
color: #e0e0e0;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #2cbb00;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2cbb00;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #35e001;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.skills-list li {
|
||||
background-color: #434444;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* .project-date {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-left: 100px;
|
||||
padding-left: 100px;
|
||||
} */
|
||||
|
||||
/* Particles.js styles */
|
||||
#particles-js {
|
||||
/* scroll with the page */
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------
|
||||
* Generated by Animista on 2020-12-31 16:52:43
|
||||
* Licensed under FreeBSD License.
|
||||
* See http://animista.net/license for more info.
|
||||
* w: http://animista.net, t: @cssanimista
|
||||
* ---------------------------------------------- */
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation text-pop-up-top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes text-pop-up-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-50px);
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
|
||||
0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
|
||||
0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
@keyframes text-pop-up-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-50px);
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
|
||||
0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
|
||||
0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.text-pop-up-top {
|
||||
-webkit-animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
both;
|
||||
animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Particles.js Library -->
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
@ -170,7 +33,6 @@
|
||||
|
||||
<body>
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<div class="content">
|
||||
<h1 class="text-pop-up-top">Ethan Pisani.</h1>
|
||||
|
||||
@ -186,58 +48,77 @@
|
||||
|
||||
<ul class="projects-list">
|
||||
<!-- Projects: Project Lambda, Portfolio Website, Homelab, Tails of Ailurus, LTC Bus AI/ML, SMPLY-Navigate, Gan website, Project ASH --->
|
||||
<div name="Homelab">
|
||||
<p><strong>Homelab</strong> <span class=project-date">2019 — Present</span></p>
|
||||
<ul>
|
||||
<li>A collection of computers and servers <span class=project-date">both local and cloud-based</span> running various software such as Debian, Proxmox, TrueNAS, and OPNsense.</li>
|
||||
<li>Experience self-hosting apps like Gitea, Jellyfin, Docker apps, reverse proxy config, and more.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div name="Tails of Ailurus">
|
||||
<p><strong>Tails of Ailurus</strong> <span class=project-date">2021 — Present</span></p>
|
||||
<p class="project-container-p"><strong><a href="/tails-of-ailurus">Tails of Ailurus</a></strong> <span class=project-date">2021 — Present</span></p>
|
||||
<ul>
|
||||
<li>Developed a 2D platformer game using Unity, C#, and Blender.</li>
|
||||
<li>Designed levels, characters, and animations, and implemented game mechanics.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="LTC Bus AI/ML">
|
||||
<p><strong>LTC Bus AI/ML</strong> <span class=project-date">2024 — Present</span></p>
|
||||
<p class="project-container-p"><strong>LTC Bus AI/ML</strong> <span class=project-date">2024 — Present</span></p>
|
||||
<ul>
|
||||
<li>Developed tools for real-time bus movement visualization using AI/ML techniques.</li>
|
||||
<li>Utilized SQL and Multiple Linear Regression to store and analyze bus location data.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div name="SMPLY-Navigate">
|
||||
<p><strong>SMPLY-Navigate</strong> <span class=project-date">2023 — Present</span></p>
|
||||
<ul>
|
||||
<li>Developed a web app to help students navigate the Western campus.</li>
|
||||
<li>Utilized Google Maps API, JavaScript, and HTML/CSS to create a user-friendly interface.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div name="Gan website">
|
||||
<p><strong>Gan website</strong> <span class=project-date">2022 — Present</span></p>
|
||||
<ul>
|
||||
<li>Developed a website for a local business using WordPress, HTML, and CSS.</li>
|
||||
<li>Designed a user-friendly interface and implemented SEO best practices.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="Project ASH">
|
||||
<p><strong>Project ASH</strong> <span class=project-date">2021 — Present</span></p>
|
||||
<p class="project-container-p"><strong>Project ASH</strong> <span class=project-date">2023</span></p>
|
||||
<ul>
|
||||
<li>Developed a web app to help students navigate the Western campus.</li>
|
||||
<li>Utilized Google Maps API, JavaScript, and HTML/CSS to create a user-friendly interface.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div name="chemistry Study Guide">
|
||||
<p> <strong> <a href="/chem12cpt" >Chemistry Study Guide </a> </strong> <span class=project-date">2021 — Present</span></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="SMPLY-Navigate">
|
||||
<p class="project-container-p"><strong><a href="https://github.com/EthanPisani/SMPLY-Navigate">SMPLY-Navigate</a></strong> <span class=project-date">2022</span></p>
|
||||
<ul>
|
||||
<li>Developed a web app to help students navigate the Western campus.</li>
|
||||
<li>Utilized Google Maps API, JavaScript, and HTML/CSS to create a user-friendly interface.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="Gan Flask Website">
|
||||
<p class="project-container-p"><strong><a href="https://github.com/EthanPisani/gan.ethanpisani.com">Gan Flask Website</a></strong> <span class=project-date">2021</span></p>
|
||||
<ul>
|
||||
<li>Developed a website for a local business using WordPress, HTML, and CSS.</li>
|
||||
<li>Designed a user-friendly interface and implemented SEO best practices.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="chemistry Study Guide">
|
||||
<p class="project-container-p"> <strong> <a href="/chem12cpt" >Chemistry Study Guide </a> </strong> <span class=project-date">2021</span></p>
|
||||
<ul>
|
||||
<li>Developed a website for a local business using WordPress, HTML, and CSS.</li>
|
||||
<li>Designed a user-friendly interface and implemented SEO best practices.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div name="Homelab">
|
||||
<p class="project-container-p"><strong>Homelab</strong> <span class=project-date">2019</span></p>
|
||||
<ul>
|
||||
<li>A collection of computers and servers <span class=project-date">both local and cloud-based</span> running various software such as Debian, Proxmox, TrueNAS, and OPNsense.</li>
|
||||
<li>Experience self-hosting apps like Gitea, Jellyfin, Docker apps, reverse proxy config, and more.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user