portfolio/src/pages/About.js at e20749b2c65da634cd53b727e9cb1f7e4101b899 · Anmol2363/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
import React from "react";
import "../includes/css/about.css";
import blackBg1 from "../includes/images/bgBlackMd.png";
import blackBg2 from "../includes/images/bgBlackSm.png";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import TsParticles from "../components/TsParticles";
import ProfilePic from "../includes/images/anmol.jpg";
import Footer from "../components/Footer";
import { Link } from "react-router-dom";

const About = () => {

    return (
        <div>
        <div className="w-full mt-[80px] ml-0 md:ml-[200px] md:mt-0">
            <TsParticles/>

            <div className={
                `z-10 flex flex-col justify-end md:bg-[url('${blackBg1}')] bg-[url('${blackBg2}')] backdrop-blur-xl h-[200px] lg:bg-cover bg-left text-white`
            }>

                <div className="path p-10">
                    <p>Home &nbsp;<FontAwesomeIcon icon={faAngleRight}/>
                        &nbsp; About</p>
                    <p className='text-5xl pb-3 pt-5'>
                        <strong>About</strong>
                    </p>
                    <button disabled className='bg-white rounded-xl mr-2 w-[50px] h-[10px]'></button>
                    <button disabled className='bg-white rounded-xl animate-pulse mr-2 w-[10px] h-[10px]'></button>
                    <button disabled className='bg-white rounded-xl animate-pulse mr-2 w-[10px] h-[10px]'></button>
                    <button disabled className='bg-white rounded-xl animate-pulse mr-2 w-[10px] h-[10px]'></button>
                </div>

            </div>

            <div className='text-white px-4 md:p-2 md:mx-8 flex flex-col items-center justify-between'>


                <div className='w-full flex flex-col justify-start items-start lg:p-4'>
                    <div className="text-sky-300 text-3xl mt-2">Hi!</div>
                    <div className="text-slate-100 text-4xl">I am
                        <span className='text-sky-300'> Anmol!</span>
                    </div>
                </div>
                <div className='flex flex-col lg:flex-row pb-0 lg:pb-10 md:gap-4 text-sm md:text-base lg:text-lg text-slate-300 '>

                    <div className="about-body p-2 lg:w-[50%] text-justify flex flex-col gap-3 ">
                        <div>I am a promising third-year student at the prestigious
                            <span className="highlight text-blue-400"> National Institute of Technology, Sikkim</span>, pursuing a B.Tech in <span className="highlight text-sky-500">Computer Science and Engineering</span> .
                        </div>

                        <div>
                        Within the classroom, I have been showcasing a strong academic record and a proactive approach to problem-solving. Apart from this, as a web developer, I bring a practical dimension to my skill set.

                        </div>
                        <div>I have actively served as a contributing member in various cells of the institute, including the
                            <span className="highlight text-blue-400"> Training and Placement Cell</span>,
                            <span className="highlight text-blue-400"> Web Development Cell</span>, and
                            <span className="highlight text-blue-400"> Entrepreneurship & Innovation Cell</span>.</div>
                        <div className="text-slate-300 my-2 pb-2 text-base lg:text-xl md:text-lg">Feel free to explore a snapshot of my skills and projects ...</div>
                        <div className="flex flex-row items-center md:justify-start justify-around gap-4">

                            <div className='z-10 '>
                                <Link to="/skills" className=' flex items-center justify-center p-3 w-[125px] relative text-lg border border-blue-400 text-blue-400 hover:bg-blue-800 hover:text-white p-2 rounded-lg'>Skills</Link>
                            </div>
                            <div className='z-10'>
                                <Link to="/projects" className=' flex items-center justify-center p-3 w-[125px] relative text-lg border border-blue-400 text-blue-400 hover:bg-blue-800 hover:text-white p-2 rounded-lg'>Projects</Link>
                            </div>
                        </div>


                    </div>

                    <div className=" about-body p-2 lg:w-[50%] text-justify pb-10 lg:pb-2 flex flex-col gap-3">
                        <div>As a forward-looking individual, I am not only dedicated to mastering the foundational principles of computer science but also passionate about staying abreast of the latest industry trends.
                        </div>
                        <div className='p-4 flex z-10 items-center justify-center '>
                            <img className="aboutImg border-1 shadow-xl rounded-xl border-slate-500 z-10 w-[80%] md:w-[250px] hover:scale-105 duration-500"
                                src={ProfilePic}
                                alt=""/>
                        </div>
                        <div>With a solid foundation in computer science, a proven track record of academic achievement, and a genuine enthusiasm for innovation, I am poised to make a significant impact in the realm of <span className="highlight text-sky-500">Computer Science and Engineering</span> .</div>

                    </div>
                </div>

            </div>

            <div>
              Within the classroom, I have been showcasing a strong academic
              record and a proactive approach to problem-solving. Apart from
              this, as a web developer, I bring a practical dimension to my
              skill set.
            </div>
            <div>
              I have actively served as a contributing member in various cells
              of the institute, including the
              <span className="highlight text-blue-400">
                {" "}
                Training and Placement Cell
              </span>
              ,
              <span className="highlight text-blue-400">
                {" "}
                Web Development Cell
              </span>
              , and
              <span className="highlight text-blue-400">
                {" "}
                Entrepreneurship & Innovation Cell
              </span>
              .
            </div>
            <div className="text-slate-300 my-2 pb-2 text-base lg:text-xl md:text-lg">
              Feel free to explore a snapshot of my skills and projects ...
            </div>
            <div className="flex flex-row items-center md:justify-start justify-around gap-4">
              <div className="z-10 ">
                <Link
                  to="/skills"
                  className=" flex items-center justify-center p-3 w-[125px] relative text-lg border border-blue-400 text-blue-400 hover:bg-blue-800 hover:text-white p-2 rounded-lg"
                >
                  Skills
                </Link>
              </div>
              <div className="z-10">
                <Link
                  to="/projects"
                  className=" flex items-center justify-center p-3 w-[125px] relative text-lg border border-blue-400 text-blue-400 hover:bg-blue-800 hover:text-white p-2 rounded-lg"
                >
                  Projects
                </Link>
              </div>
            </div>
          </div>

          <div className=" about-body p-2 lg:w-[50%] text-justify pb-10 lg:pb-2 flex flex-col gap-3">
            <div>
              As a forward-looking individual, I am not only dedicated to
              mastering the foundational principles of computer science but also
              passionate about staying abreast of the latest industry trends.
            </div>
            <div className="p-4 flex z-10 items-center justify-center "></div>
            <div>
              With a solid foundation in computer science, a proven track record
              of academic achievement, and a genuine enthusiasm for innovation,
              I am poised to make a significant impact in the realm of{" "}
              <span className="highlight text-sky-500">
                Computer Science and Engineering
              </span>{" "}
              .
            </div>
          </div>
        </div>
      </div>
      <div>
      <Footer />
     </div>
    </div>
    </div>
  );
};

export default About;