bradtraversy / modern_portfolio Goto Github PK
View Code? Open in Web Editor NEWResponsive portfolio website
Responsive portfolio website
does now show sample web page link
I did exactly like the video, but the menu button doesn't show
I had made some modifications to index.html after it has been uploaded and working nice but while upload the modified index.html and run the website nothing changed and first version still same!?
Any idea as I used drag the file and save changes and I can find it on Github but on my Githubpages link not?
HI Brad !
I folowed your tutorial to create my own portfolio but I don't want to publish my portfolio on github pages. I'd prefer to have it as a real website on https server.
Do you know how to manage that ? I know how to publish a website that uses PHP but not scss or sass.
Thanks for all the good stuff you share !
Hi Brad,
If you open the contact me page (https://bradtraversy.github.io/modern_portfolio/contact.html) on a mobile device it has vertical scroll bars and something is also wrong with the header and boxes with contact information.
Nvm my bad fucked up so hard
Hi Brad,
The Project is Awesome, but it doesn't work on IE, may be due to ClassList or AddEventListener issue.
Thanks!!
I followed the video responsive Portfolio Website [4] - Menu Overlay & Responsiveness
exactly.
But my portrait overlay is not working.
Here is my _menu.scss code
&-branding,
&-nav {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
float: left;
width: 50%;
height: 100vh;
overflow: hidden;
}
&-nav {
margin: 0;
padding: 0;
background: rgba(darken($primary-color, 5), 0.9);
list-style: none;
transform: translate3d(0, -100%, 0);
@include easeOut;
&.show {
//slide in from top
transform: translate3d(0, 0, 0);
}
}
//Branding
&-branding {
background: rgba($primary-color, 0.9);
transform: translate3d(0, 100%, 0);
@include easeOut;
&.show {
//slide in from bottom
transform: translate3d(0, 0, 0);
}
.portrait {
width: 250px;
height: 250px;
background: url("../img/portrait.jpg");
border-radius: 50%;
border: solid 3px $secondary-color;
}
}
`PS C:\modern_portfolio> npm run deploy
[email protected] deploy C:\modern_portfolio
gh-pages -d dist
error: cannot spawn sh: No such file or directory
fatal: unable to fork
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: gh-pages -d dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\willi\AppData\Roaming\npm-cache_logs\2018-12-07T01_08_54_886Z-debug.log
PS C:\modern_portfolio>`
The hamburger icon which when clicked is suppose to transform into the close button is not working. There are no errors in console and the scss is compiling into main.css without any problems. I re-run npm run sass and refreshed many times but without any luck. Please help solve my problem.
modern_portfolio/scss/_config.scss
Line 49 in 35ee878
You have:
@mixin mediaMd {
@media screen and (max-width: 768px) {
Which creates a branching overlap (a 500px width device reports as Sm
and Md
)
Did you want:
@mixin mediaMd {
@media screen and (min-width: 501px) and (max-width: 768px) {
?
IIUC this would also entail changing:
modern_portfolio/scss/_mobile.scss
Line 16 in 35ee878
Sm
and Md
screens trigger that code-block.The nav items working fine but when it comes to the code doesn't work! Even I copy-pasted your code but it won't.
`
// Branding Side
&-branding {
background: $primary-color;
transform: translate3d(0, 100%, 0);
@include easeOut;
&.show {
// Slide in from bottom
transform: translate3d(0, 0, 0);
}
}
`
When I view my contact page on my Iphone X, it isnt responsive and is cut off, but is fine when my turn my phone to landscape.
I get errors when trying to save
"status": 1,
"file": "C:/users/yo/desktop/code/modern_portfolio/sccs/_menu.scss",
"line": 8,
"column": 12,
"message": "no mixin named easeOut",
"formatted": "Error: no mixin named easeOut\n on line 8 of sccs/_menu.scss\n from line 2 of sccs/main.scss\n>> @include easeOut;\r\n -----------^\n"
I have checked the code vs yours on github 100 times..
I did exactly like the video, but the menu button doesn't show
In the second video @ 8:24 where Brad is adding css to the main.scss, my index.html isn't updating the formatting changes. I've closed VS code and issued the run npm sass statement multiple times already, along with stopping and starting Live server, all to no avail. Any suggestions on what I can do?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.