Merge 7b3f090fba into fc7c91ab05
This commit is contained in:
omar chatin
GitHub
commit
7e9440a14f
4 changed files with 552 additions and 122 deletions
|
|
@ -1,5 +1,7 @@
|
|||
# Portfolio-Site
|
||||
|
||||
s
|
||||
|
||||
A summary of all my work, also my first proper web-design project.
|
||||
|
||||
Check out the page for more info on me and my work/for my contact details. Its hosted at https://Wil-Ro.github.io/Portfolio
|
||||
|
|
|
|||
275
index.html
275
index.html
|
|
@ -1,122 +1,153 @@
|
|||
<HTML>
|
||||
|
||||
<header>
|
||||
<link rel = "stylesheet" href = "pages\mainpage.css">
|
||||
<link rel = "stylesheet" href = "pages\effects.css">
|
||||
<link rel = "icon" href = "images\Icon.ico">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src = "scripts\gallery.js" type = "module"></script>
|
||||
<script src = "scripts\autoScroll.js" type = "module"></script>
|
||||
<title>Nye Evans Portfolio</title>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<div id = "introScreenSpace">
|
||||
<h1>
|
||||
<div id = "siteTitle">Nye "Ro" Evans</div>
|
||||
<div class = "subTitle">Portfolio</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class = "textBox">
|
||||
An aspiring software developer who specialises in C++, C# and Python, with an intrest in lower level langauges like Assembly;
|
||||
Most of my work is software based, with Python and C++ along with some web-development experience in HTML, CSS, JavaScript and TypeScript.
|
||||
|
||||
</div>
|
||||
|
||||
<div style = "text-align: center;">
|
||||
<img src = "images/Profile3.png" id = "profileImage" class = "profileImage orangeBorder" alt = "me">
|
||||
</div>
|
||||
|
||||
<div class = "textBox" style = "margin-bottom: 5vh;">
|
||||
Most of my experience relates to personal projects, however I have previously done work experience at JBA Consulting writing a
|
||||
program to convert their SQL databases to Excel spreadsheets and am currently working as an intern in software development in test. I also often teach Python and HTML, having taught many students at my school's coding club for over 6 years and having tutored
|
||||
GCSE students briefly. You can see my full CV <a href = "pages/CVPage.html">here</a>.
|
||||
</div>
|
||||
|
||||
<div class = "textBox" id = "galleryHeader">
|
||||
Check out my larger projects here:
|
||||
<div style = "font-size: 60%;">click a project to find out more</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- gallery slides defined here, originally we had one slide and just changed its values but loading images is slow, easier to load them before hand and just hide or show them-->
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">VR physics engine</p>
|
||||
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<p class = "galleryCaption">A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based
|
||||
environment.<br><br>This system was my introduction to Unreal Engine and mainly used its "Blueprint" visual language, however I later used C++ to try and add my own physics
|
||||
to it.
|
||||
</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">Tower defence game</p>
|
||||
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
|
||||
</a>
|
||||
<p class = "galleryCaption">One of my first projects, this was created with a friend to help us gain a better understanding of python. <br><br> This was a basic tower defence game but featured a fully scalable
|
||||
level design system.
|
||||
</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">Work on Aardvark XR</p>
|
||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<p class = "galleryCaption">Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users VR experience.<br><br>
|
||||
Over the course of its release I have attended its first hackathon and continued to support it long afterwards, having worked both on my own and with other developers to create apps
|
||||
for the system to help it gain traction.
|
||||
</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
<div class = "programGallery">
|
||||
<p class = "galleryTitle">Unity based Mind Map software</p>
|
||||
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryLink">
|
||||
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
||||
</a>
|
||||
<p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> This was a program designed to create mind maps, it could have nodes made, and linked, have images added and
|
||||
included a pen tool to allow the user to draw notes on top of the mind maps. It also had a fully functional undo and redo system and the ability to save and load files.
|
||||
</p>
|
||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class = "textBox" id= "outroText">
|
||||
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.
|
||||
</div>
|
||||
|
||||
<div id = "socialBar">
|
||||
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
|
||||
 
|
||||
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>
|
||||
 
|
||||
<a href="https://github.com/Wil-Ro" target="_blank">Github</a>
|
||||
 
|
||||
<a href = "https://dev.to/willowro" target="_blank">Dev.to</a>
|
||||
|
||||
 
|
||||
<a href = "./pages/CVPage.html">CV</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</HTML>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nye Evans Portfolio</title>
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="nav">
|
||||
<div class="nav-left">Nye Evans Portfolio</div>
|
||||
<div class="menu-btn btn">
|
||||
<div class="line line1"></div>
|
||||
<div class="line line2"></div>
|
||||
<div class="line line3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<div class="menu-inner">
|
||||
<a class="btn" href="#home">home</a>
|
||||
<a class="btn" href="#skills">skills</a>
|
||||
<a class="btn" href="#projects">projects</a>
|
||||
<a class="btn" href="#contact">contact me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec-1" id="home">
|
||||
<div class="sec1-left">
|
||||
<div class="sec1-title">Hello 👋</div>
|
||||
<div class="sec1-body">
|
||||
I'm Nye Ro Evans And I'm <br />
|
||||
<span class="colored-text">software developer</span>
|
||||
</div>
|
||||
<a href="#projects">
|
||||
<div class="sec1-btn btn">My Projects</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sec1-img"></div>
|
||||
</div>
|
||||
|
||||
<div class="sec-2" id="skills">
|
||||
<div class="sec2-title">skills</div>
|
||||
<div class="sec2-body">
|
||||
specialises in TypeScript, C# and python, with an interest in lower
|
||||
level languages like C++; Most of my work is software based, making
|
||||
games and tools in python and C#.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec-3" id="exp">
|
||||
<div class="sec3-inner">
|
||||
<div class="sec3-title">Work expearince</div>
|
||||
<div class="sec3-body">
|
||||
Most of my experience relates to personal projects, however I have
|
||||
previously done work experience at JBA Consulting writing a program to
|
||||
convert their SQL databases to Excel spreadsheets. I also often teach
|
||||
Python and HTML, having taught many students at my school's coding
|
||||
club for over 6 years and having tutored GCSE students
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec-5" id="projects">
|
||||
<div class="sec5-title">My Projects</div>
|
||||
|
||||
<div class="project">
|
||||
<div class="project-img"></div>
|
||||
<div class="project-title">VR physics engine</div>
|
||||
<div class="project-body">
|
||||
A project done for my EPQ, during post-16, where I aimed to create a
|
||||
virtual reality environment where the user could grab and interact
|
||||
with objects in a semi-physics based environment. This system was my
|
||||
introduction to Unreal Engine and mainly used its "Blueprint" visual
|
||||
language, however I later used C++ to try and add my own physics to
|
||||
it.
|
||||
</div>
|
||||
<div class="proj-learn-more-btn btn">learn more</div>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<div
|
||||
class="project-img"
|
||||
style="
|
||||
background-image: url(./pages/gallery/cat-tower-defence/projectHeaderImage.png);
|
||||
"
|
||||
></div>
|
||||
<div class="project-title">Tower defence game</div>
|
||||
<div class="project-body">
|
||||
One of my first projects, this was created with a friend to help us
|
||||
gain a better understanding of python.
|
||||
</div>
|
||||
<div class="proj-learn-more-btn btn">learn more</div>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<div
|
||||
class="project-img"
|
||||
style="
|
||||
background-image: url(./pages/gallery/aardvark-work/projectHeaderImage.png);"
|
||||
></div>
|
||||
<div class="project-title">Work on Aardvark XR</div>
|
||||
<div class="project-body">
|
||||
Aardvark is a web-based virtual reality system which allows users to
|
||||
create and share web apps which are overlayed on top of the users VR
|
||||
experience.
|
||||
|
||||
<div class="proj-learn-more-btn btn">learn more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="sec-6" id="contact">
|
||||
<div class="sec6-title">I hope you like my work! If you ever want to <br> contact me, my Email, Github and Social Medias can be found below.</div>
|
||||
|
||||
<div class="contacts"><a class="btn" href="">
|
||||
<div class="social-media">
|
||||
<div class="s-img twitter"></div>
|
||||
<div class="s-name">Twitter</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="btn" href="">
|
||||
<div class="social-media">
|
||||
<div class="s-img github"></div>
|
||||
<div class="s-name">Github</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="">
|
||||
<div class="social-media">
|
||||
<div class="s-img email"></div>
|
||||
<div class="s-name">Email</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="">
|
||||
<div class="social-media">
|
||||
<div class="s-img dev"></div>
|
||||
<div class="s-name">Dev</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="./main.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
381
main.css
Normal file
381
main.css
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
:root {
|
||||
--bg: #eff7e1;
|
||||
--bg-1: #214151;
|
||||
--bg-2: #c8a777;
|
||||
--bg-3: #744923;
|
||||
--bg-4: #1DA1F3;
|
||||
}
|
||||
/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); */
|
||||
body,
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
margin: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 wheat;
|
||||
}
|
||||
.sec-1 {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--bg-1);
|
||||
background-color: var(--bg-1);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.line {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 100;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.line1.active{
|
||||
transform: rotate(45deg);
|
||||
top: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.line2.active{
|
||||
left: -5px;
|
||||
opacity: 0;
|
||||
}
|
||||
.line3.active{
|
||||
transform: rotate(-45deg);
|
||||
top: -8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.menu{
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
inset: 70px 100% 0 0;
|
||||
/* inset: 70px 0 0 0; */
|
||||
background-color: #46708581;
|
||||
z-index: 998;
|
||||
transition: all .5s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.menu.open{
|
||||
inset: 70px 0 0 0;
|
||||
}
|
||||
.menu-inner{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
gap: 20px;
|
||||
}
|
||||
.menu-inner a{
|
||||
color: white;
|
||||
}
|
||||
.sec-1 {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(230px, 330px);
|
||||
grid-template-rows: minmax(300px, 350px);
|
||||
place-content: center;
|
||||
padding: 20px;
|
||||
column-gap: 30px;
|
||||
row-gap: 5px;
|
||||
}
|
||||
.sec1-img {
|
||||
grid-column: 2/4;
|
||||
background-image: url(./images/Profile3.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.sec1-title {
|
||||
font-size: clamp(2em, 6vmin, 3em);
|
||||
font-weight: 700;
|
||||
color: rgb(37, 74, 104);
|
||||
}
|
||||
.sec1-body {
|
||||
font-size: clamp(1.1em, 4vmin, 1.5em);
|
||||
}
|
||||
span.colored-text {
|
||||
color: var(--bg-2);
|
||||
font-size: clamp(1.1em, 4vmin, 1.5em);
|
||||
font-weight: 700;
|
||||
}
|
||||
.sec1-btn {
|
||||
margin-top: 35px;
|
||||
background-color: var(--bg-2);
|
||||
color: white;
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 6px 6px 2px rgb(182, 182, 182);
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sec1-left {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sec-1 {
|
||||
grid-template-columns: 250px minmax(200px, 330px);
|
||||
}
|
||||
.nav-left{
|
||||
font-size: clamp(1em, 3vmin, 1.5em);
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.sec-1 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
row-gap: 20px;
|
||||
}
|
||||
.sec1-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.sec1-img {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
justify-self: center;
|
||||
}
|
||||
.sec1-btn {
|
||||
margin-top: 15px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-2 {
|
||||
background-color: var(--bg-3);
|
||||
color: white;
|
||||
position: relative;
|
||||
top: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
place-items: center;
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.sec2-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sec2-body {
|
||||
font-size: 1.1em;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.sec-3 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.sec3-inner {
|
||||
position: relative;
|
||||
top: 190px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 28.785px 3.59813px #cccccc;
|
||||
padding: 25px;
|
||||
margin: 10px;
|
||||
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sec3-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sec3-body {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* sec 5 */
|
||||
|
||||
.sec-5 {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 750px);
|
||||
grid-template-rows: auto repeat(4, max-content);
|
||||
position: relative;
|
||||
top: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
.sec5-title {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
color: var(--bg-3);
|
||||
}
|
||||
.project {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(100px, 150px) 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 28.785px 3.59813px #cccccc;
|
||||
padding: 25px;
|
||||
margin: 20px;
|
||||
column-gap: 20px;
|
||||
row-gap: 10px;
|
||||
}
|
||||
.project-img {
|
||||
grid-row: 1/4;
|
||||
background-image: url(./pages/gallery/epq-project/projectHeaderImage.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.project-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
color: var(--bg-1);
|
||||
}
|
||||
.project-body {
|
||||
font-size: 1em;
|
||||
}
|
||||
.proj-learn-more-btn {
|
||||
background-color: var(--bg-3);
|
||||
color: white;
|
||||
width: max-content;
|
||||
padding: 10px 15px;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
.project {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 200px;
|
||||
grid-auto-rows: max-content;
|
||||
}
|
||||
.proj-learn-more-btn {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-6 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: max-content 1fr;
|
||||
background-color: var(--bg-1);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
top: 210px;
|
||||
}
|
||||
.sec6-title{
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.contacts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(60px, 80px));
|
||||
grid-auto-rows: 70px;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 28.785px 3.59813px #3d3d3d;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
color: var(--bg-4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.s-img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
.twitter{
|
||||
background-image: url(./icons/twitter.png);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
.github{
|
||||
background-image: url(./icons/github.png);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
.email{
|
||||
background-image: url(./icons/email.png);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
.dev{
|
||||
background-image: url(./icons/dev.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:370px) {
|
||||
.contacts{
|
||||
grid-template-columns: repeat(2, minmax(60px, 80px));
|
||||
column-gap: 10px;
|
||||
row-gap: 30px;
|
||||
}
|
||||
}
|
||||
16
main.js
Normal file
16
main.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
const menuBtn=document.querySelector('.menu-btn');
|
||||
|
||||
menuBtn.addEventListener('click',()=>{
|
||||
document.querySelector('.menu-btn').classList.toggle('active');
|
||||
document.querySelector('.menu').classList.toggle('open');
|
||||
document.querySelector('.line1').classList.toggle('active');
|
||||
document.querySelector('.line2').classList.toggle('active');
|
||||
document.querySelector('.line3').classList.toggle('active');
|
||||
});
|
||||
|
||||
|
||||
// var text=document.querySelector('.colored-text')
|
||||
// var jobList=["software developer", "python programmer", "php developer"]
|
||||
// var count=0
|
||||
|
||||
// // text writing animation
|
||||
Loading…
Add table
Reference in a new issue