Integrate the figma portfolio template here, in HTML, CSS and javascript.
- Template URL: Get the figma Template
This time, I choosed to build the responsive part of each section gradually, when building the portfolio. That's a good technique to have a full responsive website at the end!
- CSS3 custom properties
- Flexbox
- Javascript (a little bit...)
- Full responsive method
I didn't read a bunch of articles when building this project, but I learned this :
- It's important to not scrum the syntaxes, beetween a preprocessor extensions, and the native CSS functionnalities !
/*- Primary colors defined with SCSS*/
$primary-black: #000;
$primary-white: #fff;
$primary-neutral: #404040;
/* Defined variables with CSS */
:root
{
--ff-base: 'Sora', sans-serif;
--fw-bold: 700;
--fw-regular: 400;
--fw-semibold: 600;
--fw-extra-bold: 800;
}- A better way to design buttons in CSS When the translator change the language of the content, and the button have been only buit with some padding, this one becomes so small, or deformed.
Checkout this article
button[data-icon="download"]
{
gap: 0.8rem;
@extend %btn;
@include flex-mixin();
min-width: 10rem;
max-height: 4rem;
border-radius: 0.5rem;
}- How to build an outline font effect ?
.outline-effect
{
background-color: black;
background-clip: text;
letter-spacing: -1px;
font-weight: 800;
-webkit-text-stroke: 6px transparent;
color: white;
}Yeah, I have to more invest in layout designing with modular programming and how to organise an project. That's a interesting deal to keep code clean ! Just focus on it for the future days! 🚀🚀🚀