profile/Version1.html at master · daniellan2002/profile · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Daniel Lan</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="CSS - My Site Images/eagle.ico">
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.google.com/specimen/IBM+Plex+Sans?selection.family=Cabin:wght@700|IBM+Plex+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Allura&family=Roboto:wght@100&display=swap" rel="stylesheet">
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>


<body>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="text/javascript">
	AOS.init({
				easing: 'ease-out-back',
				duration: 1000
			});
</script>

  <div class="first-container ">
    <img class="top-cloud" src="CSS - My Site Images/cloud.png" alt="cloud1">

    <h1 class="animate__animated animate__tada">
      <bold>I'm Daniel</bold>
    </h1>
    <h2 class="programmer animate__bounceInRight">A <span class="pro">pro</span>grammer.</h2>


    <img class="bottom-cloud" src="CSS - My Site Images/cloud.png" alt="cloud2">
    <img class="mountain" src="CSS - My Site Images/mountain.png" alt="mountain">
  </div>

  <div class="middle-container">
    <div class="profile">
      <img class="profile-picture" src="CSS - My Site Images/Daniel-Profile.jpg" alt="">
      <h2 class="hello" data-aos="fade-left">Hello     你好     Hola     Namaste     こんにちは.</h2>
      <p class="medium-text">I am a full-time Copmuter Science and Engineering student at UCI with an emphasis on Machine Learning and AI.</p>
    </div>
    <hr>
    <div class="skills" >
      <h2 data-aos="fade-up">My Experiences.</h2>
      <div class="skill-row">
        <a href="Personal-Projects.html">
          <img class="skills-pictures btn1" src="CSS - My Site Images/Web-Dev.png" alt="">
        </a>
        <h3>Personal Projects</h3>
        <p>I really enjoy designing websites and choosing styles I want to make the contents as appealing in different styles
        as possible. Using JavaScript, HTML, and CSS, I have created a few informational websites and web-apps just for fun and to learn.
        Currently, I'm working on a few JS games built using the p5.js library, which will be hosted on a new website free to play!</p>
      </div>
      <div class="skill-row2">
        <a href="Hackathon-Projects.html">
          <img class="skills-pictures2 btn1" src="CSS - My Site Images/Computer-Programming.png" alt="">
        </a>
        <h3>Hackathon Projects</h3>
        <p>After taking APCS in high school, I began to use Java to develop some useful programs. It's a tough language, but it's also
          really organized. I hope to use Java to work on Backend Development in the future. I'm also learning Python on my own, I want to use
          the flexibility of Python to create some web games to start, and slowly begin web scraping and diving into Machine Learning and Data Analysis. </p>
      </div>
      <div class="skill-row">
        <img class="skills-pictures btn1" src="CSS - My Site Images/Guitar.png" alt="">
        <h3>Guitar</h3>
        <p>Started Playing guitar in my sophomore year after I received an acoustic guitar as a gift, I took some classes but mostly
        continued to play on my own, learning different finger-styles and songs to play along with. It has been one of my favorite pasttime
        thing to do to cool down and enjoy the melody alone.</p>
      </div>
      <div class="skill-row2">
        <img class="skills-pictures2 btn1" src="CSS - My Site Images/Photography.png" alt="">
        <h3>Photography</h3>
        <p>I like taking photos of nature and spontaneous scenes. Started using just an iPhone 6S, I tried to capture as many pictures that fit
        within my rectangular camera frame and my taste. Time is fleeting, but cameras can capture that ephemeral moment when the light breaks the<thead>
        dawn over the horizon; it can capture the stars shining away curiously in the distance; it can capture the moment when someone smiles and you wanted to keep that.
        </thead></p>
      </div>
    </div>


  </div>

  <!-- Copy and Paste Me -->


  <hr>
  <div class="contact-me">
    <h2 data-aos="fade-down">Get In Touch</h2>
    <h3>I'm available for internships and work opportunities!</h3>
    <p>If you have awesome project ideas, feel free to contact me, I'm excited to work on some cool projects!</p>
    <a class="myButton" href="mailto:name@email.com" >Contact Me</a>
  </div>
  <div class="bottom-color">

    <br>
    <div class="bottom-container">
      <a class="footer-link" href="https://www.linkedin.com/in/tianyi-daniel-lan-671819164/">LinkedIn</a>
      <a class="footer-link" href="https://github.com/daniellan2002">Github</a>
      <a class="footer-link" href="https://students4hospitals.org/">Website</a>
      <br>
      <div class="">
        <br>
        Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik</a> <a href="https://www.flaticon.com/authors/dinosoftlabs" title="DinosoftLabs">DinosoftLabs</a> <a href="https://www.flaticon.com/authors/pixel-perfect"
          title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>


      </div>
      <p>© 2020 Daniel Lan.</p>
    </div>
  </div>


</body>

</html>