mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
animate header name
This commit is contained in:
53
package-lock.json
generated
53
package-lock.json
generated
@@ -17,11 +17,12 @@
|
||||
"react": "^18.0.0",
|
||||
"react-bootstrap": "^2.2.3",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-ga": "^3.3.0",
|
||||
"react-ga": "^3.3.1",
|
||||
"react-image-gallery": "^1.2.7",
|
||||
"react-responsive-carousel": "^3.2.23",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.0",
|
||||
"sass": "^1.55.0",
|
||||
"semver": "^7.3.7",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
@@ -7928,6 +7929,11 @@
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
|
||||
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -11772,12 +11778,12 @@
|
||||
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
|
||||
},
|
||||
"node_modules/react-ga": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz",
|
||||
"integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==",
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
|
||||
"integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^15.6.2 || ^16.0 || ^17"
|
||||
"react": "^15.6.2 || ^16.0 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-image-gallery": {
|
||||
@@ -12334,6 +12340,22 @@
|
||||
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
|
||||
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.55.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
|
||||
"integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-loader": {
|
||||
"version": "12.6.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
|
||||
@@ -20297,6 +20319,11 @@
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
|
||||
"integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
|
||||
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -22941,9 +22968,9 @@
|
||||
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
|
||||
},
|
||||
"react-ga": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz",
|
||||
"integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ=="
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
|
||||
"integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ=="
|
||||
},
|
||||
"react-image-gallery": {
|
||||
"version": "1.2.7",
|
||||
@@ -23349,6 +23376,16 @@
|
||||
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
|
||||
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.55.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
|
||||
"integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
|
||||
"requires": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
}
|
||||
},
|
||||
"sass-loader": {
|
||||
"version": "12.6.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
|
||||
|
||||
@@ -13,11 +13,12 @@
|
||||
"react": "^18.0.0",
|
||||
"react-bootstrap": "^2.2.3",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-ga": "^3.3.0",
|
||||
"react-ga": "^3.3.1",
|
||||
"react-image-gallery": "^1.2.7",
|
||||
"react-responsive-carousel": "^3.2.23",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.0",
|
||||
"sass": "^1.55.0",
|
||||
"semver": "^7.3.7",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { Route, Link, Routes, BrowserRouter as Router } from 'react-router-dom'
|
||||
|
||||
import './App.css';
|
||||
import './static/css/App.css';
|
||||
import './static/css/head.scss'
|
||||
import menu from './assets/menu.svg'
|
||||
import Nav from './componets/Nav.js'
|
||||
import Socials from './componets/Socials.js'
|
||||
import Name from './componets/Name.js'
|
||||
import Home from './pages/Home.js'
|
||||
import Projects from './pages/Projects';
|
||||
import Activities from './pages/Activities';
|
||||
@@ -21,7 +23,7 @@ function App() {
|
||||
<Router>
|
||||
<div className="App">
|
||||
<div className="header">
|
||||
<a href="/"><h1>Andrew Simonson</h1></a>
|
||||
<Name />
|
||||
<img src={menu} alt="menu" id='menu' onClick={toggleMenu}/>
|
||||
<Nav id='navbar'>
|
||||
<Link to='/'>Home</Link>
|
||||
|
||||
BIN
src/assets/photos/sun.png
Normal file
BIN
src/assets/photos/sun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
37
src/componets/Name.js
Normal file
37
src/componets/Name.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export default function Name() {
|
||||
return (
|
||||
<a href="/">
|
||||
<div id="name-container">
|
||||
<div className="glitch">
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
<div className="line name">
|
||||
<h1 className="textGrad">Andrew Simonson</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -28,7 +28,7 @@ function resizer() {
|
||||
else { // mobile view
|
||||
window.onscroll = '';
|
||||
document.querySelector('.header').style.backgroundColor = '#1a1a1a';
|
||||
document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
|
||||
document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
|
||||
// document.querySelector('.header > h1').style.color = "#ecebeb";
|
||||
document.querySelector(".header").style.borderBottomWidth = '3px';
|
||||
e.style.maxHeight = '0px';
|
||||
@@ -39,12 +39,11 @@ function resizer() {
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
|
||||
document.querySelector('.header').style.backgroundColor = '#1a1a1a';
|
||||
document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
|
||||
// document.querySelector('.header > h1').style.color = "#a8a8a8";
|
||||
document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
|
||||
document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
|
||||
} else {
|
||||
document.querySelector('.header').style.backgroundColor = 'rgba(0,0,0,0)';
|
||||
document.querySelector('.header > a > h1').style.fontSize = "2rem";
|
||||
document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "2rem";});
|
||||
// document.querySelector('.header > h1').style.color = "#ecebeb";
|
||||
document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
|
||||
}
|
||||
|
||||
@@ -2,7 +2,22 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "neon-future";
|
||||
src: url("./assets/fonts/Neon\ Future.ttf")
|
||||
src: url("../fonts/Neon\ Future.ttf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "starixo";
|
||||
src: url("../fonts/Starixo.otf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "independent";
|
||||
src: url("../fonts/INDEPENDENT.ttf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sunset-club";
|
||||
src: url("../fonts/SunsetClub.otf")
|
||||
}
|
||||
|
||||
html, body {
|
||||
@@ -12,7 +27,7 @@ html, body {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-image: url('assets/plexus.jpg');
|
||||
background-image: url('../../assets/plexus.jpg');
|
||||
/*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
|
||||
background-attachment: fixed;
|
||||
background-size: 100% auto;
|
||||
@@ -79,6 +94,16 @@ a {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
|
||||
background-size: contain;
|
||||
padding-left: 5.5rem;
|
||||
}
|
||||
|
||||
.textGrad {
|
||||
font-family: "sunset-club" !important;
|
||||
}
|
||||
|
||||
.navControl {
|
||||
transition: .4s;
|
||||
}
|
||||
60
src/static/css/head.scss
Normal file
60
src/static/css/head.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.line {
|
||||
&:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation:
|
||||
clip 6000ms $i * -600ms linear infinite,
|
||||
glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
|
||||
|
||||
@keyframes glitch#{$i} {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
96% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
97% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #4E9A26;
|
||||
}
|
||||
98% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #AC1212;
|
||||
}
|
||||
99% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clip {
|
||||
0% {
|
||||
clip-path: polygon(
|
||||
0 100%,
|
||||
100% 100%,
|
||||
100% 120%,
|
||||
0 120%
|
||||
);
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: polygon(
|
||||
0 -20%,
|
||||
100% -20%,
|
||||
100% 0%,
|
||||
0 0
|
||||
);
|
||||
}
|
||||
}
|
||||
BIN
src/static/fonts/INDEPENDENT.ttf
Normal file
BIN
src/static/fonts/INDEPENDENT.ttf
Normal file
Binary file not shown.
BIN
src/static/fonts/Starixo.otf
Executable file
BIN
src/static/fonts/Starixo.otf
Executable file
Binary file not shown.
BIN
src/static/fonts/SunsetClub.otf
Normal file
BIN
src/static/fonts/SunsetClub.otf
Normal file
Binary file not shown.
Reference in New Issue
Block a user