diff --git a/css/style.css b/css/style.css index 82bc789..351cb31 100644 --- a/css/style.css +++ b/css/style.css @@ -61,13 +61,10 @@ p{ .arrow{ position: absolute; } -.down1, .down2, .down3, .down4{ - color:#1f2f2f; -} -.down1:hover, .down2:hover, .down3:hover, .down4:hover, .down5:hover, .down6:hover{ - cursor:pointer; - color:#669999; - text-decoration:underline; +.down1:hover, .down2:hover, .down3:hover, .down4:hover, .down5:hover, .down6:hover, .down7:hover { + cursor: pointer; + color: #669999; + text-decoration: underline; } #me:hover{ cursor:pointer; @@ -144,7 +141,7 @@ img.down1{ min-width:175px; max-width:250px; } -#section2 p{ +#about-content{ width:50%; text-align:center; margin-top:10px; @@ -155,10 +152,10 @@ img.down2{ img.down2:hover{ color:#F7CE5B; } -@media screen and (max-width: 1000px) { - #section2 p{ - width:60%; - } +@media screen and (max-width: 1000px) { + #about-content { + width: 60%; + } } @media screen and (max-height: 600px) { #section2{ @@ -171,10 +168,10 @@ img.down2:hover{ top: 1150px; } } -@media screen and (max-width: 650px) { - #section2 p{ - width:90%; - } +@media screen and (max-width: 650px) { + #about-content { + width: 90%; + } } @media screen and (max-width: 330px) { #me-picture{ @@ -192,6 +189,45 @@ img.down2:hover{ background-size: cover; min-width: 300px; } +img.down3 { + top: 290vh; +} +#skills { + display: inline-block; + text-align:center; + width:75%; +} +#skillsul { + list-style-type: square; + color: #1f2f2f; +} +li { + font-family: 'Muli', sans-serif; + font-size: 16px; + line-height: 24px; + color: #1f2f2f; +} +@media screen and (max-width: 1000px) { +} + +@media screen and (max-height: 600px) { + #section3 { + height: 600px; + } + img.down3 { + top: 1750px; + } +} +#section4 { + height: 100vh; + background-color: #dbe7e7; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + background-size: cover; + min-width: 300px; +} #project-text{ font-family: 'Alegreya Sans SC', sans-serif; font-weight:normal; @@ -205,30 +241,30 @@ img.down2:hover{ min-width:250px; max-width:650px; } -#section3 p{ +#section4 p{ margin-top:10px; width:50%; min-width:250px; max-width:650px; } -img.down3{ - top:290vh; +img.down4{ + top:390vh; } @media screen and (max-width: 1000px) { - #section3 p, #web-img{ + #section4 p, #web-img{ width:60%; } } @media screen and (max-height: 600px) { - #section3{ + #section4{ height:600px; } - img.down3{ - top: 1750px; + img.down4{ + top: 2350px; } } @media screen and (max-width: 650px) { - #section3 p, #web-img{ + #section4 p, #web-img{ width:80%; } #project-text{ @@ -236,15 +272,15 @@ img.down3{ } } -#section4{ - height: 100vh; - background-color: #e7efef; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - background-size: cover; - min-width:300px; +#section5 { + height: 100vh; + background-color: #F8d573; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + background-size: cover; + min-width: 300px; } #app{ display: flex; @@ -260,18 +296,18 @@ img.down3{ #app p{ width:60%; } -img.down4{ - top:390vh; +img.down5{ + top:490vh; } @media screen and (max-height: 600px) { #app{ margin-top:20px; } - #section4{ + #section5{ height:600px; } - img.down4{ - top: 2350px; + img.down5{ + top: 2950px; } } @media screen and (max-width: 1000px) { @@ -308,9 +344,9 @@ img.down4{ min-width:100px; } } -#section5 { +#section6 { height: 100vh; - background-color: #F7CE5B; + background-color: #e7efef; display: flex; flex-direction: column; align-items: center; @@ -322,37 +358,37 @@ img.down4{ min-width:250px; max-width:600px; } -#section5 p{ +#section6 p{ margin-top:10px; width:50%; min-width:250px; max-width:600px; } -img.down5{ - top:490vh; +img.down6{ + top:590vh; } @media screen and (max-width: 1000px) { - #section5 p, #game-img{ + #section6 p, #game-img{ width:60%; } } @media screen and (max-width: 650px) { - #section5 p, #game-img{ + #section6 p, #game-img{ width:80%; } } @media screen and (max-height: 600px) { - #section5{ + #section6{ height:600px; } - img.down5{ - top: 2950px; + img.down6{ + top: 3550px; } } -#section6 { +#section7 { height: 40vh; - background-color: #f3f7f7; + background-color: #F7CE5B; display: flex; flex-direction: column; align-items: center; @@ -360,8 +396,8 @@ img.down5{ background-size: cover; min-width: 300px; } -img.down6{ - top:530vh; +img.down7{ + top:630vh; transform:scaleY(-1); } #contact-text{ @@ -371,11 +407,11 @@ img.down6{ margin-top:25px; } @media screen and (max-height: 600px) { - #section6{ + #section7{ height:200px; } - img.down6{ - top: 3150px; + img.down7{ + top: 3750px; } #contact-text{ margin-top:25px; diff --git a/index.html b/index.html index c69f338..0ab5aec 100644 --- a/index.html +++ b/index.html @@ -16,75 +16,123 @@

ALYSHA

IANNETTA

Web Developer & Designer

down arrow
- Alysha -

- I'm a self-taught developer from Moonee Ponds, Melbourne. - I have a design background and decided to switch into software development where I found - a perfect middle ground between creativity and logic. I enjoy both the problem-solving side - of programming as well as being able to create unique user experiences and responsive designs. - My main focus is web development with HTML, CSS, JavaScript and jQuery, as well as PHP and - SQL to build functional web-applications. I've also built android apps with Java, and games - with Unity and C#. -

+ Alysha +

+ Hello! I'm a self-taught developer from Melbourne. + I have a design background and switched into software development where I found a perfect middle ground between creativity and logic. + Software has always been a big part of my life and user interfaces and interactions are something I deal with day to day, from playing + video games to communicating over the World Wide Web. I started learning to code two years ago while building a small game and once I + started, I have never been bored again. Being able to grow up alongside and watch technology change over time is mind-blowing, and a + big inspiration as to why I want to be involved with learning how it works. + +

down arrow
-

Davaly Design Website

- Website project -

- I designed and developed a functional website for a small business, Davaly design. - I went for a minimal style to suit the brand using black and white to make the site stand out, - I also had fun manipulating the logo to make an SVG animation. I used HTML, CSS and JavaScript - for the front-end design and implemented a database with PHP and SQL for admin users to easily - be able to upload, modify and delete products to dynamically update and display in the front-end - of the website. -

+

Skills

+

I focus in front-end web development and enjoy building games in my spare time, these are my proficient skills:

+
+
+

HTML

+

CSS

+

JavaScript

+

React

+

TypeScript

+

JQuery

+

PHP

+

SQL

+

Python

+

C#

+

Java

+

Unity

+

Android Studio

+

Git

+

UI/ UX Design

+

Responsive Design

+

Adobe Illustrator/ Photoshop

+
+
+

I actively search for new languages, tools and technologies to level up my knowlegde.

+ down arrow
-
-

Tamil Learning App

-
- App project +
+

Davaly Design Website

+ Website project

- This is an app I developed in a small team, the client wanted a fun learning app to assist - children with the Tamil language. There are four categories each with a selection of words to learn. - I implemented a canvas to allow users to trace over the word and learn to write, as well as an attached - sound file to hear the word being spoken. + I designed and developed a functional website for a small business, Davaly design. + I went for a minimal style to suit the brand using black and white to make the site stand out, + I also had fun manipulating the logo to make an SVG animation. I used HTML, CSS and JavaScript + for the front-end design and implemented a database with PHP and SQL for admin users to easily + be able to upload, modify and delete products to dynamically update and display in the front-end + of the website.

+ down arrow
- down arrow -
-
-

Shadow Fish Game

- Game project -

- My fiancé, his little brother and I made an endless runner for a 48-hour game making challenge. - We missed the one happening in Melbourne so we set out a weekend to try it ourselves and were able to develop - our idea from concept to completed game. We used Unity engine with C#, all the artwork and sound effects were done by - Ethan, and my fiancé and I programmed it. I was involved with the programming and worked on a lot of the - key-frame animations. -

- down arrow -
-
-

Thanks for visiting! Get in touch :)

- - - - - +
+

Shadow Fish Game

+ Game project +

+ My fiancé, his little brother and I made an endless runner for a 48-hour game making challenge. + We missed the one happening in Melbourne so we set out a weekend to try it ourselves and were able to develop + our idea from concept to completed game. We used Unity engine with C#, all the artwork and sound effects were done by + Ethan, and my fiancé and I programmed it. I was involved with the programming and worked on a lot of the + key-frame animations. +

+ down arrow +
+
+

Thanks for visiting! Get in touch :)

+ + up arrow +
+ + + + \ No newline at end of file diff --git a/js/scroll.js b/js/scroll.js index 553b02b..cfc8d4c 100644 --- a/js/scroll.js +++ b/js/scroll.js @@ -21,4 +21,8 @@ function scrollToFive() { function scrollToSix() { var point = document.getElementById('section6'); point.scrollIntoView({ behavior: 'smooth' }); +} +function scrollToSeven() { + var point = document.getElementById('section7'); + point.scrollIntoView({ behavior: 'smooth' }); } \ No newline at end of file