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
|
# Portfolio-Site
|
||||||
|
|
||||||
|
s
|
||||||
|
|
||||||
A summary of all my work, also my first proper web-design project.
|
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
|
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>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
<header>
|
<head>
|
||||||
<link rel = "stylesheet" href = "pages\mainpage.css">
|
<meta charset="UTF-8" />
|
||||||
<link rel = "stylesheet" href = "pages\effects.css">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<link rel = "icon" href = "images\Icon.ico">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Nye Evans Portfolio</title>
|
||||||
<meta charset="UTF-8">
|
<link rel="stylesheet" href="main.css" />
|
||||||
|
</head>
|
||||||
<script src = "scripts\gallery.js" type = "module"></script>
|
|
||||||
<script src = "scripts\autoScroll.js" type = "module"></script>
|
<body>
|
||||||
<title>Nye Evans Portfolio</title>
|
<div class="nav">
|
||||||
</header>
|
<div class="nav-left">Nye Evans Portfolio</div>
|
||||||
|
<div class="menu-btn btn">
|
||||||
<body>
|
<div class="line line1"></div>
|
||||||
<div id = "introScreenSpace">
|
<div class="line line2"></div>
|
||||||
<h1>
|
<div class="line line3"></div>
|
||||||
<div id = "siteTitle">Nye "Ro" Evans</div>
|
</div>
|
||||||
<div class = "subTitle">Portfolio</div>
|
</div>
|
||||||
</h1>
|
|
||||||
</div>
|
<div class="menu">
|
||||||
|
<div class="menu-inner">
|
||||||
<div class = "textBox">
|
<a class="btn" href="#home">home</a>
|
||||||
An aspiring software developer who specialises in C++, C# and Python, with an intrest in lower level langauges like Assembly;
|
<a class="btn" href="#skills">skills</a>
|
||||||
Most of my work is software based, with Python and C++ along with some web-development experience in HTML, CSS, JavaScript and TypeScript.
|
<a class="btn" href="#projects">projects</a>
|
||||||
|
<a class="btn" href="#contact">contact me</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div style = "text-align: center;">
|
|
||||||
<img src = "images/Profile3.png" id = "profileImage" class = "profileImage orangeBorder" alt = "me">
|
<div class="sec-1" id="home">
|
||||||
</div>
|
<div class="sec1-left">
|
||||||
|
<div class="sec1-title">Hello 👋</div>
|
||||||
<div class = "textBox" style = "margin-bottom: 5vh;">
|
<div class="sec1-body">
|
||||||
Most of my experience relates to personal projects, however I have previously done work experience at JBA Consulting writing a
|
I'm Nye Ro Evans And I'm <br />
|
||||||
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
|
<span class="colored-text">software developer</span>
|
||||||
GCSE students briefly. You can see my full CV <a href = "pages/CVPage.html">here</a>.
|
</div>
|
||||||
</div>
|
<a href="#projects">
|
||||||
|
<div class="sec1-btn btn">My Projects</div>
|
||||||
<div class = "textBox" id = "galleryHeader">
|
</a>
|
||||||
Check out my larger projects here:
|
</div>
|
||||||
<div style = "font-size: 60%;">click a project to find out more</div>
|
<div class="sec1-img"></div>
|
||||||
</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
|
||||||
<!-- 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-->
|
level languages like C++; Most of my work is software based, making
|
||||||
<div class = "programGallery">
|
games and tools in python and C#.
|
||||||
<p class = "galleryTitle">VR physics engine</p>
|
</div>
|
||||||
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryLink">
|
</div>
|
||||||
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
|
||||||
</a>
|
<div class="sec-3" id="exp">
|
||||||
<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
|
<div class="sec3-inner">
|
||||||
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
|
<div class="sec3-title">Work expearince</div>
|
||||||
to it.
|
<div class="sec3-body">
|
||||||
</p>
|
Most of my experience relates to personal projects, however I have
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
previously done work experience at JBA Consulting writing a program to
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
convert their SQL databases to Excel spreadsheets. I also often teach
|
||||||
</div>
|
Python and HTML, having taught many students at my school's coding
|
||||||
|
club for over 6 years and having tutored GCSE students
|
||||||
<div class = "programGallery">
|
</div>
|
||||||
<p class = "galleryTitle">Tower defence game</p>
|
</div>
|
||||||
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
|
</div>
|
||||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
|
|
||||||
</a>
|
<div class="sec-5" id="projects">
|
||||||
<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
|
<div class="sec5-title">My Projects</div>
|
||||||
level design system.
|
|
||||||
</p>
|
<div class="project">
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
<div class="project-img"></div>
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
<div class="project-title">VR physics engine</div>
|
||||||
</div>
|
<div class="project-body">
|
||||||
|
A project done for my EPQ, during post-16, where I aimed to create a
|
||||||
<div class = "programGallery">
|
virtual reality environment where the user could grab and interact
|
||||||
<p class = "galleryTitle">Work on Aardvark XR</p>
|
with objects in a semi-physics based environment. This system was my
|
||||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
|
introduction to Unreal Engine and mainly used its "Blueprint" visual
|
||||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
language, however I later used C++ to try and add my own physics to
|
||||||
</a>
|
it.
|
||||||
<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>
|
</div>
|
||||||
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
|
<div class="proj-learn-more-btn btn">learn more</div>
|
||||||
for the system to help it gain traction.
|
</div>
|
||||||
</p>
|
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
<div class="project">
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
<div
|
||||||
</div>
|
class="project-img"
|
||||||
|
style="
|
||||||
<div class = "programGallery">
|
background-image: url(./pages/gallery/cat-tower-defence/projectHeaderImage.png);
|
||||||
<p class = "galleryTitle">Unity based Mind Map software</p>
|
"
|
||||||
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryLink">
|
></div>
|
||||||
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
<div class="project-title">Tower defence game</div>
|
||||||
</a>
|
<div class="project-body">
|
||||||
<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
|
One of my first projects, this was created with a friend to help us
|
||||||
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.
|
gain a better understanding of python.
|
||||||
</p>
|
</div>
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
<div class="proj-learn-more-btn btn">learn more</div>
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="project">
|
||||||
|
<div
|
||||||
|
class="project-img"
|
||||||
|
style="
|
||||||
|
background-image: url(./pages/gallery/aardvark-work/projectHeaderImage.png);"
|
||||||
|
></div>
|
||||||
<div class = "textBox" id= "outroText">
|
<div class="project-title">Work on Aardvark XR</div>
|
||||||
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.
|
<div class="project-body">
|
||||||
</div>
|
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
|
||||||
<div id = "socialBar">
|
experience.
|
||||||
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
|
|
||||||
 
|
<div class="proj-learn-more-btn btn">learn more</div>
|
||||||
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>
|
</div>
|
||||||
 
|
</div>
|
||||||
<a href="https://github.com/Wil-Ro" target="_blank">Github</a>
|
</div>
|
||||||
 
|
|
||||||
<a href = "https://dev.to/willowro" target="_blank">Dev.to</a>
|
|
||||||
|
|
||||||
 
|
|
||||||
<a href = "./pages/CVPage.html">CV</a>
|
<div class="sec-6" id="contact">
|
||||||
</div>
|
<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>
|
||||||
</body>
|
|
||||||
|
<div class="contacts"><a class="btn" href="">
|
||||||
</HTML>
|
<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