탈중앙화 포트폴리오 웹사이트

포트폴리오 웹사이트란 ??



포트폴리오 웹사이트는 더 많은 비즈니스를 유치하고 전문 브랜드를 구축하는 데 필수적인 도구입니다. 오늘날의 디지털 세계에서는 어떤 업계에서 일하든 상관 없이 포트폴리오가 이력서보다 더 중요합니다. 프리랜서 기자이든, 직장을 구하는 최근 대학 졸업생이든, 심지어 회계사이든 상관없이 사람들이 Google에서 귀하의 이름을 검색하면 귀하의 포트폴리오는 귀하에 대한 가장 강력하고 포괄적인 관점을 제공할 것입니다.

어디서부터 시작해야 합니까?



기술 스택을 선택하자



순수한 HTML, CSS일 수도 있고 React, Angular, Vue Ember, Meteor 또는 Mithril과 같은 JS 프레임워크를 사용할 수도 있습니다. Javascript FacePalm에 대한 목록은 계속 이어집니다. 그러나 여기서는 Flutter를 사용할 것입니다!!!

플러터가 무엇인가요??



Flutter는 단일 코드베이스에서 모바일, 웹 및 데스크톱용으로 고유하게 컴파일된 아름다운 애플리케이션을 빌드하기 위한 Google의 UI 툴킷입니다.

뭐라고?? 웹, 모바일, 데스크톱을 위한 단일 프레임워크 ?? Raspberry Pi에서도 : >

Flutter의 기초는 아래 링크에서 배울 수 있습니다.

Flutter Basics

Flutter Advanced

로컬 머신에 Flutter를 설치하지 않고





아래 링크로 이동하여 아래 코드를 붙여넣습니다.

DartPad

import 'package:flutter/material.dart';


void main()
{
    runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 @override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/0052d15d-4c44-4d0f-aade-45074bff0633/d9erbf9-27735655-772d-437a-ae35-ef67e1ea9d10.jpg"),
          fit: BoxFit.fill
          ,
        ),
      ),
      child: ListView(children: [
        Center(
          child: Container(
            margin: EdgeInsets.all(40),
            height: 150,
            width: 150,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                  image: NetworkImage('https://scontent.fblr2-1.fna.fbcdn.net/v/t1.0-1/c0.120.320.320a/p320x320/45144634_1855611297884897_6210030828886425600_n.jpg?_nc_cat=105&_nc_sid=7206a8&_nc_oc=AQmllP_29URGPDyNhajv3rw2YzkqMeeukAQiwgSKm4XJRBhNI533aqwYd13gJN8DdS0&_nc_ht=scontent.fblr2-1.fna&oh=2919360f49c924ee76c6c2f60fc56325&oe=5F1416AE'),
                  fit: BoxFit.contain),
            ),
          ),
        ),
        Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.bottomRight,
                colors: [Colors.green[50], Colors.red[300]],
              ),
            ),
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(5),
            child: Text(
              " Flutter | Blockchain | Forensics",
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
              ),
            ),
          ),
        ),
        Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              gradient: LinearGradient(
                begin: Alignment.bottomRight,
                end: Alignment.bottomLeft,
                colors: [Colors.green[50], Colors.red[300]],
              ),
            ),
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(5),
            child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
              InkWell(
                  child: Image.network(
                    "https://cdn.icon-icons.com/icons2/936/PNG/128/github-logo_icon-icons.com_73546.png",
                    height: 40,
                    width: 40,
                  ),
//                       onTap: () => launch('https://github.com/HariPranav')
              ),
              SizedBox(
                width: 8,
              ),
              InkWell(
                child: Image.network(
                  "https://cdn.icon-icons.com/icons2/31/PNG/128/sociallinkedin_member_2751.png",
                  height: 40,
                  width: 40,
                ),
//                     onTap: () => launch(
//                         'https://in.linkedin.com/in/hari-pranav-77b067162'),
              ),
              SizedBox(
                width: 8,
              ),
              InkWell(
                child: Image.network(
                  "https://cdn.icon-icons.com/icons2/555/PNG/128/facebook_icon-icons.com_53612.png",
                  height: 40,
                  width: 40,
                ),
    //                     onTap: () =>
    //                         launch('https://www.facebook.com/hari.pranav.1'),
              ),
              SizedBox(
                width: 8,
              ),
              InkWell(
                child: Image.network(
                  "https://cdn.icon-icons.com/icons2/122/PNG/128/twitter_socialnetwork_20007.png",
                  height: 40,
                  width: 40,
                ),
    //                     onTap: () => launch('https://twitter.com/aharipranav'),
              ),
              SizedBox(
                width: 8,
              ),
              InkWell(
                child: Image.network(
                  "https://cdn.icon-icons.com/icons2/195/PNG/128/YouTube_23392.png",
                  height: 40,
                  width: 40,
                ),
    //                     onTap: () => launch(
    //                         'https://www.youtube.com/channel/UCWYIT8-ScPTy-fWSa3ff6_A?view_as=subscriber'),
              ),
            ]),
          ),
        ),
      ]),
    ),
    ),
    );
 }
}

여기서 우리는 dartpad라는 온라인 도구를 사용하여 UI를 브라우저에 렌더링하고 있습니다. 코드의 on Tap 핸들러에 주석이 달린 것을 볼 수 있습니다. 이는 현재 지원되지 않는 패키지를 설치해야 하기 때문입니다. 어디에도 연결되지 않는 소셜 미디어 아이콘입니다. 따라서 하이퍼링크 기능을 추가하려면 로컬 환경에 flutter와 dart를 설치해야 합니다!!

로컬 머신에서 Flutter 사용



Flutter 설치: Documentation

1 단계 :



Flutter를 설치한 후 웹에서 애플리케이션을 빌드해야 하므로 분기를 웹으로 변경합니다.

$flutter 채널 마스터

$flutter 업그레이드

$flutter 구성 --enable-web

2 단계 :



운영

$flutter 장치

여기에서 사용 가능한 장치로 크롬을 볼 수 있습니다. 추신: 표시되지 않으면 최신 버전의 크롬이 있는지 확인하십시오.

3단계:



운영:

$flutter 만들기

4단계:



코딩하자!!!

pubspec.yaml을 열고 종속성 아래의 주석 섹션으로 이동합니다.

    dependencies:

    flutter:
        sdk: flutter

        // paste this code below

    url_launcher: ^5.4.10

터미널로 이동하여 입력

$pub get

종속성을 설치합니다.

다음 프로젝트의 lib 디렉토리 아래에 있는 main.dart를 엽니다.

그런 다음 아래 코드를 붙여넣습니다.

// importing the libraries

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

// creating a stateful widget
// type stf and it auto creates one (Works in vs code and android studion with )

void main()
{
    runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
    return MaterialApp(
        // we check the debug banner to be false
    debugShowCheckedModeBanner: false,
    // the scaffold basically provides predefined //material components to be used in UI
    home: Scaffold(
        // we use a container to display the Image
        body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                // create a folder called assets in the parent directory of your project and put your profile photo to be displayed
            image: AssetImage("assets/ss2.jpg"),
            fit: BoxFit.cover,
            ),
        ),
        child: ListView(children: [
            Center(
            child: Container(
                margin: EdgeInsets.all(40),
                height: 150,
                width: 150,
                decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: AssetImage('assets/HP.png'), fit: BoxFit.contain),
                ),
            ),
            ),
            Center(
            child: Container(
                // we use the famous Linear Gradient
                decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                gradient: LinearGradient(
                    begin: Alignment.bottomLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.green[50], Colors.red[300]],
                ),
                ),
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(5),
                child: Text(
                " Flutter | Blockchain | Forensics",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                ),
                ),
            ),
            ),
            Center(
            child: Container(
                decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                gradient: LinearGradient(
                    begin: Alignment.bottomRight,
                    end: Alignment.bottomLeft,
                    colors: [Colors.green[50], Colors.red[300]],
                ),
                ),
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(5),
                child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                    // here we add the links to our varoius social media websites
                InkWell(
                    child: Image.asset(
                        "assets/github.png",
                        height: 40,
                        width: 40,
                    ),
                    onTap: () => launch('https://github.com/HariPranav')),
                SizedBox(
                    width: 8,
                ),
                InkWell(
                    child: Image.asset(
                    "assets/linkedin-square-color.png",
                    height: 40,
                    width: 40,
                    ),
                    onTap: () => launch(
                        'https://in.linkedin.com/in/hari-pranav-77b067162'),
                ),
                SizedBox(
                    width: 8,
                ),
                InkWell(
                    child: Image.asset(
                    "assets/facebook-round-color.png",
                    height: 40,
                    width: 40,
                    ),
                    onTap: () => launch(
                        'https://www.facebook.com/hari.pranav.1'),
                ),
                SizedBox(
                    width: 8,
                ),
                InkWell(
                    child: Image.asset(
                    "assets/twitter-color.png",
                    height: 40,
                    width: 40,
                    ),
                    onTap: () => launch('https://twitter.com/aharipranav'),
                ),
                SizedBox(
                    width: 8,
                ),
                InkWell(
                    child: Image.asset(
                    "assets/youtube-color.png",
                    height: 40,
                    width: 40,
                    ),
                    onTap: () => launch(
                        'https://www.youtube.com/channel/UCWYIT8-ScPTy-fWSa3ff6_A?view_as=subscriber'),
                ),
                ]),
            ),
            ),
        ]),
        ),
    ),
    );
        }
    }

터미널로 이동하여 입력

$flutter run -d chrome

Voila 귀하의 단일 페이지 웹사이트는 웹상에서 준비되었습니다!!! 이것은 또한 당신의 안드로이드 폰이나 IOS 기기에서 독립 실행형 앱으로 실행할 수 있습니다!!

이렇게 하려면 다음 명령을 사용하여 브랜치를 stable로 변경합니다.

$flutter channel stable

어쨌든 웹에서 웹사이트를 호스팅할 수 있습니다.

Github에 프로젝트 추가



github로 이동하여 새 리포지토리 생성

이름 추가

그리고 간단한 설명

Readme 초기화를 선택하지 않은 상태로 두고 저장소 생성이라고 말합니다.

이제 명령줄을 열고

운영

$git init

$git add .

$git commit -m "First commit"

$git remote add "URL of repo"

$git push -u origin master

이제 설정으로 이동하여 githubpages 옵션을 활성화하십시오.

그런 다음 Flutter 프로젝트에서 다음 명령을 실행합니다.

$flutter pub global activate peanut

$flutter pub global run  peanut

$git push origin --set-upstream gh-pages

드디어 완성!!!!

이 페이지는 이제 github에서 중앙 집중식 버전으로 호스팅됩니다!!

이 URL을 친구 가족 및 고용주와 자유롭게 공유하세요.

Hoorah는 탈중앙화를 허용합니다

분산



IPFS란 ??



P2P 하이퍼미디어 프로토콜
웹을 더 빠르고, 더 안전하고, 더 개방적으로 만들기 위해 설계되었습니다.

IPFS

플리크가 뭐에요??



IPFS에서 Fleek은 Git과 통합하는 아름다운 방법을 제공하므로 분기를 변경할 때마다 직접 변경할 수 있습니다.
Fleek에서 업데이트되었습니다!!!!

Fleek에서 호스팅



자세한 내용을 보려면 아래 링크를 클릭하십시오. git 계정으로 직접 로그인하고 웹사이트를 호스팅할 수 있습니다.

Fleek

Feek 아래 링크에서 사이트를 호스팅하는 다른 CMS

Fleek Blog posts

나를 찾아 !!



맞춤형 이미지가 포함된 애니메이션 하단 탐색 모음, 블로그 섹션 및 곧 추가될 내 해커톤 프로젝트의 짧은 데모와 같은 내 포트폴리오에 더 많은 페이지를 추가했습니다.

아래 웹에서 저를 찾아주세요!!

My Portfolio

My Decentralized Portfolio

좋은 웹페이지 즐겨찾기