I have build a responsive website that will display images. links and description. This is my first portfolio project.
- index.html
- main.css in css folder
- Gruntfile.js
- img folder
- dist folder
- package.json
Responsive portfolio website
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..
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 !
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?
does now show sample web page link
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);
}
}
`
Nvm my bad fucked up so hard
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.Hi Brad,
The Project is Awesome, but it doesn't work on IE, may be due to ClassList or AddEventListener issue.
Thanks!!
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.
`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>`
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;
}
}
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?
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.
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.
I did exactly like the video, but the menu button doesn't show
I did exactly like the video, but the menu button doesn't show
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.