A clean, beautiful and responsive portfolio template Based On VSCode Theme

Overview

A clean, beautiful and responsive portfolio template Based On VSCode Theme!

Template Screenshot

To view a live example, click here.

Feel free to use it as-is or customize it as much as you want.

If you want to contribute and make this much better for other developers, have a look at Issues.

If you created something awesome and want to contribute, then feel free to open a pull request.

Features

  • Responsive
  • Unique Design
  • Easy to use

Sections

✔️ Header ✔️ About ✔️ Resume ✔️ Contact ✔️ LeftBar

How To Use

From your command line, clone and run VSCode_Template:

# Clone this repository
$ git clone https://github.com/YKizou/VSCode_Template

# Go into the repository
$ cd VSCode_Template

# Install dependencies
$ yarn

# Run Project
$ yarn start

Deployment

When you are done with the setup, you should host your website online. We highly recommend to read through the Deploying on Github Pages docs for React.

Technologies Used

Thanks

If you like this portfolio template, don't forget to give it a and also share it with me here.

Comments
  • Background color of elements in navbar

    Background color of elements in navbar

    Feature explained by a test case :

    • [x] A user wants to check the "About" part of the website.
    • [x] The user clicks on "About.js" in navbar.
    • [x] While hovering on "About.js", the background color of "About.js" changes to #1e1e1e.
    • [x] As long as the user doesn't click on other pages from navbar, the background color of "About.js" should stay as #1e1e1e (and not go back to #424042)

    Exemple :

    Screenshot 2022-03-19 at 01 07 50 enhancement good first issue 
    opened by YKizou 1
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump nanoid from 3.1.30 to 3.3.1

    Bump nanoid from 3.1.30 to 3.3.1

    Bumps nanoid from 3.1.30 to 3.3.1.

    Changelog

    Sourced from nanoid's changelog.

    3.3.1

    • Reduced package size.

    3.3

    • Added size argument to function from customAlphabet (by Stefan Sundin).

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump follow-redirects from 1.14.6 to 1.14.9

    Bump follow-redirects from 1.14.6 to 1.14.9

    ⚠️ Dependabot is rebasing this PR ⚠️

    Rebasing might not happen immediately, so don't worry if this takes some time.

    Note: if you make any changes to this PR yourself, they will take precedence over the rebase.


    Bumps follow-redirects from 1.14.6 to 1.14.9.

    Commits
    • 13136e9 Release version 1.14.9 of the npm package.
    • 2ec9b0b Keep headers when upgrading from HTTP to HTTPS.
    • 5fc74dd Reduce nesting.
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 5.10.0 to 5.14.2

    Bump terser from 5.10.0 to 5.14.2

    Bumps terser from 5.10.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
YKizou
Telecom SudParis - Web Developper.
YKizou
This is a simple VSCODE extension that shows the symbols and outlines for a React file.

React Outline This is a simple extension that shows the symbols and outlines for a React file. It can detect custom components and also html tags. Her

Shubham Verma 8 Sep 4, 2022
🔌 A VSCode extension packed with the latest React and Next.js snippets

React and Next.js Snippets React and Next.js Snippets with TypeScript support as well! ?? Installation Install the VSCode extension Reload VSCode Snip

buidler's hub 95 Aug 26, 2022
Smarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped.

react-colrow English | 中文 Smarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped. 更智

Xinxin 4 Aug 19, 2022
A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

Jared Reisinger 110 Sep 11, 2022
This website is made using React.js and Bootstrap5, where anyone can take service from team. it's a fully responsive.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 1 Jan 19, 2022
Figma Design plugin template with UI & Browser APIs

Figma Design plugin template with UI & Browser APIs This is a template for writing Figma Design plugins with UI & browser APIs. It uses typescript, re

Sebastian Flajszer 18 Sep 6, 2022
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on hash based art (ex: Artblocks)

ctrlshiftmake design 68 Aug 12, 2022
A lightweight, easy to extend web debugging tool developed based on react.

English | 简体中文 A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

腾讯TNTWeb前端团队 230 Sep 26, 2022
Attribute Based Access Control for React

react-abac Attribute Based Access Control and Role Based Access Control for React. Installing npm install react-abac Example An example implementatio

Rik Hoffbauer 61 Sep 13, 2022
React protected routes - React Protected Routes with Role-Based User Authorization

"React Protected Routes with Role-Based User Authorization" ✅ Check out my YouTu

Dave Gray 137 Sep 29, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 24, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 21, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 29, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Sep 22, 2022
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Aug 3, 2022
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.7k Sep 28, 2022
🎭A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.

React Native Mask Input A simple and effective Text Input with mask for ReactNative on iOS, Android, and Web. No fancy stuff, it's basically a JavaScr

Caio Quirino Medeiros 149 Sep 21, 2022
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

OSLabs Beta 116 Sep 6, 2022
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Sep 25, 2022