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
|
||||||
|
|
|
||||||
231
index.html
231
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" />
|
||||||
|
|
||||||
<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>
|
<title>Nye Evans Portfolio</title>
|
||||||
</header>
|
<link rel="stylesheet" href="main.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id = "introScreenSpace">
|
<div class="nav">
|
||||||
<h1>
|
<div class="nav-left">Nye Evans Portfolio</div>
|
||||||
<div id = "siteTitle">Nye "Ro" Evans</div>
|
<div class="menu-btn btn">
|
||||||
<div class = "subTitle">Portfolio</div>
|
<div class="line line1"></div>
|
||||||
</h1>
|
<div class="line line2"></div>
|
||||||
|
<div class="line line3"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class = "textBox">
|
<div class="menu">
|
||||||
An aspiring software developer who specialises in C++, C# and Python, with an intrest in lower level langauges like Assembly;
|
<div class="menu-inner">
|
||||||
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="#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>
|
||||||
|
|
||||||
<div style = "text-align: center;">
|
<div class="sec-1" id="home">
|
||||||
<img src = "images/Profile3.png" id = "profileImage" class = "profileImage orangeBorder" alt = "me">
|
<div class="sec1-left">
|
||||||
</div>
|
<div class="sec1-title">Hello 👋</div>
|
||||||
|
<div class="sec1-body">
|
||||||
<div class = "textBox" style = "margin-bottom: 5vh;">
|
I'm Nye Ro Evans And I'm <br />
|
||||||
Most of my experience relates to personal projects, however I have previously done work experience at JBA Consulting writing a
|
<span class="colored-text">software developer</span>
|
||||||
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
|
</div>
|
||||||
GCSE students briefly. You can see my full CV <a href = "pages/CVPage.html">here</a>.
|
<a href="#projects">
|
||||||
</div>
|
<div class="sec1-btn btn">My Projects</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>
|
</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
|
</div>
|
||||||
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="sec1-img"></div>
|
||||||
to it.
|
|
||||||
</p>
|
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class = "programGallery">
|
<div class="sec-2" id="skills">
|
||||||
<p class = "galleryTitle">Tower defence game</p>
|
<div class="sec2-title">skills</div>
|
||||||
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
|
<div class="sec2-body">
|
||||||
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
|
specialises in TypeScript, C# and python, with an interest in lower
|
||||||
</a>
|
level languages like C++; Most of my work is software based, making
|
||||||
<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
|
games and tools in python and C#.
|
||||||
level design system.
|
</div>
|
||||||
</p>
|
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class = "programGallery">
|
<div class="sec-3" id="exp">
|
||||||
<p class = "galleryTitle">Work on Aardvark XR</p>
|
<div class="sec3-inner">
|
||||||
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
|
<div class="sec3-title">Work expearince</div>
|
||||||
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
|
<div class="sec3-body">
|
||||||
</a>
|
Most of my experience relates to personal projects, however I have
|
||||||
<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>
|
previously done work experience at JBA Consulting writing a program to
|
||||||
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
|
convert their SQL databases to Excel spreadsheets. I also often teach
|
||||||
for the system to help it gain traction.
|
Python and HTML, having taught many students at my school's coding
|
||||||
</p>
|
club for over 6 years and having tutored GCSE students
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
</div>
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class = "programGallery">
|
<div class="sec-5" id="projects">
|
||||||
<p class = "galleryTitle">Unity based Mind Map software</p>
|
<div class="sec5-title">My Projects</div>
|
||||||
<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;">
|
<div class="project">
|
||||||
</a>
|
<div class="project-img"></div>
|
||||||
<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
|
<div class="project-title">VR physics engine</div>
|
||||||
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.
|
<div class="project-body">
|
||||||
</p>
|
A project done for my EPQ, during post-16, where I aimed to create a
|
||||||
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
|
virtual reality environment where the user could grab and interact
|
||||||
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
|
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div class = "textBox" id= "outroText">
|
</body>
|
||||||
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>
|
|
||||||
|
|
||||||
 
|
<script src="./main.js"></script>
|
||||||
<a href = "./pages/CVPage.html">CV</a>
|
</html>
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</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